Skip to content

Unexpected alignment of Image block with block themes #62484

@simongarrett

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] ImageAffects the Image Block[Type] QuestionQuestions about the design or development of the editor.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions