Make WordPress Core

Opened 9 months ago

Last modified 8 months ago

#58815 new defect (bug)

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

Reported by: aileenf's profile aileenf Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3
Component: Editor Keywords:
Focuses: Cc:

Description (last modified by sabernhardt)

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.

Change History (5)

#1 @aileenf
9 months ago

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?

#2 @sabernhardt
9 months ago

  • Component changed from General to Editor
  • Description modified (diff)

#3 @aileenf
8 months ago

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?)

#4 @aileenf
8 months ago

  • Summary changed from Optinionated styles (add_theme_support(wp-block-styles)) set margin top to 0 for image and other blocks to Opinionated styles (add_theme_support(wp-block-styles)) set margin top to 0 for image and other blocks

#5 @Frank Klein
8 months ago

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.

Last edited 8 months ago by Frank Klein (previous) (diff)
Note: See TracTickets for help on using tickets.