DE{CODE}: Modern Theming and the Future of WordPress: Working with Full Site Editing and Beyond
WordPress 5.9 introduced Full Site Editing to core, signifying a major shift in the way we build websites with WordPress. In this DE{CODE} session, join WP Engine Developer Advocate Nick Diego as he unpacks these changes, as well as some ways you can leverage them to build better websites—the modern WordPress way.
Session Slides
Full Text Transcript
NICK DIEGO: Hello, and welcome to “Working with Full Site Editing and the Future of Modern Theming in WordPress.” My name is Nick Diego, and I’m a developer advocate here at WP Engine. So a bit about me– so I began working with WordPress back in 2012. I primarily was a plugin developer, and I’ve since transitioned to doing a lot with block themes. I actually joined WP Engine in November of 2021, so this is kind of a new gig for me. I’m passionate about blocks and patterns and everything full-site editing, which is why I couldn’t be more excited to be giving this presentation today.
So what is full-site editing? We’ve heard about it a lot in the last few years. So it’s actually “a collection of features that brings the familiar experience and extendibility of blocks to all parts of your site rather than just posts and pages.” So it’s actually an umbrella of features, which include things like the Site Editor, Global Styles, theme blocks, Templates, and, of course, Block Themes.
So in our conversation today, we’re going to cover a few different things. We’re going to start with the basics. I want to make sure that we’re all on the same page, especially from a terminology perspective. Then we’re going to talk about the anatomy of a block theme, then global styles, in-settings which includes the theme.json file. And finally, I’m going to share my thoughts on modern theming and what that’s going to look like.
So in today’s presentation, we’re going to be using a bunch of different examples, and those will be from the 2022 theme, which was included in WordPress 5.9 back in January of 2022. This is a block theme that was developed by the Core WordPress team, and it’s a great place to start, and it’s available in the plugin repository, so there’s no better theme to be using for examples.
So as we get started today, again, we’re going to start with the basics. And there’s nothing more basic than a block. So if you’ve been using WordPress for the last few years, you’re probably very familiar with blocks. They’re the fundamental unit of content in WordPress. It can be a paragraph of text to a gallery of images. It can take almost any form. And the idea behind full-site editing is that, soon or now, everything on your website will be a block. We’ll discuss more about how that works.
Now here we have an example of a bunch of different blocks that are currently in WordPress. The left two columns you should be familiar with. We have paragraphs and headings and cover blocks– so on and so forth. In 5.9– again, that was released this year– we now have what are called theme blocks. These are blocks that are content that, traditionally, you wouldn’t be able to edit directly from within WordPress.
Those include things like your site logo, query loop, post excerpt, post author. These are all types of content that you would need to dive into your PHP-based template files and code directly or use a third-party plugin that assisted you in editing these areas. And these are all coming or have come to WordPress and allow users to edit them directly, and they all take the form of a block.
Next, we want to talk about patterns. Patterns are kind of a cornerstone of the full-site editing experience. Patterns could be a whole conversation unto themselves, but we’re going to give you a little sneak preview on patterns if you’re not familiar. So again, a pattern is just a predefined collection of blocks that forms a specific layout. A pattern could be a single block with some styling. It could be multiple blocks.
Patterns allow users to, with a single click, insert an entire design right into their site, rather than having to build the design manually, one block at a time, which can really speed up development of a site. It’s also really useful if you remember– you see this beautiful website demo, and it has all this content in there. And you install the theme, and it’s like, well, how do I get that demo? Patterns solve that for you because the theme author can provide a whole bunch of page layouts or individual designs that, with a single click, a user can insert and get that demo that they saw and were attracted to when they picked out the theme.
So let’s take a quick look at a pattern here. We just have a simple heading, some text, and some buttons. And this can be, again, inserted with a single click into the page, and we see here that it’s made up of three different blocks, a heading block, a paragraph block, and a buttons block.
Now with 5.9, again, which came out this year, we saw the introduction of the Pattern Explorer. So the 2022 theme, which I mentioned earlier, the one that we’re using in all of our examples, is called the Hatchery theme– lots of birds. And you can see here in the Pattern Explorer, we have a bunch of different designs that the theme authors built.
So as a user, I can insert any of these directly into the site, and I get that same aesthetic that the theme author designed the theme for, so its speaker series, some birds side by side– whatever you like. And patterns, and the patterns that are served with a theme, are very important to that full-site editing experience.
Next, we have the Editor. We can’t not talk about the Editor. If you’ve been using WordPress, you’re probably very familiar with this. But I do want to mention this because the Editor has gone by many different names in the past– Block Editor, Gutenberg, The Gutenberg Editor. For the purposes of this discussion, we’re just going to call the Editor. That’s the official name for it, and that is going to be what you see here. Again, this was introduced back in WordPress 5.0 in late 2018.
So within the Editor, you just click on the Insertor, and you can insert your blocks and patterns. Now, I wanted to show the screen because next we need to talk about the Site Editor. Eventually, the site prefix of the Site Editor will probably go away, and we’ll just have the Editor. But the Site Editor is a cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
So basically, the Site Editor takes our standard editor that we’ve gotten used to over the last few years and takes it to the next level by allowing users to edit additional areas of your website that are all now powered by blocks. So WordPress 5.9 introduced full-site editing and, with that, the Site Editor. And in 6.0, which will be coming out in May, we’re going to see a lot of enhancements to this, which is very exciting.
So if you’re using a block theme like 2022, you’ll be able to access the Site Editor. There’s two different ways, the top side bar and then under the appearance section. Now, the Site Editor, again, because it’s part of the– it’s very powerful, it’s only available to admins. So don’t worry, editors, they’re not going to be able to access the Site Editor. You have to be an admin to access the Site Editor.
And once we hop in here, it looks very similar to the standard editor, but you’ll notice something a little bit different. At the top here, we have Home. And this is telling us that we’re actually editing the home.HTML template, and we have a couple of different areas of the page that we can edit separately. Like you can see here, we have the header and footer.
So this is something that you could never do before. You could never edit the home.PHP, but now HTML template directly from the interface, not without some other third-party extension.
And if we click into the page and the list view, we can see that we have a query loop. Again, those familiar building themes are probably very, very, very familiar with building out loops within templates for themes, but here we can do that all with blocks using the query loop. And we can also see some of those other theme blocks like the post title, featured image, post excerpt, and post date. These all can be moved around and modified by the user from the interface without any coding needed.
Now, if you click on a little WordPress icon or site icon, we can get this sidebar. And then we can see that we have access to all of our templates and template parts. Now, I do want to note that the flow– all these screens are fully under development. Full-site editing is still in beta, and there’s a lot of refinement and improvement that’s going to be coming. So what we’re seeing today may not look the same in six months, but it’s a fantastic start.
So if we go down to templates, we can see all the templates that are included with 2022. You should see some familiar ones like Page and Index and Home and 404. And then if we go to our template parts, we can see some custom template parts that were included by the theme authors. So we have a couple of different headers and we have a footer.
Now again, all of these are editable by the user. And so, if we see this little tiny dot here, we can see that this header template part has been edited by me. Now, when you edit a template part or a template, those changes are saved to the database. They don’t actually modify the templates in your theme, which is great because you can always revert back to the theme templates or template parts.
But again, if we click in here, we can start to edit that header template part, and you will see that all of these are made up of blocks. So it’s the same experience that you would use in the Editor when editing a post or page. You can do that now inside of the Site Editor for all of your templates and template parts.
So that was a quick run-through of the Site Editor and how it works, but now I want to talk about the anatomy of a block theme, which is the main fundamental component of full-site editing. So how does the anatomy of a block theme work? Well, it’s actually broken down into a couple of different categories. So we have block themes. They fully embrace full-site editing. Theme templates are composed entirely of blocks. Templates and template parts are HTML rather than PHP.
And then I do want to note that a block theme can be very simple. All it needs to do is consist of a style.CSS file and an index.html file, as well as an index.PHP file. This PHP file is kind of a remnant of traditional WordPress theme development and likely will go away in the future.
And finally, most block themes include a theme.JSON file. We’ll talk about this separately. It’s a very important topic concerning global settings and styles. So let’s take a look at the theme file structure. So this is 2022, an abridged version of the file structure inside of 2022. And we can see those required files right here.
Then we also notice that there are some folders, namely Templates and Template Parts. Within each of these folders, you have all the HTML files for each template and template part. What’s not visible on here, which is actually really exciting, so I wanted to sneak this in, Gutenberg, the Gutenberg plugin, where all this future development full-site editing is being done, actually recently introduced a new folder called Patterns. So you can actually place your pattern files right inside the Pattern folder, and WordPress will register them for you. Just a sneak peek. I highly encourage you to check out Gutenberg and all the new features.
But back to the slide here. We have our templates and template parts. And you can see the individual HTML files for each. Now, to understand how this works a bit more, we’re going to take a look at the 404.HTML file. This is a file or a page in your site that you could never edit directly unless you dived into code or you used a third-party resource that would allow you to edit this template.
So going back to the Site Editor, we can see that our 404 page is right here. If we click into that, the user can now edit the different components of that template. However, let’s take a look at what actual HTML code makes up this template, the code that’s actually in the theme.
So here, we can see we have our 404.HTML file, and it has a bunch of markup. Starting at the top and bottom, we see that we have the specification for a template part block. What this is doing is it’s referencing our registered template parts and pulling them into the template. So if we hop back out here, we can see that we have a footer.HTML part and a header.HTML part. And that’s what’s being referenced here.
So this is a unique block that allows you to pull in templates that are composed of other blocks. Now, of course, you could just include all the blocks that would make up a header and all the blocks that make up a footer, but by referencing the template part, you can do it all in one place and then apply that same template part across all your templates, similar to what you would do in a traditional WordPress with PHP.
Now, as we look further, we have some markup, just some main markup, and then we have a div. I’m not going to get too deep into this. There is some interesting things going on here, namely the layout in here, true, which is doing some layout settings, but this is just general markup for the page, the 404 pattern.
Now, I mentioned pattern. The 404 in this theme is actually bundled into a pattern. So all the blocks that make up the 404 content are in a pattern. And then we have a pattern block that’s actually referencing that pattern and then pulling in those blocks. Now, of course, again, you could just include all the blocks that make up the 404 page here, but by putting them into a pattern and then referencing them, it just makes it a little bit easier to manage.
So when we go back over to the Site Editor, we have our content, and we can see the different sections. So the top part is that header template part being pulled in. And then, obviously, the main section is that 404 pattern being pulled in. And now, because these are all blocks, all we need to do is edit them as we normally would. We can make it bold. We could change the color. We could remove blocks, add blocks– so on and so forth.
Pretty easy, and we didn’t need to edit any code at all. We needed to understand how the code worked, but we didn’t need to touch any code whatsoever. Then when we’re happy, we just click Save. Again, these changes are saved to the database, so you’re not actually modifying the theme files. So if we were to revert the changes, we will go back to whatever the theme is providing.
One of the great things about the Site Editor too– and again, this is still being developed– is you can add new template parts. So again, this theme adds a bunch of different headers and footers, but what if we wanted to add more? Maybe we wanted a sidebar. Maybe we wanted different content sections. We can do that right within the Site Editor.
And again, this flow is going to be improved upon– more features, more functions. But it’s currently functional, and you can add everything right here. One thing to note is you cannot add templates yet within the Site Editor. You can within a different interface inside of the WordPress editor but not quite yet in the Site Editor. But that will be coming.
So the last piece of this is we talked about making all these changes. Well what if you could just export all your changes as a single theme that’s actually coming and it’s actually really interesting to see how that will impact theme development. So with the latest release of Gutenberg, you can now export all your changes, plus the original theme.
They get merged, and you can export it as a brand new theme with all your changes applied to the files within the theme. So you could imagine taking 2022. You upload it. You make all your changes. You may modify some templates and then export a full theme. It has some very interesting implications for future theme development.
Now we need to talk about global settings and styles. This is that theme.JSON file. This is brand new to WordPress and as exciting as it is tricky. So if we look back on the 2022 theme, we can see that file sitting at the top there. And when we hop into the theme.JSON file, it’s really five sections, one being just the version number.
And I’ll briefly talk about custom templates and template parts. So this is where, if you had a custom template, a completely custom template, one that WordPress wouldn’t naturally recognize, that’s where you can register it here. This is also where you register all those template parts like the headers and footers. Any traditional template, like Index, Page, Post– those templates that WordPress generally recognizes– you don’t need to put here, just custom ones, and, of course, your own template parts.
But the meat of theme.JSON is your settings and style section. So if we look at settings first, there’s a lot going on here. And again, this is very abridged. But the top part are global settings. These are settings that impact the Site Editor and Editor across your entire site. These include things like border and color and typography. This is where you would set the color palette for your theme, the typography settings for your theme, the fonts– so on and so forth.
And then we also have block level settings, where you could, say, set a color palette for your entire site but then set a smaller color palette, and completely different color palette, for example, for the paragraph block or the buttons block. So it provides a huge amount of flexibility, but settings are what features are available to a user within the Editor or within a block.
So if we look, again, at the color, we’ve defined here our palette. We have a foreground color, a background, and then the primary, black, white, and kind of a forest green. And then if we go into the Editor, we can see that when our color picker pops up, we have those colors defined for a user to select from.
Now, let’s go into style. So styles are basically like your CSS. So traditionally, you’d add up all your CSS in a styles.CSS file or some other setup. But the styles section of theme.JSON allows you to set style at the block level and also the global level throughout your entire theme. Think of these as like defaults, right, because the Editor– the whole point is that users can get in there and start modifying and making changes and design their site as they like using blocks.
But there needs to be a default, and these set in the style section of theme.JSON is that default. So again, we have the global styles, kind of like our global colors, global typography, and then we can also set styles at the block level. So the thing about the global styles is this where we’d set the background color of our theme. This is where we would set the font sizes for our headings, the different typography options for links, and text, and headings, and all that sort of stuff. And at the block level, we can do the same but specifically for blocks.
Now, one of the neat things about the setting section that we just talked about is whenever you create a setting, WordPress is going to define a variable. So when we were looking at that color palette, we defined background, foreground, and primary. WordPress is actually going to generate a variable that maps to that hex code, whatever hex code is set for primary, foreground, background.
In styles, we can use those variables to define the styles for both global and block-level styles. The benefit of this is that if a user was ever to change whatever the background color is, then it will flow through the style specification in theme.JSON. Now, if we take a look at the block section, here we have our buttons block, and we have this from a theme designer.
I wanted my buttons to have a default color of green with some white text. You can see that in the color section of the button block, we define the background color is that primary, which is that forest green, and our text is the background, which is white. So we can use those variables throughout theme.JSON to define styles for our blocks and for the site itself.
Now, this ties into global styles, which I alluded to earlier. So back into the Site Editor, if we click on this little two-tone circle at the top, we’re going to open up our global styles panel. Now, there’s a lot going on here, so I’m just going to do a quick demonstration of how it works. But know that I encourage you to go download the 2022 theme or another block theme and truly explore global styles.
And if we hop in here and look at colors, click on that, now we can see that the color palette is there, the one that’s provided by the theme, as well as some different elements, such as our background, text, and links. Now, at this panel that we’re looking at here, we are editing the global elements of the site. So for example, we talked about the background of the site. Right now, it’s white. So if I click on Background, I can come in here and I can see that it’s selected as white. This is the color that we set in theme.JSON.
But what if I really like this peach color? Well, with a single click, I can click, and there we go. Our background color of our site is now peach. So this gives the user unprecedented control to completely modify their site to suit their needs. But again, theme.JSON is providing the default that, as a theme developer, you provide the user, and then they can take it from there.
So that was a very brief overview of full-site editing and the Site Editor and block themes. But I want to take some time and talk about my thoughts on the future of modern theming. So when we think about modern theming, modern theming, I believe, is going to emphasize design over development. Now, you might be thinking, well, designing themes is always about design.
But if you think back to the traditional theme development, there was a lot of actual coding that needed to be done. All the template files were PHP, which required a significant amount of knowledge of WordPress as well as PHP development to do and get right. Well, that’s kind of changing. We see that now that with the Editor, you can design themes directly within the UI of the Site Editor and the traditional editor.
And that’s going to be a major role in how we design themes. So I am a developer advocate for WP Engine, and in our team, we are building an experimental theme called Frost. And when we make a new pattern or we want to modify a template, we’re not going into the files and tweaking the files. We’re going into the Site Editor or going into the Editor and modifying that pattern, or building a pattern, or building a template. And then we’re happy with it, we’re then exporting it and then putting it into the theme.
So we’re not actually coding. We’re actually doing everything visually. And the benefit of that is that we know that a user, the people that are going to use the theme, they’re also going to be in there tweaking the pattern or tweaking the template. And so it makes sense to, while we’re building the theme, we’re doing the same process that a user would be doing to use the theme, which I think is kind of just magical.
And this is going to lead to a low-code or even no-code method of theme development. Now, of course, we’re at a developer conference, right? And so we’re talking about no code and low code. But my last point, we’ll talk about where I think the development lies. But I think this is really exciting because this is going to bring in a new generation of users, folks that want to build their own theme, customize their own theme, but maybe they don’t know PHP, maybe they don’t know JavaScript.
They can do that all now within the Site Editor, which I think is kind of the ethos of WordPress, democratizing publishing. And I think that full-site editing is really striving towards that. And in the last two years or last year, frankly, we’ve seen such progress with full-site editing. It’s getting quite exciting. So I truly believe that full-site editing is the future of traditional WordPress.
Now, it might not be for everybody. I want to make that very clear. And there’s a lot of development that is still needed. So when we talk about different types of people using WordPress, we have everything from the standard user all the way up to agencies. And agencies may want to be providing a very clean, very structured interface for their clients to use and to work on their websites. That may not be full-site editing. I think that’s OK.
But as we’re seeing in the economy, we have Squarespace, and Wix, and Element, or another page builders. There’s a huge contingent of the web community of users that wants a tool that allows them and empowers them to edit and design their own site. And I think WordPress have really been lacking in WordPress, especially in Core. And I think that that’s the aim of full-site editing and that’s kind of the promise of full-site editing.
So a lot to do. Still a ton to do. Still a lot of things that we need to figure out, namely things like responsive controls and how do we restrict different components of the UI so that certain users don’t either mess up designs or modify things that they shouldn’t. So a lot of things to still figure out.
But one of the areas that I think is really exciting is developing for full-site editing. Now that we have this tool that allows users to design their own theme or design their own site, we need to start thinking about how can we take this to the next level. As developers, how can we build upon this? If we think back to traditional WordPress, take the widget screen– widgets in general. WordPress provided a very base level of widgets and functionality, and developers went out and built all sorts of extensions.
And I think the same idea needs to be applied to full-site editing. Right now, there are very few, if any, extensions and plug-ins that really harness full site editing and take it to the next level. WordPress is going to continue iterating on full-site editing, and it will get to a point. But it’s never going to do everything everybody wants, and I think now is the time to get serious about full-site editing and start to think about the ways that we can build on top of that as developers and really bring this experience to the next level.
So I challenge everybody to go out, explore Gutenberg, try out the 2022 theme, and install it, start learning block development. There’s an unbelievable amount of opportunity for niche blocks. And try building your own theme. Try taking 2022. Try modifying it. Try building your base theme. It’s truly enjoyable, and there’s so much potential out there for this stuff.
So I want to stop there and say thank you for attending. And before I go, I want to talk about a couple of resources that I think are really important, especially if this presentation, if you’re new to full-site editing and you want to learn more. So again, you can, of course, follow me. I tweet about this all the time.
But there are a couple of resources. So the first one is Frost. I alluded to this earlier. So this is a theme that WP Engine developer relations is building. And it’s an experimental product. I shouldn’t say product. It’s an experiment, where we’re trying to use it to educate the community on how to build block themes. We’re learning along the way. We’re making a lot of changes and updates along the way, trying to keep up to date with WordPress, but it’s a great resource. Also, again, that 2022 theme– a fantastic place to start and learn.
Next, I want to plug Learn WordPress. This is learn.wordpress.org. The training team over at wordpress.org is doing a lot of work to try to educate and bring a lot of these concepts to the public. So if you’re interested and you want to learn more, it’s a fantastic place. We have workshops and all sorts of different content over there, including social learning spaces. These are held weekly, where we talk about different topics, deep dives into how to code a block to how to build a block theme– so on and so forth.
And then, of course, if you’re interested in development, always start with the block editor handbook. That’s where I started, and there are so many great resources. And then finally, Gutenberg. If you’re not familiar with Gutenberg, I encourage you to get familiar with Gutenberg, especially if you’re interested in WordPress development. And it’s a great place to dive in, explore how full-site editing is being built, how different blocks are being built, and how you can apply that to your own workflows.
So thank you so much for attending. I hope you got a lot of that out of this presentation and are encouraged to continue exploring full-site editing. Thanks so much.
