Image block: alignment doesn't work when heading block is below

[brookewp]

Quick summary

Blocks below aligned Image block don't align properly when a heading block is the first block after. Can see the results in gif below:

Steps to reproduce

1. Add image block to page or post
2. Add heading block below
3. Align image to left or right
4. See that float doesn't work and heading stays below image the

What you expected to happen

That the heading would move to the left or the right to wrap, like a paragraph block does.

What actually happened

The heading and all other blocks (including paragraph blocks which work with image alignment usually) do not align / wrap properly.

Context

zd-4539464

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Could replicate with multiple themes.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

Yes, difficult to implement

Workaround details

Marked as difficult fix as they need a plan that supports CSS. To fix with CSS, they need to add clear: none; to heading. the

[Greatdane]

Hey @brookewp, I am unable to replicate this following your steps. (see video). Could you provide more info? Is it happening on any theme you try? Does the text block have any changes?

https://user-images.githubusercontent.com/5075840/145337946-62408bb5-ff2b-49fa-a4ed-fc693d70532d.mp4

[Robertght]

I can replicate this, but I can also do it on a self-hosted website with Gutenberg 12.1.0.

I reported it here: https://github.com/WordPress/gutenberg/issues/37278

I'm not sure if this is intended for now but pinging @chad1008 and @Automattic/flow-patrol-create for a second look.

[Robertght]

I re-tested this and it appears to happen with TwentyTwentyOne and Varia(and the child themes).

cc @jordesign

[chad1008]

I can also replicate, so I compared the CSS between Twenty Twenty (where the headings do wrap around floated images) and Twenty Twenty-One, where they do not. It's definitely dependent on the theme. If we want this to be consistent, I think determining the ideal default behavior and reporting issues for individual themes where needed is the best bet.

The culprit: Twenty Twenty-One (and it sounds like other themes, potentially Varia based from the report above) are applying clear:both to headings in the editor. For Twenty Twenty-One, it looks like this:

.editor-styles-wrapper .wp-block-heading h1,
.editor-styles-wrapper h1, .editor-styles-wrapper .h1,
.editor-styles-wrapper .wp-block-heading h2,
.editor-styles-wrapper h2, .editor-styles-wrapper .h2,
.editor-styles-wrapper .wp-block-heading h3,
.editor-styles-wrapper h3,
.editor-styles-wrapper .h3,
.editor-styles-wrapper .wp-block-heading h4,
.editor-styles-wrapper h4, .editor-styles-wrapper .h4,
.editor-styles-wrapper .wp-block-heading h5,
.editor-styles-wrapper h5, .editor-styles-wrapper .h5,
.editor-styles-wrapper .wp-block-heading h6,
.editor-styles-wrapper h6, .editor-styles-wrapper .h6 {
    clear: both;
    font-family: var(--heading--font-family);
    font-weight: var(--heading--font-weight);
}

This prevents the headings from floating up to sit alongside images as described in this issue. It could actually be intentional preferred. cc @jeffikus for the theme team point of view.