Layout: Removal of semantic classnames when using 'disable-layout-styles'

[davecpage]

Description

As per the developer documentation a theme can opt out of [https://developer.wordpress.org/block-editor/explanations/architecture/styles/#opting-out-of-generated-layout-styles generated layout styles] by setting add_theme_support( 'disable-layout-styles' ); within their theme. The generated styles are no longer inlined, but the blocks will still retain their semantic class names, such as is-layout-constrained.

Since 6.5 this is no longer the case within the editor. Public display of a page still shows the semantic class names, but within the editor, those classes are being removed causing styling issues for themes.

I've replicated this within in Twenty Twenty Four.

From what I can tell, this appears to have been introduced as part of changes within Gutenberg 17.1. As I've also tested with WP 6.4.3 and activating/deactivating Gutenberg 17.1 and seen the same removal of editor classes when it's active.

I've also tested using a group block set as a row, it should have the is-layout-flex class within the editor to match the public view, but it does not.

Expected behaviour

The CSS should not be inlined as requested by the theme support opt-in, but the semantic classes should still remain in the editor.

Step-by-step reproduction instructions

1. Activate Twenty Twenty Four theme
2. Add a Group block to a post or page, make sure the 'Inner blocks use content width' setting is on and save
3. Note the public HTML of the block includes the class is-layout-constrained
4. Check the inspector within the editor, the group has the same class
5. Add add_theme_support( 'disable-layout-styles' ); to the functions.php file
6. Reload the public side and see the class is still there
7. Reload the editor and within the inspector notice that the group no longer has the class

Screenshots, screen recording, code snippet

Block markup

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Environment info

• WordPress 6.5
• With and without Gutenberg active
• Twenty Twenty Four 1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[andrewserong]

Thanks for reporting! I think the regression might have been introduced in #55762, as that moved around where the layout style rendering was occurring. I'll just ping @Mamaduka @jsnajdr and @tellthemachines for visibility.

[Mamaduka]

Thanks for the ping, @andrewserong! I'll try to look into the issue later this week.