Cannot apply wide or full widths to nested blocks with theme.json applied

[pattyok]

Description

Trying out theme.json. When it is activated, the option to set wide/full width on a block placed inside a group disappears. This happens whether theme.json has any content in it or not. If remove theme.json, the option re-appears. I am working with my own custom theme, but I was able to reproduce with the TwentyTwentyOne theme as well.

Step-by-step reproduction instructions

1. Set the theme to twenty-twenty one
2. Add a group block, add a media-text, columns, group or cover block inside the group
3. Notice the ability to set the width of each of those blocks to wide, full or normal
4. Add a theme.json file to the theme (it doesnt seem to matter what is inside this theme file)

Expected behaviour

I still should be able to set the width of a block when it is nested.

Actual behaviour

I can't set the width of a block when it is nested. The align-wide and align-full options are not shown in the toolbar.

Screenshots or screen recording (optional)

Code snippet (optional)

This is the theme.json I am using - though editing it way down does not seem to make a difference.
https://gist.github.com/pattyok/0e7726a15c59ba8d183d2d1427728b48.js

WordPress information

• WordPress version: 5.8-RC2
• Gutenberg version: 11.0.0
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: maxOS 11.3
• Browser: Chrome

[getdave]

I was able to replicate this. Problem is that this returns an empty array when we have an empty theme.json.

gutenberg/packages/block-editor/src/hooks/align.js

Lines 174 to 175 in fc243d2

	const validAlignments = useAvailableAlignments(
	blockAllowedAlignments

[getdave]

@pattyok Try adding the following to your theme.json

{
    "version": 1,
    "settings": {
        "layout": {
            "contentSize": "840px",
            "wideSize": "1100px"
        }
    }
}

That should restore those alignment controls.

[pattyok]

Yes, those settings are in there, and the problem still exists. Note that this is only an issue for nested blocks.

Here is a better link to my theme.json. https://gist.github.com/pattyok/0e7726a15c59ba8d183d2d1427728b48

[thetwopct]

I guess this is related/the same, but for me add_theme_support( 'align-wide' ) is ignored once theme.json is present.

If I remove layout{} from theme.json or do not specify content or wide sizes within layout{} then add_theme_support( 'align-wide' ) in my theme functions is ignored and blocks do not support wide and full alignment.

I would expect add_theme_support( 'align-wide' ) to still work if layout{} is not present.

[youknowriad]

Hi There!

Thanks for opening the issue, this is an intended behavior, the logic is simple. If you define "widths" (content and wide) widths for your canvas, there's nothing that tells that these widths apply to the nested blocks of any container because that container can be smaller (think a column, a small group block, a buttons block...) meaning we can't just blindly allow nested blocks of these containers to have wide/full alignments, you first have to define the "layout" of their container blocks. So for the group block, this is supported you can, go to the sidebar controls (inspector controls) of your group block and define the widths for the inner blocks of that particular container, you can also inherit the same definition as the global layout config (there's a toggle there). Once you define a layout for a given container, its children will have the possibility to be full/wide aligned.

In other words, wide/full alignments config are container specific and should have always been, this release fixes it with an opt-in mechanism (theme.json) to avoid breaking existing themes.

[pattyok]

Oh wow. I feel like it made a lot more sense before. The language you are using in the interface is completely foreign to me, and after looking at it with this information, I am still having a difficult time grasping how the words match the concept, though I am pretty well-versed on the block environment...

It seems like you are putting a big burden on the user to set the layout of the group every time they put one on the page.

I just want to have a full width background. Inside that background I want to be able to set whether the content inside is also full width, wide or narrow. I would like these widths to be consistent across the site so I do not want to offer the option of setting widths within the interface. I most often use a calculated width for the wide-width so I prefer to just set the class and use css to set that.

What exactly is the problem of being able to set full, wide or none on the inner content of a group? Shouldn't that be the default and then one can have the option to override it and not the other way around?

[youknowriad]

What exactly is the problem of being able to set full, wide or none on the inner content of a group?

The problem is that a block can not break out of its container, if its container is not wide enough, putting it "full width" only means "full width" inside of its container.

[pattyok]

But as a theme editor I can set what full-width inside of wide width means...

[youknowriad]

But as a theme editor I can set what full-width inside of wide width means...

It doesn't matter if you set it, if there's a div between your block and the place where the width is defined (the post content container for instance), your style won't apply properly. Theme authors struggled a lot with this previously, a lot of themes have broken styles and alignments in some situations because of this. Can you give an example of how you'd define that width?

[pattyok]

Can you give an example of how you'd define that width?

That part is fixed. They've removed the inner content container. So now you can simply use
.alignwide > .alignfull { width: 100%;}

[youknowriad]

I'm not sure I follow the CSS you just shared, let me give you an example: Say you have an image block inside a group block inside a column block with a width of 50% and I apply "wide" or "full" on the image block what should happen?

[youknowriad]

Let me continue my reasoning:

• In the example above, the full/wide doesn't make sense in the previous behavior, in some themes it breaks the layout entirely, in others it doesn't do anything because the column is limited to 50%.

• in the new behavior which I think is more correct, you don't have "wide/full" alignments options there unless the group block in the column says, the wide area for my inner blocks is "80%" or "say 500px" while the content area is "60%" (just random numbers). This opens the possibilities for two column layouts with different "wide/full" widths for each column for instance. Or in a home page, you could have different sections one after the other, one of them narrower than the other... Basically, it's not a one size fits all.