{"id":374910,"date":"2022-11-07T06:05:11","date_gmt":"2022-11-07T14:05:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374910"},"modified":"2024-05-01T10:38:17","modified_gmt":"2024-05-01T17:38:17","slug":"managing-css-styles-in-a-wordpress-block-theme","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/managing-css-styles-in-a-wordpress-block-theme\/","title":{"rendered":"Managing CSS Styles in a WordPress Block Theme"},"content":{"rendered":"\n<p>The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for <a href=\"https:\/\/css-tricks.com\/fluid-typography-wordpress-block-themes\/\">adding fluid type support in WordPress<\/a> by way of <code>theme.json<\/code>, a new file that <a href=\"https:\/\/make.wordpress.org\/core\/2022\/08\/01\/moving-core-block-styling-to-json\/\" rel=\"noopener\">WordPress has been pushing hard<\/a> to become a central source of truth for defining styles in WordPress themes that support full-site editing (FSE) features.<\/p>\n\n\n\n<p>Wait, no <code>style.css<\/code> file? We still have that. In fact, <code>style.css<\/code> is <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" rel=\"noopener\">still a required file<\/a> in block themes, though its role is greatly reduced to meta information used for registering the theme. That said, the fact is that <code>theme.json<\/code> is still in active development, meaning we\u2019re in a transitional period where you might find styles defined there, in <code>styles.css<\/code> or even at the block level.<\/p>\n\n\n\n<p>So, what does styling actually look like in these WordPress FSE days? That\u2019s what I want to cover in this article. There\u2019s a lack of documentation for styling block themes in the <a href=\"https:\/\/developer.wordpress.org\/themes\/block-themes\/\" rel=\"noopener\">WordPress Theme Developer Handbook<\/a>, so everything we\u2019re covering here is what I\u2019ve gathered about where things currently are as well as discussions about the future of WordPress theming.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"the-evolution-of-wordpress-styles\">The evolution of WordPress styles<\/h3>\n\n\n<p>The new developmental features that are included in <a href=\"https:\/\/make.wordpress.org\/core\/6-1\/\" rel=\"noopener\">WordPress 6.1<\/a> get us closer to a system of styles that are completely defined in <code>theme.json<\/code>, but there is still be plenty of work to do before we can fully lean on it. One way we can get an idea of what\u2019s coming in future releases is by using the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" rel=\"noopener\">Gutenberg plugin<\/a>. This is where experimental features are often given a dry run.<\/p>\n\n\n\n<p>Another way we can get a feel for where we are is by looking at the evolution of <a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/tree\/trunk\/src\/wp-content\/themes\" rel=\"noopener\">default WordPress themes<\/a>. To date, there are three default themes that support full-site editing:<\/p>\n\n\n\n<ul>\n<li><strong><a href=\"https:\/\/wordpress.org\/themes\/twentytwentyone\/\" rel=\"noopener\">Twenty Twenty-One<\/a> (TT1):<\/strong> This is the first classic version of a block-compatible default theme. There is also a block version (<a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\" rel=\"noopener\">TT1 blocks<\/a>) and has since been a go-to resource for block theming. However, all <a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/blob\/trunk\/src\/wp-content\/themes\/twentytwentyone\/style.css\" rel=\"noopener\">5,900 lines of CSS<\/a> in TT1 is in <code>style.css<\/code>. <a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/tree\/trunk\/src\/wp-content\/themes\/twentytwentyone\" rel=\"noopener\">There is no <code>theme.json<\/code> file.<\/a> TT1 Blocks is the first look we got at styling in the Block Editor era, and we can consider it a teaser more than a model.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/wordpress.org\/themes\/twentytwentytwo\/\" rel=\"noopener\">Twenty Twenty-Two<\/a> (TT2):<\/strong> This is the first true block-based default WordPress theme, and it\u2019s where we first meet <code>theme.json<\/code>. The file contains only <a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/blob\/trunk\/src\/wp-content\/themes\/twentytwentytwo\/theme.json\" rel=\"noopener\">373 lines of code<\/a>. Its lead developers had made concerted efforts to make this a CSS-less theme; however, <a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/blob\/trunk\/src\/wp-content\/themes\/twentytwentytwo\/style.css\" rel=\"noopener\"><code>style.css<\/code> still shipped with just under 150 lines of code<\/a> since not all of the issues with <code>theme.json<\/code> were resolved in the experimental Gutenberg plugin ahead of release.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\" rel=\"noopener\">Twenty Twenty-Three<\/a> (TT3):<\/strong>  This is what shipped in WordPress 6.1, and it is the first example of a theme <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\/blob\/trunk\/style.css\" rel=\"noopener\">without any CSS in the required <code>style.css<\/code> file<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>But don\u2019t start trading the CSS in <code>style.css<\/code> for JSON property-value pairs in <code>theme.json<\/code> just yet. There are still CSS styling rules that need to be supported in <code>theme.json<\/code> before we think about doing that. The remaining significant issues are currently being discussed with an aim to fully move all the CSS style rules into <code>theme.json<\/code> and consolidate different sources of <code>theme.json<\/code> into a <a href=\"https:\/\/wordpress.org\/support\/article\/styles-overview\/\" rel=\"noopener\">UI for for setting global styles<\/a> directly in the <a href=\"https:\/\/learn.wordpress.org\/tutorial\/intro-to-the-site-editor-and-template-editor\/\" rel=\"noopener\">WordPress Site Editor<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_0E3D9258006FA80F49D579E6E621F94A8B2015A8D0AB7B50F04BB1E33355C901_1666794950063_global-styles-block-settings.png?resize=1024%2C521&#038;ssl=1\" alt=\"\" class=\"wp-image-374911\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_0E3D9258006FA80F49D579E6E621F94A8B2015A8D0AB7B50F04BB1E33355C901_1666794950063_global-styles-block-settings.png?resize=1024%2C521&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_0E3D9258006FA80F49D579E6E621F94A8B2015A8D0AB7B50F04BB1E33355C901_1666794950063_global-styles-block-settings.png?resize=300%2C153&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_0E3D9258006FA80F49D579E6E621F94A8B2015A8D0AB7B50F04BB1E33355C901_1666794950063_global-styles-block-settings.png?resize=768%2C390&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_0E3D9258006FA80F49D579E6E621F94A8B2015A8D0AB7B50F04BB1E33355C901_1666794950063_global-styles-block-settings.png?resize=1536%2C781&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_0E3D9258006FA80F49D579E6E621F94A8B2015A8D0AB7B50F04BB1E33355C901_1666794950063_global-styles-block-settings.png?w=1920&amp;ssl=1 1920w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The Global Styles UI is integrated with the right panel in the Site Editor.&nbsp;(Credit:&nbsp;<a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/how-to-style-your-site-with-global-styles\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn WordPress<\/a>)<\/figcaption><\/figure>\n\n\n\n<p>That leaves us in a relatively tough spot. Not only is there <a href=\"https:\/\/make.wordpress.org\/core\/2022\/04\/13\/core-styles-and-theme-customization-the-next-steps\/\" rel=\"noopener\">no clear path for overriding theme styles<\/a>, but it\u2019s unclear where the source of those styles even come from \u2014 is it from different layers of <code>theme.json<\/code> files, <code>style.css<\/code>, the Gutenberg plugin, or somewhere else?<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"why-themejson-instead-of-stylecss\">Why <code>theme.json<\/code> instead of <code>style.css<\/code>?<\/h3>\n\n\n<p>You might be wondering why WordPress is moving toward a JSON-based definition of styles instead of a traditional CSS file. Ben Dwyer from the Gutenberg development team eloquently articulates why the <a href=\"https:\/\/make.wordpress.org\/core\/2022\/08\/01\/moving-core-block-styling-to-json\/#comment-43544\" rel=\"noopener\"><code>theme.json<\/code> approach is a benefit for theme developers<\/a>.<\/p>\n\n\n\n<p>It\u2019s worth reading Ben\u2019s post, but the meat is in this quote:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Overriding CSS, whether layout, preset, or block styles, presents an obstacle to integration and interoperability: visual parity between the frontend and editor becomes more difficult to maintain, upgrades to block internals may conflict with overrides. Custom CSS is, furthermore, less portable across other block themes.<\/p>\n\n\n\n<p>By encouraging theme authors to use <code>theme.json<\/code> API where possible, the hierarchy of \u201cbase &gt; theme &gt; user\u201d defined styles can be resolved correctly.<\/p>\n<\/blockquote>\n\n\n\n<p>One of the major benefits of moving CSS to JSON is that JSON is a machine-readable format, which means it can be exposed in the WordPress Site Editor UI by fetching an API, thus allowing users to modify default values and customize a site\u2019s appearance without writing any CSS at all. It also provides a way to style blocks consistently, while providing a structure that creates layers of specificity such that the user settings take the highest priority over those defined in <code>theme.json<\/code>. That interplay between theme-level styles in <code>theme.json<\/code> and the user-defined styles in the Global Styles UI is what makes the JSON approach so appealing.<\/p>\n\n\n\n<p>Developers maintain consistency in JSON, and users gain flexibility with code-less customizations. That\u2019s a win-win.<\/p>\n\n\n\n<p>There are other benefits, for sure, and <a href=\"https:\/\/twitter.com\/mikemcalister\/status\/1580065118683271169\" rel=\"noopener\">Mike McAlister from WP Engine lists several in this Twitter thread<\/a>. You can find even more benefits in this <a href=\"https:\/\/make.wordpress.org\/core\/2022\/08\/01\/moving-core-block-styling-to-json\/#comment-43544\" rel=\"noopener\">in-depth discussion<\/a> over at the Make WordPress Core blog. And once you\u2019ve given that a read, compare the benefits of the JSON approach with <a href=\"https:\/\/css-tricks.com\/methods-overriding-styles-wordpress\/\">the available ways to define and override styles in classic themes<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"defining-styles-with-json-elements\">Defining styles with JSON elements<\/h3>\n\n\n<p>We\u2019ve already seen a lot of progress as far as what parts of a theme <code>theme.json<\/code> is capable of styling. Prior to WordPress 6.1, all we could really do was style headings and links. Now, with WordPress 6.1, <a href=\"https:\/\/make.wordpress.org\/core\/2022\/10\/10\/styling-elements-in-block-themes\/\" rel=\"noopener\">we can add buttons, captions, citations, and headings<\/a> to the mix.<\/p>\n\n\n\n<p>And we do that by defining <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/theme-json\/#theme-json-elements\" rel=\"noopener\"><strong>JSON elements<\/strong><\/a>. Think of elements as individual components that live in a WordPress block. Say we have a block that contains a heading, a paragraph, and a button. Those individual pieces are elements, and there\u2019s an <code>elements<\/code> object in <code>theme.json<\/code> where we define their styles:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"7,8,9,10,11\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {},\n  \/\/ etc.\n  \"styles\": {\n    \/\/ etc.\n    \"elements\": {\n        \"button\": { ... },\n        \"h1\": { ... },\n        \"heading\": { ... },\n    },\n  },\n  \"templateParts\": {}\n}<\/code><\/pre>\n\n\n\n<p>A better way to describe JSON elements is as low-level components for themes and blocks that do not need the complexity of blocks. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/40966\" rel=\"noopener\">They are representations of HTML primitives<\/a> that are not defined in a block but can be used across blocks. How they are supported in WordPress (and the Gutenberg plugin) is described in the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#element-styles\" rel=\"noopener\">Block Editor Handbook<\/a> and this <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-elements\/\" rel=\"noopener\">Full Site Editing tutorial<\/a> by Carolina Nymark.<\/p>\n\n\n\n<p>For example, links are styled in the <code>elements<\/code> object but are not a block in their own right. But a link can be used in a block and it will inherit the styles defined on the <code>elements.link<\/code> object in <code>theme.json<\/code>. This doesn\u2019t fully encapsulate the definition of an element, though, as some elements are also registered as blocks, such as the Heading and Button blocks \u2014 but those blocks can still be used within other blocks.<\/p>\n\n\n\n<p>Here is a table of the elements that are currently available to style in <code>theme.json<\/code> prior to WordPress 6.1, <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-elements\/\" rel=\"noopener\">courtesy of Carolina<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Element<\/th><th>Selector<\/th><th><strong>Where it\u2019s supported<\/strong><\/th><\/tr><\/thead><tbody><tr><td><code>link<\/code><\/td><td><code>&lt;a&gt;<\/code><\/td><td>WordPress&nbsp;Core<\/td><\/tr><tr><td><code>h1<\/code>&nbsp;&#8211;&nbsp;<code>h6<\/code><\/td><td>The HTML tag for each heading level:&nbsp;<code>&lt;h1&gt;<\/code>,&nbsp;<code>&lt;h2&gt;<\/code>,&nbsp;<code>&lt;h3&gt;<\/code>,&nbsp;<code>&lt;h4&gt;<\/code>,&nbsp;<code>&lt;h5&gt;<\/code> and&nbsp;<code>&lt;h6&gt;<\/code><\/td><td>WordPress&nbsp;Core<\/td><\/tr><tr><td><code>heading<\/code><\/td><td>Styles all headings globally by individual HTML tag:&nbsp;<code>&lt;h1&gt;<\/code>,&nbsp;<code>&lt;h2&gt;<\/code>,&nbsp;<code>&lt;h3&gt;<\/code>,&nbsp;<code>&lt;h4&gt;<\/code>,&nbsp;<code>&lt;h5&gt;<\/code> and&nbsp;<code>&lt;h6&gt;<\/code><\/td><td>Gutenberg&nbsp;plugin<\/td><\/tr><tr><td><code>button<\/code><\/td><td><code>.wp-element-button.wp-block-button__link<\/code><\/td><td>Gutenberg&nbsp;plugin<\/td><\/tr><tr><td><code>caption<\/code><\/td><td><code>.wp-element-caption<\/code>,<br><code>.wp-block-audio figcaption<\/code>,<br><code>.wp-block-embed figcaption<\/code>,<br><code>.wp-block-gallery figcaption<\/code>,<br><code>.wp-block-image figcaption<\/code>,<br><code>.wp-block-table figcaption<\/code>,<br><code>.wp-block-video figcaption<\/code><\/td><td>Gutenberg&nbsp;plugin<\/td><\/tr><tr><td><code>cite<\/code><\/td><td><code>.wp-block-pullquote cite<\/code><\/td><td>Gutenberg&nbsp;plugin<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>As you can see, it\u2019s still early days and plenty still needs to move from the Gutenberg plugin into WordPress Core. But you can see how quick it would be to do something like style all headings in a theme globally without hunting for selectors in CSS files or DevTools.<\/p>\n\n\n\n<p>Further, you can also start to see how the structure of <code>theme.json<\/code> sort of forms layers of specificity, going from global elements (e.g. <code>headings<\/code>) to individual elements (e.g. <code>h1<\/code>), and block-level styles (e.g. <code>h1<\/code> contained in a block).<\/p>\n\n\n\n<p>Additional information on JSON elements is available in <a href=\"https:\/\/make.wordpress.org\/core\/2022\/08\/01\/moving-core-block-styling-to-json\/\" rel=\"noopener\">this Make WordPress proposal<\/a> and <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/40966\" rel=\"noopener\">this open ticket<\/a> in the Gutenberg plugin\u2019s GitHub repo.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"json-and-css-specificity\">JSON and CSS specificity<\/h3>\n\n\n<p>Let\u2019s keep talking about CSS specificity. I mentioned earlier that the JSON approach to styling establishes a hierarchy. And it\u2019s true. Styles that are defined on JSON elements in <code>theme.json<\/code> are considered default theme styles. And anything that is set by the user in the Global Styles UI will override the defaults.<\/p>\n\n\n\n<p>In other words: <strong>user styles carry more specificity than default theme styles<\/strong>. Let\u2019s take a look at the Button block to get a feel for how this works.<\/p>\n\n\n\n<p>I\u2019m using <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/tree\/master\/emptytheme\" rel=\"noopener\">Emptytheme<\/a>, a blank WordPress theme with no CSS styling. I\u2019m going to add a Button block on a new page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"105\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-empty-1024x105-1.png?resize=1024%2C105&#038;ssl=1\" alt=\"\" class=\"wp-image-374913\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-empty-1024x105-1.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-empty-1024x105-1.png?resize=300%2C31&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-empty-1024x105-1.png?resize=768%2C79&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The background color, text color, and rounded borders come from the block editor\u2019s default settings.<\/figcaption><\/figure>\n\n\n\n<p>OK, we know that WordPress Core ships with some light styling. Now, I\u2019m going to switch to the default TT3 theme from WordPress 6.1 and activate it. If I refresh my page with the button, the button changes styles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"105\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-tt3-global-1024x105-1.png?resize=1024%2C105&#038;ssl=1\" alt=\"\" class=\"wp-image-374914\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-tt3-global-1024x105-1.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-tt3-global-1024x105-1.png?resize=300%2C31&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-tt3-global-1024x105-1.png?resize=768%2C79&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The background color, text color, and rounded corner styles have changed.<\/figcaption><\/figure>\n\n\n\n<p>You can see exactly <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\/blob\/trunk\/theme.json#L598-L625\" rel=\"noopener\">where those new styles are coming from<\/a> in TT3\u2019s <code>theme.json<\/code> file. This tells us that the JSON element styles take precedence over WordPress Core styles.<\/p>\n\n\n\n<p>Now I am going to modify TT3 by overriding it with a <code>theme.json<\/code> file in a child theme, where the default background color of the Button block is set to red.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"361\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/search-button-tt3-child-1024x361-1.png?resize=1024%2C361&#038;ssl=1\" alt=\"\" class=\"wp-image-374915\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/search-button-tt3-child-1024x361-1.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/search-button-tt3-child-1024x361-1.png?resize=300%2C106&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/search-button-tt3-child-1024x361-1.png?resize=768%2C271&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The default style for the Button block has been updated to red.<\/figcaption><\/figure>\n\n\n\n<p>But notice the search button in that last screenshot. It should be red, too, right? That must mean it is styled at another level if the change I made is at the global level. If we want to change <em>both<\/em> buttons, we could do it at the user level using the Global Styles UI in the site editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2080\" height=\"1526\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?resize=2080%2C1526&#038;ssl=1\" alt=\"\" class=\"wp-image-374916\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?w=2080&amp;ssl=1 2080w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?resize=300%2C220&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?resize=1024%2C751&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?resize=768%2C563&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?resize=1536%2C1127&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666817073648_user-customized-button-1.png?resize=2048%2C1503&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We changed the background color of both buttons to blue and modified the text as well using the Global styles UI. Notice that the blue from there took precedence over the theme styles!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-style-engine\">The Style Engine<\/h3>\n\n\n<p>That&#8217;s a very quick, but good, idea of how CSS specificity is managed in WordPress block themes. But it\u2019s not the complete picture because it\u2019s still unclear <em>where<\/em> those styles are generated. WordPress has its own default styles that come from somewhere, consumes the data in <code>theme.json<\/code> for more style rules, and overrides those with anything set in Global Styles.<\/p>\n\n\n\n<p>Are those styles inline? Are they in a separate stylesheet? Maybe they\u2019re injected on the page in a <code>&lt;script&gt;<\/code>?<\/p>\n\n\n\n<p>That\u2019s what the new <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-style-engine\/\" rel=\"noopener\">Style Engine<\/a> is hopefully going to solve. The Style Engine is a new API in WordPress 6.1 that is meant to bring consistency to how styles are generated and where styles are applied. In other words, it takes all of the possible sources of styling and is singularly responsible for properly generating block styles. I know, I know. Yet another abstraction on top of other abstractions just to author some styles. But having a centralized API for styles is probably the most elegant solution given that styles can come from a number of places.<\/p>\n\n\n\n<p>We\u2019re only getting a first look at the Style Engine. In fact, here\u2019s what has been completed so far, <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/38167\" rel=\"noopener\">according to the ticket<\/a>:<\/p>\n\n\n\n<ul>\n<li>Audit and consolidate where the code generates block support CSS in the back end so that they are delivered from the same place (as opposed to multiple places). This covers CSS rules such as margin, padding, typography, colors, and borders.<\/li>\n\n\n\n<li>Remove repetitive layout-specific styles and generate semantic class names.<\/li>\n\n\n\n<li>Reduce the number of inline style tags we print to the page for block, layout, and element support.<\/li>\n<\/ul>\n\n\n\n<p>Basically, this is the foundation for establishing a single API that contains all the CSS style rules for a theme, wherever they come from. It cleans up the way WordPress would inject inline styles pre-6.1 and establishes a system for semantic class names.<\/p>\n\n\n\n<p>Further details on the long-term and short-term goals of Style Engine can be found in this <a href=\"https:\/\/make.wordpress.org\/core\/2022\/06\/24\/block-editor-styles-initiatives-and-goals\/\" rel=\"noopener\">Make WordPress Core discussion<\/a>. You can also follow the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/38167\" rel=\"noopener\">tracking issue<\/a> and <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/38167\" rel=\"noopener\">project board<\/a> for more updates.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"working-with-json-elements\">Working with JSON elements<\/h3>\n\n\n<p>We talked a bit about JSON elements in the <code>theme.json<\/code> file and how they are basically HTML primitives for defining default styles for things like headings, buttons, and links, among others. Now, let\u2019s look at actually <em>using<\/em> a JSON element and how it behaves in various styling contexts.<\/p>\n\n\n\n<p>JSON elements generally have two contexts: the <strong>global level<\/strong> and the <strong>block level<\/strong>. The global level styles are defined with less specificity than they are at the block level to ensure that block-specific styles take precedence for consistency wherever blocks are used.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-for-json-elements\">Global styles for JSON elements<\/h4>\n\n\n<p>Let\u2019s look at the new default TT3 theme and examine how its buttons are styled. The following is an abbreviated copy-paste of the TT3 <code>theme.json<\/code> file (here\u2019s the <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\/blob\/trunk\/theme.json#L598-L666\" rel=\"noopener\">full code<\/a>) showing the global styles section, but you can find the original code here.<\/p>\n\n\n\n<details >\n  <summary>\n          View code      <\/summary>\n  \n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {},\n    \/\/ ...\n  \"styles\": {\n    \/\/ ...\n    \"elements\": {\n      \"button\": {\n        \"border\": {\n          \"radius\": \"0\"\n        },\n        \"color\": {\n          \"background\": \"var(--wp--preset--color--primary)\",\n          \"text\": \"var(--wp--preset--color--contrast)\"\n        },\n        \":hover\": {\n          \"color\": {\n            \"background\": \"var(--wp--preset--color--contrast)\",\n            \"text\": \"var(--wp--preset--color--base)\"\n          }\n        },\n        \":focus\": {\n          \"color\": {\n            \"background\": \"var(--wp--preset--color--contrast)\",\n            \"text\": \"var(--wp--preset--color--base)\"\n          }\n        },\n        \":active\": {\n          \"color\": {\n            \"background\": \"var(--wp--preset--color--secondary)\",\n            \"text\": \"var(--wp--preset--color--base)\"\n          }\n        }\n      },\n      \"h1\": {\n        \"typography\": { }\n      },\n      \/\/ ...\n      \"heading\": {\n        \"typography\": {\n          \"fontWeight\": \"400\",\n          \"lineHeight\": \"1.4\"\n      }\n      },\n      \"link\": {\n        \"color\": {\n          \"text\": \"var(--wp--preset--color--contrast)\"\n        },\n        \":hover\": {\n          \"typography\": {\n            \"textDecoration\": \"none\"\n          }\n        },\n        \":focus\": {\n          \"typography\": {\n            \"textDecoration\": \"underline dashed\"\n          }\n        },\n        \":active\": {\n          \"color\": {\n            \"text\": \"var(--wp--preset--color--secondary)\"\n          },\n          \"typography\": {\n            \"textDecoration\": \"none\"\n          }\n        },\n        \"typography\": {\n          \"textDecoration\": \"underline\"\n        }\n      }\n     },\n    \/\/ ...\n  },\n  \"templateParts\": {}\n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<p>All buttons are styled at the global level (<code>styles.elements.button<\/code>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"554\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tt3-button-default.png?resize=787%2C554&#038;ssl=1\" alt=\"\" class=\"wp-image-374917\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tt3-button-default.png?w=787&amp;ssl=1 787w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tt3-button-default.png?resize=300%2C211&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tt3-button-default.png?resize=768%2C541&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">Every button in the Twenty Twenty-Three theme shares the same background color, which is set to the&nbsp;<code>--wp--preset--color--primary<\/code>&nbsp;CSS variable, or&nbsp;<code>#B4FD55<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>We can confirm this in DevTools as well. Notice that a class called <code>.wp-element-button<\/code> is the selector. The same class is used to style the interactive states as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"972\" height=\"240\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/fedault-tt3-button-2.png?resize=972%2C240&#038;ssl=1\" alt=\"\" class=\"wp-image-374920\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/fedault-tt3-button-2.png?w=972&amp;ssl=1 972w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/fedault-tt3-button-2.png?resize=300%2C74&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/fedault-tt3-button-2.png?resize=768%2C190&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Again, this styling is all happening at the global level, coming from <code>theme.json<\/code>. Whenever we use a button, it is going to have the same background because they share the same selector and no other style rules are overriding it.<\/p>\n\n\n\n<p class=\"is-style-explanation\">As an aside, WordPress 6.1 added <a href=\"https:\/\/make.wordpress.org\/core\/2022\/10\/10\/styling-elements-in-block-themes\/\" rel=\"noopener\">support for styling interactive states<\/a> for certain elements, like buttons and links, using pseudo-classes in <code>theme.json<\/code> \u2014 including <code>:hover<\/code>, <code>:focus<\/code>, and <code>:active<\/code> \u2014 or the Global Styles UI. Automattic Engineer <a href=\"https:\/\/www.youtube.com\/watch?v=XikXzLLojhk\" rel=\"noopener\">Dave Smith<\/a> <a href=\"https:\/\/www.youtube.com\/watch?v=XikXzLLojhk\" rel=\"noopener\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=XikXzLLojhk\" rel=\"noopener\">demonstrates<\/a> <a href=\"https:\/\/www.youtube.com\/watch?v=XikXzLLojhk\" rel=\"noopener\">this feature<\/a> in a YouTube video.<\/p>\n\n\n\n<p>We could override the button\u2019s background color either in <code>theme.json<\/code> (preferably in a child theme since we\u2019re using a default WordPress theme) or in the Global Styles settings in the site editor (no child theme needed since it does not require a code change).<\/p>\n\n\n\n<p>But then the buttons will change all at once. What if we want to override the background color when the button is part of a certain block? That\u2019s where block-level styles come into play.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"blocklevel-styles-for-elements\">Block-level styles for elements<\/h4>\n\n\n<p>To understand how we can use and customize styles at the block level, let\u2019s change the background color of the button that is contained in the Search block. Remember, there is a Button block, but what we\u2019re doing is overriding the background color at the block level of the Search block. That way, we\u2019re only applying the new color there as opposed to applying it globally to all buttons.<\/p>\n\n\n\n<p>To do that, we define the styles on the <code>styles.blocks<\/code> object in <code>theme.json<\/code>. That\u2019s right, if we define the global styles for all buttons on <code>styles.elements<\/code>, we can define the block-specific styles for button elements on <code>styles.block<\/code>, which follows a similar structure:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"13,14\"><code markup=\"tt\">{\n  \"version\": 2,\n  \/\/ ...\n  \"styles\": {\n    \/\/ Global-level syles\n    \"elements\": { },\n    \/\/ Block-level styles\n    \"blocks\": {\n      \"core\/search\": {\n        \"elements\": {\n          \"button\": {\n            \"color\": {\n              \"background\": \"var(--wp--preset--color--quaternary)\",\n              \"text\": \"var(--wp--preset--color--base)\"\n            }\n          }\n        },\n        \/\/ ...\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>See that? I set the <code>background<\/code> and <code>text<\/code> properties on <code>styles.blocks.core\/search.elements.button<\/code> with two CSS variables that are preset in WordPress.<\/p>\n\n\n\n<p>The result? The search button is now red (<code>--wp--preset--color--quaternary<\/code>), and the default Button block retains its bright green background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"181\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-search.png?resize=677%2C181&#038;ssl=1\" alt=\"\" class=\"wp-image-374923\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-search.png?w=677&amp;ssl=1 677w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/button-search.png?resize=300%2C80&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We can see the change in DevTools as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1082\" height=\"160\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666816112728_search-button-html.png?resize=1082%2C160&#038;ssl=1\" alt=\"\" class=\"wp-image-374924\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666816112728_search-button-html.png?w=1082&amp;ssl=1 1082w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666816112728_search-button-html.png?resize=300%2C44&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666816112728_search-button-html.png?resize=1024%2C151&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_96C9F5D0303A3252C0EAF6F6290A8D095D46F58C3F7591D94605FBCE4BCFC523_1666816112728_search-button-html.png?resize=768%2C114&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The same is true if we want to style buttons that are included in other blocks. And buttons are merely one example, so let&#8217;s look at another one.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"example-styling-headings-at-each-level\">Example: Styling headings at each level<\/h3>\n\n\n<p>Let\u2019s drive all this information home with an example. This time, we will:<\/p>\n\n\n\n<ul>\n<li>Style all headings globally<\/li>\n\n\n\n<li>Style all Heading 2 elements<\/li>\n\n\n\n<li>Style Heading 2 elements in the Query Loop block<\/li>\n<\/ul>\n\n\n\n<p>First, let\u2019s start with the basic structure for <code>theme.json<\/code>:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"styles\": {\n    \/\/ Global-level syles\n    \"elements\": { },\n    \/\/ Block-level styles\n    \"blocks\": { }\n  }\n}<\/code><\/pre>\n\n\n\n<p>This establishes the outline for our global and block-level styles.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"style-all-headings-globally\">Style all headings globally<\/h4>\n\n\n<p>Let\u2019s add the <code>headings<\/code> object to our global styles and apply some styles:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"6,7,8\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"styles\": {\n    \/\/ Global-level syles\n    \"elements\": {\n      \"heading\": {\n        \"color\": \"var(--wp--preset--color--base)\"\n      },\n    },\n    \/\/ Block-level styles\n    \"blocks\": { }\n  }\n}<\/code><\/pre>\n\n\n\n<p>That sets the color for all headings to the preset base color in WordPress. Let\u2019s change the color and font size of Heading 2 elements at the global level as well:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"9,10,11,12,13,14\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"styles\": {\n    \/\/ Global-level syles\n    \"elements\": {\n      \"heading\": {\n        \"color\": \"var(--wp--preset--color--base)\"\n      },\n      \"h2\": {\n        \"color\": \"var(--wp--preset--color--primary)\",\n        \"typography\": {\n          \"fontSize\": \"clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)\"\n        }\n      }\n    },\n    \/\/ Block-level styles\n    \"blocks\": { }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now, all Heading 2 elements are set to be the primary preset color with a <a href=\"https:\/\/css-tricks.com\/fluid-typography-wordpress-block-themes\/\">fluid font size<\/a>. But maybe we want a fixed <code>fontSize<\/code> for the Heading 2 element when it is used in the Query Look block:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"9,10,11,12,13,14,18,19,20,21,22,23,24,25,26\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"styles\": {\n    \/\/ Global-level syles\n    \"elements\": {\n      \"heading\": {\n        \"color\": \"var(--wp--preset--color--base)\"\n      },\n      \"h2\": {\n        \"color\": \"var(--wp--preset--color--primary)\",\n        \"typography\": {\n          \"fontSize\": \"clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)\"\n        }\n      }\n    },\n    \/\/ Block-level styles\n    \"blocks\": {\n      \"core\/query\": {\n        \"elements\": {\n          \"h2\": {\n            \"typography\": {\n              \"fontSize\": 3.25rem\n            }\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now we have three levels of styles for Heading 2 elements: all headings, all Heading 2 elements, and Heading 2 elements that are used in the Query Loop block.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"existing-theme-examples\">Existing theme examples<\/h3>\n\n\n<p>While we only looked at the styling examples for buttons and headings in this article, WordPress 6.1 supports styling additional elements. There\u2019s a table outlining them in the <a href=\"#aa-defining-styles-with-json-elements\">\u201cDefining styles with JSON elements\u201d<\/a> section.<\/p>\n\n\n\n<p>You\u2019re probably wondering which JSON elements support which CSS properties, not to mention how you would even declare those. While we wait for official documentation, the best resources we have are going to be the <code>theme.json<\/code> files for existing themes. I\u2019m going to provide links to themes based on the elements they customize, and point out what properties are customized.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Theme<\/th><th>What\u2019s customized<\/th><th>Theme JSON<\/th><\/tr><\/thead><tbody><tr><td><a target=\"_blank\" href=\"https:\/\/wordpress.org\/themes\/blockbase\/\" rel=\"noreferrer noopener\">Blockbase<\/a><\/td><td>Buttons, headings, links, core blocks<\/td><td><a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/blockbase\/theme.json\" rel=\"noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/themes\/tree\/trunk\/block-canvas\" rel=\"noreferrer noopener\">Block Canvas<\/a><\/td><td>Buttons, headings, links, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/block-canvas\/theme.json#L264-L286\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/wordpress.org\/themes\/disco\/\" rel=\"noreferrer noopener\">Disco<\/a><\/td><td>Buttons, headings, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/themes.trac.wordpress.org\/browser\/disco\/1.0.1\/theme.json\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/frostwp.com\/\" rel=\"noreferrer noopener\">Frost<\/a><\/td><td>Buttons, headings, links, captions, cite, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/github.com\/wpengine\/frost\/blob\/trunk\/theme.json\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/wordpress.org\/themes\/pixl\/\" rel=\"noreferrer noopener\">Pixl<\/a><\/td><td>Buttons, headings, links, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/pixl\/theme.json\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/wordpress.org\/themes\/rainfall\/\" rel=\"noreferrer noopener\">Rainfall<\/a><\/td><td>Buttons, headings, links, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/rainfall\/theme.json\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/twentytwentythree\" rel=\"noreferrer noopener\">Twenty Twenty-Three<\/a><\/td><td>Buttons, headings, links, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/twentytwentythree\/blob\/trunk\/theme.json\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><tr><td><a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/vivre\/theme.json#L564-L582\" rel=\"noreferrer noopener\">Vivre<\/a><\/td><td>Buttons, headings, links, core blocks<\/td><td><a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/vivre\/theme.json\" rel=\"noreferrer noopener\">Source code<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Be sure to give each <code>theme.json<\/code> file a good look because these themes include excellent examples of block-level styling on the <code>styles.blocks<\/code> object.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>Frequent changes to the full-site editor are becoming a <a href=\"https:\/\/css-tricks.com\/not-sure-how-to-wordpress-anymore\/\">major sources of irritation to many people<\/a>, including <a href=\"https:\/\/wordpress.tv\/2022\/10\/21\/hallway-hangout-block-theme-development-features-in-wordpress-6-1\/\" rel=\"noopener\">tech-savvy Gutenberg users<\/a>. Even very simple CSS rules, which work well with classic themes, don\u2019t seem to work for block themes because of the <a href=\"https:\/\/make.wordpress.org\/core\/2022\/04\/13\/core-styles-and-theme-customization-the-next-steps\/\" rel=\"noopener\">new layers of specificity<\/a> we covered earlier.<\/p>\n\n\n\n<p>Regarding a <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/44770\" rel=\"noopener\">GitHub proposal<\/a> to re-design the site editor in a new browser mode, <a href=\"https:\/\/wptavern.com\/gutenberg-contributors-explore-a-new-browse-mode-for-navigating-the-site-editor\" rel=\"noopener\">Sara Gooding writes in a WP Tavern post<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>It\u2019s easy to get lost while trying to get around the Site Editor unless you are working day and night inside the tool. The navigation is jumpy and confusing, especially when going from template browsing to template editing to modifying individual blocks.<\/p>\n<\/blockquote>\n\n\n\n<p>Even as a keen early rider in the world of Gutenberg block editor and block-eye themes, I do have tons of my own frustrations. I&#8217;m optimistic, though, and anticipate that the site editor, once completed, will be a revolutionary tool for users and techno-savvy theme developers alike. This <a href=\"https:\/\/twitter.com\/SethRubenstein\/status\/1529294274751348736\" rel=\"noopener\">hopeful tweet<\/a> already confirms that. In the meantime, it seems that we should be preparing for more changes, and perhaps even a bumpy ride.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"references\">References<\/h3>\n\n\n<p>I\u2019m listing all of the resources I used while researching information for this article.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"json-elements\">JSON elements<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/41753\" rel=\"noopener\">Elements API<\/a> (Gutenberg GitHub Repo)<\/li>\n\n\n\n<li><a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-elements\/\" rel=\"noopener\">Theme.json elements<\/a> (Full Site Editing)<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#element-styles\" rel=\"noopener\">Elements styles<\/a> (Block Editor Handbook)<\/li>\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles\">Global Styles<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/41232\" rel=\"noopener\">Global Styles Roadmap<\/a> (Gutenberg GitHub issue)<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/40966\" rel=\"noopener\">Global Styles: Elements support tracking<\/a> (Gutenberg GitHub issue)<\/li>\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"style-engine\">Style Engine<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/06\/24\/block-editor-styles-initiatives-and-goals\/\" rel=\"noopener\">Block editor styles: initiatives and goals<\/a> (Make WordPress Blog)<\/li>\n\n\n\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/10\/10\/block-styles-generation-style-engine\/\" rel=\"noopener\">Block styles generation (Style Engine)<\/a> (Make WordPress Blog)<\/li>\n\n\n\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/04\/13\/core-styles-and-theme-customization-the-next-steps\/\" rel=\"noopener\">Core Styles and Theme Customization: the next steps<\/a> (Make WordPress Blog)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Thanks for reading! I&#8217;d love to hear your own reflections on using the block themes and how you managing your CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for adding fluid type support in WordPress by way of theme.json, a new file that WordPress has been pushing hard to become a central source of truth for defining styles in WordPress themes that support [&hellip;]<\/p>\n","protected":false},"author":275938,"featured_media":374932,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"WordPress 6.1 brings us much closer to a time where all theme styles could be written in JSON. Ganesh shows us what that looks like.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[264,19028],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":375412,"url":"https:\/\/css-tricks.com\/adding-box-shadows-to-wordpress-blocks-and-elements\/","url_meta":{"origin":374910,"position":0},"title":"Adding Box Shadows to WordPress Blocks and Elements","date":"December 7, 2022","format":false,"excerpt":"The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362799,"url":"https:\/\/css-tricks.com\/a-deep-introduction-to-wordpress-block-themes\/","url_meta":{"origin":374910,"position":1},"title":"A Deep Introduction to WordPress Block Themes","date":"February 4, 2022","format":false,"excerpt":"The relatively new WordPress editor, also known as the WordPress Block Editor, always under development via the Gutenberg plugin, has been with us since 2018. You can use the block editor on any WordPress theme, provided the theme loads CSS that the blocks use. But there are new themes that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365377,"url":"https:\/\/css-tricks.com\/creating-style-variations-in-wordpress-block-themes\/","url_meta":{"origin":374910,"position":2},"title":"How to Create Style Variations in WordPress 6.0 Block Themes","date":"May 16, 2022","format":false,"excerpt":"Global styles, a feature of the block themes, is one of my favorite parts of creating block themes. The concept of global style variations in WordPress were introduced in Gutenberg 12.5 which would allow theme authors to create alternate variations of a block theme with different combinations of colors, fonts,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/04\/wirdpress-global-style-variations.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377123,"url":"https:\/\/css-tricks.com\/managing-fonts-in-wordpress-block-themes\/","url_meta":{"origin":374910,"position":3},"title":"Managing Fonts in WordPress Block Themes","date":"March 6, 2023","format":false,"excerpt":"Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it\u2019s common for theme developers to integrate a service like Google Fonts into the WordPress Customizer settings for a \u201cclassic\u201d PHP-based theme. That hasn\u2019t quite been the case for WordPress block themes. While integrating\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/wordpress-fonts.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375278,"url":"https:\/\/css-tricks.com\/using-the-new-constrained-layout-in-wordpress-block-themes\/","url_meta":{"origin":374910,"position":4},"title":"Using The New Constrained Layout In WordPress Block Themes","date":"November 30, 2022","format":false,"excerpt":"One of the main goals of the WordPress Site Editor (and, yes, that is now the \u201cofficial\u201d name) is to move basic block styling from CSS to structured JSON. JSON files are machine-readable, which makes it consumable by the JavaScript-based Site Editor for configuring a theme\u2019s global styles directly in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376237,"url":"https:\/\/css-tricks.com\/styling-buttons-in-wordpress-block-themes\/","url_meta":{"origin":374910,"position":5},"title":"Styling Buttons in WordPress Block Themes","date":"January 9, 2023","format":false,"excerpt":"A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding CSS box shadows on WordPress blocks and elements. There\u2019s a lot of great stuff in there that leverages new features that shipped in WordPress 6.1 that provide controls for applying\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/wordpress-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374910"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/275938"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=374910"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374910\/revisions"}],"predecessor-version":[{"id":377788,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374910\/revisions\/377788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/374932"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=374910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=374910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}