block editor - CSS Selector to override default theme.json custom properties in theme stylesheet

I need to specify some more finicky media query driven styles to override theme.json's default custom properties. Abbreviated example below. This example works, however I don't like that I have to use two selectors to make it work on both the front end and in the block editor.

:root {} doesn't work on the front end, as it is overridden by the default root: {} declarations in Wordpress' global-styles-inline-css, which load after the theme stylesheet.

:root body {} has enough specificity to work on the front end, but the editor doesn't have/recognize body.

Is there a single selector specific enough to work for both? Or should my theme stylesheet be enqueueing after global-styles-inline-css on the front end?

Example usage:

:root body, //for specificity on the front-end
:root { // for recognition in the block editor
    @media min-width(1020px){
        --wp--preset--font-size--xxl: 3.25rem;
        --wp--preset--font-size--xl: 2.75rem;
        --wp--preset--font-size--lg: 2.375rem;
        //etc.
    }
    // etc.
}

I need to specify some more finicky media query driven styles to override theme.json's default custom properties. Abbreviated example below. This example works, however I don't like that I have to use two selectors to make it work on both the front end and in the block editor.

:root {} doesn't work on the front end, as it is overridden by the default root: {} declarations in Wordpress' global-styles-inline-css, which load after the theme stylesheet.

:root body {} has enough specificity to work on the front end, but the editor doesn't have/recognize body.

Is there a single selector specific enough to work for both? Or should my theme stylesheet be enqueueing after global-styles-inline-css on the front end?

Example usage:

:root body, //for specificity on the front-end
:root { // for recognition in the block editor
    @media min-width(1020px){
        --wp--preset--font-size--xxl: 3.25rem;
        --wp--preset--font-size--xl: 2.75rem;
        --wp--preset--font-size--lg: 2.375rem;
        //etc.
    }
    // etc.
}

• css
• block-editor
• wp-enqueue-style
• theme.json

Share Improve this question edited Apr 28 at 11:51 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Apr 28 at 2:22 StudioAlStudioAl 51611 gold badge44 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You could try to increase specificity with something like html:root

html:root {
  @media (min-width: 1020px) {
    --wp--preset--font-size--xxl: 3.25rem;
    /* etc */
  }
}

Or you could get your styles to load after the global styles as an option as you mentioned if you want to leave it as just :root