For the (Very) Advanced testing steps of the “Thrive with theme.json” call, I developed a new theme called Written, wrote my comments in issues raised as I developed the theme, and documented other questions in bobbingwide/bobbingwide#31.

In this post I’ll try to summarise my conclusions.

TL;DR – you need both theme.json and style.css

theme.json versus style.css

It’s coming with techno
designed to get smiles
No CSS needed
when you've got Global Styles.

Contrary to what I wrote in “My Favourite Theme”, it’s still necessary for a theme to deliver stylesheets.

theme.json

The primary purpose of theme.json is to define some settings and default styles for the theme.

The settings indicate what functionality is allowed globally and any variations for individual blocks and their elements.

settings replace many of the capabilities defined using add_theme_support().

The more true‘s you have in the settings the more freedom you give to the user.

Settings defined for the theme trump the settings defined for a block in its block.json file.

styles define the default values for the supported settings.

styles also apply globally and to individual blocks.

style.css

style.css is needed for theme specific styling that isn’t supported by theme.json.

For example, at this moment in time, it’s necessary to use a stylesheet to define block styles, where the className attribute is of the form is-style-customstylename.

I chose to use style.css; it was slightly easier than registering my own stylesheets.

Note: If you don’t use register_block_style() it’s still possible to cause a block to take on a particular style by using the Additional CSS class(es).

What I still don’t understand

Defaults?

I often don’t know what the Default values are.

You have to change the setting in an attempt to work out what the default was by analysing any visual change in the blocks.

The problem’s harder when the default values for padding or margin vary by side.

Customization options

Which blocks support which customization options?

For example, the Paragraph block supports Link colour but the List block doesn’t.

The Heading block supports Font weight but the Paragraph block does not.

How do you find out?

Global styles – blocks

In Global Styles why isn’t there a section for every block?

Some blocks which are not listed are: Audio, Categories.

I assume this is because these blocks don’t use block.json and or don’t have a supports section.

"supports": {
    "html": false,
    "color": {
      "gradients": true,
      "text": false,
      "background": true,
      "link": false
    },
    "typography": {
      "fontSize": true,
      "lineHeight": true
    }

Actually, I think I do understand it. I’ve developed a couple of blocks that implement the supports mechanism and have seen how theme.json settings affect how the block appears to the end user.

It’s complicated.

What did I achieve in theme.json?

My theme.json file is approximately 250 lines of code.

• Most of it appears to work.
• You can’t write comments in a JSON file; I should have written better commit messages.
• I did manage to
  • set the default fontSize for several blocks
  • define a default background colour and padding for the Group block
  • define a default margin for the Heading block
  • style the border for the separator block.

style.css, which I mostly used for some block styles, is 150 lines.

Note: I also have a custom.css file, copied from the original theme, that provides styling for content already present on the website. I haven’t yet determined how much of this CSS is needed.

What I couldn’t do using theme.json

I was unable to use theme.json to

• Style menus
• Style query navigation
• Enable customFontWeight by individual block
• Define my own font weights
• Create a restricted colour palette for the Heading block.
• Enable customFontSize for the Site Title block if the default customFontSize was false.

What I couldn’t do in the editor

• Set negative margins for blocks that support customMargin.

What I needed to do in style.css

• Add height: auto to prevent images from stretching
• Style select dropdowns for the Archives and Categories blocks
• Style input fields for forms.
• Remove the bottom border from the Separator block. This acts as a workaround to Updated css of block separator introduces double lines on themes .

What I got wrong

• I think some of my CSS styling needs to be more precise.

References

• FSE Outreach Experiment: Call #8 – thrive with theme.json .
• Global Styles – theme.json
• Block Editor Handbook – Styles – register_block_style
• Theme shaper: Blockbase: A parent theme for block themes – read Ben Dwyer’s explanation of block themes, globals styles, and how theme.json and CSS are both needed.