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

[shireling]

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.

[shireling]

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.

[mai21]

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

[mai21]

opening it as it was closed by mistake

[hellofromTonya]

Moving into 5.8.2 milestone.

[hilayt24]

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