Gutenberg: Can't reliably select and edit HTML Blocks

[maddisondesigns]

Describe the bug
After adding code to an HTML Block, and then deselecting that block, it's incredibly difficult to reselect it again, and therefore hard to edit.

Vid: https://cl.ly/d411723691e7

This is another issue related to one that I raised almost a month ago, in regards to not being able to select blocks, and the Block toolbar not displaying. This issue is effecting numerous blocks in the editor and making them become uneditable.

To Reproduce
Steps to reproduce the behavior:

1. Add HTML Block
2. Add some example HTML to the block
3. Preview the Block and then click outside the block to deselect it
4. Try to reselect the block and edit your html

Expected behavior
I should be able to click on the Block to select it and edit it.

Desktop (please complete the following information):

• macOS Sierra
• Firefox Quantum 63.0.3
• WP 5.0-RC3-43966

See Also: #11906

[designsimply]

Tested and confirmed using WordPress 4.9.8 and Gutenberg 4.6.1 master @ 46f789a5c.

^{Tested with Firefox 63.0.3 on macOS 10.13.6.}

Related: #11885

[designsimply]

Noting a temporary workaround which is to click into an adjacent block (or the title) and press an up or down arrow key to reach the block.

[maddisondesigns]

This has been marked as High Priority over a month ago and yet, nothing seems to be happening with it. Any reason this wasn't fixed as part of 5.0.3?

[designsimply]

It may not have been visible enough. I will add it to a milestone instead.

[maddisondesigns]

This was added to the 5.0 Milestone, and then changed to the 5.1 Milestone, and now it seems to have been changed to 5.x which I can only presume it means 'sometime in the future'. It's marked as high priority so I'm wondering why it keeps getting pushed back? This is still an issue in 5.0.3. I would think that not being able to reliably select blocks would be considered important for a block editor.

[maddisondesigns]

Any chance this can be looked at for 5.2? It's been almost 4 months now and this High Priority issue still hasn't been looked at.

[gziolo]

I can confirm that it's difficult to select this block on its edges.

[gziolo]

It was also reported in #14071 by @jeiseman:

Describe the bug
Reducing the top and bottom margins of blocks causes the "custom html" blocks to be uneditable.
The problem shows up in all blocks but is more severe in the "custom html" blocks. You can see from the following screenshot that even for paragraph blocks the first block is interfering with the second block:
https://cl.ly/4bff581651a0

To Reproduce
Steps to reproduce the behavior:

1. Create a post containing two "custom html" blocks with a single line of html in each one.
2. Add the following custom css to the admin block-editor.css
   .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { margin-bottom: 10px; margin-top: 10px; }
3. Try to edit the first of the two "custom html" blocks.

You will find that you can't edit the first block.

Desktop (please complete the following information):

• OS: Windows 10
• chrome
• Version 72

Additional context

• WordPress 5.1

[youknowriad]

I can't seem to reproduce these days. I think it's probably fixed. Let me know the exact steps if you can reproduce. Thanks.

[maddisondesigns]

@youknowriad Can you please reopen this as it's still an issue.

Here's another vid I just created: https://cl.ly/5318c5aa8869

Steps:

1. Insert HTML block
2. Add html into block
3. Click Preview
4. Click outside of the block
5. When you click back on the block you no longer get the block toolbar

[glendaviesnz]

I wasn't able to replicate this on 7.5:

@maddisondesigns are you still seeing the issue on the latest plugin release?

[maddisondesigns]

@glendaviesnz Yes, this is still very much an issue.

Here's another vid I just created: https://share.getcloudapp.com/9ZuArmrd

You can see that it's still incredible difficult to edit the block because it's so hard to get the Block Toolbar to actually display. Clicking on the block does nothing, clicking just above, to the right or to the left also does nothing. The only way to get the block toolbar to display is to click in a very tiny space just below the block. You can't click too low though, otherwise you end up displaying the toolbar for the block below. Not only that, but because you've now removed the block outlines on hover, you've just made it even harder to select as there's no indication where one block ends and another starts.

Tested With:
TwentyNineteen
WP 5.3.2
Gutenberg 7.5.0
Firefox 73.0
macOS Mojave 10.14.6

[glendaviesnz]

Thanks for including the browser details @maddisondesigns - looks like it is a Firefox related issue, was not able to reproduce in Chrome, but easily reproducible in Firefox.

[maddisondesigns]

@glendaviesnz I just tried it in Chrome (80.0.3987.116) and yep, when I click on the Block itself, it shows the Block Toolbar as expected.

[glendaviesnz]

I am picking it is something to do with Firefox's security settings. The html preview puts the html code in a sandboxed iframe, and it looks like Firefox is not allowing click events in that iFrame to bubble up, so as you noted you need to click on the very edge which works because there is an area of padding within the block, but outside the sandboxed iFrame.

I will do some research and see if there are any easy solutions to this.

[glendaviesnz]

@maddisondesigns finally got some time to have another look at this - have put up a PR for a potential fix at https://github.com/WordPress/gutenberg/pull/20425.

[maddisondesigns]

@glendaviesnz Fantastic! Thanks for the update.