WordPress 5.8 and theme.json

With the imminent release of WordPress 5.8 I took some time out over the last few days to take a look at what are some major updates to the software.

The most impactful of the changes are around the introduction of ‘Block Themes’ and the introduction of the new theme.json file.

One of my bugbears with WordPress since the introduction of the Gutenberg editor has always been how CSS is handled between the back-end and front-end of websites. So when I read about the concept behind the new theme.son file that got my attention as it addresses just this problem.

The theme.json file enables developers to specify theme settings in a single file for things such as Font sizes, Colours and individual elements such as Headings or even Blocks. These settings are shared between the Block Editor and the website front-end which means no longer having to manage these settings across multiple different files.

Sounds great yes? But what are the catches?

Well, the problems with managing CSS when it’s in the theme.json file is that there is no support for media queries. So if you specify a font size of 60px for your H1 tags then that’s the size they will be regardless of the screen size.

To work around these limitations I eventually settled on a solution which goes like this:-

1. Set a base font size style (in pixels) in the theme.json file

2. Set my preset font sizes in EM units in the theme.json file (which makes them relational to the base font size)

3. Set up some media queries (for the Body element) in my Theme CSS file to reduce the base font size below certain screen widths on the front-end.

4. Set up some media queries (for the editor-styles-wrapper element) in my Themes Block Editor CSS file to reduce the base font size below certain screen widths on the back-end.

While not ideal, this solution does sidestep the issue of not having media query support in the theme.json file. Perhaps in future versions WordPress will add this missing capability to what is otherwise a very welcome new feature.