{"id":376813,"date":"2023-01-31T07:43:43","date_gmt":"2023-01-31T15:43:43","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=376813"},"modified":"2023-03-01T06:48:09","modified_gmt":"2023-03-01T14:48:09","slug":"wordpress-block-theme-guide","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/","title":{"rendered":"WordPress Block Themes CSS and Style Settings Guide"},"content":{"rendered":"\n<p>In the 2015 State of the World address, WordPress co-creator <a href=\"https:\/\/twitter.com\/photomatt\" rel=\"noopener\">Matt Mullenweg<\/a> famously directed the WordPress community to<a href=\"https:\/\/www.youtube.com\/watch?v=TX6dXRL-jPU\" rel=\"noopener\">&#8220;Learn JavaScript deeply&#8221;<\/a>. He set that expectation upfront because he wanted everyone to know that JavaScript would be essential to the future of WordPress, which was paving a path toward full-site editing with a React-based editing experience to be called the Block Editor.<\/p>\n\n\n\n<p>That was years ago, and a concerted effort has been taking place to shift WordPress theme development from &#8220;classic\u201d PHP-based templating to a more modular, component-driven model centered on &#8220;blocks\u201d for constructing page and post layouts.<\/p>\n\n\n\n<p>Now that we\u2019re starting to see new <a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\" rel=\"noopener\">block-based WordPress themes<\/a> hit the Theme Directory, many of us who have been developing WordPress themes for years using &#8220;classic\u201d PHP templates we\u2019re sitting in some sort of middle-ground between &#8220;classic\u201d and &#8220;block\u201d themes. <a href=\"https:\/\/css-tricks.com\/not-sure-how-to-wordpress-anymore\/\">Geoff expanded on this feeling in another post<\/a>, but the general sentiment is that working in WordPress is much different than before.<\/p>\n\n\n\n<p>Where do you even start on a WordPress Block Theme project? That\u2019s what this guide is all about. We could get into the nuances of working with React, but <a href=\"https:\/\/css-tricks.com\/learning-gutenberg-1-series-intro\/\">there\u2019s already a good guide for that here on CSS-Tricks<\/a> as well as <a href=\"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-front-end\/\">tutorials on working with blocks<\/a>.<\/p>\n\n\n\n<p>Instead, <strong>this guide is geared toward block themes and how to configure them.<\/strong> Think of it as an extension to my previous article on <a href=\"https:\/\/css-tricks.com\/managing-css-styles-in-a-wordpress-block-theme\/\">managing styles in WordPress block themes<\/a>. In there, we covered how to define CSS styles in the <code>theme.json<\/code> file \u2014 the foundation of all WordPress block themes, akin to how <code>style.css<\/code> is used in classic themes. We\u2019re going to go deeper in this series, giving <code>theme.json<\/code> a proper introduction and documenting how it\u2019s used to manage the appearance of a WordPress site that fully supports full-site editing features.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>As it currently stands, finding resources and proper documentation for defining and managing styles in WordPress block themes is a task in and of itself. Unless you keep up with <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\" rel=\"noopener\">GitHub issues<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2022\/10\/13\/whats-new-in-gutenberg-14-3-12-october\/#gutenberg-new\" rel=\"noopener\">Gutenberg plugin releases<\/a>, and <a href=\"https:\/\/make.wordpress.org\/core\/\" rel=\"noopener\">Make WordPress Core<\/a>, you could feel lost in this new WordPress landscape. <a href=\"https:\/\/developer.wordpress.org\/themes\/block-themes\/\" rel=\"noopener\">The WordPress Handbook<\/a> won\u2019t save you either because it is constantly several steps behind the breakneck speed of development.<\/p>\n\n\n\n<p>So, let\u2019s pull all of that together and learn about managing styles in WordPress block themes.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-ad1a3c1b\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"simpletoc-hidden wp-block-heading\" id=\"wordpress-block-theme-css-and-style-settings-guide\">WordPress Block Theme CSS and Style Settings Guide<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/\">Introduction<\/a> <em>(you are here!)<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/\">Glossary of Terms for <code>theme.json<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-settings\/\">Defining Global Settings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/\">Defining Global Styles<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/\">How the Styles Engine Generates Classes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/\">Global Styles Reference Tables<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Managing CSS in WordPress has dramatically changed since full-site editing features were introduced to block themes. This guide is geared toward block themes and how to configure them, from enabling editor features and controls to defining theme-wide CSS and customizaing the appearance of specific blocks.<\/p>\n","protected":false},"author":275938,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"guide-special.php","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":""},"tags":[264,14583,19028],"acf":[],"jetpack-related-posts":[{"id":376996,"url":"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/","url_meta":{"origin":376813,"position":0},"title":"How the Style Engine Generates Classes","date":"February 27, 2023","format":false,"excerpt":"The WordPress Style Engine generates the CSS for a block theme. Why would you want to know how an invisible process like that works? Well, just like writing CSS, you will want to ensure your code is organized and structured so that your styles properly use the CSS Cascade.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376818,"url":"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/","url_meta":{"origin":376813,"position":1},"title":"Glossary of Terms for theme.json","date":"January 31, 2023","format":false,"excerpt":"To kick things off, let\u2019s begin by reviewing a few glossary terms that are important for understanding what the theme.json file is, how it is structured, and how to configure it. We\u2019ll cover examples as we go, but the main goal here is to get familiar with terms that we\u2019ll\u2026","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376823,"url":"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/","url_meta":{"origin":376813,"position":2},"title":"Defining Global Styles","date":"January 31, 2023","format":false,"excerpt":"Let\u2019s move to the other top-level section of theme.json where we can configure the CSS of a block theme: styles. We\u2019ll learn what it is exactly and how we can use it to override and apply the preset settings values we covered in Part 2.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":376813,"position":3},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":238375,"url":"https:\/\/css-tricks.com\/video-screencasts\/145-wordpress-child-themes-with-lara-schenck\/","url_meta":{"origin":376813,"position":4},"title":"#145: WordPress Child Themes with Lara Schenck","date":"February 27, 2016","format":false,"excerpt":"In this video Lara Schenck and I pair up, and she teaches me all about child themes in WordPress. It's like a podcast that you watch too! We straight up create one, starting from the Twentysixteen theme, which provided a pretty nice basis for a child theme (not all themes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376820,"url":"https:\/\/css-tricks.com\/defining-global-settings\/","url_meta":{"origin":376813,"position":5},"title":"Defining Global Settings","date":"January 31, 2023","format":false,"excerpt":"Let's take what we learned about the theme.json structure in WordPress block themes and apply it to two main sections of the file: settings and styles. These arrays are the \u201ctop level\u201d for configuring WordPress features and the theme\u2019s CSS output.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.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\/pages\/376813"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=376813"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376813\/revisions"}],"predecessor-version":[{"id":377413,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376813\/revisions\/377413"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376813"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}