 All right, welcome everyone. Mike from Los Angeles might be more specific. Where in Los Angeles. I was born in Southern California. So Los Angeles. Rockland. Okay. Nice. Germany. Welcome to everyone. Yeah, as you join, I know folks are already doing this. Feel free to answer some questions in the chat so you can. Get to know who is joining us today. Hi, everybody. It's great to be here today. Where are you joining us from? What you do with WordPress and perhaps an artist that inspires you. Me. My name is Courtney. I'm joining yellow from the U.S. I am in Hawaii. So it is about 10 a.m. in the morning here. I am a contributor to the training team. And so we do a lot of these workshops, and we do a lot of work. We do a lot of work. Everyone to learn more about what they could do with WordPress. Still letting some folks in. Once again, we have Brian Gardner with us today. And he will be demonstrating a piece of block art. Yeah, welcome to everyone. I wish I could like read off everyone that's joining us today, but we have folks from all over. All right, so if you have not attended one of these online workshops before, this is a space where we can learn together. And so you can ask questions in the chat at any time. And also if you know the answer to anyone's question or have anything to add to the conversation, feel free to contribute to the chat. Also note that this and other online workshops are recorded and then uploaded to WordPress.TV. And then you can catch up later or share it with anyone else. And the last note is that online workshops like these are hosted by folks in the WordPress community. So we enjoy everything WordPress and giving back to the community. So if there is something that you enjoy doing with WordPress, or would like to learn more about getting in touch with us on the training team, we'd be happy to help you facilitate an online workshop like this or make the topics that you're interested in happen. All right. So as mentioned today is the workshop about the creative side of blocks. So we'll be talking about the Museum of Block Art. And I'll introduce you to that if you haven't seen that before. And there will be a creation of some block art. That's what Brian will be doing for us today as a demo. And we'll also talk about how to submit your block art to the Museum. On the other hand, what we won't be covering today is how to set up your WordPress site or any support with WordPress site issues. All right. So as I mentioned, we have the Museum of Block Art at block-museum.com. This is a virtual block art museum. And this features artists from the WordPress community and the pieces of art that they've created with just using blocks. Actually, I just wanted to quickly show you the museum. So it looks like this block-museum.com. And you could just enter the museum here and start browsing all the wonderful pieces of art that are here. So this, when you enter the museum, you can see one piece of art at a time. You could also click the index so you can see all of, like, the thumbnails of each of these pieces of artwork at once and click on the ones that interest you. All right. So we have Brian here with us today. He is the principal developer advocate at WP Engine. He's a contributor to the core design and theme teams and a block artist, which is why he's here today. And I'll hand it over to Brian. Thank you, Courtney. Welcome everybody from all over the world. I love how we can connect this way. I've seen Germany. I've seen, obviously, Ireland, Vancouver, Canada. It's great to see everybody from all over. Block artist is sort of a term I never would have ever thought in a million years I would have been called. But it's true, right? We all know WordPress over the years has sort of evolved into a platform that is now built on blocks. And so while I would love to, at some point, just talk about practical website building stuff with blocks. This is not that. This is a little bit more on the sort of the contemplative and creative side when Anne reached out several months ago about this thing called the Museum of Block Arts and sort of using blocks outside of their common purpose, which is actually to like use and display on websites and content and things sort of that are fun facing. She says, we're just going to try something fun and see what people can do with blocks and being a block fan person that I am and sort of loving the challenge of using my creativity in a way that really doesn't matter or make sense to anybody. I was thrilled to have participated in the first round of it. We did this, I think, last month. It was what I had come up with was kind of stupidly simple. It only took a few minutes. And so we spent some time just to chatting about other things. And so this time around, I put it upon myself to do something a lot more creative and comprehensive with blocks, something that could potentially be a little more practical. And so what I will show you today is something more like that. I am a fan of black and white for those of you who don't follow me on social media. That's where I sort of post all of my stuff and even my avatars black and white. I should have actually put on a filter on my video and I could have been on brand. But I'm a fan of black and white and minimalist design. And I love sort of fashion and sort of culturally relevant things. And so I was like, well, let's see if I could design a magazine cover knowing that maybe there's a use case. Maybe there's not, if anything, it was a fun project. So I'm going to walk, walk you through how I built this. It's using several core blocks, group columns, rows, social icons, heading image and stuff like that. So everything that you see in my presentation today will be only using core blocks and nothing else. A little bit of help from the theme that I have. It's just a base theme. So there's really nothing special about it. I'll walk through a couple of things there as well. But I guess I will just go ahead and get started. Courtney, if you don't mind keeping an eye on the chat and because this won't take a full hour still, I'd love to sort of all along the way, if there are questions about how I'm doing a specific thing. I'd love for you to call those out and just stop me so I could address people, the questions that they have to. So that'd be fantastic. Absolutely. Yeah. And so that said folks, if you want Brian to repeat something, please let us know in the chat or if you have any questions about anything that he's doing on screen. So go ahead and share your screen, Brian. Yeah, I'm going to do a little zooming action. So that way people can see, since I'm on an iMac, please give me a thumbs up on whether or not people can see this. If it's at least readable. Let me pop my window open a little bit bigger so I can see what's going on. Let's do that. There we go. All right, so this is the end product. This is sort of a fun magazine style cover that I want to just create. And so I'm going to just go through piece by piece and show you how I've done that to set the background for this particular page. I actually cheated a little bit in theme JSON. This is the file that allows builders to set controls for the block that I've created. I've created some colors. There is a primary. Actually, no, I'm going to use secondary and base. My base color is white. So that's the FFF. And then I've got the secondary, which is three, six nines. And so I've set a gradient here using theme JSON, which basically goes diagonally from gray to white to gray. And then. I'm going to increase the size for that. Yeah, yeah. This is the code editor. I forgot about that one. Sorry. Thank you. So in theme JSON, again, I've set my base color right here in the palette with FFF. And then the secondary color that's being used in the gradient is 999. So I've defined my two colors. And then up here, I've set my gradient to go basically secondary color to base color to secondary color. And then after defining the gradient in theme JSON, I've come down here. You find it right here is basically telling the front end to output the gradient as the background of the entire site. So I'm setting that gradient. And so you'll see from this corner down to that corner, it kind of goes from gray to white to gray. So you could change that to any gradient you want. You could make it a solid color, whatever. It's also evident here. You can see in the background of the page has that gradient. So I'm going to start by creating my page. We'll call it cover to cause the, let me publish this. I am using local. Oh boy. Always in the wrong spot. There we go. Okay. So you can see this doesn't look really good. And that's because it's using the basic page template of my template. So I'm going to go back to the page template. I do have a blank template that I'm planning on using. So I will come here to the page template blank basically wipes out everything. So there's no header, no footer, nothing in between. It's literally a blank canvas. And so I will apply that. And then I'll refresh my screen. And you can see how it's back to zero. Okay. So, uh, let's break this down. So I'm going to go back to the page template. So you can see that there's, you've got like the header. This is sort of like a text line. And this is sort of like a breaking news section with, you know, Link and an excerpt. You've got an image. You've got a heading. You've got some byline information. And then you've got the link. And so I will. Start by creating the group block. Let me while I'm doing that. I'm going to do this too. This is. So let me remember exactly how I built this. So I'm going to create a group because everything that's going to be inside of that cover will fall inside of the group. So I'm going to create a group. And you can see from here to here, it's set to like a specific width. And so I've set that at 960 pixels. So I will go into my group. And type in 960. I want to apply white background. So sorry, white background to the group. So that way you see the white background. And I will come down here. Set it to white. Now you can also see there is a border and sort of a drop shadow that's being used. This is a little bit of a theme thing. I've created a block style for the group called shadow, which when you apply to the group will add the effect, which I'll show you here. So. This block style now has shallow shadow. I'm just going to go ahead and update this to see how things, why is this not working? This is what happens when you don't do dry runs. Maybe because there's nothing inside. So let's start there. So I want to. Go here. So this is going to be a row. Scrolling back up here. I want to basically create a row up here, which has this text. And I'm going to add this. Navigation menu and then social icons. And so I'm going to go in here. And I'm going to add the row block. That allows me to do. So I'm just going to cheat by calling this text. I'll come over here and I'm just going to copy this to keep it. Easy. Now you'll see when I copy it, it comes over regular case. I want to come. Over to the here. And I'm going to. You can see the toggle upper lower case. I want to uppercase this. And then looking at it, there's semi bold appearance. And I'm using the large font size. So I will come back over here. Go to large. And then if you enable the appearance. Oops. There. So I've got that. Now the next section here is going to be a menu. So it's using the. Navigation block. Which you can see right here. I will come here to my row. I'm going to add the navigation block. Pills in my menu that I've already built. Now you can see the spacing between the navigation links here looks a little bit wide. And you can change that by altering the block gap. That's in the navigation block. If I wanted to block spacing, I guess is what it's called here. I wanted to make those little together. It basically changes the. Spacing within the elements inside of that block. And so last thing I want to make here is a social icon. Here. So I will go back into my row. I will add social icons. And then I'm going to go back to my row. What do I have here? Instagram, Twitter. So I'm going to add Instagram. Let's fake the link. Twitter. Also fake the link. And I think that was YouTube. So. And I have a RSS. I come that's right. So I want to add RSS. Or let me get fake links in here. So I'm going to do this. Okay. So this looks a little off now. We'll continue working on that. I do actually need to. The whole thing is a group. That's why. I'm going to group my group. That makes any sense to y'all. That's going to be 960. I just need to change the width of my group. I inadvertently mess something up. Okay. So I'm going to jump around a little bit here. So you see the social icons are. First of all, in color and second of all. The spacing on them. Is. Larger than I want. So I'm going to go down. So the social icons. First thing I'm going to do is to make them small. Just to help. Make them smaller. I'm also going to come down here. And change the black spacing so that they. Get smaller. They are black. So I'm going to change the icon color to black. And. I believe there's an icon. Logo is only option, which is what I'll select. And so now I've got them sort of looking the way I want them. I get this. That's better. Okay. So now I've got. Underneath that. Top line. I've got this. Horizontal line. So I'm going to. Add a separator. Which will end up inside of that in just a second. It's going to be a wide line separator. I'm going to cheat and go in here because it didn't end up in the group. Move that down. And then I'm going to add some padding. And then I'm going to add some padding. Also notice that inside of the whole magazine, we've got padding all the way around it. I think I have that set to. 30 and 40 pixels. So what I'm going to do now is go. Into my group and add some padding. Let me just. Like this. So. 40. 30. 40. And then a hit update. So now it's starting to look a little bit better. So we've got the top line. We've got the horizontal. Bar. Now we want to make this big, this big powder. So this is going to be. Still inside of the group. I did that as a. Okay, so. I created a. Which I'll show in a second. This. 230 pixel. 230 pixel. Bots size. Text size, which I'll actually come in here and show you really quickly. Inside theme Json. We have the ability to determine all of the font sizes. You can see the, the. Excuse me. The, the normal ones are there 14, 16, 18. We use t-shirt sizing, but for the sake of doing this, I created this big one called 230 max 230. So what this is, is using the new fluid typography. So I'm going to show you the size of the viewport. And then I'm going to show you the size of the viewport. Inside of WordPress, which allows the. Text to sort of shrink and respond to the size that it's. The size of the window of the viewport. And so basically it'll be 230 at maximum size, but when it shrinks down, it'll go down to 120. And I'll demonstrate that in just a second. So I've got, you can see here, I've got a line height of one. Semi bold. So I just have a couple of. Semi bolder. So that was a line height of one. We have a question, Brian. Yes. From Sandra, is it possible to give the groups and other blocks a name, which makes it easier to identify the groups within groups, within groups. Yes, we live in the world of inception. I don't know if it's made it into Gutenberg yet, but I think what you're talking about is essentially like something like Figma where if you come over here, you can just click on group. You could call it like outside. Or if you wanted to go here, you could call that like header or something like that. I don't think that they've usually, yeah, it's not. I know there was a proof of concept that was being done. I know that it's being planned. And that would be super helpful, especially for builders who are building block patterns that are complex that are delivered or even full page patterns. So I think we can sort of identify the sections like, you know, hero about stuff like that. So it's not in Gutenberg yet. And I am using the latest version of WordPress 6.02, as well as the latest version of Gutenberg, which is 14.02. So just for context here, I forgot to mention that at the beginning. So here I wanted to go to appearance and set this at semi bold. And I think I used some negative letter spacing. Yeah. Okay. So I'm going to do a quick update to see where we're at. Okay. So we can see that. I need to make. Maybe add that. We also have a request if you could make your window, the full width of your, of your screen. Yeah. It said. Don't make it more visible. Everything more visible. Yeah. Let me just do it to this because I've got this. In the side. I don't want to have that cover. Okay. So I'm going to do a quick update just to see where we're at. Okay. So we can see that. Okay. I need to figure out my group thing. Or give me while I. Figure out. Okay. So we have to fall in our blocks. 960. Somewhere along the way. I lost my whip. I think I know why. Okay. Now, now we're getting there. Okay. Maybe I'll have to change the size of that just to make it look better. Okay. So looking. Okay. Okay. Okay. The outside of the group here, the magazine cover. You can also see it's got that black shadow, but there's also a border around it. Currently in this version, there is not. And so I'm going to select this group. And I'm going to come down here and add the one pixel border around it. Which will add the border. And you can also see, I've got a little bit of space here above the magazine because right now it's sitting at the top. So I'm going to fix that by going to the outside group. And I'm going to go to the bottom. And I'm going to do that by patting there as well. So I'm going to just do 40 pixels on the top and 40 on the bottom. And you can see where we're starting to. Starting to get somewhere. Okay. So I've done. I'm going to have to change. The font size here. I'm going to fix this while we're, while we're chatting. to be. So I'm going to change this down to 220. So below powder, we've got this sort of what we'll call it like the news bar or whatever. So this is, you can see right here, this is basically a row that has three paragraphs in it. And so what I'll do is below powder, I'm going to add a row. And for the sake of copying and pasteability, I'm going to just add my text. So inside my row, I want another. And then this is read article, which is kind of like a fake link. So go back to my row, add one more. And I'm going to change the background color of the row by selecting the row coming over here, changing it to black, and then selecting white text, and white for the link, which then does what it needs to. I will go here, we've got semi bold, just want to make sure the formatting is down. The appearance is going to be semi bold. This text I've made smaller and lighter in appearance. So we've got extra small and light. So come down here, extra small enable appearance, which allows me to select the font weights. And then the read article, I think is tiny and semi bold. So I will come over here, tiny, semi bold. Now this row also has padding around it. I believe it's 2030 2030. This puts spacing around it. So I'm going to go back to my row. I'm going to open this all up so that I can set my padding. I'm going to update this and see where we stand. That's right. I'm going to refresh this. I changed the font size. So I got to fix that better. Okay, so now we've got an image. This has been uploaded already. So I'm just going to go into where this go back to list view for those building list view is like the best thing ever helps you visually see everything that you need to. Okay, so I already have that file uploaded, I believe actually, no, I don't. All in magazine two and images. So so I've uploaded the image now. So now things are looking good. I'm going to change this font size one more time just so that it fits perfectly and looks good. And then I'll show you the responsiveness to how that works. So I've just changed it down to 200 just so it'll fit a little better. Alright, so we've got going back to the top, I forgot to do the row. So you can see here at the top of this, we basically got these two pieces are look like they're together and they're aligned to the right. And this here is on its own in a line to the left. As you see here by default WordPress takes all of the elements in the row and just aligns them left. And so what I'm going to show you is going into my row. There is an option right here. Where'd that go? Oops. There is an option here to space between the items. And what that does is I refresh this, it basically, and I'll fix this in a second, it basically kind of spaces things left to right using like the flexbox. Let me fix my heading back to the new size. And then we should be good to go. Now you'll notice that these two items feel like they're together. And here they're not. And that's because using inception I've actually done a row inside of a row to hold those two together. So I'm just going to play with list few here in a second just to fake some things. So I want to take the navigation and put it inside of my row and the social icons. Oops. I also want going in a navigation, which is what I don't want. WordPress is not perfect yet. There we go. Alright, so I want to get rid of this fake paragraph that I made. When I move these back, gonna update this. And now because I've added these two in their in its own row, it's moved them together. So basically right now there's two elements in the top level row. There's this side and the knees two together, which are a row in and of themselves. For now for a second, I'm going to break this out to show you how the responsiveness works. So keep your eyes on this powder. This is again using this 120 to 200 pixel thing. So as the window, you can see how it starts to go down. So it'll go down to 120, 120 pixels at the lowest integer. So you can use pixels. I think VH VW if you want to like play with sort of the responsiveness, spacing controls work the same way. I usually work in hard, hard integers just using pixels. But for the sake of demonstrating, you can see again, how how that sort of responds as I reduce my window. Alright, now let's get this back. Alright, so we've got the powder, we've got the news line, we've got the the image and then below the image, we, this is a relatively light lift. This is just a I think it's a heading. Let me see what I use there. Yeah, this is a heading. So I'm going to go down to the bottom here of my group. Actually, this group. I want to add a heading. I want to use 60 font size semi bold and negative two. So we're going to select 60. I think semi bold. And then I had some letter spacing negative two. We'll do a quick update and just see how things I think the last thing I had was just these bottom two items that was also in a row because there were two elements there. So in the first row, I had the byline. And then this was just another, excuse me, element. And again, see how it sits to the left, since we want to space them, we will just come here and do space between items and it kind of aligns things left and right. What do we got size wise? We've got extra small and semi bold. Rita, extra small appearance, we want to go semi bold. And then this we've got extra small and semi bold again. So extra small appearance semi bold, we're going to hit update. There we go. Check out the spacing. A few things are off, but for all intents and purposes, I think we did a good job replicating what we had to begin with. So going back, just going to use list view to sort of walk walk through, just in the spirit of trying to this is the top level group. Basically what I'm using that for is sort of a wrapper to constrain the actual width of the image of the the cover to 960 pixels. If I wanted to make that wider, let's do something more noticeable. If I wanted to make that 1200, it'll go from 960 to 1200. And so to you know, for the sake of this one, 960 made sense. And then inside of the outer wrapper group is the actual group that the magazine cover itself is all under. And you can see as I things will outline themselves. So this is the row that makes up this inside the row, you've got the paragraph, and then sort of the the inner row, which holds the two navigation social icons. I'm using the separator as a visual line. I've got a big paragraph here for the magazine title. And then coming down here to the black section, there's it's a row, basically with three paragraphs inside of it. Of course, we've got the image here. We've got the heading, the h2, and then this bottom thing is another row, which just two paragraphs, you know, the comment where they missed how you got the shadow on the first group. That's perfect. Let me let me go fix this 1960s. Now what I want. Okay, so let me get back here. Okay, so the the style that we're talking about is this little box shadow that's here outside of this group. I'm going to get into the code a little bit. Let me know if I need to make this a little bit bigger. This I will guarantee needs to get bigger. Yeah, definitely. So this is readable. Okay. This is my theme functions file. And so inside of my theme function file, I have, and I'm just going to highlight it right here. This function, which registers block styles. And so with this function, I can determine as you can see here in I want to assign a new block style. In addition to the WordPress default style for group, which is this line right here. And I want to call it shadow. That's the slug that it'll use. And I'll show you in a second what that's used for shadow, of course, is the the name and how it appears in the dashboard. So I will come back to that this outer group here. And so that block style here on the right that's in both in this background, that function enables that button to show up. And so what happens is like so like if I click default, it's just nothing. It's just the group that has nothing. If I click shadow, then it shows up. And so when you register this function, this whatever you have here, this is getting a little technical WordPress has uses CSS variables and it's usually is dash style dash whatever is there. I've called it shadow. So what it does is it applies is style shadow to that outer group. Now, I'll come out here and we'll inspect. You can see down here, it says is style shadow. And so inside of my style sheet, I have what's over here down in the lower right, I've defined in the theme style sheet, this box shadow to be eight pixels, eight pixels, and then the black color. So if I wanted, you know, a more pronounced shadow, I could have just styled it a little bit differently. And so groups are an example of a block style block or a block that I like to use block styles for shadows and things like that. buttons are another block that you could do like add shadow effect to buttons and things like that. So I add block styles quite a bit just in themes because it's just a way to sort of at least for now until WordPress sort of allows more style settings inside theme JSON. I think I saw one go through that should be in 14.1 about block styles. So at some point, there might be a way to just add that to theme JSON instead. And so hope that answers the question. Yeah, sounds like it. And what theme we're using? Was it a custom theme or this is a base theme called it's called powder, something I'm just working on from the side. I used frost originally frost is our experimental theme at WP engine. It's got a bunch of patterns in there. And so I like to start like really, really lean. So I sort of forked it and created a base theme called powder. That's basically just theme JSON and just general stuff without patterns. And so I can use that to kind of like proof of concept stuff pretty quickly. Cool. Do you have any other questions on the process or anything you'd like to see again? While while that is your question? Nope. So I'm going to demonstrate I'll find some things that we can demonstrate here. So let's just say, for instance, you are a fan of, I don't know, navy blue, right? And so one thing, the theme right now, I will go into the theme JSON sets the primary actually, it's called the contrast color, following 2023. So I've defined the contrast color of this theme as pure black, which is the 0000. And so everything that you see here on the screen is essentially using that CSS variable. So for instance, the font color here, you can see it says preset color contrast. Now, for some reason, if I'm building a client site and the client, well, there's two ways we could do this. I'll do it through global, what's called global styles in the editor, I'm going to change that color right here. You can see my palette. These are the four colors I've defined in theme JSON. This is the base color, the contrast color, the primary color, and of course, the secondary color, which is that sort of dark gray that's used in the gradient. Now, if I wanted to edit the contrast color of the site, I would go in here and I could change it to every, you know, I could change it to whatever I wanted to maybe 0000 is too harsh. So maybe I just wanted it to be I don't know, 333. It's a little bit lighter black. So everywhere on the site that's using that black color that black CSS variable is now being changed in one spot, which is pretty cool. So again, if I'm a fan of blue, let me just copy this and I wanted to change my magazine to be blue. I would do that and everywhere that has that CSS variable, and I'll hit save and we'll see what this looks like on the front end. So we can see sort of the power now. And of course, if I didn't want to do that through the editor, I could just go into here and, you know, change the color here and then it would just work site wide. So if I was building this for somebody, I would probably do it more in the code than I would in the site editor. And then for some reason, I was like, Yeah, that was a bad decision. I just hit reset colors and it goes back to the color system that the theme defines. Yeah, sometimes it takes a minute or two. Team JSON to propagate through but this is a follow up question from Eve. Where did you put the background pattern code? Okay, so again, the background. So the background is using a gradient. I assume if you're talking, let me get back to the black. So that is defined in theme JSON. And I'll scroll back down to that section. Here we go. So in theme JSON, there's a styles section and inside of styles, there's color work. And this is global. Generally, this doesn't say gradient because most sites don't have a gradient background, it's usually just like background color. So this would be like background, like, and you would set it as like the color variable base, basically, that's traditionally, but because I wanted to use the gradient, you have to use the gradient value here. And this CSS variable, this preset gradient secondary base secondary is defined further up in theme JSON. There's an area where you can define the gradients of the theme. And so I've set that gradient here, basically saying linear gradient 135 and to use these colors. So it's referencing the secondary color in the base color, which if you look down here, the white and the gray, for the sake of illustrating this, if I wanted to instead of using the gradient, I'll do this. Copy this. I'm going to make this striking to illustrate the point. See what this does. Yeah, so you can see what I did was I changed it out of the gradient background to just a solid color using the primary color, which is that blue. And so that now is you can see being used. And if I refresh this, it should show up here also. And if just playing around with the site editor a little bit, if I wanted to change the background from blue to something else, I could, you know, all of a sudden, things look very avant garde, you know, quickly. Very cool. Yeah, you just thank you for that. Yep. I have a question from Sandra. When you fix paddings, widths and so on, on a fixed value, are there some rules that you follow for certain reason, for example, usability, mobile view, etc. Yeah, let me start to clear out that. Let me go into my still this color. So generally speaking, and I like the word rule, because it's actually a really good way to look at it. In the case of this magazine, like 40 pixels, like around things is usually my max. You can see like there's like 30, 40 pixels around there in between using block app and stuff like that. Generally, like once you get to like 6080 to 100, then you have to like be more aware of like what it is you're actually trying to accomplish, especially if you're doing something that has like gutters on the side, because if you've got 100 pixels on each side of padding, and then you shrink down to mobile like 400 pixels, half the screen will be the padding. So depending on the use case, I would, you know, in that case, I would probably go percentage base, like let's just say you've got in this case, we're using 960. So if I went 10%, that would be 96 on each side, which would on desktop view still serve the same purpose. But as you shrink it down, and let me actually let's do that. So I'm going to go to this group to illustrate the point. I'm going to clear all the padding. And I'm just going to make this easy by. So let's just say I were to do like, I don't know 100, right, sort of to prove the point. So you've got it here and it looks okay, right? But the problem is when you break this down, down to mobile, all of a sudden that 100 holds up and there's nothing in between. So to fix that, I would just say, well, let's just instead of doing 100, let's change that to, you know, we'll call 10%. 10%. So now we'll go down, go to 5%. So that still gives me what looks like a roughly 5% padding. But then when you make that down into mobile, it breaks down a whole lot better. It actually goes 5% and sort of makes it feel like, okay, it's not literally the hard value of 100 pixels. So now you can see more of this more of the screen on mobile. So like that way, that's a much better experience than having 100 pixels on both sides. So it kind of depends. For like hero sections on a website that maybe is like, you know, you've got like 150 pixels on the top and then you've got like a welcome. I'll actually use this as an example. My bright mode theme has what I'm talking about. Like this padding right here, I think is, yeah, like I've got 120 pixels on top right here, and then 150 down here, I wouldn't use percentages at that point because this breaks down nicely. It's a little bit different when you're using like vertical. Like that to me still looks okay, right? So no need. In fact, if you use percentages here, then all of this would shove all the way up at the top and it actually might not look as good. Any, let's see if we have any other questions. Yep. Sandra says, thank you. Yep. Yep. Yeah, that's custom blocks style. Yep. Trying to think if there's anything else interesting I can ask, is there a good resource that explains all of the things that we can do with theme.json? Let me grab the link. Okay, so this is one link. And as far as I know, this is actually pulled in real time. So this is a list of all the blocks. Let's start there, the blocks and what each block supports. So like for instance, like the code block here, you can see it supports these elements, right? So it supports color and spacing and whatever. So if I wanted to set elements in theme.json for the code block, which I'll actually just jump down to here. This is my theme defining elements of the code block. So you've got border, you've got color, you've got spacing and typography. I know I can define these things because I go here to the code block and it says I can specify the color and the spacing and the typography and stuff like that. There's been a lot of movements in WordPress, the Gutenberg and presumably 6.1 that will sort of universalize all of the settings that each block supports up until like the current version, certain blocks only allow certain things and we're trying to sort of universalize that and there's been some great effort in basically saying settings like typography should be allowed in any block. And so like we're adding the support often. I think there's also another link I have here, theme.json. And this link I will drop here really helps sort of understand how the theme.json file itself is constructed and what sort of allowed. So for instance, you know, these are all the available settings under color right now. If you hit Gutenberg, it probably opens up some more because there's some settings that are being experimentally played with in Gutenberg, the plugin which hopefully makes its way over to WordPress. And so like typography, here's another good example. Anytime typography is used in defining a block or at a global level, these are sort of the parameters in which you can set like you can enable font weight and letter spacing and so on. So let me have some fun. I just saw the comment afraid to touch theme.json. The importance of a comma in theme.json is huge because I just removed one comma and it basically breaks the style of the site. This happens often. And I always have to remember because a lot of times I'll copy and paste stuff. And so for instance, like at the end of like in this context right here, you can see I've got border color spacing and typography. There are commas at the end of everyone but the last one. There's no comma here. That's the way it's supposed to be. But every once in a while I'll like copy something from here and like, you know, paste it in between and I forget the comma and then I get that unformatted look and I'll take a minute to get back. Yes, Laura. Not yet. For what it's worth, I highly recommend using local. It's our product at WP Engine. It allows you to spin up a site quickly. That's what I'm using here. It's not a live site. It's not on production. It doesn't cost me any money. It's a free to download piece of software. And it allows you to basically spin up WordPress sites like, you know, as many as you want just to play with certain things. Like I think I've got, I'm using it right here. I've got FSE Studio, which is a product we're building at WP Engine. I've got an install just for testing, you know, this one, I'm testing the latest version of Gutenberg. This is the Museum of Black Art, the one that's active. And the work I'm doing on the 2023 theme for style variations, I've got my own install there. So you could spin up 100 different local sites just to play with different features. Thank you for the link, Eric. But for those who are new to all of this, you know, to even pull down a FSE theme, I'll show people how to get there. These are mine, but if you go to, there's a block themes link here on the WordPress.org themes, which basically pulls in all of the themes that are sort of block based and FSE compatible. I would recommend just downloading one and throwing it on a local and just, you know, just playing around, clicking around and trying things, see what happens. And I'm also afraid to like poke around on my website. So I create multitudes of local sites. So definitely recommend doing that to play around. Looks like we have about five minutes left. So just want to check if anyone else has any other questions on what you saw today. Otherwise we'll briefly go over submitting a piece of art to the Block Museum. Is there anything else that you wanted to share, Brian, before we switch back to the museum? I don't think so. Let me just take a quick up and down just to see if there was anything here. Yeah, I think, well, I think this one was a little more interesting and took some more creativity to build than the last one. So I'm glad that. What is the last link that Brian showed with the block themes here? I'll, I'll grab that link. So this is sorted with the tag full site editing, which is basically the same thing as this block themes link. And I think they're sorted by least, or not least, most recent Anders just released this one called Bjork, which is a great, he's a great designer. Recommend anything by Anders. Oh, thank you. I'm going to stop sharing at this point. I will switch over to mine. Thanks for sharing that, Brian. Yeah, that was a lot more like complex than the previous piece of art. I mean, even though like the previous piece of art that you did was still really cool and learned a lot from that. Like this was, there was a lot of pieces in this one. So that was really cool to see. All right. So I promised you all that I would show you how to contribute to the Museum of Block Art. If you were inspired by Brian's workshop, or if you've seen any art that inspired you on the Museum of Block Art, you too can contribute to be featured in the museum. So up here on the upper right menu bar, there's this contribute link here. And it's as easy as that. So just follow the guidelines here. And yeah, you can just submit your code or screenshot or whatever it is you'd like to share with the folks that are reviewing submissions here. And maybe one day we'll see yours up here in the museum. So I think that is it for me as well. So Courtney, I just dropped a link to that Mario one again in the chat. Maybe click that while your screen is there. This one was great. We did go over this one last time. So this is a fun one that was created just with blocks. It's it's pixel art of Mario. Love it. Yeah, this was one of my favorites as well. If you look on wordpress.tv for our previous workshop, Brian deconstructs this a bit. So definitely look up that workshop. Actually, we can just pull it up really quick. And I'll share the link. Alright, here's our previous workshop. And I'm putting a link to it there. You can see the this it's me piece of art deconstructed in the later part of the session. So this is pretty cool. Before folks go in the spirit of I'm going to drop my linked Twitter. Also in the chat. If anybody has questions on anything I presented or or in general around WordPress and the block editor. It is my job to help serve as the conduit between WordPress the project and the community. So I would love to jump on a one on one. We do weekly calls on Fridays, Sam Munoz and I, where we just talk about WordPress, what's coming opportunities and stuff like that. So if you see something you had a question about or just wanted to kind of talk through some strategy around how to do some of this stuff, feel free to hit me up on Twitter. And we can set something up. Yeah. So we have the last slide I have here is just the blocks that we use today. As Brian mentioned, these are all core blocks. And yeah, you could create all sorts of cool things with just core blocks. And Brian, you have one more question. Where can where can folks see the Friday calls? Are those are those recorded? We don't record them and it's on purpose. Just because everyone's different. I just dropped a link. This is called build mode. And that is the sign up for it. And I'm going to the WP engine builder site. And I'm going to drop two more links. I'm sorry for all the link drops, but the two links I'm now dropping are from the recaps of the first two sort of monthly sessions, just to kind of give more context of what it is. But we do them every Friday, usually 15 to 20 ish people. Yeah, Laura's Laura's been an attendee. Often we like having her there. That's great. Laura's also new to WordPress. So it's also fun to get a different perspective. Because a lot of us that are on those calls have been doing this for 10, 15, 20 years. So very much fun. Very cool. We are at time, but I wanted to thank everyone for learning this. If you do have any more questions, you can connect with us on the WordPress Slack, which is the chat that we use. So here's a few more links for y'all. chat.wordpress.org is where you can sign up for that. And that is free and open for everyone to join. And finally, we post the recordings from this workshop and other workshops over on WordPress TV. So I've also shared that link there. Thank you, Brian, for showing us another piece of art. And thank you, everyone, for joining us. Yep. Thanks, everyone. Thanks all.