[wp-trac] [WordPress Trac] #58815: Optinionated styles (add_theme_support(wp-block-styles)) set margin top to 0 for image and other blocks

[WordPress Trac]

#58815: Optinionated styles (add_theme_support(wp-block-styles)) set margin top to
0 for image and other blocks
--------------------------+------------------------------
 Reporter:  aileenf       |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Changes (by sabernhardt):

 * component:  General => Editor


Old description:

> 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 targetting
> 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 targetting 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.

New description:

 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.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58815#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform