Fix missing CSS in the Classic Block

[azaozz]

Makes image captions and wpviews (embeds, etc.) work again.

Tested in Chrome, Firefox, IE11.

[jasmussen]

Not sure how to test this. The idea seems fine, but I don't actually see any regression in not including this.

This is this branch:

This is master:

[azaozz]

Uh, sorry, should have added screenshots.

Image with caption before: image is too large, doesn't get the max-width as the caption element doesn't have it. Also note the resize handle top/left (only part is visible). The image tag's width is also wrong in Twenty Nineteen.

Image with caption after: proper max-width, proper tag width for the caption element (arguably, as it is "hard coded" to the block width when the post was edited) and all resize handles are visible.

The wpview (embeds) get an transparent overlay so we can show a popup toolbar on click (like on images). The styling for it is missing, so it doesn't cover the embeds.

Embeds after: the overlay is in place and the toolbar shows.

[jasmussen]

Ah, thanks for the screenshots. Yes this seems like a good improvement.

[azaozz]

Ughhh, mistakenly thought these were fixed already... They are not "nice to have improvements", they are regressions. Most are pretty serious like the missing CSS for the shim covering embeds in the Classic block preventing the floating toolbar from showing, and users from being able to edit the URLs. The missing CSS for the error messages when embedding fails make them look quite "ugly" :(

All of this functionality has been in the Classic Editor for years. I understand the styling was missed when bringing over the CSS for editor content, but it needs fixing the-sooner-the-better.

[azaozz]

Hmm, I'm probably missing something but how is this error related to this pr?

waiting for selector ".media-modal li[aria-label="cad387e3-cb4b-4972-a243-260cbfd3e953"]" failed: timeout 30000ms exceeded

[gwwar]

@azaozz Would it be possible to note testing steps, what is broken/expected, and some context on the changes being made here?

[ellatrix]

I rebased this PR and cleaned it up a bit.

Testing instructions:

• paste a youtube URL in the classic block. Ensure styles look good: border + toolbar etc.
• Add an image with caption. Ensure styles look good: border + toolbar etc.

[ellatrix]

@azaozz Could you confirm everything still looks good to you after the clean up? :)

[ellatrix]

Also test: you should not be able to play the embed after selecting the block inside the classic editor.

[azaozz]

@ellatrix yep, works quite well here too. Thanks for looking at this :)