Changes in WP 6.0 editor CSS when using theme.json breaks the container block alignments

[grahammtbr]

Bug filed as per email discussion with Tom.

Description

Block alignments (align-wide/full), now called layout under settings in theme.json, in the container block for "classic" themes using theme.json is broken in WP 6.0. It's the editor only, front-end is fine. I'm guessing this issue also exists for full-site editing themes, but I don't use that.

With WP 6.0 they changed the alignment CSS selectors (within an inline style tag) in the editor for any theme using theme.json. This is applies to the default editor styling, as the same issue in appears Twenty-Twenty themes. Prior to 6.0 the inline style tags used the same markup that's included in the classic.css provided when using add_theme_support('align-wide') in your theme setup function.

The "classic" CSS uses [data-align=""] attributes to apply the correct CSS to a root block. As GB is using a custom implementation of align (supports: align is set to false), and is setting the data-align on the root element in /src/components/root-element/index.js, alignments no longer work. The new CSS for theme.json layout is

.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper> :where(:not(.alignleft):not(.alignright)),
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container> :where(:not(.alignleft):not(.alignright))

editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper>.alignwide,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container>.alignwide

.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper>.alignfull,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container>.alignfull 

I did some digging and found the pull request that did this, WordPress/gutenberg#38613
And a larger discussion that lead to this, and possible changes in the future, WordPress/gutenberg#38998

Because the only change (so far) is the final selector I built a copy of GB 1.5 with two extra lines to append the class names based on alignment selection in /src/components/root-element/index.js.

const blockProps = {
	className: classnames( {
		'wp-block': true,
		'block-editor-block-list__block': true,
		'gb-is-root-block': true,
		[ 'gb-root-block-${ blockName }' ]: true,
                'alignwide': (align === 'wide') ?? true,
                'alignfull': (align === 'full') ?? true,
	} ),
	'data-align': align ? align : null,
};

I haven't found any unintended consciences, and I back tested to WP 5.9 which I believe is the first version to support theme.json layouts in the settings. I also tested it on my own basic base theme, GeneratePress, and the the last two Twenty-Twenty themes. This works with both theme.json and add add_theme_support('align-wide') as it retains the data attributes. I don't how this sustainable this fix is in the greater GB ecosystem, but it's working for me as temporary fix.

---

[onetrev]

Just discovered this issue today as well. Depending on the the theme it can have some really weird consequences. For example, if you only have a word or two as a placeholder in your container it ends up fully off screen. If you don't have the container selected you could think it's gone missing. 😏

For anyone dealing with this right now, this quick hack in your editor styles CSS (if you have that enabled) should get you through until a fix is in place. Of course adjust your "wide" width to whatever your theme's setting is.

.gb-root-block-generateblocks-container[data-align="full"] {
  max-width: 100% !important;
}

.gb-root-block-generateblocks-container[data-align="wide"] {
  max-width: 1200px;
}

[tomusborne]

The above PR should fix this issue - would love feedback if possible. If you test the PR, you'll need to run npm run build in order to build the necessary JS files. If you don't have NPM installed you can download the .zip here: https://github.com/tomusborne/generateblocks/suites/7985796827/artifacts/341855646

[onetrev]

Cool. I do have NPM, but the zip just felt easier today. :) I did some decent testing, both with my lean custom base theme and 2022 Theme. Everything works as expected now in both.

PS, Really looking forward to v1.6.0 now, especially as I saw recently the issue I created re: GB + FSE templates is fixed.

[tomusborne]

Awesome - thanks for testing!

[grahammtbr]

Tested, everything is working correctly for me in a classic theme (Roots Sage base) using theme.json.