Unexpected alignment of Image block with block themes

[simongarrett]

Description

Alignment of Image blocks appears inconsistent.

In a block theme (e.g. Twenty Twenty-Four), create a page and in it create an Image block, with "Align left" (or right). I expect the image block to align to the left (or right) of the content width.

What happens: the image may align not to content width but may float to the edge of the container.

The setting of “Inner blocks use content width” in the innermost enclosing block appears to be irrelevant. But if any outer enclosing block has this setting "on" (checked), then the image block aligns to the edge of the content width. If no outer enclosing block has “Inner blocks use content width” set on then the image block aligns to the edge of the container, irrespective of the setting in the innermost enclosing block.

This behavour occurs only with alignment "Align left" or "Align right". With default alignment (none) the image aligns with the content block width, as expected.

Is this right: the Image block alignment with "Align left" or "Align right" ignores the “Inner blocks use content width” setting of the innermost enclosing block?

Apologies if I'm reporting expected behaviour, but I haven't found this documented anywhere.

For an example, see https://simongarrett.uk/tt4/image-alignment-test/

Step-by-step reproduction instructions

1. Create a page in Twenty Twenty-Four using the Pages template
2. Include an Image block with "Align left" alignment
3. (The innermost containing block is the Pages template's Content block, which has “Inner blocks use content width” set on. There is an outer Group block with “Inner blocks use content width” set off.)
4. The image will float to the left of the container, not the left of the content width as expected
5. It appears to ignore the “Inner blocks use content width” setting of the innermost containing block and use the "off" setting of the outer enclosing block.

Screenshots, screen recording, code snippet

See https://simongarrett.uk/tt4/image-alignment-test/ for an example.

Environment info

WP 6.5.4 Twenty Twenty-Four v1.1 Behaviour appears browser-independent (I've tried Firefox, MS Edge, Vivaldi) Behaviour appears OS independent (I've tried Windows 10, Kubuntu 24.04)

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

[tellthemachines]

This is expected behaviour.

When "inner block use content width" is set on an outer enclosing block, not only do left and right aligned blocks stick to the content width, but so do also wide and full aligned ones. The rule is that children of a block with "inner block use content width" set have a max-width equal to the content width, but that rule doesn't apply to blocks aligned left, right or full (and it applies with wide width to blocks aligned wide).

If you intend to have a left- or right- aligned block that sticks to the content width, your best bet is probably to wrap the block and its adjacent blocks in a Group, like so:

Hope this helps!

[simongarrett]

Hi @tellthemachines,

Thanks taking the time to explain, much appreciated.

It fits with what I have found. I think I understand what happens, but I don't understand why.

As you say:

The rule is that children of a block with "inner block use content width" set have a max-width equal to the content width, but that rule doesn't apply to blocks aligned left, right or full (and it applies with wide width to blocks aligned wide).

To add to that, the behaviour for blocks aligned left, right or full is not inherited from the immediately enclosing parent block, but from the next one out (the grandparent, if you will). This is why including an additional parent Group block changes the behaviour (although this depends on the grandparent block, which may be the template's Content block, having "Inner blocks use content width" set on).

Can you explain the logic behind this please?

Also, I think it would be good to have this behaviour documented (for example here: https://wordpress.org/documentation/article/image-block/#aligning-images).

Thanks again for your explanation.