Restyle block warnings

[nshki]

Description

This PR is to address #5201, where large blocks that throw a warning make the warning hard to find and interact with. The change shortens blocks with warnings with a max-height, and warnings hug the top of the blocks.

How Has This Been Tested?

1. Created a paragraph block
2. Wrote in a large amount of text (such that scrolling is necessary to see the full block)
3. Edited the block as HTML
4. Wrote in invalid HTML, e.g. <alskdjfl
5. Blurred the block

Screenshots (jpeg or gifs if applicable):

Checklist:

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

[bordoni]

If the block has less than 500px, should we apply this?

[nshki]

@bordoni I think it's still applicable for blocks that don't exceed 500px -- it'll keep the warning position consistent across different blocks. Otherwise, short blocks would have centered warnings and taller ones wouldn't.

[aduth]

Nice work here 👍I'd prefer if the gitignore changes were not included here though.

[nshki]

@aduth I went ahead and removed swap files from the .gitignore and rewrote the translate as translateX as requested!

[aduth]

Code-wise this looks great, nice work 👍

I'm going to flag for design review because I'm curious if, after applying the max-height, it's necessary/ideal to still move the warning to the top of the block, or if the original issue is resolved by the application of a max-height alone.

cc @karmatosed @jasmussen

[jasmussen]

I think it's fine to apply a max-height. I'm more curious what happens if the block is shorter than the warning itself. If the warning just expands the block to fit, then I think it's fine 👍 👍

[nshki]

@jasmussen Here's what happens when the block is shorter than the warning itself:

The block expands to the min-height set at 250px. Should the warning stick to the top of the block (regardless of height) as shown in the screenshots or would it be better if they're centered?

[jasmussen]

Interesting. This min-height, where's that from? Is that from the block or something that the error wrapper adds?

If it's from the block then I think it's fine. If it's from the wrapper then there shouldn't be a min-height.

[aduth]

It's applied to the block when a warning is present to avoid the case where the block itself is too short to display the warning (e.g. single line paragraph). But it was optimized for (a) when the prompt had more lines of text in it and (b) was vertically centered.

[jasmussen]

I think we can probably reduce that min-height to 150 for now, merge this in, and then we can always look at additional improvements in the future. Perfect should not be the enemy of improvements here and now.

[nshki]

@jasmussen I think the 250px min-height was to also account for smaller viewports. With a 150px min-height, warnings gets cut off like the screenshot below:

[jasmussen]

Oh indeed, then keepit as is and we'll look at improvements separately.

[nshki]

cc @aduth

[aduth]

Two ideas for (separate) enhancements:

• Breakpoint-specific min-height
• Assign the warning as the static element of the block, and the preview as absolute behind it, allowing height to adjust automatically to the warning plus some margin