Images, videos, etc lose top margin with WP 6.3 and wp-block-styles

Additional styles included in add_theme_support(‘wp-block-styles’) override WP 6.3 styling for margin-block-start, with the result that margin-tops are set to 0 for various blocks.

In WP 6.2, the style
body .is-layout-flow > * + * {
margin-block-start: var(–wp–preset–spacing–normal);
}
provides a top margin appropriately.

In WP 6.3, this is replaced by the less specific
:where(body .is-layout-flow) > * {
margin-block-start: var(–wp–preset–spacing–normal);
}

Fair enough. But themes which are currently making use of add_theme_support(‘wp-block-styles’) may have problems with this.

The extra block styles include, for example:-
.wp-block-image {
margin: 0 0 1em;
}
which is fine with WP 6.2, because body .is-layout-flow > * + * is more specific, and so the wp-block-image styling does not override the margin-top.

But the less specific styling in WP 6.3 will now be overridden by this wp-block-image styling, with the effect that images will have margin-top set to 0, unless they have specific margin styles applied on the post or page where they are added.

This applies to audio, embed, image, quote, table and video blocks when themes are using add_theme_support(‘wp-block-styles’). Much existing content could be affected on moving to WP 6.3.

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

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

(Test page link provided is using WP 6.3 beta and Twenty twenty-three theme, which has been changed to add theme support for wp-block-styles).

• This topic was modified 1 year, 3 months ago by aileenf.

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