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.

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. 🤷🏼‍♂️
    – stokesman
    Mar 15 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.
    – Dandry
    Mar 17 at 13:57

1 Answer 1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.