 So I wanna know how much you already know about WordPress theme development. So when I first started this, I knew almost nothing. I was a one and that was okay. We're here to learn and we're here to learn together. And then there's a three. I know some things about block theme development, whether that is classic themes or block themes, it doesn't matter. I would probably describe myself thoroughly as a three personally. Yeah, I know some things about theme development and I'm learning as I go and as I learn, I do these workshops with y'all. Or five, I am already a theme developer. I know we have at least one of those on this call right now which is very exciting for me. We definitely had some earlier today and it was really, really cool to get to chat about everything. So I see a four, a three, a one. Wonderful, lots of threes. Or is it a one? None says that they're at a three but it's been years since you've done anything. Hey, that's cool. Well, I hope to knock your socks off with this because there's some really cool things we can do with almost no code. It's very low coding required today. Okay, so many of us are solidly in the middle so we're gonna learn together. So our focus today, we are going to examine the bones or foundations of how a theme transforms from absolutely nothing into a block theme. So this is a video. It's available on Learn WordPress for you so you can always watch it at a later time without having to rewatch this entire video. I find that seeing how a block theme can be brought into existence file by file can give you a really good sense of what you're looking at and what it does and how it works. And it's kind of magical when you see it, I think anyway. We're also gonna utilize some theme.json settings to turn on some important theme designing tools in our site editor. So this is very low code. I'm not gonna be coding in front of you today. I'm just going to say, help, here it is. This is what it looks like and pop it on in. It'll be really fast. But what it does is it's gonna turn on some tools. I will provide you a theme that is blank that has a style guide with it that you can download and play with on your own if you wanted to design a theme of your own at the end of this. We are also going to see a theme being designed and fast forward in the site editor. It's a resource that I found that was really, really cool and it kind of gave me the idea for today's workshop, honestly. And then we're gonna explore a style guide, a very rough one that I've created that's in the site editor. Normally style guides are done using Figma or another design tool like Photoshop or I don't know, maybe you paint on a canvas. I don't know how many designers like to do this, but they usually require the stuff of transferring from the Figma file over to WordPress itself. So what we're gonna do today is going to skip that transfer step and let you use the site editor kind of as your canvas. So I'm really excited and we'll get started. I do wanna point out that these are advanced type of things. If you are just joining us for the very first time, I didn't see very many ones, but you might wanna head over to, and you're still welcome of course, but you might head over to learn WordPress. We have some courses. So if you are just getting back into this, you're used to coding PHP and you're seeing tools that you've never seen before. Highly recommend you head over to this View All Courses button and scroll down to using the site editor. We're going to be using the site editor today and here is a link to the very first one that'll teach you some simple site design. So if you're just seeing these tools for the very, very first time, highly recommend this course so that you're not completely lost. But again, you're totally welcome to join us. Just know that this is more of an intermediate advanced type of workshop. Lynn is asking, so to be clear, if we download the theme I send, you won't have to do all the preliminary steps of creating the files, et cetera. No, you will not have to do that. You will just be able to install the theme and then it will come pre-packaged with everything that you're about to see be created for you. So that style guide, the theme.json tools, all of that. Yeah, so back to this. So let's look at the bones of a theme. I really wanted to know how something went from nothing to a place where you could actually play in WordPress. So if you look at a classic theme, for example, 2021, odds are it's a little bit daunting. So I'm going to go over here. I'm going to activate the 2021 theme. Now you can see that there's a theme file editor, disclaimer, best practice. Don't use this to edit your theme files. It's not a great idea, but I'm just going to use this to show you some of the things that are inside a classic theme. So you can see it warning me, hey, don't do this, don't make changes here. It means it. I'm going to go ahead and press I understand. But you can see all of the files here that make up a theme. So for example, a theme footer has all of this code. A single page has all of these these things in it. The main index template. This I mean, this is a lot in here. So if you're used to classic theme design, this is what you're used to doing. You're used to coding a lot using PHP. And for me, as a beginning designer, it was really, really daunting. I I learned HTML in middle school and I never moved on to PHP or anything else. So it was really exciting to discover. Hey, a block theme doesn't need very much code at all to get started. In fact, I think it's something like five lines of code that is super simple. So what we're going to do is we're going to watch a video of that happening. So they're made up of four files. You can add more in the site editor, but the only thing you need for a block theme to appear are your style.css, index.php, a templates folder and an index.html inside that templates folder. So I think I'm a block theme. So we're going to watch this video. I'm going to press play. And then Catherine, give me a thumbs up if you can hear this. If you're new to theme development like me, you might find it hard to picture the steps it takes to go from no theme at all to your very first blank custom block theme. The WordPress developer handbook explains it well, but what does this look like in action? This brief tutorial is meant to help demystify what essential files you need and how to set them up to go from zero theme to a brand new totally blank block theme. And as you'll discover, it's easier to get the very basic setup than you might expect. By the end of this video, you will be able to create your first basic empty block theme of your very own and briefly explain what each necessary file does. To get started, you will need a few things. One, a local development environment, such as local, champ, or mail. And two, a text editor, such as Visual Studio Code, Sublime, or PHP Storm. Finally, you'll need to set up a sample WordPress website to experiment with and create your files. Once you have these things, you're ready to go. Let me walk you through it. I will be using local by flywheel today and Visual Studio Code. First, I will make my sample WordPress website. This gives me a place to experiment. Once that's set up, I will navigate into the local files where WordPress themes live. Please note that it can be a little tricky to find local's WordPress files the first time, so I made a shortcut to them here for my own computer. Be aware that you may need to do some digging in your computer to find your development environment's WordPress files. Now, I'm going to open up my text editor. Once I've found my sample website's WordPress files, I will navigate to its themes folder. I click the name of my sample site and click app, then public. Then I scroll down to wp-content. From there, I select themes and I'm there. Here, I will create a new folder where my brand new themes files will live. I'm going to call this new block theme my dream theme, so that is what I will name this folder. Now, I'm going to open this brand new theme folder. You will see that it's empty inside. It's time to create its first files. I will start creating my new block theme with the first of the three files, index.php. I don't need to write very much here. All you'll see me type is left caret, question mark, php, no other coding at all. This file was once an all-important file for classic themes, but now exists largely as a safety feature to prevent hackers from being able to see a full list of your themes in our files. In the future, this file may no longer be needed at all, but as of August 2022, it's necessary for block themes to function securely. Before you'll find your theme in your WordPress dashboard, you need a second file, style.css. This file's purpose is to tell WordPress itself, hi WordPress, I exist. I'll include some code here, slash star on the first line, and on the second line, I'll type theme name colon, my dream theme. The third line, I'll write author colon, Sarah Snow. And on the last line, I'll write star slash to finish it up. This file alerts WordPress that my theme exists and WordPress responds by showing my theme in my WordPress dashboard. Congratulations, your theme exists and can even be activated. If you click around, you're going to find that your custom theme might exist, but it doesn't do much of anything. Yet, where's the block editor? How does this newborn theme grow into an actual full block theme? We need one more directory and one more file to make it happen. First, this new file needs a folder to live in. We will name this new folder templates with an S at the end. Use your text editor to create this new folder. Once that folder's created, create a new file, index.html. Make sure this index.html file is inside the templates folder or it won't work. You don't even need to add code to this file to watch your theme transform into a beautiful new block theme. Watch as I reload my dashboard. Suddenly, I can use the site editor. Congratulations, you now have a blank canvas upon which you can design a new block theme. Take a look at how the template folder you just made and the empty index.html file you created show up in the site editor. Cool, right? Please note that this is just the first step in creating a custom block theme. There's still quite a bit more to learn. For example, if you make changes in the site editor, you have to export your theme in order for these changes to be written to these files that you just created. There's also a world of new possibilities with theme.json code. Visit learn.wordpress.org in the future for new tutorials and courses to discover the next steps to build a custom block theme of your very own. Of course, you can always head to the theme handbook at developer.wordpress.org slash themes. We'll see you next time. All right, so you just watched a theme be born. Okay, that's enough of that. There we go. So you watched a new theme be born and I wanted to see what all you could do with the theme with that. You might have noticed that in that file list, there was no theme.json file. And that's because it's technically considered as optional. And what a theme.json does is it turns options off and on. One of the things it does is turn options off and on in your site editor. So what a block theme looks like without a theme.json file is largely this. I added some context here. So this wasn't just a blank screen, but it was missing a ton of options. So I could still edit every single one of my blocks. I could still play a little bit with typography and a lot with colors, honestly. But I wasn't able to move my website from being super, super wide to being more contained and prettier and like with proper spacing between the blocks. Like that option by default is just turned off for whatever reason. So I discovered that there are a few things that we need in your, what is it? Your theme.json file. So the options that we turned on, oh my gosh, click thing, there we go. We need to turn on appearance tools, which will allow us to make our website bigger or smaller on a screen and create padding in between things. There's another one called layout that is super, super important for containing, your container block. So determining the behavior of things like cover blocks, like how wide they can go so that if you have a cover block and it's displaying, I don't know, on a big screen TV, it's not like whoosh and super stretched forever. It's contained within the pixels that you set. And the other thing that I really like is the color palette because one thing that I discovered is that if you set the color palette in the theme.json, you leave it blank, but then you select the colors there and export it. You have to export it. That's what I learned this morning. And we'll talk about what this looks like in a minute, but then any colors that, like let's say you wanted your contrast color to go from blue to red, anywhere that you would use that blue before, you can make one change once it's been exported and it will ripple through the entire website. So these are super, super valuable tools for that. So yeah. So where was I? In my theme. So if I'm heading back over here to my online workshop theme, you'll notice that you could no longer edit the actual files in there, probably a safety feature. But once I turned those on, you will notice that if I click over here in my global styles, I have an extra button which is super, super helpful. And within this button, I have the full site width. So this is the full, what thing I was talking about with the big projector being able to contain it to 1280 pixels. But I can also very easily adjust my padding that way. So I did create a style guide here. And this style guide does not normally exist. Normally, I'm going to delete this just really fast. If you were to just build a site from the ground up, it'll just look like this. And I found that it is really, really hard to visualize things. So even though I can go in here to global styles, even though I can change all of my colors and my color palettes and things like that. Let's make this background a nice light gray. We'll do dark red contrast by primary color. Maybe for my text will be black. Then I will do a secondary color white over here. I can do all of this, but if I don't have anything on my page, let's say I'm changing the default text color, it doesn't look like anything's changing too much just that, right? But you generally want to go block by block. So that is why I created version 1.0 of the style guide. Yeah, so I'm going to put that back. I'm going to just copy and paste that code in there. You can see all of this code here. This code was written by WordPress. So every single thing that I did using the site editor, if I add a plus to something, and I don't know, let's add a button somewhere. Where did I add that button? I don't know, let's put it here. Another one I do things, there we go. There are the buttons that I just added. That is being written in the actual code itself. That didn't exist before, but now if I switch back to the code editor, scroll all the way down to the very bottom, it wrote code for me. So this is a very exciting thing, excuse me, to just be aware of. So let me talk a little bit about where this idea came from. First off, it's really hard to edit a blank piece of paper, but I kept talking to different theme designers and they would tell me, oh yeah, I designed this right in the code editor, or not the code editor, right in the site editor. I need more coffee, anyway. They would say, oh yeah, I designed this right in the site editor, and I didn't realize that they were working from a theme.json palette. So every single thing that you can do here, block by block, as I'm going to show you a little bit how to do, can be done in theme.json. So a lot of people will pre-program their theme.json, they will design the way their site looks visually in a Figma file, which they have open sourced. You can see what these files look like. This is basically the start of many people's theme design process. And you can go and you can create an account and then you can look at what people have done. So it's really, really cool, but what they were doing was they were designing here in this Figma file. And then they were able to take all of the things that they had done, zoomed in, let me, and they were just programming all of their colors, different sizings, different like the padding around things, all of that was pre-programmed into their theme.json file. And that seemed really daunting to me. That felt like not beginner friendly, because one of the things that I really aimed to do is bridge the gap between advanced user and beginning developer. So that's what this is about. That's where this came from. So when they did that, they moved into their theme.json code and they were able to design a theme using just the site editor. And that was such a cool thing. So there's a step missing between then and this video, but I want you to see kind of how this can happen. So rather than designing over here in a completely different tool, they did design in the site editor. And then the style guide that we've created here will bridge the gap and help you to do the same thing if you would like. So let's watch this video of a theme designer using the site editor to design a theme from scratch. Do know this is a little bit low on volume. I've turned it up as high as I can. But if you have trouble hearing, try turning your volume up. It's as loud as I could get it to go. And if I burn this again, I will find a way to make it louder. I just wasn't able to in between. So here we go. Hi, today I'd like to show you how easily and quickly I've created a new theme in Gutenberg, the WordPress block editor. At Automatic, the process of designing a theme always includes an initial phase of conceptualization and integration. But after we have a solid design direction, we start building our new theme directly in the editor. This is the exciting part, being able to see the ideas live. The theme I'm building today is called offset, and it's called that way because of the offset layout of the pages. The index, archive, page and post templates use the columns block to create that zigzag effect with plenty of white space to achieve the goal of the design. I have some posts created already to test the layouts, but I've started from scratch, setting up the styles and templates for this theme. The first thing I did was customize colors, fonts, the title and tagline of my site. This is really not mandatory to start with styles, but because I'm a visual creature, I love it when I can get the right vibe right away. After I've set up the global styles, I go ahead and start adjusting or rebuilding my templates and or template parts. Next, I've customized the appearance of specific blocks. For instance, I wanted headings and post titles to be bold and I wanted a different line height in post, excerpts and paragraphs. I find this tool really useful as a designer. It gives me endless possibilities and even though there is a learning curve, once you get how to use it, it's so cool. The header and footer template parts also needed some customizing. In the footer, I wanted the social icons to be quite large to match the dimensions of the header items. As I'm designing, I like to see the site and I always find something else to adjust. Usually a spacer here and there or a padding is applied to each section. For this video though, I didn't go pixel perfect for the sake of your time. I just wanted to get the main idea and structure built. Once we have set the foundation and the embellishments that usually take so much time to get right, we can export the templates from within the site editor. The ability to export global styles is coming soon as well. It's really exciting how much you can get done if you're like me and the furthest you can go touching code is the real basics. Now with the possibilities the editor provides, designers or users with no coding experience can create their own themes. And the more they do it, the faster they get. In the end, I also check how the site behaves in smaller screen sizes, especially when we're using columns blocks. It's always worth checking if text overlaps or breaks in weird ways or if there are any weird alignments. In this case, it actually works pretty well. I hope you enjoyed this video in that it has given you an idea of how easy it is to design a theme with WordPress. I also hope it motivates you to design your own site or theme. Yeah, Linda, you're right. This did go super, super fast. Let me put the link to this in the chat for you. Nope, let's not start again. So this is from an automatic design blog. And again, this is the first time I think anyone is doing it this way. This is the second time, I guess, today. So we are exploring new ground. But yeah, so some takeaways. Catherine says that it looks a lot faster than write some CSS and refresh the browser. You used to have to write a ton of code and kind of see what it did, or if you forgot a comma or a quotation mark or something, which I did a lot. So did anyone else see anything that was interesting to them just throughout the super speedy process that just to take away? That's something you noticed about this process. I wrote in the chat that things I noticed were that the designer definitely relied on some patterns, which I thought was really, really cool. Those are available in 6.1, so you can definitely not have to start completely from scratch, especially as I think she worked on her header. And there was also some sample content as well. Any other takeaways before we dive into playing with our style guide? Even with global styles, there does seem to be, yes, there is a lot of fiddling, no matter how you go about it. So yeah, so you can do a lot in the site editor. It's important, like she said, one thing that was, oh, it's not pixel perfect, meaning that it wasn't exactly positioned the exact way she wanted it, like down to the specific itty-bitty microscopic pixel. So that would require some coding and some knowledge there. But you can get pretty close and really do a lot of cool stuff with this. So this tutorial specifically came out of her comment, oh, I spent some time in global styles ahead of time, and I wanted to see how I could do that. So I designed this very, very ugly global template. So what I did was I went to my templates initially, it was just this index post, and I clicked on add new. I went down to custom templates, and I called it style guide. I'll make the style guide number two. And this actually pulled from my index template. Oh, that's a new feature. We're not going to get into that. That's not for today, but basically it was just blank. And this is coming from the create block theme plugin. There is a way to do this faster, which we'll talk about towards the end of this, to create a blank block theme, complete with most of your settings turned on. But this is all that you'll get if you decide to create a blank block theme. So again, it's that same problem of, well, how do I see what it is that I'm doing as I'm working in my global styles? So to my templates, we have this, not that one. I pressed the wrong button. Templates. There it is. So now, if you click on your list view pro tip, always use the list view. You're going to notice that if I compare this to my building blocks over here, I tended to go pretty close to this. So you've got your paragraph there. You have next headings are right there. I did do some headings in here, like images and galleries so that you could kind of see that. But as you scroll down, you'll notice that it matches what is going on over here. So this allows you, using the style guide allows you to visualize what you're doing as you're doing it. And I think that that is just so cool and so needed. It's the step between, oh, I'm, you know, I designed all of these styles in my theme.json using code. And I can do this in the site editor. So let me show you a little bit about how this works. So the key component to doing this is one having the style guide set up. This will be available in one of my new modules in my course about doing this exact thing, designing your first block theme. And you're just going to largely work up here in your global styles. Sally says that designing with the site editor is fun. And yes, there are going to be some things that you have to set using the theme.json. So let's look at what we can do, right? So the first thing that we notice is that this layout is whoosh, spread all the way across here because we turned on those appearance tools. I can make this look a lot better. So it can definitely have some padding around that. And you'll also notice that padding continues to change or and exist depending on my screen size here. I don't know. Were you able to see that when I did that? I've never tried doing that before when it was just one screen. Okay, cool. Thanks, Katherine. So you're able to see how that looks on the computer screen versus maybe a tablet or a mobile. And I think that's really cool. And I can also add some block spacing in here. Everything seems a little, a little squished together. So I think for every block, rather than have it be right on top of each other, as is the default, I want it to feel a little bit more like maybe a newspaper. So I'm just going to add, let's go with 40 pixels of spacing there. I'm just going to add that there. And already you can see, oh, hey, this is looking and feeling a lot less cramped. And it was just a few clicks of a button, whereas before you had to use a bunch of code. I'm going to make that just a little bit more spread out. Newspapers tend to have a good deal of spacing. And then let's look at our colors. So for my, set this because I was playing with it right before we did this. So for my theme.json, I didn't set any colors in the code. So if you set this up with the example that I'm going to give you at the end, you'll click on edit colors. And from here, you can do things like decide on what your background color is going to be. So I kind of want this to have, and each of these are, I shouldn't have named that background. I should have named that base. Let me be really clear about that. That was how the 2022 theme was named, but we're starting to kind of get away from that. But I think I want just kind of an old newspapery feel. And I'm going to use this as my background. Normally this would just be my base. And then for a contrast color. I'm trying to keep this really accessible. Some really light. Okay. So there's a little bit of a yellow color here. There we go. I've got a contrast there. I like that yellowed paper. I think I'm going to use my primary color as my text color. And I'm going to have a lot of white backgrounds, because I think that that's really, really nice. So I think I'm just going to, yeah, there we go. There's that beautiful hexadecimal color. And then just for funsies and making it nice and bright and dark, I'm going to use a dark blue color. That feels very new site, right? So I've set these colors in my palette. And I can go through and design all of these, these different elements. I can say, Hey, all of my text color. I want to be black. That doesn't change a whole lot, but you can see if I change it to this blue color, which I'm using for a contrast, like that's changing all the way down my site. So my text color is going to be black. I think I want my background to be that. I don't know maybe that. There we go. Let's use this one actually, let's use my contrast color as I'm going to use this, this background for emphasis. The point that I'm trying to illustrate is that whatever these are named, they don't necessarily have to be used that way. I think I want my links to be this nice robust rich blue color. And then I can even decide, Hey, I want my headings to be another color. And if I don't have enough room over here, I can also select a different default down here. Whoa, why did it do that? That was bad news. Clear that. Oh, I don't want to reset everything to default. What just happened? Oh, background colors for headings. That's what I did. Oh, I didn't even see that this morning. You have an extra option. So rather than my text, you could. Wow, that does not let me let me fix this really quick. I'm going to press this clear button. And I'm going to. There we go. That was a surprise to me today. So it looks like even now, this is a new feature. I've never seen it before background color for all headings. If I just want my headings to have a different color there. I can absolutely do that. That's really cool. Can I do that on my text too? Thank you for exploring with me. No, it doesn't look like it not yet. So this headings button is brand new. This used to be one of the things that you could only do in your theme. Jason to change that the sizes, if you made a change here, it happened to all of them. But now you can select different ones. So let's say that I want my H1 headings at the very. Well, I should be that one. Anyway, let's say I want my H2 headings. You can see this here to all just be blue or all be green. You can see that I'm only applying to anything that's using that H2 heading. That's not dark enough. Let me make that darker. I'm doing it again. Our time. So you can see having these colors preset really helps me to design. But that's, that's the other point that I want to make with this is just that as of 6.0, you could not do this in the site editor. As of 6.1 here, that option is so I can make that heading to a different color. And I can make this one over here. Another darker color so you can see the difference there. And I just, I think that's really cool. So once you start to get the general like look and feel for your site. Then we want to start getting into specifics because you can design like this all day. But it's in these blocks. This is normally where people are using their theme.json. And here's where it starts to get really, really exciting. So let's say for my paragraph, one of the things that I want to do is make sure that all of my paragraphs have a white background. It feels kind of newspaper-y, kind of fun that way. I can set that and every single one of the blocks that use this paragraph will automatically have this white background here. So if you scroll down, you'll notice that a list here doesn't have it, but it does. And it looks like the text inside of a column will do that. Oh, and it looks like the text inside this cover block here did as well. So if I change it to this kind of modeled color, you can see that changing in every block that uses this all throughout. And the same thing is going to be true with this layout button. This is how you can add that. And the same thing is going to be true with this layout button. This is how you can add some really nice padding around things. So this gives us a lot more space and a lot more, a lot more space and a lot more padding to work with and play with, to give things much different feels like that. It feels very different from a design standpoint than this. So you can see just how quick and easy it is to do that. You can also change it to, it looks like they're using REMs here. Yeah. So I'm going to, let's see. Okay, it looks like we are getting some more information. So this way you can really visually see what you're doing as you're doing it. And you just go down block by block. So we talked about headings a little bit. That's a slightly different tool. This is going to happen across everything. This is going to be a single heading of mine to be all uppercase. If I select that, you'll notice this change rippled across the entire website and it impacted every single heading. My recommendation is usually to just use camel case or however it's written in the thing. This is much better for people who have dyslexia, which is something that I learned during an online workshop. So this layout tool block by block is really, really useful. Now, let's talk very briefly about images. So with my gallery tool here, handy dandy gallery, we can give things backgrounds and things like that. We can also set gradients if we want to do something interesting there. That's not pretty. We're not going to do that. But it does give you a lot more there to play with than you would otherwise have. And again, here's that layout button. We can add padding around our images. Oh, gosh, that looks like. What does that look like? That looks like. Kind of a post not a postcard to Polaroid. There it is. And you can also add margins around it to the space here. You can see that I'm using some images of my own here. And this is something that I need to caution you about. Does anybody know what happens if I add images to a theme and somebody else tries to install it. On their WordPress website. Where do those images come from? Just curious if anybody knows offhand. Sally says crash. Beautiful. So it could crash. But what happens if I add a map. No image may be displayed. Both of those things can be. Can also can be true. But what ends up happening. Yes. So because I'm developing this on local by flywheel. Which you can also do on map or champ. It's going to try and pull this image from my computer. And local does not have an internet connection. So I think that's a good idea. I'm going to add an element that I want to use. I'm going to add an element that I want to use. Like a broken image. Now, if you are a theme designer and you're like, no, like some of the images that I want to use really adds some like looks and feels. And like they've really just add an element that you need to have. They may end up pulling from your website. Now there is a way to do this. I know that some theme designers that I'm aware of are they register block patterns. Actually, which I think is an interesting thing. Yeah. So what they do is they end up creating patterns here. And then any themes that need to use them pull from this, this website. So the file path goes to that website. Which I don't know is necessarily accessible. For just a beginning developer. So as you're getting started, I'm working on this. I'm working on a way to make this. More available to people who are like me and learning to develop for the very first time. But it's important to know that if you do use images and if you're using a copy of it, you're going to be able to go back to the website. And I think that's great. So if you're using any of the copy of any content or Lauren, if some text or whatever else like fake or press or whatever. You want to make sure you remove it. After you're done playing with it. So great to have sample content to visualize and see and play kind of like what we saw on that video. But do be aware you do need to remove that. Later on. And then Sally says there's also the problem that even if it loads the image, they may have some copyright issues. So that's great. So that's great. So that's great. So that's great. So is it available for open source? Or is available to you as a theme developer? Yeah. So this is basically how you design using the site editor. So you can go down block by block. What is this one? This is a quote. Let's go look at that. Why is that white? I want to fix that because that is not. Oh, I had a color selected. Okay. Okay. So that's great. Boom. Fix. Oh, and I like what it did over here too. Like starting to look kind of nice. So yeah, so we're going to keep going. I'm going to keep going. And you can just go down through this until you get to the very bottom of all of this. Now there's a lot of blocks. Like it can feel really overwhelming. I accidentally erased the example that I had earlier. That took me like 20 minutes that I was actually kind of on a tropical beach at night. And it felt really nice and it only took. 20 minutes, but because I had the style guide and could go down bit by bit. I was able to really get a strong sense of what this would look like. So yeah, what else was I going to say about this? I'm going to. Double check what's going on in the chat here, visual settings, fluid typography. Yes. So there's lots of control and fluid typography. All of that is evolving and block themes for sure. There are definitely some GitHub issues around there. But I do want to pull your attention to some things that. We're impossible before. So for example. In links. There is a way now in your global styles. To do a hover color. I know I saw it earlier today. I remember where that is. It's somewhere, maybe it's custom link. Was it on the button block? Maybe I've seen it. So once upon a time you had to do either theme.json or CSS. Let's look at. Button blocks. There was a way to do it on hover. I'm not seeing it here right now for whatever reason. But that is something that is new in this editor somewhere. Yeah. So with that in mind that that's how you use this. And then once you have your whole style guide done. If you make sure that you save it, of course, if you head to your, let's say template part, let's say that I want to make a header. Right. Let's make a header template part. I'm going to call it just header, nothing too fancy. You'll see that it's already pulled in some of the global styles that I've picked here. And now I can, well, do we have patterns? I think I can, let me use this insertor instead. If I go over here to patterns. I can search header. And I can just stick this right in there. So this image is coming from the pattern directory here. But you can see that there's all of the space here. I'm not sure what's going on with this though. I think that that might be okay. So this is something that I need to clear. So one thing to note about patterns is that some of the preferences in your settings might be overwritten by a preference in that. So you can do that, but you can see that this, this color generally speaking is, is already being pulled. You can see there's space around things. And that, that's really, really cool. So let's go to color links for the hover option. Okay. Let's find out. I swear I was just there links. Aha, there's the hover button. So you can set that there so that if I wanted to go from a blue to a light blue, like you could potentially do that. It probably needs to still be a dark color though. But yeah, so you can use patterns here or you can just start designing. So we've got this basic index template. It's supposed to design things. It's already stylized the way that I wanted it to. So I can go through. And really just plan things that are already meant to have look and feel that I wanted them to have. This chat has happened today, y'all. I love it. Okay. Did we catch Linda's question? I apologize because I was typing, but Linda asked that she said you're showing us a style guide that you've already created. Can you show us how to add a blank style guide, because I don't know if you've done that before you went and showed us how to create a new template from scratch, but I don't think we actually added anything to it. Oh, um, I don't know if there's time, but no, I think there's time. I'm trying to, do you mean like a new template from like entirely from scratch, like how, how you would build it just from a blank. Linda, I don't know if you want to unmute yourself and respond or maybe type it in what Linda said was, so you're showing us a style guide that's already created. Can you show us how to add to a blank style guide, maybe just a heading and paragraph. Okay. Yeah. So let's, let's make a new style guide. Yeah. Thank you. I just don't know how to get started with creating my style guide. Ah, okay. So I'm going to provide a theme for you at the end that you can install on your website, but if you wanted to make your own style guide and you were looking at the one that I made and you're like, wow, that's not pretty and that doesn't do what I need it to do. I have a very simple website. I just want certain things on it. The way that I designed this is I went to templates. I went to add new and this is going to pull. I'm going to just completely delete this because it's pulling from. Just remove this because initially this is what I saw. And you might have like a little bit on your, on your page. But what I did was I opened up my list view. And I opened up my global styles. And I selected my typography, my colors and kind of, you know, gave it some spacing and then I went to my blocks and I just kind of went one by one. So the first thing that you said was like maybe a heading. So I would go ahead and add. Okay. So all those blocks on the right where it's paragraph image heading is going to be there. Yes, they are. Awesome. That's, that's the missing information I didn't catch. Thank you so much. No problem. No, I totally understand. Yeah. Yeah. Yeah. I think that the first like that gosh, I think for the first six months that I played with the block editor, I never saw this button. It didn't make sense to me that you could completely set your global styles. I thought everyone was like, Oh yeah, you can design a theme just with the typography and color setting. Like it was so baffling. And I think what's really, really cool is that WordPress will write the code for you. So we've got seven minutes left. I'm going to show you something that I think is really, really cool. And in my colors, I have this, this blue color, right? It's known as tertiary. And I think, let me double check, but I think that my, was it my headings? Yeah. So my headings now are all going to be this tertiary thing. So I'm going to save this. And for those of you who are experienced with this, what I'm doing right now is I'm saying, Hey WordPress, I want you to override the theme settings and put my preferences in here instead. If I go up here to this export button, it is going to download my theme with updated templates and styles. So I'm going to stop my screen share. I'm going to show you my theme.json file before I do this. And then I'm going to show you my theme.json file after I export it. And it's going to basically make a duplicate theme, but it's going to hard code this into my theme. So WordPress no longer says, Oh, these are user preferences. It says, Oh no, this is what the theme designer said. These are the rules that these are the presets that exist ahead of time. So let me stop my screen share really quick. And you're going to see my very cluttered. What should I call it? My very cluttered desktop, which is fine. So if we go into my theme.json file, can everyone see my screen? Okay. Yes. Okay. Open with, I'm using visual studio code today. I know other people like PHP storm. So you'll notice that I've only turned on a couple of things. I have this. You slid the code editor off and we lost it. Oh, is this the screen that you're looking at? There we go. Yes. I'm looking at the wrong screen. Okay. I picked the wrong screen. Okay. So you're looking at the code editor here. You'll notice that there's the schema. This helps me to write theme.json code. And then I've got a few settings. I have my appearance tools. Those are on. And then I set a very basic color palette. That allowed me to fill those in with what I wanted. And then the layout size here. There's also a version here. It's very, very minimal code. So now. I am going to pull this onto my screen. I am going to export this. And this just went over here. This is my copy. Obviously I've done this several times to make sure that it worked. I was experimenting with something I learned earlier. So if I go in here now, and I open up this theme.json. You're going to see a lot has changed. So the first thing that you'll notice, the colors that I picked are now hard coded. Into your theme.json. So the tertiary color that I was using in headings. Has been written right there. So what this means is that if I install this theme now. Anywhere that I use this tertiary color. Is going to, like, if I make the change from like a blue color to a red color, it's going to change anytime I use this tertiary color throughout the entire website. So you'll remember. Maybe where did my thing go? Yeah, I would lose my head if it wasn't attached. This is the problem with too many monitors. How did I lose that? Hold on. Try that direction. That direction. It was just the other direction. So you remember that I pulled that tertiary color into my headings. So if I scroll down and I search in my code. For heading. You're going to see different presets that I. Right now. You can see that or not. You're going to see that where I set those. I'm going to change that color to a red color. I'm going to change that color to a red color. There it is. This was the color that I had set. And so now if I change that color. Either in my code itself. Or if I change the color in global styles. To a red. It'll ripple throughout the entire website. And I thought that that was so cool. What a great time saver. You used to have to code those things. Individual link by individual link. And it's just so much easier. So. That is how we have created a style guide in the site editor. Let me grab you the link of the theme that I made that has. Your blank theme colors. It has your. Layout tools turned on. And it also has the max content with. So that you can install that theme on a website of your own choosing. And you can also do that. You can also do that by playing with the style guide. So that way when you go to. Your templates and template parts. Styling things becomes a lot easier. You can just manipulate this and know it's going to be the color that you want it to be. While I get that any questions in the chat. Today. I see a lot of really great chatting. Oh, y'all are so wonderful. So I want to hear from you. So let me put this over here. So the main question. That I had was why aren't more people doing this? And I think it's because people who are transitioning from coding continue to design using primarily coding. It's a habit. But as you can see everything that you were doing in here. If you look at this code now, look at how much longer it is. Then the one that I had before, like. there. And I'm hoping that it serves as a springboard between doing things here and trying to figure, hey, what can I do versus what isn't possible in here yet? I'm hoping you're like, hey, I just want there to be padding on the left and the right, not all over the place. How do I do that? Then you just go looking for that specific code and you can start to play with it that way and just learn, hey, one bit of code rather than the entire settings and styles and templates oh my in theme.json. So that is the purpose for that. Oh, I'm so glad you want to play with this, Linda. That's so great. But yeah, so let me grab the thing that I keep telling you that I'm grabbing and then getting distracted. Fortunately, we are out of time. You all ask some amazing user questions. So after design, how do you use it on a second website? Export it just the way that I showed you. How does this work with mobile design? It won't be pixel perfect, but the blocks are generally very responsive to different screens. Here's my link. I had a link. Where did I, is this what I get for redesigning this? All right, I'm going to grab it from somewhere else. Otherwise, oh, Chris, thank you. I appreciate that it's a good idea that you think so too. There it is. Get link. Copy link. Everyone in the meeting. There we go. Maybe there it goes. Okay. Perfect. All right, I think that's everything. It is 601. I hope that this gave you some confidence to go and experiment and play and all of that jazz. Keep your eyes open in the next probably three weeks over at learn.wordpress.org. There is the develop your first low code block theme. This course is not yet complete. This next section is meant to walk you through it. Right now we've got basically how to set up your theme from scratch. I can see this, but you won't be able to yet. And it's basically just going to be what we went through today. The basics of theme.json. It will teach you your first codes in theme.json. So how to turn on those appearance tools yourself, how to turn on your layout, and how to set your color palette. So like really let you touch coding maybe for the first time. You'll check to make sure it's working. And then we have a little bit of design element best practices. You'll create your style guide with that. And then you'll design your template. So that's coming. Keep an eye out there. If you would like to find this recording later. And I know we're running over just a little bit, but it's always important to me to the view all online workshops button here. This brings you to a calendar of future workshops. Obviously today was a busy one right before. I think you asked Thanksgiving. We're still seeing your Google Docs. I don't think we see what you're showing right now. No, definitely not. There we go. Yeah, let's try this again. Multiple screens is challenging. Especially when you're used to it being the other way around and habits. Okay, so if you go to learn.wordpress.org, if you view all courses, the course that I was talking about is where was it? Develop your first low code block theme. The first two modules are available. The third is almost done and should be released publicly soon. So I talked about what all of those things were. You can see what those will look like there. But if you want to find this recording later, thank you all so much for bearing with me. Please click on this button down here. View all online workshops. You can see future workshops and days that were very, very busy. But it's this button here. View recorded online workshops. This is where you can find this recording in other online workshops, both in English and in other languages that have been recorded. So thank you all so much for your time. Thank you for your patience. As I explained things that you could not see. And I hope that you experiment and definitely let me know if you find something really cool or that you can't do or I don't know. If you like seeing your theme.json get written every time you export code. All right. Thank you so much, everybody. I'm going to pause the recording. I did tell somebody that I was going to stick around to answer a quick question. But otherwise.