Twenty Nineteen - Pullquote block editor styling breaks with block alignment set

[devnel]

Steps to reproduce the behavior

1. Activate Twenty Nineteen
2. Add a pull-quote block to any page
3. Apply "wide-align" or any other block alignment option
4. See the issue

What I expected to happen

The editor styling shows by default with the theme font styles (italic etc.) just like without alignment.

What actually happened

The editor styling of the text in the block doesn't reflect the correct size and font-decoration. The styling is still displayed correctly on the front-end and without any alignment options active.

Tested with latest WordPress version installed and no plugins active.

[devnel]

Correct styling with no alignment set

[devnel]

Styling missing with wide-align set

[sabernhardt]

adding wp-block-pullquote class to Twenty Nineteen editor styles

[sabernhardt]

each alignment option before patch

[sabernhardt]

after applying patch

[sabernhardt]

@devnel Thanks for the report!

53112.patch​ sets all editor pullquote styles to put the quote in italics and remove all-caps from the citation with Twenty Nineteen.

I also noticed a discrepancy between pullquote block alignment options with the Twenty Twenty theme, now reported on #53158.

[desrosj]

Moving to 5.8 because it would be nice to fix as many editor bugs in the default themes as possible. But with the focus on full site editing, this would need someone to own.

[psrpinto]

I tested the patch locally and can confirm it fixes the issue.

[sabernhardt]

adding styles for left and right alignment

[sabernhardt]

Using longer quotes, the left- and right-aligned pullquotes are more obviously centered in the editor.

On the front end both left and right are aligned the same direction as the language default. I added the text-align: left to the editor version even though there is no RTL version (so those blocks would not match the front end in RTL anyway).

If it's better to leave the text centered in the block and float those pullquote blocks to the side, we could remove that text alignment and keep the max-width for the editor.

[sabernhardt]

using text-align: inherit for left and right pullquotes (plus the max-width)

[sabernhardt]

To remove the LTR bias of my previous patch, the text alignment is updated to use inherit in 53112.2.patch​. So now it should be correct for both language directions.

[ryelle]

In 51096:

Twenty Nineteen: Fix pullquote styling in editor when block has alignment.

Props devnel, sabernhardt.
Fixes #53112.