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.

[z0mbat]

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.

[z0mbat]

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.

[skorasaurus]

Just sharing that our editors at my workspace have expressed frustration with the editing experience with group blocks:

struggling to select multiple blocks to create a group; selecting the parent block vs a child in the group block, trying to figure out why things don't look right when a new paragraph was unintentionally made in the group block, how to add a new block to an existing group, etc.

I've tried again recently myself and find this one of the more frustrating part of editing within Gutenberg, as an end user .

[paaljoachim]

Some associated issues (There are likely a few more issues to add as well.)
Allow parent blocks to specify their block drop zone.
#26049

Confusion around the [ + ] button (also seen above here.)
#26404

Improve Guidance When Adding Blocks
#26946

[paaljoachim]

Hello everyone.

Retesting using WordPress 5.7. Gutenberg plugin 10.6.0. Twenty Twenty One.

I made a Group block, and added three columns. Containing the following text.

Clicking-Parent-Icon.mp4

---

One approach that might be interesting to look at for block containing inner blocks is the click through method.
I am not sure if it would be suitable, but the click through method automatically selects the top parent block first. In the above example that would be on the first click clicking the Group parent block.
So on the first click - The top parent Group is selected.
Second click. Depending on where the next click is inside the Group block then what is clicked on is then selected.
Check my comment here: #31109 (comment)

[maddisondesigns]

Adding an extra button into the toolbar just so that you can actually select a Group Block, is just ridiculous. The fact that you can't even tell that some of this text (in the screenshot below) is sitting within a Group Block, just by looking at it, is part of the problem. No other Page Builder out there, suffers from this problem. Even the worst of the worst allow to you reliably select any block that you want to edit. The fact that Gutenberg can't seem to solve this without having to add special dedicated buttons like the Select Tool or this new Select Group button, really says a lot about the UI.

[mtias]

Closing this.

[maddisondesigns]

@mtias Why is this being closed? I'm wondering how adding a 'Select Group' button onto the toolbar, is a valid fix? What happens when the next block comes along that can't be selected? Will you add another button for that as well?

One of the major issues with Gutenberg is that you can't even tell, just from looking at your content, what sort of blocks are being used in the layout (see my earlier comment above). A user should be able to simply click on every single block within the page to be able to select it. Adding an extra button onto the toolbar specifically to select one type of block, seems like a huge hack. There's not one single other page builder out there that has this issue, and none of them have (or need) extra tools and/or buttons to be able to select individual blocks that are otherwise unselectable.

[maddisondesigns]

How is this making it easier to use and even resolving the main issue that I raised. In the below vid, I have a Group -> Columns -> Column -> Paragraph. To select the Group Block, I first have to use your special button to select the individual Column, then I have to use it again to select the Columns Block, then I have to use it yet again to select the Group. I'd love to hear anyone's explanation as to how this is an acceptable workflow for selecting the block that you want to edit. A user should be able to select the exact block that they want, with one click, and not have to jump through so many hoops just to edit their content.

Vid: https://share.getcloudapp.com/jkuPBEG8

[mtias]

Closed the issue because there are currently many ways to select a group, so it's not unselectable. If the group has padding, it can be directly selected. If it coincides with the content boundaries, the block list view, the breadcrumb, or the parent block selector can be used because we prioritize selecting children first in the canvas. Other design tools optimize for selecting parents, and that's fine. We used to require double-clicks to select children so a parent would always be selected first but it introduced more friction to most common user activities and was not worth the tradeoff. No one is saying it's perfect, but it's certainly not impossible.

One of the major issues with Gutenberg is that you can't even tell, just from looking at your content, what sort of blocks are being used in the layout

I understand the sentiment but this is not a goal. The goal is to approximate as much as possible how the real site looks. There are other ways to see block structure. Clarity can and should be improved but not at the expense of this other primary goal. Any ideas or proposals around improvements that could be made there are totally worth discussing in specific issues.

Adding an extra button onto the toolbar specifically to select one type of block, seems like a huge hack.

The editor currently optimizes for selecting children first, so the button is there to select any parent from a child context, it's not for one specific type of block.

[antonyjsmith]

The goal is to approximate as much as possible how the real site looks.

I understand this to an extent, but the editor is for editing not consuming and the sentiment is that it's not very good at it. What I take from this is that you are prepared to sacrifice usability for presentation which is rather troubling.

There are other ways to see block structure.

For me this is by using a plugin which vastly improves the experience.

https://wordpress.org/plugins/editor-block-outline/

[mtias]

@antonyjsmith that the editor reflects the site accurately is a big part of usability. When it doesn't people lose confidence in what they are editing.

For me this is by using a plugin which vastly improves the experience.

That's a great plugin and I'm happy it exists and explores how a more visually dense presentation could work. We might be incorporating more of that into the select tool or the template editor in particular, we just need to balance it with the writing experience as well.

[maddisondesigns]

that the editor reflects the site accurately is a big part of usability. When it doesn't people lose confidence in what they are editing.

Prior to Gutenberg's release in 2018, people have been happily using the WordPress (Classic) Editor for 15+ years. Even now, the Classic Editor has 5+ Million users (truth be told, it's probably closer to 10+ Million because dot org doesn't show numbers greater than 5 and it's been sitting on that for at least 2 years!)

Saying now, all of a sudden, people are losing confidence in what they're editing if it's appears slightly different, is absolute rubbish. Putting style over usability & functionality, is a really poor business decision. Gutenberg is supposed to be making it easier for users to edit their content. Gutenberg does some nice things, but overall, editing content is now harder and more frustrating than it ever has been.

[mtias]

I'm sorry but if that's the tone you choose to engage with I'm not sure we can have a very productive conversation.

The classic editor never had native support for groups, so I don't see why it's relevant to the discussion of how easy it is to select nested groups.

[paaljoachim]

Hey @maddisondesigns Anthony

There is still a general UX need to improve where one is in the hierarchy of nested blocks. As this is a tricky part for most users.

There is gradual work happening to make it easier to select the Group block.
Default Appender: Add select-state before showing inserter
#33025

We also have a click through approach merged:
Template Parts & Reusable Blocks - try overlay element for clickthrough to edit pattern.
#31109 (comment) (Linked to my comment showing how it works. This will be explored for a while and might be extended to other types of nested blocks.

We are working on figuring out ways to make it easier for users to understand which block one has selected to understand where in the nested hierarchy one is on. As moving between the nested blocks today can be a bit tricky to understand.

[paaljoachim]

A followup comment.
I know a lot of the comments I have made over time show an old UI from days gone by. Some improvements have been added over time. It would be great to focus on new actionable steps (improvements) that are on their way.
Thanks!