Gutenberg: Impossible to select Group Block (5.4 Beta 3)

[maddisondesigns]

Describe the bug
After adding a Group Block, and then inserting a Paragraph Block within that Group, it's then impossible to re-select the Group block again. This makes it impossible to change settings like the Width of the Group Block or the Background colour.

Video: https://share.getcloudapp.com/E0uqqq76

To reproduce
Steps to reproduce the behaviour:

1. Insert Group Block
2. Insert Paragraph Block inside Group Block
3. Add text to Paragraph Block
4. Try to re-select the Group block to modify its settings

Expected behaviour
It shouldn't be this difficult to select Blocks

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Firefox 73.0.1
• Version: WP 5.4-beta3-47379
  
  
  
  • Theme: TwentyNineteen
  
  

[paaljoachim]

I was just about to create an issue for this as well.

EDIT (update 10th April).
In WordPress 5.3.
Deactivated Gutenberg plugin.
Using Twenty Twenty.
In Chrome.
Local test site.

What to notice:
Hovering over block shows a grey label in a breadcrumbs/hierarchy.

Hovering to the left of the Group Block one can see a left border line of the area of the Group Block. Clicking here will also select the Group Block.

Also notice the outlines of each Paragraph Block and the outline of the Group Block showing each container and how these relate to each other. Here one can see what it looks like when one drags a block. One can also see where it was located and a blue line to where one at present is located with the mouse.

In WordPress 5.4.
Deactivated Gutenberg plugin.
Using Twenty Twenty.
In Chrome.
Local test site.

What to notice.
The grey labels that were in WordPress 5.3 are gone. One can not any longer select the Group Block by hovering and clicking over on the left side. No grey labels showing up when hovering over a block.
No outlines of the Group Block or nested/inner blocks.

Example of drag and drop in 5.4.

Activated Gutenberg plugin version 7.8.1
Using Twenty Twenty.
In Chrome.
Local test site.

What to notice.
Can not hover and click on left side of Group Block to select.
Grey labels are gone in Group Block and inner/nested blocks.
Noe block outlines.
Drag and drop does not show new drop zone location.

Original post comment:

Here is an example where I have inserted a paragraph block (could really be any block) into the Group Block. I will then delete the Paragraph block and try to select the Group Block. I am not able to select the Group Block in the regular layout area.

A correction moving the cursor close to and over the outline of the Group Block then I am able to select it. But at present time in Gutenberg 7.7 it is very difficult to select the Group Block.

[timhibberd]

I have same error on Windows / Firefox / Twenty-Twenty Theme ? WP5.4

[alexcss]

Same issue. WP5.4

[paaljoachim]

I updated my above post to include animated gifs of WordPress 5.3, 5.4 and Gutenberg plugin 7.8.1.

[LukaszJaro]

Noticed same issue, very difficult to select a group block. It was so difficult I thought the WP 5.4 deleted the group block so I re-added it then noticed my content was off, inspected the dom, I had two group blocks.

Best way to select a group block seems to be to the left of the block.

[almostinevitable]

I've been searching for someone's fix on this issue ever since 5.4 came out. How come this is the only complaint thread I could find? (this and a reddit post)

Does anyone have any ideas on how to make group block selections easier?

I'm using my cursor for now.

[JoshuaLindquist]

I encountered this problem earlier this week, and I thought I was just doing it wrong. But now I've had another editor ask me about the same thing.

This is a major issue for working with Groups. It just looks like the Group isn't there. I kept re-adding my group out of frustration.

[antonyjsmith]

The drag and drop insertion and handling of the group block has been a serious annoyance of mine for some time, our average client tends to find it confusing and unpredictable to the point of it being impenetrable. v5.3 felt like it was improving but now it's rapidly gone backwards again to the point that to me v8 feels the worst it's ever been. Since block insertion, navigation and selection is so fundamental to actually using the Gutenberg editor some consistency here is badly needed. Gutenberg in general still feels like beta software which, to say it's over a year since this was merged with core, is rather concerning.

[DeveloperWil]

Yep same here for 5.4.1 - no hover bars for the mouse on Group Blocks - having to use the cursor - hit and miss.

[Jeppeskovsgaard]

In the same update (I think) they added a select tool, which I discovered by accident.

The idea is, that you use the select tool to select blocks and the edit tool to edit blocks - obviously. With the select tool it's easy to select a group, but to be honest, switching between tools is tiresome and not as intuitive - especially not for clients! I preferred how it was in 5.3, though it needed tweaking.

[LukaszJaro]

In the same update (I think) they added a select tool, which I discovered by accident.

Thanks for the reminder on that!

I have two questions:

1. Why is the select tool not the default option?
2. Can you make the select took the default option?

The select tool works very well, and then when your ready to edit just click on the block you already have selected and edit away!

[maddisondesigns]

@LukaszJaro I would ask, why is there even a select tool? It really says something about the UI, when you need a special dedicated tool just to be able to reliably select a block.

[DeveloperWil]

I would agree - Beaver Builder and Elementor don't suffer from this issue and nor do they need a dedicated selection too.

[LukaszJaro]

Yes I agree, the extra select tool is causing confusion. It's not intuitive and requires an extra unnecessary step. How many people will even be aware of this select tool?

Block editor is not far off from having a good selection tool, it's still clean at the moment, I find elementor a little more messy but it does not have the selection tool issue.

[paaljoachim]

Hey

I just asked a friend about the Select/Edit tool.
From what I remember.

1. The tool really helps on accessibility for those who really need it.
2. He also persuaded me to try it by just clicking a block. Then pressing ESC on the keyboard to see the outline of the blocks. Then when entering into a block again. Double clicking or pressing Enter. I have not yet gotten used to it, but I think it might be useful for others. So right now I am more open for the thought that the tool exists. Perhaps I will at a later time find uses for it that I at present time do not know about. Perhaps it is a hidden treasure just waiting to be discovered.... perhaps.

Anyhow that is my piece for now.

Bottom line is that at present time it is very difficult selecting the Group Block and the Columns Block and probably a few other blocks as well, and that needs adjusting.

[rdswd]

Hey,
This issue has been a major struggle for my team and clients. Upon the first click on a child block, or a parent block, all block outlines in the _family_ would be visible. Then upon the second click, you could pick the specific block you're trying to select. At this point, all outlines would disappear. If you clicked again on any other block in the family it would return to all family blocks being outlined. Perhaps outlines would even have an easy select target like a 44px x 44px target button. This would be an incredible change in my experience.

This would work with touch interfaces and avoid hover events completely. I don't think we should have any dependency on hover events.

[samunderwood]

Just discovered this, how does this kind of change make it through? I can't even see that a group even exists anymore...

[edudix]

I´ve installed de 5.4.2 version and I do have the same issue than @maddisondesigns
Does anyone know how to solve it!?

[paaljoachim]

Hey

I downloaded beta 2 of WordPress 5.5. Here is beta 3: https://wordpress.org/news/2020/07/wordpress-5-5-beta-3/
Installed a new local site.

There are some adjustments coming up in 5.5 which will be released 10th of August. In relation to selection of parent block.

Hover over the Block type and an icon shows up above it. This is one way to select the parent block.

Another way is to use the breadcrumbs at the bottom.

Here is a gif showing the options that exist right now.

We will also over time have additional improvements.

[interplaydesign]

Wow. Never knew about the bread crumbs at the bottom. That really helps now that I know about it. I like the parent block icon showing, but the hover target seems really small. Would it be too much clutter to show the immediate parent on select instead of hover? Navigation that is dependent on hover states seems problematic to me.

[interplaydesign]

Here's an attempted solution that doesn't depend on hover, and gives a more robust option for parent select options.

1. The first screen shows on select, the parent block icon would show (doesn't require hover). It has a slide out menu that shows grandparent blocks.
2. The second screen shows if you select the parent/grandparent slide out menu.
3. The third screen shows if you hover on a block icon it shows the select-outline of the block you're hovering on.
   

[paaljoachim]

Hey @interplaydesign

Let's see if I got this correct.
When a inner child block is selected one would see it like so:

(No hovering required. It would likely also make it accessible.)

If there are grandparents. Then it would look like this:

One clicks the side arrow to open selects the slide out menu to select a grandparent block.

[interplaydesign]

@paaljoachim Yes, that's what I meant. That's the least cluttered solution I could think of that evokes what the current beta is doing with hover.

[Jeppeskovsgaard]

The latest update is great! It's super easy to select a group now without the select tool, and the overall UX og Gutenberg has been improved a lot.

[LukaszJaro]

Wow clever, a little group button popup displays when you hover over the transform button on the toolbar - this makes it very easy to select a group block.