How to use the WordPress Style Book with your block theme

WordPress 6.2 introduces an exciting new feature for block themes: the WordPress Style Book! Learn how to find and use this valuable tool with your next WordPress block theme.

Learning outcomes

1. Use the WordPress Style Book to customize your block theme.

Comprehension questions

1. What icon makes the Style Book appear?
2. What are the five sections you can style using the Style Book?
3. Why is it a good idea to stylize individual blocks sparingly?

Transcript

One of WordPress 6.2’s most exciting new features is called the “Style Book”. This Style Book creates a visual representation of all the styles that will automatically be applied across your website, saving you time and letting you design–and actually see–the changes you make, all from one dashboard. From colors to fonts to button sizes, this preview gives you a strong idea from the start of a website about what your new block theme will look like. At the end of this tutorial, you will be able to use the WordPress Style Book to customize your block theme. Let’s find out how.

Imagine you are creating a new website using the block theme Twenty Twenty-Three. To find the Style Book, from your dashboard, hover your mouse over the “Appearance” navigation link in the left-hand sidebar and select “Editor”.

Then, click on the site editor to the right.

Click the “Styles” icon in the top right-hand corner.

Then select the “Eye” icon that appears.

This is your block theme’s personal Style Book.

From here, you can see how the stylistic changes you make will affect the appearance of your website. Depending on your block themes options, you can make sweeping changes to your fonts,

change your background color,

and in some themes, change your layout options.

This WordPress Style Book provides five tabs:

Text,

Media

Design

Widgets

and Theme

so that you can quickly see the changes you make take effect all without having any content on your site yet.

Any future content I write or any existing content on my website that uses these styles will have this style applied to it.

The Style Book also allows me to add individual styles onto specific blocks. For example, say I am a writer and will often use the Quote block on this website.

I would like to customize just this one block because I would always like my quotes to use a certain font and stand out from the rest of the text. I navigate to the Quote block by clicking it on my screen.

This takes me to the Quote block. From here I can make changes to the font that only affect this Quote block.

I select a font that I’d like to use for my future or existing quotes.

And I make it a little larger so that it will stand out.

Finally, I make it italic. Now my quote block will always stand out the way that I’ve just styled it even if I make sweeping changes to the rest of the text on my website. Here’s a pro tip. To avoid a theme design headache in the future, I recommend that you stylize individual blocks sparingly. It’s important to note that if you make individual changes block by block changes that you intend to make globally to the rest of your website will not affect this particular block.

Notice how I changed the font globally under General styles text. Did you notice that the quote block I just styled did not change? Let’s say you find and install a cool new font that you’d like to use everywhere on your website. If you styled every single text block individually, when you make what you hope will be a big change site-wide to all the text, your individually styled text blocks will not change. You’ll need to style them again. To reset a single block style back to the defaults, I can head back to the blocks individual style settings either by clicking on it again, or by navigating to it in the Styles panel on the right by clicking blocks then searching for “Quote.”

If I reset this block to the default font, that tells WordPress to use the font that I set in the site wide global styles you see when you first enter this Global Styles icon.

Now, that will allow me to style my websites, fonts, quotes and all in one place. The changes I will make apply globally to my text site-wide

rather than just in this individual Quote block mean that if I change my font, it will now also apply to this individual block.

With thoughtful design, I can get started working on my new website from scratch, or I can give my existing content a brand new look with a few clicks of a button.

The Style Book also allows me to double check my website for accessibility. For example, I noticed that the Calendar widget on this theme is not accessible with the color scheme that I picked. The contrast is not high enough. So for this specific instance, I customize this block to my liking. And now anyone who requires a strong color contrast will be able to read this calendar.

Now you know how to use the WordPress Style Book with your block theme. To learn more about the features coming out in WordPress 6.2, please visit learn.wordpress.org for more tutorials online workshops and courses See you next time.