Inconsistent Image block alignment/width

Like some others posting on these forums, I’ve found inconsistencies in the way Image blocks align with the text of Paragraph blocks. This occurs in Twenty Twenty-Four theme, and in other block themes I’ve tried (including Abisko). It also applies to other image blocks such as the Cover block, but I’ve not explored them all.

I’d be interested if anyone can explain why this apparently inconsistent behaviour occurs.

In brief: if you put an Image block between two Paragraph blocks, with default Image block alignment (“None”), then the left side of the image aligns with the left side of the text. This is what I would expect. Both text and image are using the content width implied by containing block (or ultimately from the default in themes.json, which is 620 pixels for Twenty Twenty-Four).

However, if you want the text to wrap around the image, you need to set the Image block alignment to “Align left” (or “Align right”). I would expect the image to align as before with the left (or right) of the image aligned with the left (or right) of the text. Often this is not what happens! In most cases, the image will instead align with the left (or right) of the container.

I’ve shown examples of this behaviour at https://simongarrett.uk/tt4/image-alignment-test/.

I think I know what is happening, but I don’t know why! And none of the documentation mentions this behaviour. Can anyone explain?

I think this is what happens:

Text and media blocks generally take their width from the Layout setting in the innermost containing block. This is specified in the “Inner blocks use content width” toggle. Unless you have container blocks in the page (Groups, Rows, Columns, Stacks etc) then the block containing the content is likely to be the “Content block” in the page template. For the Pages template in Twenty Twenty-Four, this has the “Inner blocks use…” toggle set ON but with no values set, so normal content width defaults to 620 pixels.

Image blocks use this width if the alignment is “None” (the default) but do something different if the alignment is “Align left” or “Align right”. In these cases, the Image block ignores the content width specified in the innermost containing block, and looks for the content width from an outer block, starting with the next outer block. With Twenty Twenty-Four, there is an outer Group block around the Content block, and this has the “Inner blocks use…” toggle set OFF. This causes the width to be the entire container width.

There is an easy fix that works in many cases, but might involve work to retro-fit in some cases. To apply globally: edit the Pages template and put the Content block inside a new Group block, the latter having “Inner blocks use content width” set ON with blanks for the parameter values. To do it locally, simply embed any affected Image blocks in a Group block. The result is that when the Image block decides to ignore the content width specified by the innermost containing block, it will find another one outside with “Inner blocks use content width” set ON.

However, I’d be grateful if anyone can explain why the Image block behaves this way (and why it isn’t documented anywhere).

• This topic was modified 1 year, 9 months ago by simongarrett.
• This topic was modified 1 year, 9 months ago by simongarrett.
• This topic was modified 1 year, 9 months ago by simongarrett. Reason: typos
• This topic was modified 1 year, 9 months ago by simongarrett.

The page I need help with: [log in to see the link]