Opinionated styles (add_theme_support(wp-block-styles)) set margin top to 0 for image and other blocks

[aileenf]

Is add_theme_support('wp-block-styles') being deprecated in WP 6.3? If not, maybe it needs to be updated.

The extra block styles include margin settings, for example

.wp-block-image {
   margin: 0 0 1em;
}

This is done for image, audio, embed, table or video blocks.

The top margin styling is overridden in WP 6.2 by styles with targeting such as

body .is-layout-flow > * + * {
   margin-block-start: var(–wp–preset–spacing–normal);
}

so the blocks get the margin-top which they require as per the page layout.

However, WP 6.3 changes the targeting of these styles to, for example

:where(body .is-layout-flow) > * {
   margin-block-start: var(–wp–preset–spacing–normal);
}

This is less specific, with the result that the wp-block-styles margin setting overrides it and will set the margin-tops to 0 for the above blocks.

This will affect existing content on many sites which use this add_theme_support and these blocks.

Twenty twenty-two theme is an example.

To test, create a page with a paragraph followed by an image, in twenty twenty-two theme.

[aileenf]

Maybe those additional styles need to be made less specific too?

Or perhaps only apply to the bottom margin, since that seems to be the main purpose of this style?

[aileenf]

Hi,
This issue still exists in the newly released version of WP 6.3. Does this mean that there is no plan to address this? I know it's not a big issue compared to some, but it does directly affect existing content, and there is no easy CSS override, because of the style hierarchy.

Do I need to remove

add_theme_support('wp-block-styles')

from my themes? (And add any extra styles eg for blockquotes and separators in my own stylesheet?)

[Frank Klein]

This bug affects Twenty Twenty-Two as well.

To reproduce:

1. Create a new post with a paragraph, and an image.
2. View the post on the frontend.

This all works fine in the editor.