Blocks display inconsistently depending whether they've been selected or not

[maddisondesigns]

Describe the bug
When you open a page to edit it, and hover over each block, nothing changes. The blocks aren't highlighted in any way and there's no indication that each bit of content is a separate block. The only thing you see as you scroll up and down the page is the occasional Block Inserter icon appear as your cursor hovers near the top of a block.

If you then click on a block to select it, and then simply click out of the block to deselect it, the blocks start behaving differently. After doing this, each time you hover over an individual block, it's 'highlighted' with a light-grey left-hand border and a small breadcrumb tag in the upper-left corner of the block.

Why do blocks behave differently depending on whether I've clicked on one or not? They shouldn't. As soon as I open the page, they should highlight as soon as I hover over them.

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

On top of this, the Classic Block is treated even differently. When you first open the page, the Classic Block has a light-grey header across the top that says "Classic". When you click on the Block, the toolbars appear as expected, but when you click out of the block to deselect it, this header disappears and never shows again.

Also, when you hover your cursor over the Classic Block, it doesn't show the small breadcrumb tag in the upper-left corner of the block, like all the other blocks.

The Classic Block when first opening the page

The Classic Block after you've selected and deselected the block

To reproduce
Steps to reproduce the behavior:

1. Edit a page
2. Scroll up and down the page and hover over blocks. Notice nothing is highlighted
3. Select any block and then deselect it
4. Scroll up and down the page and hover over blocks. Notice all blocks are now highlighted on hover
5. View Classic Block upon first entering page, after it's been selected/deselected, and when hovered. It behaves differently to the other blocks.

Expected behavior
Blocks should behave consistently. They shouldn't behave differently based on whether I've clicked on one or not.

The Classic Block should behave exactly like every other block.

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Firefox 70.0.1
• Version: WP 5.3

[mrleblanc101]

I also have this issue. Especially annoying if you use "Classic" block as they appear in a state between Editable and Not editable (View only).
As you can see the big grey "Classic" box should not be displayed. Also it disapear once i've selected the block once and won't repeat if I select another block.

[talldan]

Hmm, I think the little 'Classic Block' banner is displayed when the block is empty, that's because the classic block has no placeholder, but it does potentially seem to be a bug that sometimes this doesn't display when the block is empty.

As to the other points, there doesn't seem to be the same inconsistency in the latest version of the block editor.

I'll leave this issue open as the problem identified with the Classic Block could be improved.

[donmhico]

Hi @maddisondesigns,

Thank you for submitting this issue. I've linked a PR. Can you test it if you have time?

@mrleblanc101 @talldan - If you also have the time. Thanks guys!

[kriskarkoski]

We at WordPress.com recently had an additional report of this inconsistency

[youknowriad]

This is not something I can reproduce anymore.

[maddisondesigns]

@youknowriad The reason you can't reproduce it any more is because you removed all the outlines from every single block. So not only does it stop this issue from happening, but it's made the whole editing experience just generally worse. You now have no idea where one block ends and another starts, and you can't tell whether a block is enclosed within one or more other blocks. On top of that, it's now virtually impossible to simply click on the exact block that you want, particularly when there's multiple blocks inside each other. I should be able to look at a page, and without clicking on anything, see exactly what blocks that page consists of, but I can't.

[youknowriad]

On top of that, it's now virtually impossible to simply click on the exact block that you want, particularly when there's multiple blocks inside each other. I should be able to look at a page, and without clicking on anything, see exactly what blocks that page consists of, but I can't.

I hope you understand that nested blocks is a mandatory feature and yeah it's very hard to get the balance right without creating differences between frontend and backend. That's the reason the "list view" exists. If you have better ideas on how to solve this please do open issues and suggest solutions. There are already issues that discuss bring more outlines to the UI like this one #25133 but feel free to open new issues if needed. Thanks.

[maddisondesigns]

@youknowriad Of course nested blocks are mandatory! You can't even do something as simple as a two column layout without nested blocks.
I'm referring to the horrible UI and extremely poor UX. Your constant need to hide and/or remove everything like the block outlines, hiding all the icons under small dropdown menus or icons, or just removing them altogether, having popups within popups like the colour selector.
People don't care if the editor looks just a little bit different from the front-end. People care whether you provide an easy to use interface for editing content. People care about being able to easily find the tools they need to edit content, or adding styling to their content/blocks.
Having to specifically select an option that's hidden under the Typography Options icon, before you can even use it, instead of just having it already showing. Having to specifically select something like Padding or Margin from the Dimensions Option icon, before you can use it. Only being able to add Padding or Margins to certain blocks. You should be able to add padding and margin to every single block, not just the blocks that your Devs think are relevent!
The whole editing experience in the Block Editor is just so horrible, and frustrating and not to mention incredibly slow, due to the number of clicks required to do the bare minimum!