A Deep-dive Tutorial on the New Style Book

[tinjure20]

As a response to this call, I would like to express my interest in the topic ideas for the Style Book. I have my sight on this new feature for while. Since, this is my first debut contribution, I thought it would be helpful to provide a brief intro here.

I am a self-taught WordPress enthusiast and have been learning and using it over a decade. Recently, I started sharing my experiences as a CSS-Tricks guest writer about my journey to Headless WordPress, Gatsby headless site, headless site with Frontity, and several areas of block themes. Together with the CSS-Tricks editor Geoff Graham, I recently authored this 6-parts theme.json style guide.

If the topic is approved, I would like to pick this up and present a workflow outline expanding from where I left off in this article.

[tinjure20]

If the topic is approved, here is what I intend to cover in this article.

Brief intro

Since the introduced theme.json in WordPress 5.8, block theme styling has moved from the traditional CSS style sheet to theme.json. Since then, there has been concerted efforts to enhance the theme.json features and exposing them to Global styles interface. The introduction of Style Book in WordPress 6.2 is making it easier to create and style block themes with minimal codes.

However, many theme authors are not yet embraced this new method of creating block theme and are still on the fence. Many beginners and onborders to block themes are overwhelmed with the fast face and constant iterations of many features.

I envision this article to provide an overview of block theme styling using the theme JSON, the global styles interface, and the Style Book. The walk-through use case examples include how Style Book can be used to create a new block theme or change the current theme when used with the Create Block Theme plugin.

Brief overview of Block styling

• With theme.json
• Using Global styles
• Proofread with Style book

Use case example of using Style Book as a design tool

• Modifying global (top-level) styles
• Block-level styles
• Top-level (global) custom CSS
• Block-level custom CSS

Resources

• How to Style Your Site with Global Styles | Learn WordPress
• Style Book preview of blocks in global styles | Make WordPress Core
• What's New in Gutenberg 14.8 | Make WordPress Core
• Optional example block registration | Block Editor Reference Guide

Related GitHub Issues

• Global Styles: Add Style Book to Global Styles | GitHub Pull Request #45960
• Global styles: Offer a way to view a document containing all blocks and styles | GitHub Issues #44420
• Global Styles: Add block preview component in global styles | GitHub Pull Request #45719

[bph]

@tinjure20 Today during our editorial group meeting, we discussed your topic idea and there was agreement that it would be a great addition to the Developer blog.

I locked this discussion and created an issue where further discussion can take place.

• A Deep-dive Tutorial on the New Style Book #98

[bph]

The post was published on Jun 21, 2023 The Style Book: a one-stop shop for styling block themes