Make WordPress Core

Opened 4 years ago

Last modified 2 months ago

#53158 assigned defect (bug)

Twenty Twenty: Pullquote block editor styling does not match front

Reported by: sabernhardt's profile sabernhardt Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch dev-feedback has-test-info
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 4 years ago.
Twenty-Twenty-pullquotes-front.png (34.6 KB) - added by sabernhardt 4 years ago.
53158.patch (3.1 KB) - added by tomdevisser 4 years 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 tomdevisser 4 years ago.
The editor after the patch
Schermafbeelding 2021-05-11 om 00.33.37.png (118.0 KB) - added by tomdevisser 4 years ago.
The frontend after the patch
53158-2.patch (4.7 KB) - added by tomdevisser 4 years 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 tomdevisser 4 years 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 tomdevisser 4 years 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 4 years 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 4 years ago.

Download all attachments as: .zip

Change History (28)

#1 @desrosj
4 years 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
4 years ago

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

#3 @tomdevisser
4 years ago

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

#4 @sabernhardt
4 years ago

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

@tomdevisser
4 years 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.

@tomdevisser
4 years ago

The editor after the patch

@tomdevisser
4 years ago

The frontend after the patch

#5 @tomdevisser
4 years ago

  • Keywords has-patch added; needs-patch removed

#6 @tomdevisser
4 years 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 4 years ago by tomdevisser (previous) (diff)

@tomdevisser
4 years ago

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

@tomdevisser
4 years 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.

@tomdevisser
4 years ago

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

#7 @sabernhardt
4 years 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
4 years ago

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

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


4 years ago

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


4 years ago

#13 @sabernhardt
4 years 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.

#14 @karmatosed
13 months ago

  • Keywords needs-testing added

#15 @karmatosed
13 months ago

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

This ticket was mentioned in Slack in #core-themes by sirlouen. View the logs.


2 months ago

#17 @SirLouen
2 months ago

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)

https://i.imgur.com/F2SlEWE.png

🐞 Editor Pre-Patch

https://i.imgur.com/Ma2Wxrs.png

✅ Editor Post-Patch

https://i.imgur.com/3Ni9a0r.png

Last edited 2 months ago by SirLouen (previous) (diff)

#18 @SirLouen
2 months ago

  • Keywords dev-feedback has-test-info added; needs-testing removed
Note: See TracTickets for help on using tickets.