CSS reset in FSE/Block themes

When working with a block theme, it is generally recommended to use theme.json for defining global styles and styles.css for more specific styles related to individual blocks or components. In the theme.json file, you can define the CSS reset and global styles under the global section. For example:

{
  "version": 1,
  "settings": {
    "color": {
      "text": "#333333",
      "background": "#f5f5f5"
    }
  },
  "global": {
    "css": {
      "normalize": "path/to/normalize.css",
      "custom": {
        "*": {
          "box-sizing": "border-box"
        },
        "html": {
          "font-size": "62.5%"
        }
      }
    }
  }
}

In this example, you would replace path/to/normalize.css with the path to your own version of the normalize.css file. You can also define other global styles by adding additional properties to the custom object.

In the styles.css file, you can write more specific styles for individual blocks or components, which will be applied on top of the global styles defined in theme.json.

/* Example styles for a specific block */
.wp-block-my-block {
  background-color: #f5f5f5;
  padding: 2rem;
}

However, it is important to note that some blocks may override or reset certain styles, so you may need more specific CSS selectors to target the elements you want to style.

Thanks Faisal, for taking the time to write such a detailed reply ??

I cannot get it to work, though. The “global” property is coming back as not allowed. I’m on version 2, so maybe this has changed. I’ve tried to put the link to the reset file and the “custom” property inside “styles” but that did not work either.

It does seem to me as if theme.json is really just for those styles that you want the user to be able to change. Everything else seems to have to go in a regular CSS file, as I cannot see any options for media queries and more complex CSS in theme.json either.

You’re right, and I apologize for the confusion. The global property was only available in version 1 of the Full Site Editing (FSE) theme specification, but it has been removed in version 2.

In version 2, you can define global styles in the style.css file using standard CSS syntax. You can import the normalize.css file as you normally would in a WordPress theme by adding an @import rule at the top of your style.css file:

@import url('path/to/normalize.css');

Then, as needed, you can add your global styles using regular CSS syntaxes, such as media queries and other advanced features. For example:

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}

These styles will be applied to all blocks and templates in your theme. To allow users to customize certain global styles, you can define custom theme settings in the theme.json file and reference them in your CSS using the var() function. For example:

/* Define a custom theme setting */
{
    "version": 2,
    "settings": {
        "my_custom_color": {
            "label": "My Custom Color",
            "type": "color",
            "default": "#ff0000"
        }
    }
}

/* Use the custom theme setting in your CSS */
body {
    background-color: var(--wp-theme--my_custom_color);
}

I hope this helps to clear things up for you! If you have any further questions, please don’t hesitate to reach out.

Thank you!