Tutorial on using block style variations in WordPress 6.6

[bph]

Discussed in #268

^{Originally posted by justintadlock June 4, 2024}
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]

I'm working on this post here: https://docs.google.com/document/d/1tLiVODp8FYo8J8CkXml58oUghhVwtSrOqByudRG2OBU/edit?usp=sharing

[justintadlock]

This one is ready to review now.

[ndiego]

Great article @justintadlock. Added some notes/suggestions.

[colorful-tones]

@justintadlock I read through about 3/4. I mainly wanted to understand this feature because I feel out of the loop. I left some relatively high-level reflections as comments in the document. Please feel free to disregard them and consider them just me thinking out loud. Thanks for writing this up and taking the time to share it all.

[justintadlock]

Finished with the first review.

@colorful-tones - Want to read the last 1/4 and wrap up the 2nd review?

[colorful-tones]

@justintadlock I finished reading 😄 .

I like the update with Section 1 + Section 2; it solves the contextual use case well. 👍
I made one small suggestion. Looks great to me!

I particularly like the authenticity of the following:

It’s a simple thing, but it made me happy.

🫶 🤘

[justintadlock]

Thanks, @ndiego and @colorful-tones! I've went through everything and did another editing pass myself. Planning to publish tomorrow.

Note to self: Check if the linked Dev Note in the post is published. If not, reword the sentence and add the Dev Note link later.

[justintadlock]

Social Copy:

Learn how to use Block Style Variations for section styling and more with WordPress 6.6:

https://developer.wordpress.org/news/2024/06/21/styling-sections-nested-elements-and-more-with-block-style-variations-in-wordpress-6-6/

[bph]

scheduled for July 24