2

I am trying to change the default top spacing (margin) for the Embed block used in Gutenberg. I noticed that for some reason, the default setting is

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

which resets the top margin and removes the space between the preceding component.

My site is currently running a child block theme. I decided to apply global style override by adding the following to theme.json:

{ "version": 2, "$schema": "https://schemas.wp.org/wp/6.4/theme.json", "styles": { "blocks": { "core/embed": { "spacing": { "margin": { "top": "2rem" } } } } } }

And this in fact adds the new top margin to the CSS, however it's earlier in the CSS compared to the original one, thus the override does not work:

Chrome dev tools

I checked the location of that base 0 0 1em style and it is in:

/wp-includes/blocks/embed/theme.css

Is there a smart way to override that spacing? I'd prefer to avoid overriding in theme's style.css as this seems wrong since theme.json has appeared.

It is probably worth mentioning that I am aware that I can change the spacing through Gutenberg Editor, however I want to apply the default, globally, when it comes to spacing.

Improve this question
2
  • It seems wrong that the theme.json change you made gets output earlier than the default. It may be worth checking if it’s a reported bug and reporting it if not. It seems ideally the change would replace the default not have both output. 🤷🏼‍♂️ Commented Mar 15, 2024 at 17:04
  • 1
    I could not find anything that would related to my issue. Created a bug, if anyone is interested: github.com/WordPress/gutenberg/issues/59934. Commented Mar 17, 2024 at 13:57

1 Answer 1

Reset to default
2

Use a Global Styles Filter to override the style:

add_filter( 'wp_theme_json_data_default', function ( $theme_json ){ $new_data = array( 'version' => 2, 'styles' => [ 'blocks' => [ 'core/embed' => [ 'spacing' => [ 'margin' => [ 'top' => '2rem' ] ] ] ] ] ); return $theme_json->update_with( $new_data ); });

An alternative that may also work is using the Global Styles UI in the (Site) Editor to change the default style of the block. Yet I think that’s not a viable option if you want your override to be part of a version-controlled theme.

Improve this answer
1
  • I was not aware of this filter, thank you. But this also seems like a workaround... Commented Mar 17, 2024 at 13:34

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.