WordPress 6.2 has recently added a new feature called the Style Book, which can be found within the Global Styles panel. This feature allows users to preview how global style changes will affect both core and third-party blocks.
The Style Book is especially useful when a theme has many style variations that would be time-consuming to save and preview with different blocks.
The Style Book enables users to visualize their styles and blocks in a resizable panel, making it easier to answer the question, “How are these styles going to look with my blocks?”
Users can also preview styles for individual blocks, allowing for more targeted style adjustments.
The Style Book: A Real-Time Global Styles Manager
The Style Book is a bit like a global styles manager, but you can actually see the changes you’re making in real-time. You can only see this if you’re using a block theme and WordPress 6.2. Here’s a brief overview of how it works:
- In the middle, you have all your content and blocks.
- Tabs along the top provide access to different block types.
- Click on a block to change its styles on the right.
Text Type Blocks
You can change the styles of headings, paragraphs, lists, quotes, code, pre-formatted, pull quotes, table styles, and verse styles. For example, change the typography of headings or paragraph fonts, adjust letter spacing, and more.
In the media tab, you can change the style of image blocks, add borders, or even custom CSS per block. For instance, add a drop shadow to all image blocks on your site.
Here, you can style buttons, columns, group blocks, read more blocks, page breaks, separators, custom links, and home links. You can also edit the style variations of blocks, like changing the background color, text color, or adding shadows to buttons.
Accessing and Using the Style Book
To access the Style Book:
- Go to Appearance > Editor.
- Click into any template and click on the Styles icon on the top right.
- Click on the little eye icon to open the Style Book.
You can reset styles either per block or globally for all blocks. To reset per block, click on the block and access the settings on the right. To globally reset all styles, click on the three dots next to the eye icon and select “Reset to Defaults.”
The Style Book is a great addition to the site editing process, making it much easier to consolidate your design ideas in one place.