Block: fix invalid block scrim overflowing toolbar on mobile

[johngodley]

On small screens the invalid block scrim overflows a block’s dropdown menu / toolbar, which is positioned beneath the block.

This only happens when the block is selected.

This PR shortens the scrim so it doesn't overlap the bottom toolbar, as discussed in #9402.

Fixes #9402

Testing

1. Make a block invalid (i.e. edit HTML on a paragraph and remove the trailing </p>)
2. Switch browser to a mobile display
3. Ensure block is selected and verify that without this PR the scrim overflows the bottom of the block, as shown above
4. Apply PR and verify that the scrim does not cover the toolbar and dropdown menu at the bottom of the block.
   
5. Switch back to desktop mode and verify that the scrim fully covers the block
   
6. Verify that an unselected block looks correct in both desktop and mobile mode

Types of changes

The CSS changes are tightly coupled to a selected block on a small screen so shouldn't affect anything else.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[johngodley]

@jasmussen thanks for the help with this. I implemented your pseudo CSS but found the bottom offset wasn't enough and had to change it to

$block-toolbar-height - $block-padding - 1px

I don't know if there's a better constant, or why it needs the -1px.

I also tied the change to .has-warning.is-selected as the block is shorter when unselected.

[jasmussen]

Solid PR, very nice work! That one pixel is the border width, so I pushed a tiny thing to fix to just use the variable, this will help explain why it's needed.

[jasmussen]

👍 👍

[jasmussen]

Okay, so I commandeered this PR, inspired by your fixes. And I pushed a great deal of changes in 3a6e1f3, enough that someone else should review this. The block warning looks like this now:

The big change here:

• The block warning no longer obscures content, it makes the block taller to accommodate the warning.
• The scrim is lighter so it's easier to see what the block is.
• The hover style is not obscured by the warning

[johngodley]

I like the block growing to show all of the content.

Looks good in all warning situations, except in a single-use block warning where the border disappears in places:

However I think it's part of a larger issue to do with the block warning style and the single use error. I can push it out into another issue unless you think it's a quick fix here.

[johngodley]

Giving it a go I got this in warning/style.scss

.editor-block-list__block:not(.has-warning) .editor-warning {
	border: $border-width solid $light-gray-500;
}

.editor-block-list__block.is-selected:not(.has-warning) .editor-warning {
	border-top: $border-width solid $light-gray-500;
}

But it has a double border when the block is selected. Not really sure of the best way of proceeding so I'll leave it to someone who knows what they are doing.

[jasmussen]

Good catch.

I restored the full border. It's worth getting this warning in, then we can look at separate improvements, well, separately.

[mtias]

I like these changes. One thing that is jumping to me is that the option "Keep as HTML" could probably be "Keep as is" (better written, of course, maybe even just "Keep"). Being able to see the whole block clearly shows the content is not necessarily broken, just that it cannot be handled as a perfect block of a given type.

[talldan]

I like this - it's a nice improvement. I added one minor optional comment.

On the topic of copy, @mtias, I find "This block has been modified externally." to be a bit of a technical sentence that could be softened and it doesn't attempt to educate why there's an issue.

And 'Convert to Block' doesn't always make sense since it's already a block, just one with an warning state.

I also noticed that 'Convert to block' appears in both the main body of the error and the more menu and I couldn't see why.

Shall I make an issue to cover those things?

[mtias]

@talldan sure, can you add to #7604? That gives a general view of where we are heading.

[johngodley]

Regarding the copy in the button and message I can look at those in another PR - it probably needs a more coordinated think.

I also noticed that 'Convert to block' appears in both the main body of the error and the more menu and I couldn't see why

Yep, I wasn't entirely sure whether this should be duplicated and just went with what was in the original mockup (although it has a different button). It's easy to remove so if it seems unnecessary I can do that elsewhere too.

[johngodley]

Regarding the copy in the button and message I can look at those in another PR

#9667

[talldan]

@johngodley @jasmussen - I think this is good to merge, unless you can think of anything outstanding?

[jasmussen]

🎉