Style Book preview of blocks in global styles

In WordPress 6.2, a new feature has been added to the global styles interface that allows a user to preview every blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. that can be inserted into their site. The Style Book can be accessed via the eye icon in the Styles headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. within global styles. It provides an at-a-glance preview of how global styles will affect the display of any block, without the user having to insert those blocks into a template.

Following the structure of the block inserter, the Style Book will be filled in with all blocks that can be inserted by this tool and also have an “example” set. ”  example is a parmeter in the block.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file..

The categories/tabs in the Style Book also follow the same categories used by the block inserter. For block developers that already set an example for custom blocks, no additional parameters are required for the block to be visible in the Style Book.

Within the Style Book, a user can click on a preview of a block and it will navigate them to the block-level global styles where the block’s styling can be adjusted. Overall, this makes it easier for a user to preview changes to block-level global styles, without having to insert the block within the current template.

Even if a block has no direct styling controls, it is still valuable for blocks to appear in the Style Book, so that the user can see how the overall site design and styling settings will affect every block that can be inserted. For example, site-wide background and text colors, or font family or font sizes generally affect how all blocks will be displayed.

However, there still might be cases where block developers wish to hide blocks from being inserted and therefore also hide them from the Style Book. The two ways to hide blocks from the Style Book are:

  • If the block has supports.inserter set to false within the block.json file, then the block will be hidden from both the block inserter and the Style Book.
	"supports": {
		"inserter": false

  • If the block does not have an example set.

The conditions of when to show or hide blocks from the Style Book are intentionally tied to the same logic as used by the block inserter. The principle behind the Style Book is that if a user can insert or view a preview of the block, then it should also be previewed within the context of global styles.

Props to @bph, @webcommsat and @oglekler for review.

#6-2, #dev-notes, #dev-notes-6-2