Welcome to this lesson where we take a look at creating and using block style variations.
With this lesson, you will:
- describe block style variations and explain how to include them in your theme,
- register your new block style using either PHP or JavaScript, and
- customize core WordPress block styles using the theme.json file.
What is a block style variation and how would you include it in your theme?
Here’s an example using the Twenty Twenty-Four theme.
If we select the H2 here, we see that the With asterisk style has been applied, including an additional CSS class is .style-asterisk.
Register a block style variation
Let’s now take a look at how to register a block style using PHP.
If we take a look at functions.php for the Twenty Twenty-Four theme and scroll down, we see the register block style function where the block style for the core block heading is being modified here with some styles.
Let’s now take a look at how to customize core WordPress block styles using theme.json.
If you take a look at the theme.json file for the Twenty Twenty-Four theme, scroll down to about line 506 where a variations property is added in order to provide the option to round the corners of images.
We can go into the Site Editor and see that in action.
Click on an image and go into the styles panel to see rounded as an option.
Next steps
If you would like to learn more about styles, you can take a look at the block editor handbook or you can always read up on block style variations by going to the theme handbook available to you on WordPress.org.