Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years 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 3 years ago.
The Gutenberg style is overridden with the default theme styles of twenty nineteen.
54056.1.diff (7.3 KB) - added by sabernhardt 3 years ago.
twentytwenty-title-5.8.png (11.4 KB) - added by sabernhardt 3 years ago.
intended theme styling (as seen in WordPress 5.8)
twentytwenty-title-trunk.png (11.9 KB) - added by sabernhardt 3 years ago.
title styles in trunk, before patch
twentytwenty-title-trunk-with-patch.png (12.5 KB) - added by sabernhardt 3 years ago.
title styles in trunk, with patch
Capture d’écran 2021-11-29 à 22.17.03.png (238.8 KB) - added by audrasjb 3 years ago.
Before 54056.1.diff
Capture d’écran 2021-11-29 à 22.17.25.png (324.3 KB) - added by audrasjb 3 years ago.
After 54056.1.diff

Download all attachments as: .zip

Change History (25)

#1 @shireling
3 years 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.


3 years ago

#3 @mai21
3 years 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
3 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

opening it as it was closed by mistake

#5 @hellofromTonya
3 years ago

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

Moving into 5.8.2 milestone.

@hilayt24
3 years ago

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

#6 @hilayt24
3 years ago

  • Keywords has-patch added; needs-patch removed

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

  • Focuses css added
  • Version set to trunk

#9 @sabernhardt
3 years ago

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

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


3 years ago

#11 @audrasjb
3 years 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
3 years ago

@sabernhardt
3 years ago

intended theme styling (as seen in WordPress 5.8)

@sabernhardt
3 years ago

title styles in trunk, before patch

@sabernhardt
3 years ago

title styles in trunk, with patch

#12 follow-up: @sabernhardt
3 years 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
3 years 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.

@audrasjb
3 years ago

Before 54056.1.diff

#15 @audrasjb
3 years ago

  • Keywords has-screenshots added; needs-testing removed

#16 @audrasjb
3 years ago

  • Keywords commit added

The patch looks good, committing.

#17 @audrasjb
3 years 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.