Wide/Full alignment options no longer appear on blocks with Gutenberg 11.2 whilst using theme.json

[paulwilde]

Is there an existing issue for this?

• I have searched the existing issues

Have you tried deactivating all plugins except Gutenberg?

• I have tested with all plugins deactivated.

Have you tried replicating the bug using a default theme e.g. Twenty Twenty?

• I have tested with a default theme.

Description

I have a custom-built theme that is using theme.json to set block colours etc.

Here is a snippet of the theme.json I was using in 11.1 to get the full width options to appear on the block:

{
	"version": 1,
	"settings": {
        "layout": {
            "contentSize": "70rem"
        }
}

Removing the theme.json file and using add_theme_support( 'align-wide' ); makes the options re-appear with 11.2, but they otherwise don't exist.

Given the possibility I haven't set it up correctly or something changed in 11.2 with how the options are enabled when using theme.json, I suspect the possible culprit to this regression could be #33359.

WordPress Information

5.8.0.

Gutenberg Information

11.2.

[chthonic-ds]

I've just experienced this after updating Gutenberg. Can confirm alignment options for full/wide were available in Gutenberg 11.1 and now missing in 11.2.

With 11.1:

With 11.2:

Screenshots are with Empty theme active.

[leeshadle]

Thank you for creating this issue @paulwilde, I'm running into the same issue:

[ellenbauer]

I'm running into the same issue. Going back to the blog post from last week on layout and content width for WordPress 5.8 I understood that:

https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/

1. If the parent container is set to "layout": "inherit":true" a container block (e.g. the Group block) would be set to the contentSize we set up in theme.json.
2. If the container is set to layout: inherit: false container blocks like the Group block would always be "alignfull" unless users et the width in the layout setting. So the alignment options in the toolbar would not be needed any longer.

I tested both settings, layout inherit true and false but both times the Group block stays in the theme's contentSize.

I don't think this is the intended behaviour or are we missing something here?

[crs1138]

This has been explained by @youknowriad at #33374 (comment)
First of all you have to have the contentSize and wideSize values defined in your theme.json, eg.

{
  "settings": {
    ...
      "layout": {
        "contentSize": "500px",
        "wideSize": "1200px"
      },
  ...
  }
}

Then you can do the following:

1. add an layout element, eg. core/group
2. set its layout values for content width and wide width (or switch its toggle to use the default layout as defined in theme.json)
3. insert inner block
4. set its alignment to wide/full width

Our team decided to abandon the use of theme.json for now and to revert back to add_theme_support('align-wide') as our users struggled to use this functionality.

[youknowriad]

If you define theme.json layout, top level items should get the alignments options though. (I mean without a group)

[crs1138]

@youknowriad I'm afraid that's not what I observed.

Another inconvenience is that you have to set alignment options for all individual inner blocks which can be quite a daunting task.

[youknowriad]

I'm looking into the regression.

Another inconvenience is that you have to set alignment options for all individual inner blocks which can be quite a daunting task.

For this, unfortunately, there's no solution that meets all the layout requirements (explantation you shared on the other issue)

[crs1138]

I can confirm that in 11.1.0 it works as @youknowriad says – the top level blocks have possibility of the alignment. It doesn't work only in 11.2.0

EDIT: I was wrong. In 11.1.0 it does not seem to work either on the top level when using theme.json