Make WordPress Core

Opened 22 months ago

Closed 19 months ago

Last modified 17 months ago

#54056 closed defect (bug) (fixed)

Twenty Twenty: Editor title alignment broken by Gutenberg plugin v11.4.0 updates

Reported by: shireling's profile shireling Owned by: sabernhardt's profile sabernhardt
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.9
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: css Cc:

Description

The in-editor styles for the post/page title no longer properly update the alignment or size of the post/page title after the implementation of the rich text hook for post titles in Gutenberg 11.4.0.

In the screenshot below, styling under Gutenberg 11.3.0 can be seen on the left, and 11.4.0 on the right:

https://d.pr/i/MPmXEr

It looks like editor styles are targeting
.editor-styles-wrapper .wp-block h1
instead of
.editor-styles-wrapper h1.wp-block
that Gutenberg is now outputting.

This change also introduces markup changes that break the current targeting the post title of
.editor-styles-wrapper .editor-post-title__block .editor-post-title__input
Under the new markup

Finally, the title block itself was previously wrapped in an additional div that is no longer present. This div was generating the margins that helped to center the title above the post content.

Attachments (7)

54056.patch (441 bytes) - added by hilayt24 21 months ago.
The Gutenberg style is overridden with the default theme styles of twenty nineteen.
54056.1.diff (7.3 KB) - added by sabernhardt 19 months ago.
twentytwenty-title-5.8.png (11.4 KB) - added by sabernhardt 19 months ago.
intended theme styling (as seen in WordPress 5.8)
twentytwenty-title-trunk.png (11.9 KB) - added by sabernhardt 19 months ago.
title styles in trunk, before patch
twentytwenty-title-trunk-with-patch.png (12.5 KB) - added by sabernhardt 19 months ago.
title styles in trunk, with patch
Capture d’écran 2021-11-29 à 22.17.03.png (238.8 KB) - added by audrasjb 19 months ago.
Before 54056.1.diff
Capture d’écran 2021-11-29 à 22.17.25.png (324.3 KB) - added by audrasjb 19 months ago.
After 54056.1.diff

Download all attachments as: .zip

Change History (25)

#1 @shireling
21 months ago

Update: It turns out the change that triggered this issue was actually the removal of the wrapper div.

Some of the fixes for this have been made directly in Gutenberg, but it looks like there may still be some theme-specific changes to be made if needed.

This ticket was mentioned in Slack in #core-test by mai21. View the logs.


21 months ago

#3 @mai21
21 months ago

  • Resolution set to invalid
  • Status changed from new to closed

Could reproduce it as follow:
1- Fresh install for WP version 5.8.1
2- Switch theme to Twenty Twenty
3- Open edit view of the sample page
4- On another fresh version of WP using 5.9-alpha-51857
5- Install on the latest WP the Gutenberg plugin (v 11.5.1)
6- Open edit of the same sample page

Actual: text styling is different

Notes:

  • tested the same scenario on Twenty Nineteen => page edit was almost the same with very little shift (I think due to adding Author is page variables)
  • Tested on Twenty Twenty One and titles were different in style as well + the shift mentioned above

#4 @mai21
21 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

opening it as it was closed by mistake

#5 @hellofromTonya
21 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.8.2

Moving into 5.8.2 milestone.

@hilayt24
21 months ago

The Gutenberg style is overridden with the default theme styles of twenty nineteen.

#6 @hilayt24
21 months ago

  • Keywords has-patch added; needs-patch removed

#7 @desrosj
20 months ago

  • Keywords needs-refresh added
  • Milestone changed from 5.8.2 to 5.9

There are currently no plans to include bundled theme updates with 5.8.2, so going to bump this to 5.9.

I'm not sure if 54056.patch is the right approach. The style definition meant to target this is right below the additions in 54056.patch. I think it would be great if that one could be altered instead.

Also, there are definitions for several breakpoints in the stylesheet. The patch only addresses one of those, and assigns a different size than the definition below it (64px in this instance).

#8 @sabernhardt
19 months ago

  • Focuses css added
  • Version set to trunk

#9 @sabernhardt
19 months ago

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

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


19 months ago

#11 @audrasjb
19 months ago

  • Keywords has-patch needs-refresh removed

Maybe we should wait for the related Gutenberg code to be merged into trunk, since for now we are trying to fix a bug that doesn’t exist in Core :)

(removing has-patch as the existing one doesn't apply to this issue)

@sabernhardt
19 months ago

intended theme styling (as seen in WordPress 5.8)

@sabernhardt
19 months ago

title styles in trunk, before patch

@sabernhardt
19 months ago

title styles in trunk, with patch

#12 follow-up: @sabernhardt
19 months ago

  • Keywords has-patch added

The patch restores the font and font size at each breakpoint, plus the title is centered again.

However, the title does not have the top and bottom padding that used to be in the block editor's stylesheet. If that's important, I think it should be added in the editor styles again, not individual themes.

#13 in reply to: ↑ 12 @audrasjb
19 months ago

  • Keywords needs-testing added

Replying to sabernhardt:

However, the title does not have the top and bottom padding that used to be in the block editor's stylesheet. If that's important, I think it should be added in the editor styles again, not individual themes.

It doesn't look like a critical change :)
I'm going to test the patch right now.

#15 @audrasjb
19 months ago

  • Keywords has-screenshots added; needs-testing removed

#16 @audrasjb
19 months ago

  • Keywords commit added

The patch looks good, committing.

#17 @audrasjb
19 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed in changeset [52271].
The commit doesn't appear due to a Trac issue, so marking this ticket as fixed manually ✅

Note: See TracTickets for help on using tickets.