Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Highlighted heading block breaks when moved into a group block #56025

Open
josiahbertoli opened this issue Nov 10, 2023 · 7 comments · May be fixed by #68342
Open

Highlighted heading block breaks when moved into a group block #56025

josiahbertoli opened this issue Nov 10, 2023 · 7 comments · May be fixed by #68342
Labels
[Block] Heading Affects the Headings Block [Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Bug An existing feature does not function as intended

Comments

@josiahbertoli
Copy link

josiahbertoli commented Nov 10, 2023 •
edited
Loading

Description

As the title, dragging a heading block into a group block in the Twenty Twenty-Three theme causes the block to break. However, creating a heading block in the group block and then applying the highlight does not cause the issue. Have tested on vanilla 6.4.1 without plugins.

Step-by-step reproduction instructions

  1. Create a heading block, add some text
  2. Highlight some or all of the text (background highlight, any color)
  3. Create a group block
  4. Drag the heading block into the group
  5. Broken

Screenshots, screen recording, code snippet

Untitled.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@josiahbertoli josiahbertoli added the [Type] Bug An existing feature does not function as intended label Nov 10, 2023
@jordesign jordesign added the [Block] Heading Affects the Headings Block label Nov 12, 2023
@jordesign
Copy link
Contributor

Hi @josiahbertoli - I've been unable to recreate this in my testing so far. Are you able to go to the code view of the affected test page (from the the three-dot menu at top right) and share the HTML code making up the page?

@jordesign jordesign added the [Status] Needs More Info Follow-up required in order to be actionable. label Nov 12, 2023
@github-actions GitHub Actions
Copy link

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Nov 28, 2023
@t-hamano
Copy link
Contributor

t-hamano commented Feb 1, 2024

I was able to reproduce this problem. Although this is a limited scenario, we should be able to reproduce it 100% by following the steps below.

  • Insert a Heading block and gGroup block into the post.
  • Select the "Group" block and choose the "Group" layout.
  • Applies the inline background color to the Heading block text.
  • Drag and drop the Heading block into the Group block without closing the highlight popover.
6b21495bcb086294da7d9516c30c05cf.mp4

@t-hamano t-hamano added [Feature] Drag and Drop Drag and drop functionality when working with blocks and removed [Status] Needs More Info Follow-up required in order to be actionable. [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. labels Feb 1, 2024
@nani-samireddy
Copy link

Hi @josiahbertoli , are you still facing this issue?
I'm not able to reproduce this on the current version

@t-hamano
Copy link
Contributor

This problem should still exist, see the instructions in this comment.

By the way, this problem can be reproduced in other blocks besides the Heading block.

0e8a32734741f6dd837ea9ca9d2ff390.mp4

@nani-samireddy
Copy link

Thank you @t-hamano Now, I'm able to reproduce it

@nani-samireddy nani-samireddy linked a pull request Dec 27, 2024 that will close this issue
Open
@nani-samireddy
Copy link

Found the issue
In the Text-Color Component on this Line, We are using the contentRef.current when we drop heading or p. We might be accessing the element before it is fully rendered. Which gives an undefined value and that undefined is passed down in the functions leading to this error.

Adding a simple null check can avoid this.
I'll raise PR with the same change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Heading Affects the Headings Block [Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Highlighted heading block breaks when moved into a group block nani-samireddy/gutenberg
4 participants
@jordesign @josiahbertoli @t-hamano @nani-samireddy