search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
36 stars 2 forks source link

Tutorial on using block style variations in WordPress 6.6 #270

Closed bph closed 1 week ago

bph commented 3 weeks ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/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: - https://github.com/WordPress/gutenberg/issues/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: - https://github.com/WordPress/gutenberg/pull/60106 - https://github.com/WordPress/gutenberg/pull/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 commented 2 weeks ago

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

justintadlock commented 1 week ago

This one is ready to review now.

ndiego commented 1 week ago

Great article @justintadlock. Added some notes/suggestions.

colorful-tones commented 1 week ago

@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 commented 1 week ago

Finished with the first review.

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

colorful-tones commented 1 week ago

@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 commented 1 week ago

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 commented 1 week ago

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/