 Great stuff. Well, as I said, good day everyone. Welcome to today's session. My name is Wes Theron and with me as co-host is Catherine Prisner. And as you will see, our topic for today is exploring global styles and the style book. So it is very much an introductory online workshop and an exploration. So yeah, let's jump in. So I thought before we get going to, of course, use the site editor, you need a block theme. And when you have a block theme, you will have access to the site editor. And the site editor allows you to design your entire site. It allows you to edit templates as well as header and footer template bots. But it also gives you greater control over how your site looks. And that is where global styles and the style book become very relevant. So styles allow you to style your site without using any code. So when you open styles, you can browse style variations that come with your theme. But please note, some don't have variations. And we'll look at that a bit now as well. You can set typography. You can change color palettes as well as the layout of your entire site. But what about individual blocks? Well, you will notice at the bottom, it also says customize the appearance of specific blocks for the whole site. And we will explore that a bit more as well. Because if you make a change to an individual block, it will take precedence over your global styles. But we'll see that in action a bit later as well. Now, if you go to global styles or to styles, you can of course just leave it up to your theme and you can select the default theme or one of the variations provided. But styles, and that's the amazing thing about how WordPress has developed and changed is the styles does put the power in your hand to customize these elements. Now, that brings us to the style book. So a new feature was added in 6.2 and that is the style book, which has made the customization process even easier. So this style book creates a visual representation of all the styles that will automatically be applied across your website. Now, in this screenshot, we see the visual representation of the different heading sizes, as well as a paragraph. And in the next screenshot, we see what our images and galleries will look like. So when you make changes to styles, you will save time and you will actually see the changes you make all from one dashboard if you use the style book. And this preview gives you a strong idea from the start of a website about what your new block theme will look like. So that is a bit of an introduction. Yeah, Catherine, I didn't know if you wanted to add anything there before we move on to our test website. But yeah, as I said, the power is in your hands to make these changes and customizations. Yeah, the only thing I would say is this is probably an underrated feature that not everybody knows about. So I'm really glad you're focusing on this because it's super useful as you're about to see. Exactly, and in the past, you would have had to use a lot of CSS or code to do these things and now you can do it straight from the site editor. All right, so let's move on to my test website. Okay, so first things first, and as I mentioned, to gain access to the site editor you need a block theme. And I am using the 2023 block theme today. So if I go to appearance and themes, you'll notice I've got the 2023 block theme installed. If you click on add new, you will actually see there's a tab for block themes. If you were looking to install and activate a block theme. So if you click on block themes, you will be able to search block themes. All right, so I'm using the 2020, 2023 block theme today. And of course, we mentioned if you want access to styles, we will need to go to the editor. So we add all our content to posts and to pages, but we do our styling or designing in the site editor. So let's make our way to editor and this brings me to the site editor, as I said, where you can update your templates and header and footer template bots. But then of course, the reason we're here today is to talk about styles. So to get to styles, you first have to open up one of your templates. So I'm just gonna click on this template and you will notice this is my home template. And I've already added some posts and I've already added a header and a footer. And now we wanna start styling, right? So to open styles, we click on the styles icon and you will see this top right. And if you click on styles, you will see browse styles, typography, colors, layout and then at the bottom, customize the appearance of specific blocks for the whole site. So let's talk about browsing styles first. So many themes come with style variations. So at the moment, this is the default style variation for the 2023 theme, but if we click on browse styles, you will see this theme actually provides you different styles to choose from. So the hard work is already kind of being done for you. And the cool thing since 6.2 is they provide you this zoomed out version of your website so that you can kind of see an overview of your site, which is really helpful. Okay, so let's select one of our variations to see what this looks like in action. All right, let's select greps. And in one click, you will see the style of my site, the entire style of my site change. Okay, let's select another one. What about whisper? Again, you will see the typography changes. Now the one thing that I've seen is kind of the layout in general looks the same. Let's look at one more. Let's select the skinnery one. And then of course, when you select one of these variations, you can start editing that as well if you wish to. Okay, so I'm just gonna click on default again. All right, so it's back to normal. It says they choose a variation to change the look of the site. Now, if I go back, you will see you can also then, if you don't want to select one of the variations your theme provides, or if your theme does not provide a variation, you can of course, start changing the typography of your site. The text, the links, headings, buttons. You can change the color pallets as I mentioned. The background, the text color, the color of links of your headings and your buttons. And when you click on pallet here, you will notice this is the color pallet my theme uses. And I would also suggest if you are going to customize your site completely with your own colors, et cetera, it is advised to use a color pallet generator, look for accessibility and so forth. So do your research before you go down that route and select colors. The great thing as well about the variations with the 2023 theme, it has already been tested for accessibility, which is great. And then the last thing of course, is we spoke about layout. So you can change the dimensions of your site, the content and how wide it is. So you can update that if you wish to as well and even some of the block spacing. So you've got padding and block spacing. All right, now at the bottom, it says customize the appearance of specific blocks for the whole site. So let's click on blocks. So let's say for example, you only actually want to customize the style of an individual block, you can do so. And there it says customize the appearance of specific blocks and for the whole site. So of course, when you make this change year for this individual block, it will update everywhere else on the site. So let's say for example, let's select the quote block. Now, in the past, it was a bit more difficult if you wanted to make the change. So now I've got the quote block and I want to make some changes. In the past, I would have had to add the quote block year in my template to kind of see how it changes and how it updates. But don't worry, that's been fixed and that's where the style book comes to play. So we said the style book is a visual representation of your entire site and of all your blocks. So I actually don't want to go and add my quote block year and make the changes to see how it updates. I can actually do that all in the style book. So I'm gonna go back and to open up your style books, you'll see there's a little I year at the top. And if you hover over that, we see style book. And here we can see the visual representation of our entire site. And you'll see it's broken up into text, media design, widgets and theme. So with my default theme, this is the way my headings, this is heading two, three, four, five and six. This is what this will look like. Paragraph, a list, a quote, et cetera. If we go to media, we'll see this is the way our images will look, audio, a cover block, then design, your buttons, columns, group blocks, widgets and then theme. So you can even update your navigation block year in style book if you wanted to. Now, as I said earlier on, if you wanted to make, I'm just going to go back to text. If you wanted to make a change to your quote block, for example, you can do it in the style book. And if you select the block, you can do everything year and it will update. And you can see how it updates. All right, so this is my introduction to the global styles in the style book. And of course, now we want to actually see this in action. So I will go and make some changes and then we'll see how that looks. So before I do that, is there anything, Catherine, that you wanted to highlight or questions that needs to be answered? I don't think we have questions, but I just wanted to point out one thing, Alisa just pointed out that you can only access the style book from the site editor and not an individual page. Yeah, because it takes over the left-hand preview area. And then there was a bunch of questions about when a child theme is necessary, which is kind of not sort of in the scope of what you're talking about. So I answered them all in the chat and I think that everything's been answered. I see another question having come in, but I think I'm going to answer that in chat just so I don't get too off track. Great. All right, so let's go and make some changes. And yes, I would also say if you're doing this, have a child theme. Yes, but definitely not in the scope of today's, but that is something actually worth mentioning. A child theme is always a good step to take. Okay, so I'm going to go back now to my styles. Let's close the style book and let's just make some changes to see what it will look like. So for typography, I'm going to say, I want to change the typography of my sites a bit. So let's do that. So I'm going to click on typography and I'm going to select text. Now, the nice thing is if you select text and if you select a different font, it will apply globally as well to two headings and links, et cetera. So I'm just going to do it in one place. So I'll open up my typography. I'll go to font and you will see a few font options that come with the 2023 theme. Your theme might provide less or more, it all depends. So I'm going to select the IBM Plex Mono just to play around with it a bit. So we can see how it changes and updates. So let's select IBM Plex Mono and as you've noticed, everything changed. My navigation, my headings. So the text changed everywhere. Okay, I kind of like that. So I've changed that. Let's go to colors. Now, as I mentioned here at the bottom, you can change the background. So let's see what happens if I change the background. I would prefer not to, but let's just see. Then you can actually see how it updates. But I would like to keep it white and I would like to keep the color of my text black. But I actually want my headings to have a different color. So I'm going to do that. You will notice I've got these chopsticks and like a red circle. And I thought, oh, let's bring another color in that kind of picks that up. So I'm going to actually use the hex code of this color and apply it to my heading. Okay, so let's open up headings. All right. It says text color for all heading levels and then background color for all heading levels. So we're just going to do the text color. So I want to add a hex code. So I will click on here and then I will add my hex code here. And the hex code I am after is EB1D27. So I've added my hex code and now you would have noticed my headings update. My headings updated. And as I said, the other text I wanted to keep, I wanted to keep black. All right, now next, I thought let's look at this website from the front end now. But before I do that, I still wanted to talk about layout. All right, so let's change the block spacing a bit just to see what happens. You would have noticed the block spacing there changed. It's just clicked undo. And then you can actually see how it changes. As I revert back to how it was, it was 1.5. And for padding, let's say I add a mixed padding. So I don't do top left. Let's add some padding as well. All right, so you can play around with the padding as well. Okay, let's just undo so you can see how it changes. It's kind of helpful to see how it, and now that's odd. Now the color of my text looks different again, my heading. I don't know how that happened. Let's change that again. E, B, one, D, two, seven. There we go. And it's safe. Okay, now we can go into the style book and make some other changes as well. So let's click on the I. Let's click on media. And you would have noticed something. I made a change on my query loop block. Let me just show that again. You would have noticed this query loop block, the post-featured image, I'm just gonna show you. So yeah, in year, if I open up the style, not the global styles now, just the style for my query loop block, and I select the post-featured image block. So let's look at the style of the post-featured image block and let's open styles. And you would have noticed I've added a 20 pixel radius around this image or the post-featured image. So all my posts with a post-featured image will have this rounded effect. And I actually want that to be seen on images as well. So when I add a new image or gallery, I want those images to have the same look and feel. And let's do that in the style book. So again, styles, style book, go to media and let's select the image block and then click on border and here you can change the radius. So we said we want a 20 pixel radius and when you change that, you will notice it updates on images as well as galleries. So you actually just have to do it once. And now of course, I feel there's unity between my query loop block and my images and galleries. All right, so let's save that. Now, one thing you will notice, okay, let's just scroll down a little bit. One thing I haven't changed is my buttons block. So you'll notice I've kind of played around with my, the color, we've looked at the layout, we've looked at typography, but now we want you to update this as well. Okay, so we'll do that in the style book as well and let's go to design. And the cool thing as well is if you change it to the button, it will update to buttons. Okay, so select the button block and let's go to colors and let's say we want the background to be black and we want the text to be white. Now something else you will notice with the buttons block is that you can update the typography colors, borders, shadow layout of the buttons block, but you also have the style variation. So with this theme, there is an outline style variation and if you click on the outline style variation, you can even modify that if you wish to. So this is the way the outline variation looks, but you can even modify that if you wanted to. But I actually like the border and I'm gonna keep it like that, but if you wanted to, for example, you can change the colors, you can change the border, you can even play around with shadows. Let's say crisp or none, great. So I've updated that, so let's save and now let's see what it looks like on our side, great. So there is the buttons block now, but yeah, I actually wanted to actually not have the default, I want the outline. So let's open, sorry, the style, let's open the style for this specific buttons block. So you'll notice if you click on settings for block, you have your settings and your styles for that specific block. So let's say I want the outline style here on my homepage and of course, if you updated that and changed that, it would have looked different. Okay, so let's see my site on the front end now, okay. I've changed the color of my headings and of course I've changed the typography and I've updated my buttons block. Let's look at my sample page and see what it looks like everywhere else on my site. I also changed the radius of my images and my gallery block. And as you noticed, I actually did nothing from within a page. This was all design decisions I made in my site, in the site editor using styles and using the style book, okay. So before I talk about individual blocks and how it takes precedence, is there anything else? Any other questions about this or comments? There's some compliments on the delicious looking sushi and how distracting it is. I agree, it's dinner time here, that looks good. There was a question from John about whether it's possible to set a default size for the image block. I am pretty sure that is not possible, but if you know otherwise. So I'm actually glad, I think it's Jean. I know with our fringe background, we also say John. I think it's Jean. No, this is John, this is John, this is a different person. Oh, John, John, sorry. Sorry, I thought you said John. Oh, no, no, no, no, no, sorry. Okay, sorry, my bad. I'm actually glad John asked that question. So of course, sometimes you don't have all those capabilities. So let's see that in action. So let's open style book. So what was the question, a default? A default size for each image block. So when you add it, it would appear the same size every time you add it. So unfortunately not. The one thing you will see here in the style book is that you can only update the border and the radius and there's also a style variation that you can choose. But unfortunately, that's not available in the style book or in styles yet. And the reason I said that's a good question is I actually bumped into this as well preparing for this. I wanted to change the social links block. And I suddenly realized my options are limited. So let me show you. If you go to widgets and you go down to social icons, I actually wanted to update, and this is maybe a question for you as well, Catherine, but what I realized is that those settings are just not available for this specific block. So if I select the social links block, you will notice if you click on colors, the only option you have here is the background. You actually can't change these colors in the style book. You can only change the background. And that's not what I wanted. I didn't want that. I wanted to kind of change my social links and the look and feel of my social links, but then I realized I can't do it. I have to do that on the front end or in the template. Speaking of tablets. Oh, sorry, go ahead. Is that your finish? No, no. Go for it. Cause I just wanted to show folks something else though. Okay. Okay. So I don't know if this maybe will solve John's question, but one thing I realized is that you can apply changes globally. So let me show you what I mean. So unfortunately, as I said, I can't make these changes on the social icons block using the style book. And as we saw, we are also limited with the image block and also some other places. But what we can do, okay, let's just scroll down here and I'll show you. Okay. Let's add my social links, social icons block here. Okay. And then let's add, so let's say Facebook, Twitter, WordPress. Let's just add some dummy content to make the color pop to make it live. Okay. So there's the social icons block. Now I want to make changes and I'm going to change the size. They say to large. Let's open the styles for the specific block. Go to styles. And if you go to icon color, let's say we want the icon color to be black. No, let's keep the icon color white. Let's make the icon background black. Now, as you would have noticed, you did not have this option in the style book. So let's say you had social icons spread throughout your site now. If you make the one change here, you can actually now apply that to all your other social icons as far as I know. So let me just check. If you click on settings, and if you go to advanced, it says apply globally. Now, unfortunately, this block does not even allow you to do that. So if you see it's actually not in white, it's in gray. So that's interesting, Catherine, that you can't even apply this globally. You can apply, if you make a change to another, let's say for example, the buttons block, let's see. Let's make a change to our buttons block and let's make the background color. Let's say I make that change here now, go to settings, go to advanced, you will notice I can apply this globally now. I didn't even have to do that in the style book. So now if I say apply globally, it says apply this blocks, typography, spacing, dimensions, and color styles to all buttons blocks. So now it will update everywhere. So that is an option applying styles globally that is also worth mentioning. But as you saw with the social icons block, it does not actually allow you to do that yet. And I don't know why, but yeah, I just thought it's worth mentioning. Yeah, very interesting. My guess as to why that's grayed out is because those color options are not yet available on a site-wide basis. And I don't know why. I don't know why they're available on the individual block basis, but not globally. So that's strange. Yeah. All right, so. Yes, what did Linda say? Well, Linda's saying, so you'd have to make the changes to the social icons, turn it into a reusable block and then replace the instances. Absolutely. Yes, that's a great workaround. Very good workaround. So of course, for those folks who are wondering, if you click on the three vertical dots, you can create a reusable block. And then as Linda said, you can use it that way. Yeah. Do you have time for a semi-related question? Yes, go for it. Okay. Well, I had a question earlier. Are global styles for the entire site or can you style something for pages and a different style for posts? So I just clarified that global styles are site-wide, hence the word global, but that if you added a template, like for example, the page template or the single template, then you can apply those changes just to pages or just to single posts, for example. So that would be the way to do it, not globally. Yes, correct. Yeah, absolutely. Unfortunately, when of course everything you do in styles is globally. Although I just want to check something. This is maybe just me testing something out. I'm just trying to think now. No, let me not go there. I don't think that is possible. I was just thinking of something else. All right, but I wanted to talk about changing individual blocks and how that actually takes precedence over your global styles. And let me show you that in action. So it's open styles. And in this case, I am going to, which block did I look at? The quote block. That's actually the one that I wanted to look at. So let's go to the quote block and I'll show you what I mean. So I think what we need to learn from this is that just you need to be changing individual blocks sparingly. And you also need to think how it links with the design of the rest of your site. So let's say I want to update this individual quote block now. Yeah, so I'm going to select my quote block and let's say I want to change the typography. I don't want it to be IBM Plex Mono like the rest of my site. Let's make a DM Sans. All right, next. I can make some other changes. So let's say let's make it large. Let's change the default. Maybe to semi-bold, maybe medium or extra light. Okay, well, we can play around with that. So now you will notice it's DM Sans and I've made some other changes. So let's save that. Now I'm going to go back and let's say I've made a different decision and say I actually don't want the IBM Plex Mono for my site design anymore. I want to change that now. So now we go back to, we leave individual blocks and we go back to our general styles, typography, keep an eye on the quote block. All right, so keep an eye on the quote block because now we're going to go back to text and say we don't want IBM Plex Mono anymore. Let's say we want source Serif Pro. So now everything changed to source Serif Pro but you would have noticed that the quote block was untouched, it stayed untouched because I've made that custom change to the individual block. If you want your quote block now to update with the rest of your site, you have to go back and you have to select the default option for the quote block. So if we select, let's just keep an eye on this again and see how it changes. Let's select typography and let's select default. And when we select the default, we would have noticed now it changed again and updated with the rest of the site. So yeah, I just wanted to highlight that changing an individual block, it takes precedence over global styles that you make. Okay, I'm going to stop here and actually go to my other test website as there's a few other things that I want to show you. So I'm going to make my way to my other test website and you will notice I have also installed the 2023 theme year. So let's just open the editor. All right, we will see this is the page template actually that we're on. And I wanted to show you what happens if you apply different block themes and how some provide block style variations and some don't. So let's go back and go to appearance, go to themes and let's activate the TOEV theme. Let's go to editor again. Now you will see, of course, the style of this block theme has been applied. But if we now open styles, you won't see, let me just show you compared to this other one. Sorry, let me just close styles. You will notice, as we said, some themes come with style variations. So if you can click here on browse styles, but now compared to the TOEV theme, you don't have the browse styles. So this theme does not provide style variations. But now you can, of course, make any changes here as you please using styles and your style book. Let's use another theme to show the opposite. So let's make our way to themes again and here's one that I found, flat blocks. Let's activate flat blocks, make our way to the site editor. The new style has been applied. Let's open up the template, open styles and here we will see there is actually an option to browse styles. And remember, when you select browse styles, you've got the zoomed out version of your site and there's actually a lot of variations to choose from. And you'll see some of them, the color seems to have stayed the same. It's just the typography that changes. So yes, I just wanted to note that because I know all of us use different themes and therefore things might look a bit different on your end. That brings me to 6.3. Now, of course, Catherine, I will maybe team up with you again on this, but when 6.3 is released, we will try and also have an online workshop about all the updates with 6.3. But I thought let's just have a sneak peek to see how styles or how the site editor will change so that you can see how styles will also find a new, or how styles can be used differently as well. So to do that, I'm just gonna activate the Gutenberg plugin. Now, of course, this is not set in stone yet. There might still be changes happening, but I just thought to get a feel for it. So now I've activated the Gutenberg plugin. Let's make... I'm just gonna activate the 2023 theme again, okay? And let's go to the site editor. And now you will see something different. You will actually see in your left sidebar now, you will see you've got the navigation block, you've got styles, you've got pages, you've got templates, you've got library. A lot of exciting things happening and coming up for WordPress. I think one of the main things that I wanted to do here was to bring everything to one place. Now, we don't have time to go into pages and library, et cetera, but I just wanted to show you that styles will still be available top right, as per usual, right? If you open your template, you can go to the styles icon and everything else will, you can go to style book, that will still stay the same, but you will also be able now to just change your styles from the left sidebar. So let's see how that works. So let's click on styles. The nice thing is I didn't have to open the template, go to the styles icon, everything was just right there at the click of a button. And now, of course, again, we can see our style changes here. If we click on edit styles, it will take us into the template and it will open up our usual sidebar on the right. And of course, you would have seen, you can also click on the style book from here and it will actually open your style book like this. And everything is actually on one page now. Now, as I mentioned, some of these things might still be updated or changed, but it will give you an idea of where, in which direction we are going with 6.3. So yeah, I just thought it's important to kind of show how styles will look and change a bit moving forward later in the year. Did you wanna say something here, Catherine, about 6.3 and the sidebar? Yeah, a couple of things. So there was a good question from Elisa about the library replacing the template library or the templates, what was called templates and template parts before. And the question is, do you know if it will contain more than that? So first of all, they're considering changing the word library to something else to avoid confusion with the media library. So it might actually not be called that. And it is going to contain, I don't know if you mentioned this, Wes, apologies, I was looking at the chat, focusing on the chat, but it will contain reusable blocks. So those will be in there. And I think patterns, some of the, yeah, patterns. I think that's maybe- Patterns, yes. Yeah, patterns as well, yeah. And they're talking about renaming reusable blocks to patterns as well. So there might be some name changes happening. So it could be just a heads up that it could be a little bit confusing. Once 6.3 comes out, you here have had a sneak peek. So just to be aware that names of things are still evolving and may change. There was another interesting question about that M had about, is there a way to save the different style versions so that you can go back to a past style if the recent changes don't work? And that's actually coming in 6.3 and we can see it now with Gutenberg 16. And do you wanna show it? I'm not sure if you're aware of it, I can show you where it is. I just noticed this. No, yeah, yeah, I haven't heard of it. So yeah, show me. Okay, so maybe make a style change and save it. So like maybe choose one of these style variations and save it if that's okay. And then we'll see, yeah, and then save that. Okay, so now I've made the change. Yeah, click save at the bottom left. Save. Yep, and now click anywhere on the right hand preview and click the three dots or the famous kebab menu, the one, yeah, that one. Click, hmm. I don't have the beta tester. I don't have the beta tester. It's just Gutenberg plugin. Do you have Gutenberg 16 running? So I've got it running on my test site. That's weird that you don't see that. Okay, well, that's, in mine, it's below the word welcome guide. Okay, let me check if I've updated. I think I've updated. Actually, I think this plugin updated, installed plugin 16.1.0. Okay, I'm not sure. Things are evolving. Maybe they took it out. It's possible they took it out. I'm still running 16 on my test site, but it's, so what I'm seeing is under additional CSS, it says, I didn't see additional CSS on yours either. Maybe they've moved both of those things. Maybe. Yeah. In any case, that is a feature that's been worked on and whether or not they've now removed it. I don't know, but it is on the radar to answer your question. Well, now that you, yeah, sorry, go ahead. Oh no, I'm just looking at new questions that will come in. Yeah, no, Eliza just mentioned that it's not on hers either. Okay. Now that you, you are, or now that you've also mentioned CSS, maybe I can just remind folks who still want to use CSS and you can of course do so. So that's actually, I don't know if you've shared your online workshop recording, but that is actually an online workshop Catherine did was how you can still use CSS in the site editor. Yeah, I've just dropped it in now. There's some other links I'm gonna drop in related to stuff we've been talking about as well. I'll drop those in. I'm now wondering if the revisions that I'm seeing are relating to the additional CSS panel only and maybe you had not ever added. Do you want to add just a piece of additional CSS and then? Well, on this site, I don't have the, on this test website, I don't have the Gutenberg plugin installed. And if I click on the kebab, you do have, but you are saying if I'm on year. Yeah, do you see additional CSS when you click back into there? Let's see. The other, the style menu first. Yeah. And then the three dots. Additional CSS. Yeah. Can you pop something in there and then save it? Just what would you like me to pop in? It just could be gobbledygook. I just want to see if it's going to create a revision. Yeah. And then save. Yeah. And save. And then now remove it and then save. And let's see if that generates revisions because maybe the revisions is only custom CSS revisions. It's not obvious to me. And now click the three little dots again. No. Okay. Well, maybe they removed it. Maybe it's not ready for prime time and they took it out. I don't know why I'm seeing it and you're not. But yeah, this is, this is actually something I wanted to just highlight as well. Of course, you have, you have the, you've got the, you've got free range to add additional CSS in the site editor. Yeah. And yeah, check out, I'm Catherine's online workshop if you, if you are interested to learn more. Okay. So we have four minutes left. I've basically gone through everything that I wanted to do. So I'm going to stop the recording there for us and then we can go ahead and listen to some more questions. So everyone, thank you for joining us today. We appreciate your time.