 cloud. All right, welcome to code with me coding your first settings and theme.json. So hi, I'm Sarah Stowe. Those of you who know me know that I'm a Florida resident by weekday but traveler by weekend. I'm a former middle school teacher and it kind of shows in everything that I do. I'm a parrot and sharp haymomb. So in the background, if my my crisp software isn't working super well, you may hear some parrots whistling or dogs barking. That's just parrots. Yeah, birds not not like parents, not like folks. I'm a long time WordPress user and a former happiness engineer but I am by no means a developer. So what that means is that I am learning along with you today. I'm one of those kinesthetic learners where I have to do something for it to really click. And so that's what I'm hoping to bring to you today. I'm a training team contributor flashback scientist. This is a big, what should we call it, a big science experiment today to see how well this works and how it's going to go. So yeah, but good news. We have Jonathan. Jonathan, do you want to introduce yourself? I'm so glad you're here. Sure. Hey, everybody. I do see some familiar faces as well. So I hate all the familiar faces and hate all the folks that I've never met before. So I was born and I live in Cape Town, South Africa. I haven't traveled extensively like like my colleague Sarah. She travels all over the place and I am envious every time I see new photos. I am an ex developer, a technical writer, turned instructor. So my my passion now is helping others figure out technical problems and, you know, sharing sort of my knowledge and my experience of, you know, what I've been doing in development for the last how many years. I'm going to have to ask Sarah to jump to the next item because I can't remember what it was. Yes. I am an owner of way too many open source projects. So whenever I am fiddling with something or testing something out, I will create a GitHub repository for it. And I will push the code there. So if you if you want to see what I'm up to, you can go check that out. And I'm also a training team contributor. And I call myself an eagle because if Sarah is the mad scientist, then I'm the yes and after helping her along. So that's that's the me. I just said that. Oh, yeah. And we're both sponsored by by automatic. And I'm so glad Jonathan's here because he's going to be able to make that theory I assume because Jonathan knows what he's doing. So he should be able to help all of us along as we learn today. I was really hoping you would only see the eagle now. That's why I'm giggling kind of threw me off today. Oh goodness. All right. So for those of you who are new to this space live workshops, you want to stay curious and respectful. Some of them are, you know, instructor led and we'll we'll just show you all the things and some of them are like this where I'm like, hey, you're going to be installing programs if you're comfortable with that and you're going to be trying out code. And you know, you might be like me and have some issues as you go along, but stay curious, stay respectful, and keep an open mind. That's really important to really get the most out of today. And please know that we're learning together. Every time I think I'm ready for these things, I way over prepare. And I always learn something new during these sessions are right before and you will too, I hope. And I hope Jonathan will as well. Do feel free to ask questions aloud or in the chat box. But do like do keep in mind, like if we're in the middle of talking about something, maybe wait for a pause and we will put in pauses for questions. So write them down, you're welcome to ask aloud. You're also welcome to answer each other's questions in the chat box. And that is a really wonderful thing that you can do. And I would highly recommend that close captioning is provided you are welcome to turn that on. And as I said at the start to this session is recorded. So without further ado, we're going to set some expectations here just because if for example, you were brand new to work. Oh, good. Right. Have we enabled transcriptions? Yep. Yep. So do know that transcripts are enabled, but you may not see them unless you enable them on your own computer, which is also something I learned in the middle of a live workshop. Great question. I should really add that to my slide. Where is that one? I think it's under the more button with captions, just in case you're looking for that. So look for more dots and captions. Alright, so you will get the most out of today if you know the difference between classic and block themes. We had some questions today from the when you RSVP'd people were asking about how to how to do this in classic themes. And the answer is I don't know yet. We're going to be focusing exclusively on block themes today. So do keep that in mind. This means that if you are familiar with the word press site editor already, that's going to make your life a lot better today. So if you're used to using the customizer, you haven't used a site editor a lot, it's going to be a little bit more confusing. Now you're still welcome here, but just know that it's easier if you know about the site editor. At minimum, we are looking for people who are intermediate or advanced word press users. If this is the first time you've ever used word presses is probably not the workshop for you. Again, you are welcome to join us. But this is not necessarily something that you need to know right out the gate. So keep that in mind. And also something that I discovered, you really have to be comfortable switching between open windows on your computer. So you're going to see me do it here, just kind of going back and forth between things. That's really important and it is a skill. So just keep that in mind. If you struggle with those things, again, you're still welcome to be here. You're still welcome to watch and even try it. That's totally fine. But just to set those expectations. So is there anything else that you want to add, Jonathan? Or does that pretty much summarize the expectations for today? All good. All good. Okay, cool. So I want to hear from you because this kind of depends on I tend to modify my instruction based on the numbers that we get in the chat. So we've got one through five. How experienced are you with coding? A one is I have never coded anything before. A two would be something like hey, I've experimented with HTML, CSS, PHP or different coding, but like maybe not theme.json. So that's like if you ever had like a MySpace profile that you might be in there. There was a lot of HTML code and CSS with MySpace. A three is I'm somewhat familiar with WordPress theme.json. Four is I am comfortable navigating and reading JSON code. And then five is hey, I'm comfortable coding inside a theme.json. So for me, I would probably say I'm at like a three, maybe a 3.5. Jonathan, what would you say you are? I'd probably say I'm a five. Excellent. I'm so glad you're here. That's wonderful. I hate doing that though, because I've always, I've always felt that saying you that you're a five, there's always stuff to learn. But yeah, I'm pretty comfortable. Yeah, you'll notice I've changed this to I'm comfortable coding rather than I know everything there is to know because we're always learning. But okay, cool. So I'm seeing some twos. I'm seeing some threes and fours and fives. I don't see very many ones. Okay, then I think this is going to go. I think this is going to go pretty smoothly. All right, cool. So today's goals. You're going to code your first few lines of code in a theme.json. So this is definitely geared towards folks who who have coded before maybe and have like looked at a theme.json and we're a little bit nervous about it. So those twos, threes, maybe fours. This is also going to help you to get familiar with schema to help you write this code. I definitely have a workshop on that. But actually using it was very different than learning about it. So that should be should be a good time. You're also going to start to identify common mistakes you might make when you're first coding and we're here to help you and support you with that. And the other goal is to understand really what settings do in a theme.json and how they work, maybe styles if we get to it. So those are today's goals. It looks like we've got some fives here. So this might be a little easy for you. So I'm hoping that if it is that you help others and help us to to. Yeah, just have everyone experienced success today. All right, tools, we need a local development environment so you can use something like local, you can use map or shamp. If you already have a development environment that you prefer, you're welcome to use it. For today, we're going to be using local by flywheel just because it's it's super beginner friendly. But you're welcome to use any of those. If you're brand new to this, I highly recommend installing local by flywheel first and foremost. So if you have it already, please go ahead and download this. You just have to click this button here. It's going to ask you what type of computer you're using, which is also super great. It will ask you for some details here. But that is how you download it. So when you are ready, if you already have that, please let me know by typing ready into the chat box. Step one, and please know that if you're seeing a bunch of people saying ready, ready, ready, it just means that they probably already had a text editor. So we're going to take just a quick second. Oh, Hans, you're using Lara gone. I don't think I've heard of that one. Well, cool, you're going to have to let me know how this goes. That's great. I'd say the main key is that you want to be able to get into your files. And also if you're brand new and you don't want to code with us today, you're also welcome to watch. Okay, Gordon says that you're using a live development server. Interesting. Okay, as long as you can use that with a text editor, it should be fine. Jonathan, do you have any concerns about that or? Okay. No, I just said the same thing as you. As long as you can access the files today and make changes to them, we don't mind where it's hosted. Okay. All right. It looks like we're doing some good stuff here. All right. So the next thing that you're going to need is a text editor. So if you already have these, I believe Sublime, PHP Storm and Visual Code Studio all do the trick. If you are brand new to this, like I was, please use Visual Code Studio so that you can just follow along here. Drop that link in there. I know WordPress allows you to directly edit a theme's code, but these are all enabled to basically have extra supports to help you write the code. So I highly recommend those. I'm not sure that any other text editors have that theme, that schema support that's going to help you write the code. It doesn't mean that they don't. I'm just not sure if they do. I know Visual Studio Code has that support built in. Sublime will probably need a plugin or something. Okay. Oh, good to know. That's why. Yeah. Most of them do support it through a plugin of some kind. VS Code just supports it by default. So that's why many folks use it. Yeah. Dreamweaver. Board mentioned Dreamweaver in the chat. You don't know. I don't know if Dreamweaver does. It probably does. I haven't used it in years, but it probably does. Let's see what it says. This is important. That's got to do with... There's a list somewhere, but I don't really have it all yet. I don't know that Dreamweaver is necessarily going to help with schema. So with that in mind, if you're using Dreamweaver and you're not experiencing the drop-down menus and you're not experiencing the hints and suggestions that you're going to have with this code, it might be a good idea to download Visual Studio Code. So, okay. So not the same level of auto-completion. Okay. That's good to know. Hey, things I'm learning today. Brilliant. Okay. So I'm going to be using VS Code and Jonathan will be using PHP Storm. Is that right? Correct. Awesome. Okay. So you might be able to see both of these. And yeah, VS Code is free. Both of the ones that I have offered here today are free and I know that VS Code is at least in some ways open source. Jonathan, correct me if I'm wrong, but... That is correct also. Okay. Cool. All right. For Visual Studio Code, the free live server and or browser preview extensions are worth noting. Oh, interesting, Robin. What a great tip. I'm gonna have to save this chat and write it down. That's great. All right. It seems like we're ready. If you are still downloading things, please let me know in the chat and I can back up. Live share is also great for pair programming. Interesting. These are such great suggestions, y'all. All right. So we are going to, using our local environment, we're going to create a new website. You can name it whatever you would like. Something like my GloriousTips website will work if you're not sure. So we're not doing that yet. So I did this. What did I do this? I made a quick little video about this. So if you're using local, this is what this looks like and there's not going to be any sound here. So you can see I've got a bunch of test sites and then you've got this plus button down here. That's what you'll use to create a brand new website and you're just creating a new site. Nothing fancy. Nothing from a blueprint. You can name this whatever you would like. So I've got online workshop example. You're just going to use preferred. Any WordPress username of your choice. Any password. All you have to do that is click add site. This is just the quick version of how to do this and it's just going to create a brand new WordPress website for you, which absolutely astounded me the first time I did this. The one setting you might turn on is one quick admin. Without it, it makes you try and log in with that username and password that you wrote down. But when you turn it on, it just brings you right to your WP admin dashboard, which was I thought was really cool. So yeah, so when you are there and you have this dashboard set up and ready, please do let me know. You're just adding a new site. I'm just going to play that again for good measure, just in case because I know everyone's takes just a minute. All right, I am posting. Am I running local in router mode? I don't think so. Robin, do you have any other what should we call it? Other local environments like map or champ set up because one thing that I discovered was that if I had both of them on my computer at the same time and servers running it, it did not work. If I could just speak up on that one particular point. Absolutely. There apparently is a problem that other Mac users have noted in the local forum and router mode is one of the two choices. But what it does is enable you to provide the URLs for pages on the whole site for users who are external to your local install and therefore treat it like a normal website, for example, to demo something. If you don't have router mode, then you're just limited to only the activity within your own local environment. Okay, yeah. I think mine is just in my own local environment, as far as I'm aware. It's something that you would want to enable if you were working with clients and you wanted to show them something working for you. So you wouldn't probably have done that. And Catherine, thank you for that point. Apparently I was doing something else wrong. I had to uninstall map when I did that. So it must have been a user error. Okay, so what we're going to do is I am posting a file that Jonathan Bossinger was kind enough to upload to his GitHub. And this is a very bare bones WordPress theme zip file. So you're going to download that and install it the standard way. If you're like me and you struggle with this, sometimes I forget where things are. Okay, that didn't open it on the right place. Let's try this again. Okay, there's that. So in order to install this, you're going to, you're going to click that link and download it. And you'll see that it downloaded here. It's this code with me. I coded it from scratch. I was very excited to be able to do that. And then you had to appearance, add new. You're going to look for this upload theme button. We're going to press choose file. You're not going to unzip it, of course, which is something that I always forget. Mine usually is in my downloads. What do we call this thing? Code with big themes. So then if you open that and install it, it should install the way that we need it to. So just double check to make sure I don't have any issues just in case. I'm going to replace my actives since I've already done this. Really entire. Let me know when you have this theme ready. You will know when it looks like this. Obviously that's not a picture of the theme. While folks are installing that, I just want to mention that that little window that you saw when you uploaded the theme over the existing theme is something that's only existed for about a year or so now. Every time I use it, part of me smiles. Because it was functionality that somebody requested to be added to WordPress about 11 years ago. And it just took a long time for it to finally get there. Okay, Jean said that it unzipped when I took it out of downloads. Oh, fascinating. Catherine says that's a Safari Mac thing. There's a certain setting in Safari that downloads and extracts supplies. I've encountered it before. So it's best to use something like Chrome or Firefox. Jean says she's using Chrome though. But it's something to do with the Mac environment and downloading apps. I don't know what it is. Okay, let me go to my parents' names. I'm just curious. The other thing, Jean, the other thing you could do is if your Mac is extracted, you could just copy that folder that's extracted into your themes directory for your local WordPress install. That's another option. I don't have the correct format. I was going to show how to do that, but that apparently was not going to be a thing. But yeah, if it unzipped, you can go to, and we're going to go here in a second, but you can always go to your site folder. Oh my gosh, I really wish that this would. There we go. And you can always go through app, public, it's WP content and themes. You can copy and paste it directly into that folder and it should work. When you are ready, you should see it looking something like, I can find where I put. Was this it? I think this was it. Nope, that was definitely not it. Where's my slideshow? People who do this with me know I lose my windows about once a day. I've played in the Mac personally. I never had this problem when I was still working on Ubuntu, but it started for me when I was on Mac, sorry. Fair enough. So Emily just asked a great question. Some theme.json files start with version two. Is it optional to include the link to schema? So Emily, yeah, you don't actually have to use schema, which we're going to get to. So if this is not making sense to you yet, it will in a minute, but you don't have to use a schema, but it is so much easier than memorizing things and coding them from scratch. Before we move on with regards to that version two, the reason there's a version two is because when theme.json was first released, they had a certain set of settings and then they had to create a version two because there were certain things that would have broken if they tried to upgrade. So if you want to specify the version, you can specify a version one or version two. If you don't specify the version of defaults to version two anyway. So you don't have to have the version two in, but it's recommended to leave it so that it's clear what version, because if there's ever a version three, hopefully not. But if it ever does happen, then it's going to cause breaking changes if you haven't specified the version. That's brilliant. Thank you for that context. I love it. Okay, first question. When you're looking at your site, are you seeing what I'm seeing with these headings here or is it just completely blank? Because I had trouble with this, but I think Jonathan might have fixed my problem. Does your screen match my screen? Yes or no? Yes. Oh my gosh, Jonathan, did you do something different to this? Maybe. I just took the code that you said to me, extracted it into my WordPress directory so that I knew it was working and then because I'm a creature of habit, just zipped it the way I would normally zipped it, but uploaded it to GitHub. So yeah, it might have been the way I did it because I use WPCLI on the command line to create archives of plugins and theme folders. So it might be the way that that works, you know, the way I do it that it might have fixed it possibly. Okay, great. So I'm seeing that some of the fonts are different on some people's. Adrienne says that hers matches. Mine, great. Okay, cool. That just saved us a ton of time. So Jonathan, whatever you did, we need to figure that out because it might be a caching issue, honestly. All right, cool. So you're all in your site editor. Initially, this page was just super blank. We're going to skip this whole thing because apparently it's that problem that I had. All right, we did this. All right, let's code, y'all. So in local, if you go to your site folder, it's this button here. Oh, I did put a box around it. You're going to want to open up your site folder. There are other ways to get into your text editor, but this is the easiest one that I found. So you're going to open up your local website. You can click on apps, public WP content themes, and then open the theme folder called code with new workshop theme. So if I am doing this, I am going here, go to site folder. I already did this once, but just in case you are brand new like I am, you're going to see something that looks more like this. Click app, public WP content, themes, and then you've got this code with me at workshop theme. So if you're looking at it, this is very, very bare bones. So I coded, basically, I did not code. Code is a very strong word. I created all of these files by hand. And then just after I made the changes to my site, I used the plugin to export it. I'm sure there was another way I could have exported it. It just was handy. But yeah, you're going to notice that it's pretty bare bones. So we had some people who were choose today. We had these bare bones file style.css, index.php, screenshot.png, templates folder, and index.html. I think that for the sake of time and actually getting to coding, if you're curious, hey, like what are these files? What do they do? How do they create a block theme? This workshop link will be really, really good for you later. Today's focus is going to be on the theme.json though, just also. So you're going to right click on theme.json and select open with visual studio code or whatever text editor you've got. So that these are instructions for a Mac. They might differ slightly for Windows or Linux. But so I'm right clicking here, open with, I'm going to go down here to visual studio code and you're going to see a very empty theme.json file. And I'm going to make that quite a bit bigger so that we can see what we're looking at here. Let me know when you are ready here. So one thing that I found is that I've watched so many videos on theme.json and unless I do it myself, it just doesn't do, it just doesn't stick in my brain the same way. So today you're going to be coding a couple of things, a couple of settings. And if we have time, you may even get to some styles here. So yeah, I put screenshots for all of this. All right. So this schema line is so important. And we've had some questions about, hey, like sometimes it starts with versions, sometimes versions after, do we even need this schema line? And the answer is yes. All right, we've already done this. Apparently I have way over planned this. Okay. So before we get started, do you notice anything about just how wide this is? Like, do you love it? Do you hate it? No wrong answers here. I'm just curious. Adrienne, she hates it. Just like, yeah. So this is like super, super wide, right? There's no breathing room. There's nothing there. So one of the things that we are going to be doing today is adding one setting to your global styles that's going to turn on all kinds of ways to do this. So you did this. You found that schema version two has already been written. You'll notice that these always start with these curly brackets. And they always start with quotes. Reminds me of my first site from 1995. That's so great. So the biggest question that I really want to answer before we get started is why are we using this schema line? Like, why bother to put this in here? So let's learn about what this does for us real quick. You add to the top. Of course, I'm halfway through it. All right. Schema with WordPress theme.json. Let's get started. First, what is schema? Json schema is a vocabulary that allows you to annotate and validate JSON documents. In other words, it helps you to write code with confidence. In order to use schema successfully, you'll need a text editor that works with it, such as visual code editor, which is pictured here, or another such as Eclipse or PHP Storm. Let's see how it works. Schema is made up of two lines that you add to the top of your theme or child themes theme.json file. First, I'm going to add the schema line to this theme.json file. Now that I've added the schema line, it's telling my code editor that this file has a specific set of rules that can be applied to it so that it can do a few things for us. First, it can autocomplete for us. If I remove this version and I start a new line, I'll start by opening up the quotes. Now, the schema will tell me what my options are for this line. The only thing available that isn't already present in this file on this level is version, which is the version of the schema. If I hit enter now, it will fill in the rest of the line for me. It put in version, closed the quotes, added the colon, and it added the value. The only value we should use here is 2, which, as of this recording, is the most recent version of schema. There is an earlier version, but this should recommend the current version to you. Now, let's watch this magic work under settings next. In this instance, things that are available but not already used in this theme are blocks and borders. Schema is maintained by the core development team, so it should stay updated. What else can schema do? Well, schema can also tell you if you make a syntax error. For example, if we remove this comma, it says uh-oh, this doesn't look right. If I hover over it, it will sometimes give me a clue as to what I did wrong. If I add the comma back, the squiggly lines go away. Finally, if you hover over these different objects, you will see some tool tips, which is inline documentation to go along with each of these things. You can see which customization options are available. Default colors, CSS custom properties, and the default layout of the editor. Let's see this again. If I hover over the section custom templates, it gives a little more information about this section. Pretty cool, right? That's the short version of how you can use schema with WordPress's theme.json file. In short, schema helps you write code by providing suggestions of what's available in each theme.json setting, auto-completing your code with available options, alerting you to errors, and providing more information, such as hints as to what could be wrong and what each section might do. We hope you have fun experimenting with this fantastic feature. And that's what we're going to be doing today. So I dropped the link to this in the chat, so you can find that a little bit later. Oh, yep. I didn't put quotes in the right place. That explains why this wasn't working earlier. Okay. So I think that this slide by itself illustrates why schema is so important because I wrote this by hand rather than using schema to auto-complete it and I'm already missing some quotation marks just because I'm so new to this and so new to writing it. So that's the main reason to use a compatible text editor with this. So the first thing we are going to code into your theme.json file is the setting appearance tools. And I thought it was really, really cool to look at this editor here and know that the only thing that's in my theme.json right now is the schema, right? There's nothing here. So it's really cool to see, hey, by default and let me back up just a quick second. So if you're asking, hey, what is this theme.json file even do? It does a lot of things. What we're doing today is it basically toggles options off and on in your site editor, right? Under these global styles. So by default, you've got typography so you can change the size of your links. You can see me changing it there. You can change your colors. Your background can go to something different. So this is pretty standard. And then you've also got all of these different blocks that you can style block by block. So the defaults are really cool and just WordPress right out of the box, no theme.json coding has a lot of really cool options. But as you pointed out earlier, this is not a beautiful layout. So what we're going to do is we're going to use appearance tools to add a couple more things. So these turn on those settings in this site editor. So it's going to add buttons. And that was the thing that just didn't click with me right away is I didn't understand, okay, like I knew but I didn't know because CSS doesn't add buttons. CSS just makes changes on the page. But it will add, using the settings here, we'll add buttons. So that's the main thing to know if you were as new as I was. So it'll turn on things like border color, radius style width. I will show examples of this. Your link colors spacing is going to be very, very exciting. And some typography with line heights. So I'm going to run a video of this just to make sure that I didn't mistype and you're welcome to follow and code along. If you want to watch it the first time and then check it, I will have an example at the end for you to double check that. But let me open this, here we go. So the first thing we're going to do is add a comma here. This comma tells us, well, not doesn't tell us, it tells WordPress that, hey, we're going to be making, they're going to be adding more to this list. So whenever you're writing theme.json code and you're using schema, you're always going to start by what's called opening up the quotes. So I'm going to hit shift, press that quote button, and you're going to see this glorious list of options up here. So we're going to be working in settings today. And what these settings do is create new options that you can utilize using your site editor. So what I mean by that is in global styles here, this half moon up here, we're going to be adding something here and in a few other places using something known as appearance tools. So I'm going to hit enter and you'll notice that my text editor automatically indented this and this helps you to read this a little bit better. So I wish that it would just give you a dropdown of every setting you could possibly turn on. But that's not, that's not quite how schema works. So we know that this is known as appearance tools. So, oh, I forgot to open the quotes. You'll see that I'm learning along with you. So in, okay. So in opening up the quotes, sorry about my dog. It does give me a bunch of different options that I can now add to my theme.json. So I am going to select appearance tools. By default, it says, hey, this is false, but we actually want to turn this on. So I'm going to delete it and you'll notice it deleted the whole thing and I'm going to type in true. That's all that I have to do. Now I'm going to save it. So I press command S to save it, but you can also go up to file and save. And now if I reload this, you'll notice we've got something new here, this layout. So this allows me to add padding around basically every block in my website, I believe. So let's see what happens if I add 30. You'll notice that that changed. So compare that to 300. There is now 300 pixels around this group. All right. And then I talked a lot more, but it wasn't really necessary. So to show that again, we're going to add this comma after version two. I'm going to hit enter. Oh, yep. I'm going to hit the quotations button. So it's that shift button to make this drop down appear. Select settings, hit enter again, shift quote. And I select appearance tools. I'm just going to change this to true. You'll notice it turned from red. Oh, no, there's an error too. Oh, hey, this will work. Save it. And you have just created your first setting in theme.json, which I thought was so cool. Let me know how you're doing. Did you get it? Thumbs up, thumbs down. What is the difference between appearance tools and layout in those schema options? We're actually going to go over one of the layouts. So this is jumping ahead a little bit, but if I open up the quotes here and select, not spacing, whoops, if I open up the quotes here and select layout, if I hit enter, I'm going to have different options available to me. So we're going to, we're actually going to get into what these are next. So I think WordPress five point, not five point. What are we at? Six point one. Is that what's coming out next? Man, numbers are hard. Might have more options to do with that, but this one goes to that. Okay. So I have an extra thing in there. So I noticed that as I was typing and playing with this, I added an extra thing you can see here. Sometimes it suggests what I should do, but I'm realizing that I just have an extra one of these. So I'm just going to leave that. Oh, that's a good question, Gordon. If I want to leave a comment in theme.json, is there a good way to do that? Do you know the answer off the top of your head? So I'm just testing it now. You can either use, so if you go to the end of your true line, your appearance tools, true, for example, pop the cursor on there, you can use double forward slash to do a comment per line. So that's similar to CSS. I'm not sure if you can do a block quote comment. I'm just going to try it now. It looks like you can use the PHP block quotes. Oh no, it's throwing an error for me. So I think you can do a single line comment. Maybe you can do it on one line, yeah. But I don't think you can do it on a block quote where you have multiple lines of code, but the single line like that should work. Interesting, I'm getting an error with the... Are you getting an error? Yeah, so it's steam-lacing. Yeah, it's possible that you can't do comments inside JSON because JSON is effectively a JavaScript object. So it's an actual element in the code. So it's possible you might not be able to use comments. I see Jesse just said, yeah, you can't comment because it's not like PHP code or CSS code that'll be processed. It's actually an object that gets loaded into memory. Cool, okay, that's such a great question. Oh, I love it. So yeah, apparently you can't comment. The thing that I think is really cool is that this is supposed to be a little bit more human-readable. So I don't know that comments are as necessary just because if you kind of know what something does, you should be able to see it and code it. It's kind of what I've heard the theory is, somebody correct me if I'm wrong. This is just what I've gathered as a baby developer. But okay, so it seems like everybody was able to do this and able to see this appear. So let's reload this. Ha-ha, I have a layout button. You're going to want to double-check that that's there. But yeah, so appearance tools. We did this. So let's do video three to talk a little bit more about layout and padding options. So one of the things that I struggle with when I look at this and I'm like, okay, well, what's the list of things it can do is I can't quite picture it. So let's see what all options, just one line of code turned on. You also have these options of pixels, percentages. These are all different units of measurements. So you can be really precise with pixels or you can use percentages. You can see that this is taking up 50% of the screen here. Okay, apparently I did this wrong and accidentally skipped ahead something I shouldn't have done. So let's talk about that. So in your editor, you have this new layout option here. And this allows you to add padding around basically everything in your site. So it's automatically set to pixels. And this is Jonathan why I was asking you about that is because you could do 50 pixels, which you can see added all of that space there or you could do percentages, which takes up 50% of the screen. Can you comment on which of these you might use and why? I actually had to do a bit of refresh across this morning because it's been a while since I've worked with all of those units. But the pixels and the percentages are generally what you would use when you're doing layout calculations. So you would use 50 pixels for padding or margin or percentages for padding or margin. Your EM, your REM and your VH and VW, you would generally use when you're working with responsive design elements. EM and REM are typically used for fonts. And the way they work is that they calculate. So for EM, for example, you set the base. So let me go back a step. So the default is 16 pixels for like a font size. That's just the default in the browser. And then if you specify that a font later on is using what's, so two EM, then it'll calculate one EM is equal to 16. In that instance, a two EM would be 32. So if you set your base font at let's say 10 and you use two EM somewhere else, then it would be 20. And so what that does is you can basically set all your sizes using EM or REM, which calculates it not on the parent element, but on the root element, which is why it's REM for root. And then all you have to do is change the first value of whatever it was and it'll recalculate all the rest. So it's very much a responsive design environment. And then VH and VW is viewport height and viewport width. So the simple way to explain that is, for example, one VH is 1% of the available viewport. So let's say somebody's working on a 900 by 600 screen. One VH would be 1% of 900, which is nine pixels. And if you set something to be a width of 50 VH, it would be 50 times nine, which is 450. So again, it's a responsive design thing. Generally though, that is something that your designer person would decide and define. And you, as the theme developer, would just implement. But if you're somebody who's also a designer, you understand those elements and you would set it up accordingly. Cool. Awesome. That is, I've learned so much today. Y'all, thank you. You'll also notice that in these individual blocks, so take what you just learned there with that layout and you're going to start to find that in different columns, for example, in different ones, this layout button has now appeared. Where once upon a time it was just colors, now we have layout. So we can add padding all around it within different elements. So you'll notice that added padding in between here. But you also can, if you click this link button, you can do it side by side. So if I wanted to create a bunch of space between the top of this column and whatever comes above it, like I can do that by changing it there. So this is a really, really powerful tool. And I think it's so cool just to see these new buttons appear right here. But we only have 10 minutes. So I'm going to hurry through to the next part. So the next setting that you can do is under that layout. So we need to put that comma there. I need to open up my quotes. And now I have all of these different settings that I can turn on or off, I believe. Am I incorrect in assuming that for some of these, I could turn them off in this, like the things that are already displayed by default? Yeah, some of them are true, false, turning on and off and some of them are values, specifically the width ones. So the one that I think is really interesting is layout. And I did not use my schema there. So I'm going to open up the quotes, select layout. And you've got two of these options. You have content size and wide size. Now, Jonathan, you recently did a workshop about this, right? Can you tell us a little bit about the content size here? Sure. So the content size effectively constrains your content to that width. So in ye old days, before we had widescreen monitors and 4K and all that, the default sort of suggested width for most websites was, I think, 800 pixels based on the average screen resolution. So most CSS frameworks and that, they defaulted to setting, I think it was the body tag or whatever, 800 watt. So that's your content size. So you typically would set that to whatever your max sizes that you want the content to display. And that is dependent usually on average resolutions. Do you want me to do wide size as well or are you going to? Sure, go ahead. Okay, so wide size, this is one that I discovered recently as well and it bugged me as well when I first hit it. Wide size, there are certain lock level elements and the one that comes to mind for me is the one that I tested was the featured image on a single post page, single post templates or a page template. Those blocks support an align option. So you can either align it left, right or center and then there are two additional options. And one of those additional options is a line at two whatever the wide sizes. So in a design environment, you might have a design where you have a content size of let's say 900 but you want a nice big wide image and you want it to stretch outside of the content size. So you set the wide size to that value and then you can go into the block and you can say for this block, I want it to stretch to whatever I've set as the wide size. And then you can get that effect where you've got a nice wide element but then your content where your text is is slightly smaller. Brilliant, okay. So I think you're absolutely right here. So what I did is I added a post featured image here. So that, I believe that setting is in here though, right? It's not in global styles. It's normally in the toolbar setting and I've discovered that it's only, it seems to only be when the featured image is used on certain template types, specifically if you create a single or a page template because I've experienced that we're using the same block in an archive template or a custom template doesn't work. And I have inquired about this from the block developers and I haven't got answers yet but if you create a page for example and then add a featured image to that page it should then be possible. It should but I'm not, I'm sorry. I just, I notice you're getting, doing post featured images. That's the only option that comes up when you add it. Yeah, so this is what I discovered yesterday. I was so excited about this but I think, do I have an error here? Because this is in red here so I'm wondering if the value is there. So one thing that I do when I get super stuck is I head into other theme.json's and see what they do. So you'll notice that we've got the 2022 theme here. Let's see if they've got that in there. Open with tips and tricks. So I'm going to command F. What am I looking for? Wide size? Yeah, okay, so know that that should be. Okay, so that should be just fine. Yeah, I'm not sure why it's not showing up. Yeah, I think it also has to do with like other settings perhaps because I'm not getting it now but if I, can I share my screen quickly and then I will find, let me do that and then I'll find an example of what that looks like. So let me remember how Zoom works. So let me make sure that you're seeing the right desktop. Yeah, so you should all see my WordPress environment. I'm just going to change this back to my other theme that I was working on because this one. Before I go into the editor, think it was this theme. No, it's not this theme. Sorry, one sec. That's okay. Thank you for your time. No, no problems. I think it must have been 2022. So I think it's related to some other settings somewhere and I still haven't quite figured it out myself and it's rather frustrating sometimes. Option that can turn on. It's something that's not necessarily in global styles. It creates options in, you said that the, yeah, go ahead. Yeah, so this is the featured image and I think, I remember now, sorry, I remember now. So the featured image also needs to have the alignment settings enabled for the alignment option to show up. So that's this button over here. I hope everybody can see that. So if I click on that, then I've got options of either none or wide width. And that's because the featured image in this theme. So if I go to, let me find that theme. I'm not quite sure if it'll be on the, you see if I can find, no, it's not on the actual thing. I think it might be in the template. So the featured image. So here, hopefully everybody can see this. Here's the featured image here. And on the featured image in the post, the alignment setting is set to wide. So that means support to the wide setting. So you have to have it enabled on the block in the template. And then when you have wide width enabled, then you can align that block to the wide width. Is that something that you have to do in the theme.json file or is that something you can do in the site editor? Don't know yet. Okay, so I think what the learning opportunity here is that just because something doesn't turn on when you expect it to, doesn't necessarily mean that you've done it incorrectly. It just means that some of these settings are really buried in there. So yeah, okay, cool. So we have three minutes left. And this has been lovely. I think what I've learned is that I need to schedule these for an hour and a half, not just an hour. But yeah, so you've basically started learning how to code your very first, your very first things using schema. So I hope this was helpful for you. And I agree, Adrienne, you said that you feel better knowing someone who's a five still has questions and confusion. And I think we're all just learning here as well. So yeah, anything, any final takeaways from anybody that you'd like to share and how to feel coding something for the first time, perhaps? Is there a next in this series? Could there be a next? Jonathan, we could do that, right? I mean, I'm at a stage now where every day I'm learning something new about how the ingestion works and how specifically it works with the blocks. So I think it might be useful to make the next session after this to actually look at how the featured image align wide works, whether you can set it in theme JSON or whether it has to be set on the block. I'm pretty sure it's a case of the block supports that alignment and it's just a case of switching it on. And I've got a feeling that the reason it's done like this in this template in 2022 is because that setting wasn't yet available in theme JSON. It might be now. And it's just not something that I've sort of gone and figured out just yet. Beautiful. Okay, so we will definitely consider extending the session for various reasons. We may not be able to do it within the next couple of weeks, but there's no reason that we couldn't do this again. And yeah, we could definitely continue from here. So I could definitely make this a prereq for next time. So there's that one. And then there was also Jonathan, you did a session on theme.json as well. I'm assuming you covered different elements than this, yeah? No, exactly the same. I did appearance tools as well. The only thing I did differently is I did appearance tools and the widths as well, the layouts and the widths, because those are sort of the first ones that you sort of start learning about. And then the only other thing I did was I think I did a color and then used the color somewhere else. So there's some additional things in there. The job, mine was very similar to yours. Cool. Just from a different angle. Great minds. Okay. Well, I'm very grateful. Thank you very much for your feedback and all of that, y'all. All right. So next time we do a code with me, we'll either use this one and have people get set up ahead of time. We will repeat with different things and we'll start creating maybe color palettes with the same theme. Cool. Thank you, everybody. Cheers.