You don't need CSS for that: All the ways you can use theme.json for styling

[bph]

Discussed in #302

^{Originally posted by justintadlock September 3, 2024}
Some feedback from devs on a specific project (CC: @mikachan):

They weren’t aware of all the options available in theme.json and didn’t realise how much SCSS could be moved there.

While most of the options are documented in the Theme Handbook, those docs don't really show the various use cases. Sometimes, a walkthrough is needed for folks to understand how these pieces connect.

The goal is here to write a tutorial that's aimed at classic themers (and new themers) on really using theme.json to style their themes. The tutorial would cover things like:

• Defining presets (standard and custom) via the settings object
• Working with the styles object to design basic and more complex designs
• Using style variations (theme, block/section, color, and typography) instead of CSS
• When you must revert back to using CSS/stylesheets

Basically, we have the docs in place that describes what things are. Now it's time to show how to actually use them.

[justintadlock]

It's still a little rough around the edges (I'll do some cleanup tomorrow), but I think this one's ready for its first review: https://docs.google.com/document/d/1llxfUFGUQIfcfkzzV6DNUapouadHlXAjcQ_UF4yHaow/edit?usp=sharing

The article morphed a bit into more of an overview of all the different ways to style things with less focus on the "vs. CSS" part.

[bph]

@justintadlock I am done with a review and left some comments on the post. Learned quite a few new things and appreciate pulling the details into a big picture post. It could use a few more links to other articles on the developer blog in a resource section.

[justintadlock]

Thank you, @bph. I added a Resources section at the end and will do an in-content link review too before publishing (I usually do this anyway).

[justintadlock]

Leaving this open for @marybaum since she has already started on one of the reviews.

[justintadlock]

Social copy:

A few handy tricks and shortcuts for theme authors to master theme.json and build with the Global Styles system:

https://developer.wordpress.org/news/2024/10/17/mastering-theme-json-you-might-not-need-css/

[jonathanbossenger]

Scheduled on social for November 7th