WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 2 months ago

#53158 assigned defect (bug)

Twenty Twenty: Pullquote block editor styling does not match front

Reported by: sabernhardt Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
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 9 months ago.
Twenty-Twenty-pullquotes-front.png (34.6 KB) - added by sabernhardt 9 months ago.
53158.patch (3.1 KB) - added by tomjdevisser 8 months 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 8 months ago.
The editor after the patch
Schermafbeelding 2021-05-11 om 00.33.37.png (118.0 KB) - added by tomjdevisser 8 months ago.
The frontend after the patch
53158-2.patch (4.7 KB) - added by tomjdevisser 8 months 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 8 months 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 8 months 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 8 months 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 8 months ago.

Download all attachments as: .zip

Change History (23)

#1 @desrosj
9 months 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
9 months ago

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

#3 @tomjdevisser
8 months ago

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

#4 @sabernhardt
8 months ago

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

@tomjdevisser
8 months 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
8 months ago

The editor after the patch

@tomjdevisser
8 months ago

The frontend after the patch

#5 @tomjdevisser
8 months ago

  • Keywords has-patch added; needs-patch removed

#6 @tomjdevisser
8 months 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 8 months ago by tomjdevisser (previous) (diff)

@tomjdevisser
8 months ago

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

@tomjdevisser
8 months 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
8 months ago

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

#7 @sabernhardt
8 months 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
8 months ago

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

#8 @sabernhardt
8 months 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.


7 months ago

#10 @JeffPaul
7 months 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
7 months 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.

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


2 months ago

#13 @sabernhardt
2 months ago

  • Keywords needs-testing removed
  • Milestone changed from 5.9 to Future Release

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

Note: See TracTickets for help on using tickets.