 All right. So I want to officially welcome everyone here to this workshop on custom CSS editing in the site editing era. And I'm going to introduce myself. I'm Catherine for those who don't know me yet from other workshops and elsewhere in the WordPress sphere. I'm a mom of a cat. Her name is Sophie. I love baking and I love collecting vintage pyrex particularly mixing bowls which I can't seem to get enough of. And I'm located in Montreal, Canada. So my second language is French. In the WordPress world, I used to be a freelance web designer and I built custom themes from scratch mostly WordPress. And for the last 11 years I've been a happiness engineer at automatic. And for the last year I've worked on a team that is devoted to the WordPress project. So our time is donated to the WordPress project as part of something called five for the future. And I have that in the support forums in repress.org, things like the default themes from 2023 all the way back to 2010 are still people using 2010. And also helping out in the community plug in support forums like Gutenberg and others. I also help out on various other projects including roaming around Gutenberg, GitHub repo, helping with bugs and enhancement reports things like that and various other projects. I want to give a warm welcome to Michael host Alvaro and Alvaro do you want to briefly introduce yourself. Hi, I'm Alvaro, I'm in Valencia, Spain, and I am on the same team as Catherine so we kind of work on similar things and I'm very happy to join you all here today. I'll be taking notes of the questions so you feel free to drop your questions in the chat and we can take a look after the workshop. Perfect, perfect, I will be pausing along the way as well so we might have little question and answer breaks throughout but they'll definitely be a Q&A time at the end as well. Who is this workshop geared for I just want to make sure you you're in the right place. It's geared for folks who want to make small visual tweaks to your site by using custom CSS. It's also geared to folks who are using a block theme and by block theme, I mean here we are in the WordPress repo block themes are themes that take advantage of the site editor for customizing your site and that means you are able to add blocks to places you would not have been able to like your header and your footer previously in classic themes you were not able to do that there was a tool called the customizer for that. But what I'm going to show you today is geared for those of you who are using a block theme like 2023 for example. I'm expecting that you already know how to use the browser inspector to target elements so that you can then use some custom CSS to override them so I'm assuming you know how to do that we're going to look at that a little bit today but the actual steps on how to do that. I'm assuming you know how to do that already. With most of this workshop, you would already know some CSS basics you don't have to be super advanced with CSS or anything like that. But understanding the basics will help you get more out of this workshop of course you might leave this workshop intrigued and go on to learn more CSS and that will be great. And as well, folks here, you know if you're new to the CSS editors that were introduced in 6.2 that's great because if you know everything I'm about to tell you then you'll probably be bored a sec. All right, so that's who this workshop is for. Now, what are we going to cover here. Just a little outline we're going to look at a little bit of the history of custom CSS within WordPress itself. And then we're going to delve into the new CSS editors that were added in WordPress 6.2 so where there were two types that were added we're going to go into each one and look at some examples. There was a per block CSS editor that was added, and a site wide or global CSS editor we're going to look at both of those. We're also going to take a little, a little detour and look at some additional classes and how you can use that in conjunction with the site wide CSS editor. Additional CSS classes is not a new thing but it's kind of cool you can now use it in conjunction with one of the new CSS editors. And finally we're going to look at a little bit at what's next for custom CSS in the WordPress editor, and also where to go to get help if you need help with any of this stuff. We're going to dive in. Hopefully you're all in the right place. I don't have a mass Exodus. All right, we're going to do some demos now. So, let's go back and talk about a little bit of history of custom CSS in WordPress. This is a classic theme and I mentioned before what I mean by a classic theme is a theme that does not take advantage of the site editor to customize. And one example of a classic theme is 2021 2021 in fact was the last classic default theme. After this they turned into block theme so 2022 was a block theme but back in 2021. This was a classic theme. And you know it is a classic theme because you have under appearance customize and the customizer is a tool where usually the last panel was for additional CSS. I shouldn't talk in the past tense they still exist so you know the last panel is for custom CSS. And this is where you would do things like let's say you wanted to change the color of the site title. How would you do that. There is no built in option for this in the theme can't add the block you have to do custom CSS so you would go to the front end usually you'd open up your browser inspector. You'd right click to open your browser inspector there browser inspectors built into almost every modern browser, different ways to get there it's usually a right click to something called inspect or inspect element. And you would go for popping in some very relevant resources there. And then you would, you know, find the element you want to target, and you go, Oh, what class is that okay site title. You'd pop out your code editor so this is a separate code editor I use visual visual code studio. Write your CSS, and then you'd pop back into your browser inspector go to the style editor, add a style here that you wrote in your code editor, verify that it worked. Go back to your customizer, paste it in. And boom, now you have changed the color of your site title. Alright, so this was the era of classic themes and you can see it's you know there's quite a lot of steps. Now, now came block themes so block themes came in. 2022 was the first default block theme and block themes, you know that they're a block theme because now when you go into appearance you no longer have a customizer, you no longer have a customizer so you don't have a way to get to custom CSS editor. Now, in fact, those in the know would type in customize that PHP and you could bypass that and get there and you'd still find the additional CSS panel and it would still work. But that's a little bit hacky it's not really what you're supposed to do. And that was how like with themes like 2022 prior to the new custom CSS editors that were brought in recently, that was how you have to get there. So we had the site editor, but no custom CSS editor. So that was that era. Now, bring us to the current version of WordPress 6.2. What happened, what happened was custom CSS editor was brought right into the site editor so it's not like we brought back the customizer. Instead, we brought in some new custom CSS editors right in the site editor and that's we're going to dive into now. So, we're going to click on editor here. And that's going to bring us to the site editor. And there's a few ways to get to where we want to go. I'm going to do the quick route by just clicking here in the preview area. We're going to click on styles this little half moon half dark half white moon thing click on styles. And this is where we're going to look at the custom CSS editors now before we dive in here just want to explain the purpose a little bit first. So the purpose is to add custom CSS to do things that you could not otherwise do any other way. So for example, there's a lot of things already built into styles that allow you to change the look and feel of your site. For example, down here you see colors. And you see text, if you wanted to change the color of your text. This is green, you could do that you don't need to write custom CSS for that. It's already an option here. So there's a lot of things like that where there's already options in the site editor. So there's no need for custom CSS but why, why would you need custom CSS then if there's so much stuff here in the site editor. Well, a couple of reasons. And I first want to quote and McCarthy because and has a great way of putting it very succinctly and says CSS custom CSS is intended to be a gap filler with the long term aim for as much as possible to be handled by the site editor itself. So it's a temporary thing or it's meant to be a temporary thing we'll see how temporary it is. But here's some examples of when you might want to use custom CSS. If there is not an option here in the in the styles area to do something, then you might need some custom CSS. There's a lot of stuff in here. You can change the size you can change the line height you can change the look and feel a buttons there's a lot a lot a lot a lot of stuff in here, but not everything. The developers are continually adding more options in here for ways to change things in the in the UI here, but not everything is in here yet so you might need custom CSS to fill some of those gaps, we're going to look at some of those examples, shortly. Another reason you might want to use custom CSS is to patch a glitch, you know if there's a bug somewhere and something doesn't look right, and the bug isn't fixed yet in core or somewhere, you might need a bit of custom CSS to fix a glitch temporarily, hopefully temporarily. Also you might want to style something in a plugin and your plugin might not provide a way to do that. You can use custom CSS for that. So, the key thing to remember is custom CSS is not really meant for things that you can already do with what's already built into the editor. All right, I'm going to pause here before we dive into examples. Any questions so far I don't see anything in the chat. I think we're in a pattern. Yeah, if you want to change something in a pattern which is a pattern is a collection of blocks pre made collection of blocks, and you can't already do that with the settings that are built in, you might need custom CSS absolutely. So I think we're going to move ahead. Alright, so I referred in the outline at the beginning to the two different types of editors that are in custom two different types of custom CSS editors that are now in existence. So let's first look at the per block CSS editor. So what is that. Well, you can see here that in styles again we're still in styles. You've got things here that are site wide. If you click browse styles for example in the 2023 theme which is what I'm using here for the demo. You have style variations which are you know, change the colors and the typography and certain things. You can change your site wide. All right, you can change your site wide typography you can change your site wide colors or site wide layout. But down below that it says customize the appearance of specific blocks for the whole site. And if you click on this you might have already explored this because this part isn't new. You can see a list of many many many different types of blocks not every single type of block that is this but a lot of them, and you can either click on one of them, we can search let's say I want to find a gallery. And what these are these this will change the look and feel of this particular type of block throughout the whole site. So instead of changing everything throughout your whole site. You can change just this block throughout your whole site. All right, and notice what we have at the bottom so for example you want to change all paragraphs the typography and make it larger. Do you want to change the colors of all paragraphs background color of all paragraphs, etc. You can do that here. But if there's things you don't see here that you want to do. We have additional blocks is so what is this. It looks pretty simple right it is just a square you click inside it and you can type stuff. It's a panel where you can type. You guessed it CSS. However, here's the thing to remember. This is not a regular CSS editor like this. It is not meant for full CSS declarations CSS declaration is this full thing which starts with a selector. This is really brackets. This is a property and this is a value. This per block CSS editor is not meant for all that it is meant for something pretty simple. It is meant just for a property value pair, which is just this line line three, it's just meant for that. This is a concrete example because at this point your mind might be exploding a little bit and going what is she talking about so I'm going to show you an example with a list block. So to do these examples do this demo I'm going to use something called the style book. So if you hover over this little eyeball you'll see that it says style book. Some of you might have seen this before if you click on it. Look what happens here we've got sample blocks. This is sample blocks. This is a single block that exists in core but most of them, and it's divided into different areas so you've got blocks that are mostly text, you've got media blocks like galleries and images. Design blocks is sort of a collection of things, miscellaneous things like buttons and columns, you've got widgets. So widgets, just keep in mind widgets are not exactly the same thing as the widgets that you used to add here or in WP admin. They're similar though. They're similar in that you know we've got archives we've got a calendar, but you can their blocks their blocks that you can put anywhere in your site you're not limited to the areas that your theme has defined as in the classic theme era. That's what these widgets are. Then you've got theme blocks theme blocks are your navigation bar so your menu logo site title, etc. Alright, the first example we're going to look at is the list block. We're going to go into text list block here. So notice what I'm going to do now I'm going to click on this list block. Notice what happened. What happened, it pulled up the list block settings right here. This is super handy because if you want to go through these and style them all at once, you can just click okay now I want to style paragraphs throughout my site. Now I want to style headings throughout my site so this is a super efficient way of going through your blocks. Alright, so list blocks. Let's say I didn't want something as basic as this let's say instead of these circles for my bullets. I wanted squares. How would you think about doing that. First thing I want you to all think about whenever you come across something like this is see if the option is available already in the block settings across the site. So let's check typography. We've got font. We've got the size we've got appearance line height letter spacing letter case. Also check under this three dot menu for options. This is sometimes known as the kebab menu if you've not heard that so as opposed to hamburger we have Bob. Just also known as a brochette and some some parts of the world. Click on that because sometimes there are extra options that have not been shown by default. This is another thing that's happening is these lists are getting so long now that the developers are tucking away some of them here so if you don't see something one day that you're used to, you're like where did that option go I know it was here. Click the three dots and look for it and you can check it off and it'll display. So, but you know I'm not seeing anything for square bullets. So, colors. No, it doesn't really make sense. It's not related to colors ellipsis menu. Okay, yes, thank you. Several, several, several ways to we can name that menu. Thank you. All right, layout. No, nothing for squares. So, I now know. Okay, well I will need to write a bit of custom CSS. This is a good use case for needing custom CSS. So, look what we have here below every block we've got add your own CSS to customize the block appearance. And if we click on it. What do we see this looks very much like the CSS editor we looked at before. It looks very much like the one in the customizer is what it's basically it's just a box a box where you can put CSS. But, you know, as I said before, this is just going to expect property value pair. So, how do you know what to put here well, I'm assuming you do know a bit of CSS. But there is a good reference, you know, you're no one's ever expected to have memorized all the different CSS properties and values. So, I do recommend if in doubt if you're not sure you're writing it correctly. Look at a reference like the Mozilla CSS reference it's a really good one. Thank you Alvaro just pop that into the chat so this is a good thing to have on hand if you don't use it already. So you can see here that to target a list and make the bullet square, you go list style type square. So I'm going to copy that into the editor, and look what happened, we do have our square bullets now. So, notice a couple of things what's what's weird about this CSS put anyone who can tell me what's weird about this to them pop it in the in the chat. This is different from regular CSS what are we missing here. No color. Yeah, well there's no color highlight absolutely the CSS editor that you're used to has color highlighting or syntax highlighting. And what else what about the CSS itself no brackets yes Jane no curly brackets curly braces. That's right. And what else are we missing. Classes yes Rico said no classes so no IDs so the classes and IDs are an elements are known as the selector. The selector is this part it's what are you applying the CSS to that is missing here and the cool thing is, you don't need it. Because this editor is pretty smart. It knows that because you're in the CSS editor for the list block. It knows. Alright, so we're going to save this. And it prompts you to acknowledge that you're saving it into custom styles. You say yes, if you exit without saving like most other things in WordPress you're going to lose what you just did. And now I'm going to go to the front end of my site so the front end of my site is the public site aside. And I do find it helpful to have a page ready or a post ready even if it's just a draft where you've put the blocks that you're styling on just to just to make sure that it works you see that it works here but just to double check. So I had created a page earlier with some sample blocks on it. I've got two sample list blocks so this was before. This was before okay Lisa how you have a very good question and I'll get to that later actually Alberto can we save that for the end the question about child theme. Okay. So, I've got two lists here and they both by default have circles circle bullets and then I refresh refresh my page to apply to see the CSS that I saved. And we've got squares now. Alright, so this CSS worked. Another thing I want to show you here is where this CS actually went. Where did it, where did it go where did it where did it WordPress put it. So I'm going to again go into my inspector right click inspect. First before we look at the CSS I want to look at this element so I'm clicking on this element, it is, it is a UL what is a UL does anyone know can you put that into the chat. What is a UL HTML element, what is it unordered list Jerry got it first yes thank you. An unordered list is you by default it's a bullet list with circle circular bullets but you can sell the bullets in different ways as we've just seen an unordered list is also in comparison what's the other type of list. So there's two types of lists we've got unordered lists, or ordered lists exactly, oh well exactly those are the two types of lists. This is an unordered list and ordered list has a sequence to it like it could be 123 it could be ABC etc. Those are the two types of lists. So let's look at what happened now to the CSS so to find our CSS. Here in the little search box, and I'm using Firefox but all the, you know, all the browser inspectors are pretty similar so you should be able to do this. You type in global, just start typing global and this is going to pop up this this global dash styles dash inline dash CSS is going to pop up you can click it hit enter that's how to do it in Firefox. And I'm going to open this up. This is all the different CSS coming from different areas in my theme, but it's also got appended at the end, the CSS that was just pulled in from the per block editor. All right, so you can see it took this property value pair that I wrote in the editor, and it shoved it into the selector, and it gave it this curly bracket so that's why the CSS works is that it. You've got fully formed CSS here that that CSS here that were pressed made for you. Now what do you what do you notice here. I'm getting both ordered lists and unordered lists so I'm doing something that in dramatic terms is called foreshadowing I'm foreshadowing something I'm going to return to later. Think about the impact that this might have later. We'll get back to this. All right. Now we're going to move on. And I just, I will come back a ton of times to the inspector here. But just to say that, you know, if you're troubleshooting CSS you wrote it's not working as you think it should come in here and see what actually got written by by WordPress particularly in the per block CSS editors and see if it looks right or if it's not what you expect and then you can tweak accordingly. This is a good place to troubleshoot. Okay, so you're starting to hopefully get a sense of how this works. Let's look at another example. We're going to look at a poll quote so I'm going to scroll down here. Here's a poll quote. And how would I what's the quickest way to bring up the settings for the poll quote block. Quickest way. What should I do here. You remember. I want you to remember this because it's going to save you a lot of yes to the click on it alright so you click on it pops up right here all your settings. So the poll block is kind of a fancy magazine style quote that centers all the text and has some borders above and below. What if I wanted to left align all this. All right, so you'd think maybe the left alignment option is here in typography, but there are no alignment options here. But you know there might be alignment options. Just just to show you you know here on this page the set demo page I made, you know you do have alignment options on this one specific block up here in the toolbar. But if I changed this, would it affect all the blocks, all the poll quote blocks throughout my site. You know right this is just affecting this one block so that's why you know that's not available here what's available here is the settings in this panel. So there's no alignment options here so what do we need to do we need to write a bit of CSS, go down to our additional block CSS, does anyone know how we would align all this text to the left. I'm giving you some hints and what I'm saying, how would we align all this text to the left does anyone know how to write that little property value pair. So text align left your quick Sue thank you. Here we go text align left bingo. Here we go. All right, save it. Again, warning you are you sure yes. Go back here we scroll down refresh, and here it is. All right, she's starting to get the hang of this. We'll look at one more thing here in the per block editor. We're going to look at a widget. I'm going to look at the archives widget. Click on it, see all the options. So what do you notice about the archives list, the archives list is the date list of all the posts on your site so you can click on each date and see all the posts that were written in that month. This is a square bullets. So what does that mean that means that the CSS we added to the list block earlier has been carried over here into the archives list because the archives is a type of list. We're going to so Jean you've just predicted my next example so here's what we're going to do. What if we don't want bullets on the archives list. What if we don't want bullets on the archives list. What if it's an option typography. No nothing about bullets, lay out nothing about bullets. So what do we need to do we need to add some additional blocks CSS so does anyone know. Well Jean already said it. If we want to remove the list you're in my head Jean, if we want to remove the list the bullets. We do exactly what Jean said, list style type and none. No, don't be sorry you're brilliant I mean you anticipated. Excellent. All right, so that that's how we do it we remove the list bullets only on the archives block. All right, but what do we what do we notice happened here. I'm going to show you again. This is with the bullets this without the bullets. What do we notice here what's what's what did it leave behind here that we might still want to remove. Right behind some space yeah some margin it's actually padding so yeah exactly what if we want to get rid of that. What if we want to get rid of that what could we do indent yeah there's some indentation here that we don't want padding zero so. Yeah, we could do that so it's actually the left padding that we want to remove. So we say padding left is zero, but why do that when that we have an option in the editor for layout. So we could do that, but if you start to think about the best practice of do things in the site editor. If the option is available so let's so I remove that let's go into layout I want to show you something here with padding. This is something that can trip people up. So there is an option for padding and the margins, you know it's it's sorry at the margin slider is all the way to the left so you might think that means there's zero padding here, but. That's not true, there is padding here so how do we get rid of it. This is something that can apply to many different blocks so this is actually a very interesting thing to be aware of. So what we're going to do first we're going to negative padding interesting interesting theory but we don't even need negative padding I'm going to show you why. First we're going to unlink the sides because the padding settings here when they're like this. These padding settings are for top right bottom and left, all in one. What if we only want to change the left padding we have to unlink the sides. Alright, so the minute we do that look what happened. We have settings for top right bottom and left. Okay, we only want to touch the left one, but still the sliders all the way to the left, you would think that means there's zero padding but no, but wait there's more. Look at this this little adjustment icon here there's probably a name for this icon that I'm not aware but if you hover over it says set custom size. Click that. What happens now what happens now is you can add a value here. And you can even change the unit by default it's pixels but you can change the unit. All that we need to know sliders icon maybe Drake I'm not sure sounds good to me. All we want to do here is what do we what do you think we want to add in here to get rid of the padding what number do we want to put in here what value zero exactly zero boom look what happened. So this is the equivalent to having written padding left zero. And since you can do it here, get used to doing here. Yeah, exactly. Alvaro is just set something good in the chat which is in block themes, you know the empty state, it might look like that it's zero but it's just a default so poke around and zero it out. Alright, so now let's save this. And let's go back here scroll down refresh and we can see that our bullets are gone and our padding is gone. Alright, what is the default the default, I think it depends on the block. So, Suzanne this has been very frustrating and I know, hopefully now knowing that there is that way to zero things out will help but I think it is. I don't think there's one one block size fits all type of default and the theme as well. Yeah, exactly. I could be wrong on this but but there you go. Alright, so now we've done that. I just also want to mention that I've been emphasizing the fact that you know this editor is meant for a property value pair. In fact, it can actually take a little more than a property value pair. That's a little bit more advanced and so we're not going to dive into that here but just let you know it is possible that you can put more stuff in here, more more advanced CSS stuff. And if you look at the link that I'll put in earlier about the per block CSS to the link to the documentation you can read more you can see one or two examples about that and if you're more advanced with CSS. Feel free to experiment. The one thing I would say is you know as you write it. Write it what the CSS is generated on the front end and make sure that it looks valid and that it's working as you expect. And also just because something works on the front end doesn't mean the CSS is is good. It doesn't mean it's valid it could be it could be just working but it shouldn't work or it might not work in every browser it's just some hacky fluke. So it's best to make sure, check the inspector, make sure that the the CSS is looking as you expect. We're going to move on to the site wide CSS editor but I'm going to pause here I see those questions coming in fast and furious. Sue says, is it assumed you'll put only one selector in there. Well, it's targeting the list so it's target it's targeting the block that you have selected here so it's assuming that you're targeting this so you don't have to put any selector in there. So if it's fancy you can add sort of sub selectors that's probably not the technical term but again I'm not going to dive into that because I don't want to, I want to keep things pretty beginner today, but definitely Sue take a peek at the examples in the documentation because I think that I'll give you some ideas of what, what types of things you can do in there. Sue says changes to the list block affect the archive block but not the other way around. Yes, because the archives block is more specific than the broader list block so, for example, if you go here in the inspector and you take a look. I see that the archives block is not just a ul an order an unordered list like we saw before it's got this archives list class on it so that means the CSS we're writing is targeting that class. It's not just the ul so you see here we've got the, the CSS we wrote to target the list all lists, and then we are, oops, I just something, and then we're getting more specific with our CSS and we're targeting the archives list so this because this is more specific in CSS terms. This is overriding the square bullets on general lists. Okay. I'm just seeing. Yes, the poll quotes. We're going to save these questions I want to make sure we get some good time with the site wide editor will come back to this if we have time we might also end up going a little bit over if people can stay. But I'm going to forge ahead with the site wide CSS editor and then we'll come back to as many of your questions as we can right. Okay. CSS site wide custom CSS editor, let's go back here. So, if you notice, next to the style book, we've got another Bob or ellipsis menu. If you click on it and it says style actions. If you click on it, you will see something that says additional CSS. This is the site wide additional CSS editor. So go ahead and click on that. And we get something that looks exactly like the per block CSS editors. I know this is a bit confusing, because you can kind of forget where you are sometimes like am I in a block CSS editor am I in the global CSS editor. Bear that in mind when you're working with this custom CSS sort of try not to lose track of which editor you're in which blocks CSS editor which if you're in the global, it is a little bit tricky right now because they all look the same. But right now we're in the global site wide additional CSS panel. It is very similar to the customizer CSS panel as well. It is very similar it works very similarly it is expecting full CSS declarations just like the customer customizer CSS editor was. So, if you're pretty familiar with the customizer editor. That's how this works. Let's look at an example. Let's look at an image block now so we're going to the media tab here. And here's an image block. What notice about the image block that is maybe a little bit different than some of the other blocks we looked at we've got photo here, and we've got what is this. What is this here. This piece of text below the picture put pop that in the chat if anybody knows what this this is called caption right. So what's different about this is that we've got two components to elements within one block. So, that is why, for this example about show you, we're not going to use the per block editor because the example I want to show you here is I want to target just the caption, just the caption. If we were to add what I'm about to do in the per block editor, it's going to apply to everything, the picture and the caption but I only want to target just the caption. What do we do, let's go to, I've got my site wide examples here I've got my. So let's just never fail chocolate cake and I've got my caption down below. So I'm going to open the inspector. I'm going to pretend that I took the time to look at the element figure out how to target it. Look it's got a caption. I'm fig cap. It's the element fig caption and it's got the class WP element caption. I'm going to I have my code editor open. I'm going to write my CSS to target it. I want to make it fancy I want to give it a colorful background I want to change the text make it bold do a bunch of stuff. So I've written all that. I'm going to pop that in the editor and see if it looks like how I want and it does. So we see here that I'm targeting the image block and the fig caption within it. All right. So, again, these are skills that I'm kind of assuming you already have, but this is very much like the customizer CSS editor so all this stuff I'm going to take that out. I'm going to go back here. I'm going to pop this in additional CSS, and you can see that it works. All right, it works. I'm going to save it. And again, just like with the per block editor warns us are you sure you want to save it you say yes, come back here refresh it. I always do this one chunk at a time just because if something doesn't look as I want for troubleshooting purposes. I find it much easier to do it a bit at a time. You might prefer to add all your custom CSS at once, and then troubleshoot as needed. I like to do it a bit at a time. All right, another example. We are going to look at the quote block. So I'm going to go back to text here. I'm going to the quote blocks pretty simple. It's just an indented piece of text with a larger piece of text up here and the citation down here. Why wouldn't you do it with the image block style editor. Do you mean the per block style editor. Do you mean down here if I go to blocks and image and add additional yes, because this is, let me try and explain this better. Let me let me first remove the CSS I just added here. I'm going to take the time to do this because I think it's an important concept to understand. So, I'm going to save this. If we were to and again I just click here boom I'm right back. If we were to put the CSS I wrote in here. First of all nothing happens nothing happens why because this editor cannot take. I'm just selecting the selector right. What do you notice here, most of it is okay but what do you what do you notice what it doesn't look right does it. That's because this is targeting the whole image block that's right with the background applies to the image as well as the caption it's also added the padding that I put around so we could do some of this here we could do you know the text color the whole but we couldn't do everything here because you're not targeting the whole block you're just targeting the caption so instead of splitting this up and going. You know, let me take out the padding I'm going to put that somewhere else. Oh, let me take out the background. No, why not put the whole thing in the additional CSS you could in theory split it up like that. I can't answer your question about why but you could style just the caption text alone not the background. No you can't because this is a very simple block editor there's no way to target just the caption here because you can't put in a selector. Does that make any sense. I'm going to move on. It's targeting the div it's not targeting the div it's targeting the. The, it's not a div it's a figure element. So I'm going to move on. I'm going to move on I know this can be a little bit confusing but the thing to keep in mind is the block per block editor is targeting just the whole block. So if you have a block that combines multiple things within it. It's less confusing and more reliable to use the site wide CSS editor because you can write your CSS to target just what you want. And you don't have the situation that I showed before where something you wrote to target just one part of the block is being applied to the whole thing. So for this type of thing you'll want to do the, the whole, the additional. Sorry, the site wide CSS editor. So, I'm going to show you another example. I'm going to show you, we're going to go back to the quote block. And we're going to say what if we just wanted to make the first letter of the paragraph within the quote block, bigger and give it a different color and make it bold. And this is quote block is similar to the image block in what way in what way is the quote block similar to the image block and anyone identify what they have in common. Multiple elements, yes, exactly multiple elements within one block. So again, this is a good candidate for the site wide CSS editor exactly multiple elements in fact to. So we're going to do the same thing we did before we're going to go here I have an example here. I'm going to write my CSS in my code editor. I'm going to pop it in the inspector to make sure it works, and it does so we've targeted our quote block class within that we're targeting our paragraph and within that we're targeting the first letter for if we read it from right to left we've got the first letter of the paragraph within the quote block and we're doing this because if we didn't have this class, you would be targeting what if you didn't have this class, Peter's giving a little promotion for for his thing I don't know if that's a commercial business if it is that's kind of not cool to put that in the chat but you know. So if you yes first if if you remove the class there you'd be targeting the first letter of every paragraph and that's not what we want we need to make it more specific more specific in CSS terms. So that's why we need this whole thing so I'm going to pop it out of here. Pop it back here I'm going to go back under the additional CSS for the site wide editor pop it in here. Oh, I see I had also already removed the I'm going to put back the the caption stuff from earlier that I taken out. So we've got our first letter in all the quote blocks. All right. Let's say we also wanted to target this element within the quote block. This is called the site element C I T E. If we wanted to target that and make it let's say all caps. Again, you know, we should check first and see is that something you can do in the per block editor. I mean in the sorry, is that something is that option available in the block settings. Let's just save this. I'm going to click on this block now. Let's see, is it available in typography it's in theory it might be available in typography. But no because this this apply all these options apply to the whole quote block. So I'm looking here in letter case, uppercase we got lower case we got capitalized. I see small caps but even if small caps were an option here. If I were to choose it here, it would apply to both the citation and the quote block so here's a good you. You will want to use the your site wide CSS for this so put go to additional CSS and pop in the CSS that I've pre written and skipping a few steps here just so we can move this along. So here we are targeting the site element within the quote block element and we can see that it is made it into small caps. So this is, is there a visual cue to know when you're in the additional CSS for area for the site wide CSS area or the per block CSS area. I don't think so I think they both look pretty similar additional CSS CSS save it. The text itself on the description. It says. So it's here. Yeah, you're right. Thank you. My goodness, I've stared at this so many times and so that's an excellent question so that is a visual cue when you're in a per block CSS panel, you will see the name of the block up here. I mean it's so easy to overlook I thank you for noticing that you see here that we're in the list additional block the list block so that is that is a way to know whereas if you're in the site wide area. It just says of your site. Alright. I'm going to move on to the next example. The next example is a button hover so if we go into design, and we see the buttons here. You've got a single button and you've got multiple buttons I want to style multiple buttons hover style. Now, what do we first notice about the hover style. What do you notice here. None right. However, if we go to my site white examples, there actually is a hover style so the thing to note about the style book is that not every style is visible here in this preview. So, we can't test our CSS here at all. So, we go to our site white examples here to test. So we want to change the hover color we write some CSS to target the hover. And pop it into the inspector. And now you can see I've changed my hover color to turquoise. Alright, so we're targeting the button block link hover state and adding a background color. So we're going to pull that out. We're going to pop that down below. And again, you're not going to see it hover states don't appear here in the style book. But if we go back here and refresh, it does work. So that's how to add a hover state. In the future, there is going to be a way to change the hover state in the block editor. Right now there is there is not. But in the future, there will be a way in colors you're going to have the option to select hover state. It's coming soon. It's coming soon. It's actually in the Gutenberg plugin now. So those of you who like to see what's coming if you activate Gutenberg now you will you should see a hover state here for for the buttons. But for now it's not. Now, I want to return. Would you please go back to the CSS. Oh, you want me to paste in the hover here. Let me just paste that right into the chat so you don't have to type that out. Is that what you wanted, Jean, I think so. I do actually you gave me a good idea when I post the resources on the meetup group page, I will put these code samples somewhere and link to them from the meetup group and I'll know if you maybe could make a note for me so I remember to do that. Thank you. He's got it. He's got it. But Linda has an excellent question and I will answer that at the end because short answer is not yet. Okay, we're going to go back to the list block remember when I foreshadowed the list block. I looked at something where we had a list. We had two lists in fact I'm going to refresh this so you can see the changes we made. We had two lists here let's say you wanted one of these lists to be an ordered list, a sequential list a list that's numbered for example, you do have that option on the block itself. And now you can see right now, I'm not seeing that option here in the toolbar. Why is that it's because I'm in an individual list item I'm not. I don't have the full list selected. There are a few ways to get up to the list block. You can click down here in this path. You can go here under the ellipsis and say select parent block, and you can also use Alvaro and my favorite the list view. If you click this icon up here. You get a list view and that shows you exactly where you are it's super handy for showing the hierarchy of blocks and where you are. So I want to select the list view I'm going to close this again just because it takes up a lot of real estate on the screen. And now you see we have the option to make this an ordered list I'm going to select that. Now what do you what do you notice here. What do you notice why do you think I didn't get a numbered list here. Why do you think anybody have any ideas. I'm going to speed along here. It's because we added some per block CSS earlier that said, take all lists. And make the bullets square. Even ordered lists, as we saw when we looked in the inspector earlier, right. So we, we, we overwrote the style for both ordered lists and on or unordered lists by doing this. So we don't want that we want the ability to have ordered lists as well. So what do you think we need to do. We need to take this out. First of all, what do you think we need to do instead. What kind of CSS could we write that does what we actually want. And anyone think, put it into the general CSS. Yes, put into global CSS. So what would we write here. If we wanted add the selector yes yes which selector would we add to make square bullets. Well, order that not quite. Yeah, Eileen is right on ordered lists because we want only unordered lists to have square bullets. So I've just put this in here unordered lists, you L list style type square. So here we are targeting just unordered lists. So let's save this. Let's go back here let's refresh this and go back. And now let's try an order list and now it works. All right, so we we we've become more specific with our CSS and what we did here. So let's take an example of using this properly. All right. All right. One little example, I see that we are we are going to be kind of finishing just on the hour I am very happy to stay a little bit longer to answer questions, because there are so many so folks can stay longer, you're welcome to. The recording will be posted so if people cannot stay longer, you will be able to see the Q&A at the end on the recording. Alright, forging ahead. I want to show you an example of doing something extra with the buttons. So, let me refresh this. So, if you remember what we did with the button hover state. We gave it a nice turquoise hover color. But if you notice here we have a we have a pretty special button here I don't know if you can tell but this button is pretty special. All right, what if we wanted this special button hover color to be something else, something other than turquoise just to show people how special it is. Well, is that possible. You know, you could go here I just selected the button block. Keep in mind that like the list block. The button block has some nested stuff going on just to open this up, you know the buttons block has individual buttons within it. Okay, so just keep that in mind because that can be confusing. So, I want to select the buttons block. And you cannot set the colors here because you do have to set colors individually. But so let me go to this one special button and see, can I do the hover color on this one button well no you can't we know that you can't do any hover colors at all yet on the button block which is a bummer but that's what the CSS is for. But how would I target just this one special button and give it a different hover color. Does anyone have any ideas. How would I target. I'm going to just slowly move along here until some. Yes, Alisa's got it. Oh, I lean has another very interesting idea so Alisa says, you could add a name for that in advanced. That's what we're going to do. So another another gotcha is before I address at least I lean's idea I just want to show there are now two tabs here there's the styles tab and the settings tab because these lists were getting so long there were so many options being added to the blocks they split these out. So if you can't find what you're looking for. I'm going to try the other block. So we have an advanced setting here, I'm going to show you this first, I lean your idea is fantastic there is also a way to use first of type to target a button class but I'm going to explain the reason that I want to use the additional class I'm going to go under advanced. And if you scroll down you'll see additional CSS classes this is an option on many blocks. This means that I can set a special identifier for any button that I want to target with my special class so I'm going to put. My special class. So you know this can't have any spaces and in general I suggest keeping it lowercase and dashes. There are other characters you can use but just to keep it simple lowercase dashes. This means that unlike first of type, no matter where the button is on any page. You can target it without needing for it needing it to be without it needing to be in any particular position so as long as I target it with my special class, we can add some CSS for it so. What do you notice here has anything happened yet let me go ahead and even save this has anything happened is this change in any way as my special button changed. I know it has not. And why is that. Why has my special button not changed. Anyone know it is because that's right no CSS you need to add some CSS to apply to this class. Sometimes people add stuff here and expect things to magically happen. So we need to add here also just want to mention the class that you put here needs to be unique because you can't put something so general like link or button or something that is probably use somewhere else either in your theme, or in the block editor or in WordPress core and also just to clarify you don't need the word class I just put that but in, you know, normally you wouldn't you wouldn't put the word class but I just did for the example so my special class is just the identifier now we need to write our CSS. So let me go here and refresh and show you what happened when we added my special class. What it did was it added a class to the block, it added my special class to the block. Okay, but nothing's happened yet so I'm going to, you know, pretend I've written my CSS and test it. And now my special button has a purple background. And he says, Okay, so I will address this. Shouldn't you be using a child theme so it won't be overwritten. The cool thing about the custom CSS editors is these will not be overwritten when you update the theme, just like when you would put custom CSS in the customizer CSS editor it would not be overwritten by the theme. The point of these editors is that they are separate from your theme, and they will not be overwritten. So that's quick answer to an excellent question and thank you Elena for bringing that up again because I know it was asked quite early on but it is a very important thing to know. Yes, it is saved in the database. The cool, the cool thing about it is that nobody's asked this I don't think but if you were to switch themes, like let's say we're to switch to to 2021, and then switch back to the custom CSS would pop back again the same way it did back in custom CSS it is it is in the database not in theme.json because theme.json does get overwritten. If you update the theme if you mess around in theme.json and then update the theme, your changes will be overwritten. It's a bit outside the scope of this workshop but there is a plugin called create block theme and yeah I was going to pop it in I can see him getting to it. And create block theme allows you to do things like make child themes of a block theme or make your own version of 2023 that will not be overwritten when you update or do all kinds of things. So let me just forge ahead with the custom CSS and I'll get to as many of these other questions as I can. All right, so just back to back to this so this, you can see that this worked by targeting my special class and it even works. It even works in the, actually it didn't work in the editor. I think I didn't save it yet. Hang on one sec. I didn't add it here yet that's why let me add it to the editor, save it, save it, and then it should work. All right. Okay, so yes you really can use the site editor for adding CSS. Okay, I'm going to go through a few very last things and then we'll get to all your questions so back to here. What if you run into problems or you need help or there's something you want to do and you can't figure it out by yourself. So, oops, sorry. So, one place to go is your themes support form each theme when the WordPress.repo has its own support form staffed by volunteers or the theme developers or people like that. Alrow has popped in some examples so for example there's a very active 2023 forum, Alrow and I actually help out there a lot. If it's something to do with the editor itself like let's say there's a bug in the editor the editor is part of Gutenberg. So you could go to the Gutenberg support forum and ask there. And you could also, if you've encountered a bug, a bug with the editors itself you can also go to where the editors developed, which is in a place called GitHub and you can report a bug there or you can also ask for enhancements there but check first to see if the editor has already been reported if the enhancements already been requested. There's one more just one more thing that I realized I forgot to show earlier. One cool thing when you start adding stuff to the global styles area or the site wide editor. It adds this item here at the bottom that was not there by default so underneath the per block section for CSS and per block setting. It adds this item add your own CSS so this will get you to the same spot as this three dot menu will. So that's only going to appear once you start added custom CSS. All right. So, finally, resources. There's a bunch of resources that Alvaro has been popping in as we go, but it's going to pop it all in here at once in case people want to copy paste. I'll also be posting all these resources on the on the meetup group itself as well as when this is posted on learn dot WordPress or I'll be popping all the resources and so you can see, I'll put all the code samples there and also all the resources so yes, I'll go ahead and pop the pop the whole long list in and folks can have a look at those and at the end of the list of links that Alvaro has just put in. Lisa says, oh my goodness, yes. Just talk about a bit about what's to come and some of you have picked up on this already. You know, the CSS editors that were put into core are pretty basic right. There's no color differentiation. There's no autocomplete like there is here, you know, here. If you say, you know, color you got this fancy stuff is called linting code linting. This is, you know, there are tickets or, you know, issues in GitHub for adding all this fancy stuff. So some if you're interested in the development of these editors, these are some of the tickets you can follow or issues you can follow in GitHub. So I think, Belinda, you asked or somebody asked earlier about isn't this kind of confusing to figure it to remember where you added CSS like did you did you put something on the paragraph block did you add some CSS and the list block you, you know, so that is an issue and that is something that there is an issue for you know there's a ticket for list of blocks with custom CSS applied so there will eventually hopefully this goes forward. There will be one spot where you can see all the places where you've added custom CSS so that if you need to go back and change it you don't need to hunt around for which block was it where was it I don't remember. Also, in terms of performance. Right now, your custom CSS is loaded in that global area at the top on all pages but in the future, we might have selective loading a block CSS so that pages load faster only pages with that list block on it will load the list block custom CSS that you added. So, those are some of the things there's one other ticket that that you can look up. Those are some of the things that are coming and all right so we were five minutes over. But I'm happy to stay here for another while on alvaro I don't know maybe you want to pick out if you there are some questions that we've not gotten to that would be good for folks to look at together with me. Let me know. We had a question from Melissa regarding child things. I'm not sure. Are we happy with how we covered that one. So, the thing to know is child themes are to be used that the purpose of a child theme is for making changes that would be overwritten when you update the theme that's one purpose and also to do things that you cannot do. In the editor so for example if you want to change JavaScript stuff or PHP stuff or the structure of your site, things like that things that you can't do in the editor, then you would need a child theme. The cool thing about the CSS editors which hopefully I did make clear earlier is that this stuff is saved in the database so it will not be affected and you will not lose the stuff when you update your theme. And again the create block theme plugin is the way I'd recommend to make a child theme of a block theme because it does a lot of things for you that you don't need to think about doing manually. So, let me know if that answers your question. I'm going to just pick some random questions and then Alvaro after I do one you can let me know if there's something else I should cover but Bob says I'm a dinosaur, who prefers to use an external style sheet in a child theme primarily so I can track track my changes and get. Are there any disadvantages to continuing to do that. I think that's perfectly fine. Personally I'm a bit of a dinosaur as well in some aspects so I can relate to that. The only disadvantage is that it's just a separate set of files to think about. Really that's it you can have a child theme where you don't overwrite anything except CSS and that's really fine I don't see I mean maybe someone can think about a disadvantage of that. But really off the top of my head. That's fine and being able to track your changes and get is certainly a very good reason to do it that way. I would. One thing you can do is have a little mass use plugin that it's always active and the plugin in cues your own style sheet. There are ways to include your own style sheet without a child theme so absolutely that's still try that's a way to do it without a child theme but still having a separate file that you could track and get so there's multiple ways to do it. Outside of the CSS editor so yes. What else. I don't know the question from Alicia as well what happens if a setting is possible in a later WP version that is now sold with CSS will my CSS still work. Excellent question. As long as the markup does not change your CSS will continue to work by markup I mean you know what's being output here you know that is if for example with the button hover state that is being added into core. You could add it in a hover state in CSS. If they're going to be changing the markup here so that this is this is, you know button link to or something, your CSS will no longer work but just the fact that a new feature is going to be added into the editor doesn't automatically mean that your CSS will not work. You can keep it in there, but I suggest testing it. If the feature that's been added works well added in the editor and remove your CSS there's no need to maintain a long list of CSS that is no longer really needed. So that's that's hopefully that answers your question. The other thing is you could get into specificity wars. You know if you if you had the custom CSS for the hover here and then you added a new hover in the new feature in the new setting that's going to be available. It may or may not work and you may wonder why and you may forget that you had custom CSS and just get super confusing. So I would just recommend you test it and then take it out if it works in the editor in the settings. Sue asked a good question will that hack that I mentioned earlier where you can add a customize here to get to the editor will continue to be available. The short answer is, I don't know that depends on whether the developers decide to plug up that loophole or not. I'm guessing that it will still be available because some people really do need the customizer to for plugin settings and so I think that will all you know probably always be available. So if you have anything you want to add there. No, but what you said about plugins is, is, I think that's been a main reason why it is likely to stick around. Need the customizer so yeah. Yeah, exactly. Is there anything else Eileen thank you for a suggestion for a future workshop about local fonts. We'll pass that along. Anything else that we didn't answer yet or cover. The create block theme allows you to use external funds, both local and Google funds. It does let me open it up. The thing is, it does, it allows you to in queue or bring in external fonts, it doesn't. So it says here embed local fonts in your theme. Some fonts have license restrictions that do not allow them to be embedded so for example a lot of people have asked about Adobe fonts they want to put an Adobe font in their theme but I do not believe that their license. Their licensing allows you to do that people have asked about it and it's just they don't allow it so they don't provide the right format for that. Yeah, but many other types of fonts, you can add aside from Google funds. Is there a plan to have a more direct CSS access features in the future. Okay, I'm not sure about the I understand the first part of your question maybe you can clarify that in the meantime but I will answer your second part of the question. A global is coming have a global list of the items affected by custom CSS so that yes that there is an issue for in GitHub and I will, I will show it to you. One thing I referenced earlier, but it might not have been clear so this is a GitHub issue that is for the global custom styles provide a list of blocks that about custom CSS applied at the block level so I think this is what you're asking about. Yeah because right now it's like it's hard to remember unless you like keep a manual list like which of these blocks did I have a custom CSS to I want to change that thing and I don't remember which I did. I don't know if I'm putting the link in so, but I'm not clear about the first part of your question is there a plan to have a more direct CSS access to in the future like the menu access. Yeah, I'm really not trying to understand that so if you can rephrase that, then maybe I can or you can unmute yourself. I'm also happy to hear you rephrase that in audio. I'm sure it should be too accessible. I do mean make it easier to find rather than kind of buried here is that what you mean. In which case maybe at least it's right I mean maybe it was tucked away a little bit because you kind of need to know what you're doing to use this right like it's it's not obvious you do need to know how to write code so if that's what you are putting it in a more accessible place that yeah then maybe it's not such a great idea at least it has the point about not wanting clients to go in there. That's a very good point you know you don't. If you if you design things as you like or if you're fixing bugs or styling plug and stuff here you know the effect of accidentally somebody tampering with this and messing with it or breaking some CSS, you could have a negative impact on your site. So, I think maybe that's it. I think we've answered all the questions hopefully thank you those who are able to stay behind I appreciate it and thank you all for coming. One little quick question from Jean. Someone mentioned code snippets would you use this to keep track of what CSS you did. I would suggest as somebody who is a warrior and I worry that you know all my CSS could be wiped out since there's no kind of revision history yet. I think all my code changes in a keep it in a file, keep it in a file make sure you have the file commented like I have here so you remember what you did. Keep notes for yourself and then that way you can if you need to troubleshoot something you can come back to your code editor and remember what exactly what you did and why. All right. Thank you everybody hope to see you at another workshop soon thank you for coming and happy CSS adventuring. I just want to point out I've been putting code comments in here but maybe it wasn't super obvious you can put code comments here. It is a it is a CSS editor like the customizer you can put code comments in here so put comment stuff for you. You will your future you will thank, thank you for commenting what you're doing, because not everything you do might be obvious. All right.