WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 8 days ago

#53158 assigned defect (bug)

Twenty Twenty: Pullquote block editor styling does not match front

Reported by: sabernhardt Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:

Description

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.

Attachments (10)

Twenty-Twenty-pullquotes-editor.png (28.8 KB) - added by sabernhardt 6 weeks ago.
Twenty-Twenty-pullquotes-front.png (34.6 KB) - added by sabernhardt 6 weeks ago.
53158.patch (3.1 KB) - added by tomjdevisser 5 weeks ago.
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.
Schermafbeelding 2021-05-11 om 00.33.22.png (149.5 KB) - added by tomjdevisser 5 weeks ago.
The editor after the patch
Schermafbeelding 2021-05-11 om 00.33.37.png (118.0 KB) - added by tomjdevisser 5 weeks ago.
The frontend after the patch
53158-2.patch (4.7 KB) - added by tomjdevisser 5 weeks ago.
Updated patch, reverted back to px instead of rem and added changes to rtl-styles
53158-wp-block-margins.patch (5.1 KB) - added by tomjdevisser 5 weeks ago.
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.
53158-3.patch (6.9 KB) - added by tomjdevisser 5 weeks ago.
Added missing rules, making the files match. Also put every rule on a different line following standards.
53158.4.patch (11.1 KB) - added by sabernhardt 12 days ago.
adding styles for left and right alignment; using child selector for any aligned pullquotes
pullquotes-2020-patch4-ltr.png (87.5 KB) - added by sabernhardt 12 days ago.

Download all attachments as: .zip

Change History (21)

#1 @desrosj
6 weeks ago

  • Milestone changed from Awaiting Review to 5.8

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.

#2 @sabernhardt
6 weeks ago

  • Owner set to sabernhardt
  • Status changed from new to accepted

#3 @tomjdevisser
5 weeks ago

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

#4 @sabernhardt
5 weeks ago

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

@tomjdevisser
5 weeks ago

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.

@tomjdevisser
5 weeks ago

The editor after the patch

@tomjdevisser
5 weeks ago

The frontend after the patch

#5 @tomjdevisser
5 weeks ago

  • Keywords has-patch added; needs-patch removed

#6 @tomjdevisser
5 weeks ago

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!

Last edited 5 weeks ago by tomjdevisser (previous) (diff)

@tomjdevisser
5 weeks ago

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

@tomjdevisser
5 weeks ago

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.

@tomjdevisser
5 weeks ago

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

#7 @sabernhardt
13 days ago

  • Keywords needs-refresh added

@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
12 days ago

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

#8 @sabernhardt
12 days ago

  • Keywords needs-testing added; needs-refresh removed

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.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 days ago

#10 @JeffPaul
8 days ago

  • Milestone changed from 5.8 to 5.9
  • Owner sabernhardt deleted
  • Status changed from accepted to assigned

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.

#11 @sabernhardt
8 days ago

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

Note: See TracTickets for help on using tickets.