Tutorial on using block style variations in WordPress 6.6

[justintadlock]

Block style variations will see some major improvements in WP 6.6:

• Themers can define styles for custom variations via theme.json, which was previously limited to Core-only variations (styles.blocks.blockName.variations).
• They can define variations for multiple blocks via styles.blocks.variations.
• 👆 These can also be defined as individual JSON files under the /styles folder with the blockTypes property.
• Style variations can contain styles for nested elements and blocks (i.e., "section" styles).

See:

• Extending block style variations as a mechanism for styling sections of content gutenberg#56632

These are major improvements to the block style variations system that could potentially save 100s of lines of custom CSS and consolidate most theme styling to the standard theme.json.

It's also a good opportunity to call for testing of potential breaking issues with reduced style specificity:

• Try reducing specificity of global styles selectors only. gutenberg#60106
• Reduce specificity of block library styles conflicting with block supports gutenberg#59457

A tutorial for the Dev Blog would be welcome that explores what each of these changes mean for styling themes and how that compares to what was previously possible. It should also explore any potential pitfalls or areas where you still need to rely on custom code. But the big thing is to share the major "wins" that these update bring to theme design.

A side note to consider: this could be the precursor to opening custom style variations via the Styles panel in the editor UI.

[justintadlock]

Related dev note: WordPress/gutenberg#57908 (comment)

[bph]

This topic has been approved. Please continue the conversation on the issue

• Tutorial on using block style variations in WordPress 6.6 #270

[colorful-tones]

@bph @justintadlock I'm closing this as completed. Feel free to re-open if I missed something.