How to trace CSS to source in Editor, style JSON, theme.json, etc.

  • Dave Loebig

    (@pacesettermedia)


    1 year, 2 months ago

    Anybody have ideas on how to trace CSS found on the front end to the customization in the editor, or style json, or theme.json, or plugin, etc.

    Before .json, you could look at the CSS on the front end and often find where it is loading. With theme.json, you can still find the CSS on the front end, but that doesn’t easily trace back to the source.

    Thanks.

Viewing 1 replies (of 1 total)

  • Hi Dave,

    there are two scenarios for stylesheets, controlled by the wp_should_load_separate_core_block_assets function:

    1. Load all stylesheets, no matter whether the block is in use or not. This is the default for classic themes.

    In this scenario, the core block styles will all be part of the wp-block-library-css.

    All styles that come from the theme.json (or modifications the user did via the global styles sidebar in the site editor) will be part of the global-styles-inline-css stylesheet.

    2. Only the stylesheets for the blocks in use are loaded. This is the default for block themes.

    In this case, there is no block-library-stylesheet. Instead, if the block itself has a stylesheet, it’ll be loaded as wp-block-quote-css.

    The global-styles-inline-css stylesheet still exists, though it only contains the styles that are not block-specific: classes for the color palette, styles that are for the body, etc.

    If the theme provided block-specific styles via theme.json, these are enqueued as inline stylesheet for the blocks that are in use: wp-block-quote-inline-css if there is any quote, etc. Note that these stylesheets have the -inline-css suffix.

    Hope this helps clarify how styles are enqueued.

    Best,
    André

Viewing 1 replies (of 1 total)
  • The topic ‘How to trace CSS to source in Editor, style JSON, theme.json, etc.’ is closed to new replies.