Controlling styling support states

2021-08-16

—

by

Being able to control elements of your theme through the theme.json is super powerful; however, you can also turn on and off what is supported or not. There might be an instance where you don’t want custom palettes or link colors, for example. How do you do this? Well, you can through theme.json.

These examples need the Gutenberg plugin with WordPress, and some use experimental features.

Custom colors

This refers to the custom color option by pallettes.

"color": {
	"custom": true,

You can rely on default states, but I actually find declaring even the default state useful in my theme.json as I know what set. The downside of that is a longer theme.json file.

By declaring in theme.json, you can globally declare over per block, although each block has setting options. This is a great way to override block defaults and give a cohesive experience to the creator. Some blocks have certain options; others don’t, so this creates a unified experience.

Custom link coloring

This depends on the block, and if it has the capacity for link colors, it might need the experimental feature in the Gutenberg plugin itself – always check the block supports.

"color": {
       "link": false,

Typography specific

These are again if the block supports.

"typography": {
	"dropCap": true,
	"customFontSize": false,
	"customLineHeight": true,

Experimental borders

This is a new feature, so it comes with a ‘use knowing it might change’ notice, but you can activate border controls where they are supported. Some blocks have this supported for certain border features and not others, so always check which works – not many do all yet.

"border": {
        "customColor": true,
	"customRadius": true,
	"customStyle": true,
	"customWidth": true
},

Simple control

By having these controls, you can not only get to explore the new features but also decide what you should (or shouldn’t) support in your theme. I can see, for example, some on live sites absolutely deciding only to have color palettes and removing a lot of custom features. With these options, amazing defaults are delivered, and branding is kept to pallettes, set options.

If you want to really explore and play with everything possible, turning it all on is great fun, and I’ve not covered everything here, just a few to get you started. Have fun and know it’s easy to activate as it’s all controlled through theme.json.

Explore