Image Block: alignleft/alignright don't respect content width setting with theme.json in theme folder

[ts-mz]

Description

As soon as a theme.json file, regardless of the content, is present in the theme directory (hybrid theme/_s based) most editor defaults will no longer be applied to the editor (typography/width, etc), regardless of whether the respective settings are changed in the theme.json file.

This doesn't seem intuitive (and wasn't the case in previous tests I ran, I think), but there appears to be a specific problem with respect to the image block. While applying the layout settings "contentSize" and "wideSize" in the theme.json file will change the content width, say for the paragraph block, the image block does not respect the new contentWidth. Without explicitly set alignment, the image will be placed at the left margin of the defined content-with, but images floated to the left or right will not respect the content width but instead float to the left or right side of the editor. (screenshot 2)

I've tried this with a number of theme.json-files of varying complexity including those provided by the generator at fullsiteediting.com, but the effect was always the same. As soon as a theme.json file is present in the theme, the image alignment options will not respect the content size.

After removing the theme.json file (regardless of its content), the alignment functionality does respect the (default) content width. (screenshot 1)

Step-by-step reproduction instructions

1. Create a new post in Gutenberg with a couple of paragraphs and an image block.
2. use an appropriate size for the image and float it to the left, so, theoretically, the text could flow around it.
3. add a theme.json with layout-width-settings.
4. see whether the layout width is respected (no theme.json file) or not (with theme.json file present).

Screenshots, screen recording, code snippet

theme.json applied in second screenshot:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "624px",
"wideSize": "624px"
}
}
}

Environment info

Latest Chrome, latest Firefox
Up to date WP, as of today.
Same problem with or without installed Gutenberg plugin.

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

Yes

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

No

[ts-mz]

Question - is this an edge case? I'm wondering because this issue doesn't seem to generate much traction and to me this seems like a fundamental problem for everyone transitioning a custom theme from classic editor to block editor/hybrid theme? (just happened again).

[markhowellsmead]

This layout error has been evident since the first public version of the Block Editor in which theme.json was introduced, and remains evident in all of our projects.

[ts-mz]

@markhowellsmead I've created patterns with groups and inner blocks as a workaround, but I have to explain the bug and wordaround to clients transitioning from classic editor to Gutenberg, as left and right aligning of images is one of the things they usually do themselves. How do you address this in your projects? This seems like a low-hanging fruit, I'm a bit surprised it's not been addressed so far.

[markhowellsmead]

Luckily, the few clients we have who use left- and right-floated images are familiar with the issue and are prepared to work around it. It's not great, given that the solution—to apply the same logic to the editor as to the frontend—is a relatively quick fix.

[tellthemachines]

I can reproduce this with all blocks that have left/right alignment enabled, not just Image. See, for instance, Pullquote with Twenty Twenty Two:

Most default classic themes keep the floated blocks within the content width boundaries (Twenty Nineteen for example):

However, not all of them do. This is Twenty Twenty:

My question is, should this be default behaviour supplied by the editor along with the alignment styles, or configurable by the theme?

[ts-mz]

@tellthemachines

My question is, should this be default behaviour supplied by the editor along with the alignment styles, or configurable by the theme?

I'm not sure it's the same issue in Twenty Twenty, as the images there do apparently adhere to the theme's outer/wide constraint (and theme.json variables aren't taken into account by the editor for some reason - content 400px/ wide 768px).

Whereas the images are floating right to the edge of the editor in a test theme with theme.json variables (in this test-case again: content:400px/wide:768px).

[tellthemachines]

I'm not sure it's the same issue in Twenty Twenty, as the images there do apparently adhere to the theme's outer/wide constraint (and theme.json variables aren't taken into account by the editor for some reason - content 400px/ wide 768px).

It's unlikely to be exactly the same, as classic themes have a different markup structure and layout logic from block themes. What I mean is that presentationally it's a similar effect.

In the meantime I found some additional context here which indicates that this was a deliberate design decision for block themes, as there's no good way to make floated elements align with the main content width column.

I'm going to go ahead and close this issue as it's essentially a duplicate of #33385 and there's no clear way forward to change the current behaviour. Thanks for taking the time to report it!

[markhowellsmead]

In the meantime I found some additional context here which indicates that this was a deliberate design decision for block themes, as there's no good way to make floated elements align with the main content width column.

It used to work, but it's broken now on all of our sites, irrespective of theme. The outer container of a floated element (e.g. figure if it was an image) wasn't floated but was constrained, so that it aligned to the remaining blocks. The float was then applied to the image. This is no longer the case, so none of our clients can use the left/right alignment on any of their content.