Groups disappear after inserting something inside it in Gutenberg

[ple33]

Description:

Since upgrading to 5.4, when I create a group using the Gutenberg editor, and then add something inside, the group disappears from the UI, but it remains in the source code.

As we use this feature everyday as part of our company workflow, this bug is seriously affecting our daily operations as it causes layout havoc when we try to display an article's contents.

This bug is related to ticket #49748.

Actions taken so far:

• Flushed browser cache
• Ensured that assets are not cached
• Reinstalled WP 5.4
• Disabled all plugins

Steps to reproduce:

1. Create a new post (this issue also occurs on existing articles, but this bug is more easily highlighted in a blank article).

2. Create a new group.

3. Click on the (+) to add, say, a paragraph within it.

4. The group completely disappears from the editor, only the paragraph can be interacted with. The group no longer appears on the outside of the inserted paragraph, as it used to be in WP 5.3. The group itself still exists in the code editor.

[Otto42]

I would rate this as a user-interface issue, because the group is still there, it's just not easy to select it with the mouse.

Example: Do your steps. Create a group, put a paragraph with some text in it.

Now, the group appears to be gone, and indeed I see no way to select it with the mouse. However, click inside the paragraph, then hit the Home button to move to the beginning of the paragraph. Press the left arrow key one time, and you are now outside the paragraph and are in the group again. You will see the menu bar change as well as the sidebar show the group options.

Another way to move into the group: click the cursor anywhere into the top line of the paragraph, and hit the up arrow. Same effect, you're in the group now.

If you need test text for this, here's the code I used to test with:

<!-- wp:paragraph -->
<p>Normal para.</p>
<!-- /wp:paragraph -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>This is a para inside a group.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Not in a group again.</p>
<!-- /wp:paragraph -->

From a UI perspective, the group needs some spacing around it with some kind of distinctive color or other visual to set it apart and provide a place to click to select it, or indeed to even know that it exists.

[Otto42]

Additional: Note that once you give the group some properties of its own, like changing the background color, then it becomes very easy to select the group, as it has space around the inner elements.

[ple33]

Oh right, I didn't know you could do that. So I guess this is a classic case of "that's not a bug, that's a feature" then :)

I do agree with your comment though, it may be intended, but the fact that this group becomes virtually invisible on the UI in this scenario is somewhat misleading. I prefer the previous behavior from 5.3 in that regard.

Thanks for the tip!