Twenty Twenty: Pullquote block editor styling does not match front

[sabernhardt]

Twenty Nineteen has a similar discrepancy reported on #53112

When the pullquote has default alignment, the text is still Garamond italic in the editor.

Also, quotes aligned Wide or Full are not the larger font size.

[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.

[tomdevisser]

@sabernhardt Are you working on a patch? Otherwise this is something I'd like to try :)

[sabernhardt]

If you want to make a patch, please do :)

[tomdevisser]

Some parent divs had .wp-block and some didn't. I couldn't find where to add it, so I removed it in the style selectors as it wasn't necessary anyway. The front-end also used rem values, but a font-size on the html element of 62.5%, so I recalculated the rem values for the admin styles.

[tomdevisser]

The editor after the patch

[tomdevisser]

The frontend after the patch

[tomdevisser]

The font-sizes were also dynamic, so I also added the media queries for that. I thought I'd change all the inconsistencies I could find. I hope I got them all!

[tomdevisser]

Updated patch, reverted back to px instead of rem and added changes to rtl-styles

[tomdevisser]

The margins on the right and left aligned wp-block have an inconsistency, where the right aligned has only a margin-right of 0, where the left aligned sets all margins to 0. This has to be tested with all blocks.

[tomdevisser]

Added missing rules, making the files match. Also put every rule on a different line following standards.

[sabernhardt]

@tomjdevisser Thanks for the patches! Sorry about my delay in reviewing...and because I did not realize earlier that this is quite complicated for your first bug. The 5.8 deadline is next Tuesday for review and commit, so I can make the next patch today (or tomorrow).

53158-3.patch still has some extra spaces after commas and before an opening curly bracket, and the RTL changes do not match the LTR version. Plus, the wide and full quote blocks do not need the larger font size outside the media queries (even though I think this discrepancy helps indicate that the text can be bigger, the front end has the same font size for all pullquote alignments on screens narrower than 700px).

I also just noticed that the left and right pullquotes are still centered in the editor. (My tests above only have one word per quote, so it's not obvious there.) When the font size increases to 32px, adding .editor-styles-wrapper .wp-block-pullquote p in the latest patch correctly applies that style. However, several other styles use the outdated .wp-block[data-type="core/pullquote"][data-align="left"] syntax. The next patch probably needs adjustments to at least these (which includes correcting the float direction with /*rtl:ignore*/):

.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote,
.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote.is-style-solid-color blockquote {
	text-align: left;
}

	.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit,
	.editor-styles-wrapper .wp-block[data-align="left"] .wp-block-pullquote {
		float: left;
		margin-left: 20px;
		max-width: 260px;
	}

I'll start by taking the additional selectors from the RTL stylesheet part of the previous patch 53158-2.patch​, making the following edits:

1. Adding blockquote to the wide selector (line 1334) where the font size increases to 48px;

   	.editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-pullquote blockquote p,
   

2. Making any necessary changes for the text alignment, max-width and float direction of left- and right-aligned pullquotes;
3. Ensuring all the selector additions from the RTL stylesheet match the main (LTR) version.

[sabernhardt]

adding styles for left and right alignment; using child selector for any aligned pullquotes

[sabernhardt]

Further down the rabbit hole...

The full and width alignments needed the child selector to make sure those styles apply only on wide and full pullquote blocks. Otherwise, those styles would apply when a group or cover block is wide or full, even though the pullquote block inside it could have a different alignment.

[JeffPaul]

With 5.8 Beta 1 minutes away, we're punting this to 5.9 to land there as this otherwise needs a quick review before heading towards commit then.

[sabernhardt]

As long as I don't own this right now, it would help if a committer could claim ownership for the testing/review stage.

[sabernhardt]

Because updates are planned for the quote and pullquote blocks, after 5.9, we can wait for those changes.

[karmatosed]

@sabernhardt I am just checking if this needs a refresh as it might in my testing.

[SirLouen]

Combined Reproduction and Patch Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/53158/53158.4.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Reproduction Steps

1. Create a new post
2. Add the first Pullquote, no changes
3. 🐞 Font Family doesn't change in the editor, it does in the front-end
4. Add a Second Pullquote, add alignment Full Width
5. 🐞 Font Size doesn't change in the editor, it does in the front-end

Actual Results

1. ✅ Issue resolved with patch.

Additional Comments

• @karmatosed ready to be shipped

Supplemental Artifacts

Front-End (reference)

🐞 Editor Pre-Patch

✅ Editor Post-Patch