 I'm Sarah and I'm a full time WordPress core contributor. I'm mainly a developer on the site editor and I've built site editing tools basically. I've been working with WordPress since around 2008 and I started my career at a small digital agency so it was just me and my boss. We use WordPress as our primary CMS which was my choice, the better choice between like Joomla and Regento. Since then I've specialised in JavaScript and some front end related tech and then I now work at Automatic as a full time sponsor contributor. More recently I was part of the 6.1 release squad as the default theme lead for 2023. I bring that up because I'm going to mention 2023 a few times so I'm not biased. I'm currently part of the 6.4 release squad as one of the editor tech co-leads. Oh and this is my dog. Oh no it's not. You can't see my dog. That's my dog. This is my dog Thor. So today I hope to showcase how far you can get with building a theme in the editor only so all from WP Edmund. I'm going to start with an introduction to what block themes are and why you may consider them. Explain how to create and edit themes within the editor. Highlight a few of my favourite design tools and then introduce the create block theme plug-in which is something that I regularly contribute to. So first up. Oh actually I wanted to ask has anyone here built a block theme before? Okay cool. So my next question is going to be is anyone use a block theme in production but there wasn't many people who put their hand up and tell me. Okay cool okay hopefully I can teach you a few things. Yeah so what is a block theme? I'll start by defining that. So the official block theme handbook says that it's a theme with templates entirely composed of blocks. So in addition to the post content of different post types, the block editor can also be used to edit all areas of the site, headers, footers, sidebars etc. So the main idea with block themes is that they allow you to take advantage of all the tools that are included in the site editor without needing to do too much technical work. So this means that non-technical disciplines can now do a lot of theme building work including things like applying a design system or branding guidelines, designing template layouts, patterns and full templates all within the editor. There are also themes known as hybrid themes if you've seen this term floating around. There are a mix of classic themes and block themes which usually just means that a classic theme has been added to a classic theme. It can also mean a theme that uses both PHP templates and HTML template files which use block markup. So I mentioned this because there's no specific rules, there's no hard and fast rules to call something a block theme other than the editor is primarily used as the main way to edit the theme as opposed to doing coding in the back end manually or using the customiser to edit things. So this may sound that there's less work for developers but I think it more means that the work is shifted slightly for developers into building custom blocks and extending core block functionality. So this allows less technical disciplines to be involved earlier on and should mean that developers have more time to spend on potentially more complex functionality. So I'm going to run through some advantages of block things. Sorry, I might have one slide behind. Sorry. So a couple of advantages of block themes. So one distinct advantage of using them is that they are very performant by default so it's not that other types of theme aren't performant. It's that the main responsibility of the performance for block themes is shifted onto the editor or onto core rather than theme developers. So this means there should be less work and sort of less pressure on the theme developers as it's more on the core side. So that's why it's by default. Also, as of WordPress 6.3, the current release, the performance of block themes has significantly improved. I think it's boosted by 40% compared to 6.2 so that's a massive increase. I think that was all on the client side as well so that's pretty massive. They generally score very highly in core web vitals so this is all the base themes so before you start adding things. But hopefully because the base is already really performant, it's a good starting point. They're also extremely flexible as almost anything can be customised by the user either via the editor UI or through the theme.json file. So that's all obviously in JSON which is an accessible language for potentially non-technical disciplines. Customisation is not limited to certain areas of the site or page layout as everything can be made editable with blocks if desired. So this is comparing to something like the customiser where you might only be able to edit the sidebar or one part of the header. This also means that users have more freedom to adjust the look and feel of their site without touching code. They also offer a great preview of what your site will look like on the front end. They're basically the ultimate whizzy wig and they allow for more cross-discipline collaboration. So for example, designers can design a theme directly in the editor and then a developer can pick it up from where the design is left off maybe to add more complex functionality. There's also no need to update the theme manually in order to use the latest updates from core. So previously with classic themes you may have been including new functions or needing to update the theme more regularly. With block themes, the idea is that they inherit updates from core automatically. I'd also recommend testing out any block theme you use regularly with the Gutenberg plugin so you can test out new features before they land in core. Finally, the atomic, so this means they're made of separate parts. There's the theme.json file, there's style variations, there's templates and there's patterns and these can be all used interchangeably between different themes. So they don't have to be, but there's the option to use them interchangeably. So I do believe they're at least worth trying out to see if they fit into your current workflow, especially around the wireframing and design stages of a product. So I've got a link here if anyone's following along with it like a laptop or anything, but there's no need to follow the link. So it's going to spin up a WordPress playground instance using the latest version of WordPress 2023 as the active theme and with the create block theme plugin automatically installed. So this is a really good quick way to test out the editor features I'm going to mention. I'm sharing early on in case anyone wants to follow along, but I'm going to share at the end as well so you can have a look later. I'm going to, because people always like remove QR codes too quickly. I'm just going to run through why I've chosen these tools so it's up there on the screen a bit longer. So the reason I've chosen 2023 is not because I'm biased. I think it's a great blank starter theme that isn't very opinionated. It's especially good as a base theme for creating primarily or only in the editor, as this theme doesn't include any custom CSS or custom PHP by default. You can add some later if you want to, but by default there's no custom code. It does include some simple templates and patterns so you're not completely starting from scratch. And it also includes a good foundation for building a design system as there's some colours, fonts and spacing presets already there. So they're defined in the theme.json file. There are also many good other starter block themes available as well. I feel like I'm on the BBC. Others available. A quick mention about the create block theme plugin. So this is an officially supported plugin that offers additional theme building tools that Gutenberg does not yet offer. So it's sort of like the Gutenberg plugin to Gutenberg. We test out theme features in this plugin and then assess whether they should go into Gutenberg and then from Gutenberg they may go into core. It includes a good starting point by providing an empty block base theme. So that's in the plugin. You don't have to install a separate theme. It introduces font management in the editor. It provides some additional theme export options. So with core at the moment there's only one export option. This plugin provides a few more. It speeds up the theme build process with tools for image asset management and pattern creation. And there's no need to clone a GitHub repo or other theme or download any code. Everything can be done within WP Admin. So I'm going to show you three ways to get started using this plugin. First up is cloning your active theme. So this is one of the easiest ways to get started with a block theme. So if you're using the playground link or you've got 2023 active you should see this clone 2023 option that the plugin provides. So this is under the appearance create block theme menu. This will create a copy of 2023 in the local themes directory. And you can activate the new theme from the user place in appearance themes. So you might use this option if you want to tweak existing templates or add additional global style settings or maybe some more opinionated templates or patterns. Next up is creating a blank theme. So this is another good way to get started as if you use this option you'll get a completely blank canvas. It's worth noting that you're not going to inherit a colour scheme, any global style settings or templates or patterns with this option. It's going to be a completely blank canvas. So you might want to use this option if you're completely starting from scratch because this can be intimidating but this is a great option if you want to prototype a layout, maybe do some wireframing or maybe test some settings in isolation to any other theme that you've got without being influenced by other settings. Or again if you're super comfortable with the editor you can design entirely from scratch using this method. Next up is creating a style variation. So this is another easy way to get started. This will create a style variation of the active theme. So this isn't an entirely new theme. Instead of going to appearance themes to activate it you'd need to go to the site editor and then styles to choose your new variation. So you might use this option if you're happy with your current theme but you want to keep some of the styling without jumping into the code. Again this can all be done without doing any JSON or CSS. You'll keep all your other settings including templates and patterns but the style variation JSON file inherits all the settings from the main theme JSON file. Unless you specifically want to overwrite them which you can do with the style variation JSON file. Then I quickly wanted to note that with the create block theme plugin you do have this. So it introduces this new icon, the spanner icon in the top right and this gives you the option to save your changes as you're going so you can save your theme changes as you make changes. So now I'm going to highlight a few tools that I think are good design tools in the editor and I think are worth pointing out. I'm going to try and identify some not so obvious use cases as well. So first up is the style book. So to open the style book you go to the site editor, click on styles and then click the I icon. This is a great way to view global styles in a single place and it allows you to easily compare many different blocks all in one place and also compare all the available style variations. So this is 2023 so you can see a couple of the style variations on the left. The not so obvious point I wanted to make with this is that it's great for automated testing. So for example if you have a theme and you maybe have some visual regression tests you could spin up a WordPress instance and send it to the style book and you could run some tests so it's not going to capture everything but it's certainly going to capture more, it's better than nothing and you can run automated tests on the blocks that the style book runs. Next up is pattern management and template parts. The template parts are now called patterns as well as the 6.3. So to view patterns bundled with the active theme you go to the site editor and then you click on patterns. The patterns can be any type of reusable block markup. They can be fully pre-made layouts or they can be parts, different separate sections. There's also official pattern directory which is similar to the themes directory so you can include free-to-use patterns created by the community. Currently you need to copy the block markup from the directory and manually paste it into your editor. But there is a way to do this from the site editor under the patterns section. If you click on manage all of my patterns, this thing here, and then click add new you can then paste any block markup from the pattern directory in there. So one thing to note with patterns is that they're saved as PHP when they're bundled with the theme. So if you're looking for an easy way to add some PHP logic to a block theme, then you can create a pattern and you can use any PHP logic that you would have done with a classic theme. They're also great for tiny reusable snippets as well. So things that you might create a variable for previously like telephone numbers, email addresses opening hours, things like that, so really tiny patterns. Next up is font management. So you can currently do this if you have the create block theme plugin installed. It can be accessed under the appearance manage theme fonts menu on the left. So this allows you to upload font files from your local machine and you can also browse the Google fonts directory as well and they'll be imported into your theme. So the font files are saved in the assets slash fonts directory. So they won't be hosted on Google. They're downloaded to the theme locally. And then also there's font management fingers crossed hopefully in WordPress 6.4. So that will be coming out on the November 7th. It functions very similarly to create block theme but it's fully integrated into the editor so it looks prettier basically as well. Offers the option again to upload local fonts or bundle Google font files. And with this version of font management the font files are again included locally but they're included globally. So instead of being in your themes assets fonts file they're going to be included in the WP content slash fonts directory. So similar to how media library assets are currently stored. So this means they're no longer tied to the active theme. Next thing I wanted to show you is image asset management again in the create block theme plugin. So this is great for bundling images with a theme again without touching code. If you insert images into a template while using the create block theme plugin what the images will be automatically added to the themes assets directory. So you can start by adding an image to a template then exporting the theme from the spanner icon again as I showed you before. You'll see that the image has been added to the theme zip file under assets slash images and the image is referenced relative to the style sheet directory in the block markup. So I've tried to show a few screenshots here you can see where the image is saved in the directory and then where it's referenced again in the block markup. And then finally I wanted to show you all the export options that are available again when you've got this create block theme plugin installed. So I've been through a couple of these already. So there's the default export option from the editor on the left which will export a zip of the current active theme plus all style changes and template changes. Next are the options available from the create block theme in the middle. So I've already mentioned cloning, creating a blank theme and creating a style variation. But there's also creating a child theme of the currently active theme without needing to leave the editor. Again this will create a new theme that you can activate from the appearance themes page as usual. And then the final option I haven't mentioned is overwriting the active theme which you can also do from the editor menu itself under the spanner menu and then clicking save changes is this one. There's hopefully an option here to cover most use cases when building a theme in the editor without needing to leave WP admin. So one of the main points I wanted to get across with block themes is that they can be created and edited by people from a greater range of disciplines compared to more traditional themes that usually require more coding or technical language. They're also useful for more than just building a theme. So things like wireframing, quick testing of specific features or checking out new editor features or maybe making something that isn't even a theme. Things like a presentation deck or maybe a to-do list. I've hopefully introduced you some features which will help you build themes directly in the editor and I'd love to know if anyone tries them out or has any feedback and I'd also love to know what people create. So this QR code is a link to these slides and a couple of other resources. There's a final slide after this one. So they include the playground link that I shared earlier. There's a list of resources for getting started. There's some recommended reading and then there's some links to contribute to get closer to the tools mentioned in this talk. I'd also like to mention in the create block theme we're currently thinking of building in some version control management which will probably be get based. We're not sure how much time to dedicate to it so I'd love any feedback on this in particular. Oh yeah and then I've also included some ways to contact me if you'd like to ask any questions outside of this work. Thank you for listening. For questions. Yes. There's not a lot of way to have not an easy way to have version control but I do a lot of copy and pasting and stuff. What is this thought behind that in terms of is that a feature that's going to be added at some point? Yeah. So the question was about version management when you're building a theme in the editor. So there is there's revisions that have just been added to styles and so I think the one plan is to have revisions on all aspects of the I don't know if I've got the menu actually but all aspects of the site edit this menu. I'm not sure, not for 6.4 and I'm not sure how long it will take but I think that's the end goal in the meantime. That will be database right? Yes. So this is the feature I mentioned about the create block theme plugin that we're currently working on. So your question probably feeds into yes we should spend time on building into that plugin and hopefully with the idea if we build a good system with that then that could be merged into Gutenberg and then core eventually but yeah you're right that there currently isn't a way to easily do that. You would have to keep downloading the export in the theme and then saving it somewhere wherever your repo is if you've got it in a repo. That's what I'm doing now but yeah it is. Yeah hopefully we can make that better than in this extra plugin. So it's kind of a double question one, what is a design tool coming up that you're really excited about and what is there a design tool that you don't know coming up that you wish there was? Good questions. So I guess the one I'm most excited about especially for 6.4 is font management because I believe probably before I even part of the community we've been waiting for font management in core so we're a really good one to land and it's just like things like this feel really special when they land in the editor as well because you don't have to leave the editor anymore to do something like this because fonts especially are a little bit finicky and you're more likely to have less technical disciplines like choosing fonts as well so to give them the power to just install fonts themselves and have a play around is pretty massive. One that I wish there wasn't there I'm not sure maybe maybe easier ways to preview we can preview put you easily at the moment can't we probably version control would be a really good one actually yes So for somebody who gets completely overwhelmed with everything they do is there a good place for me just to start when can I start to just because if I go to that thing I'll just go this stuff I don't know 20 minutes to 10 days later still just people with a black page overwhelmed with it because obviously even the resources there is too many the first one I know what you mean there is a lot I would probably say something on the learn site to these two by Sarah and Jonathan so ones aimed at developers and one is like non-developers basically so you can choose either or whichever one you prefer hopefully once you've done one of those you might have enough knowledge to then know which link to click next I know it's intimidating but I guess the best thing would be just to dive in and have a play if you've never used the create block theme plugin I recommend that and pick either 2023 or any other block theme that you like and just have a play with some of the clone block theme options hopefully it's not too intimidating once you start doing it because you're confined to the editor it stops you from getting lost anywhere else you might get lost within the editor but you don't have to look at any code I'd recommend maybe just trying that plugin out and certainly these courses as well maybe one more that's right and also if the images are also included they're saved as PHP files because if you saw the markup obviously you have to reference the style sheet directory and that's in PHP but I like to mention that because it's a good way to get some PHP in there as well because that might be a thing that people want from block themes as well