 All right, well, welcome everyone to today's online workshop from learn WordPress. I am your host Courtney. And today I have rich table with me today, and we're doing the next in a series that we are doing on Lord more press about the creative side of blocks. This started with the series kicked off at Brian Gardner who I see is with us today as well in the chat so hello nice to see you. So, again, welcome. As you join as folks join feel free to answer in the chat. I see folks already doing this. Where are you from where you're calling in from today calling zooming in from today. What do you do with work press. And on the creative side. Is there an artist that inspires you like to share with us. We have our tour from Germany, Brian from Chicago. I am in the US I'm in the state of Hawaii so it is in the morning for me right now so I know for lots of folks. We have like mainland US East Coast, Stephanie from Kentucky, welcome. Just a few more folks in. So if you haven't attended one of these online workshops before. This is a space where we learn together. So you can ask questions in the chat at any time, and we will answer them as they come up. And if you know the answer to someone's question or have anything to add to the conversation. Feel free to contribute live in the chat. And we're here to learn together. We don't claim to know all the answers but we can help find them. This and other online workshops, we record and upload to wordpress.tv. So you'll be able to refer to this later if you ever want to follow along with what is demonstrated today. And finally, I'd like to add that online workshops like these are hosted by folks that enjoy wordpress and giving back to the community. So a lot of us are volunteers, a lot of us are sponsored to do this volunteer work like myself. And yeah so if you're interested in hosting something like this or if you have a topic that you're really interested in that you'd like to see become a workshop, please get in touch. Alright, so in today's workshop, what we'll be talking about today is the Museum of Block Art. And then where we have lots of great pieces of art created purely from blocks. And then Rich here will do a demo of a piece of block art, a new piece that you would do will not see in the museum yet. And then quickly, we'll go over how to submit a piece of art to the museum. Everyone is welcome to submit a piece of art. So hopefully today's demo will inspire you to also create your own piece of art and submit it to the museum. That said what we won't be covering today is setting up WordPress site or any support with WordPress site issues. I know a lot of folks come to these workshops to also do some troubleshooting on their own sites. But today is purely a demonstration and some sharing of the creative process. Alright so we've been talking about the Museum of Block Art. If you haven't seen it before this museum lives at block-museum.com. The Museum of Block Art is this virtual block art museum and it features artists such as Rich such as Brian around the WordPress community so all sorts of folks contribute to this. And I'd like to just quickly show you what that looks like. Just give me a moment. Two new windows on my screen. So this is the museum. This came to be around WordPress 5.8, 5.9, is that correct Rich? Yeah I think so. When it launched, yeah so when this happened folks came up with this idea to create this museum. So yeah you visit block-museum.com. You can enter the museum here. Browse the collections and there's this new feature new interactive tour that if you haven't visited the museum in a while or if you're new to it is a interactive tour so I love this interactive exhibit. It's kind of like more of a choose your own adventure way of exploring the museum. So it's like this narrative that takes you through the entire museum so I won't go through it completely right now but just to give you a taste of it. So it tells the story of you entering the museum and you just click to take yourself through it. So it's a really cool way to experience the museum. The way that folks were seeing it before was just viewing the index which is also a nice way to see everything at a glance. So yeah here is all the pieces of art in the museum. Everything you see here was created with blocks and WordPress so I find this really cool and amazing and inspiring and I hope this inspires you all too. We have some time later maybe we'll go through a little bit more of the interactive exhibit so I find it a really cool way to experience the museum. Alright so as I mentioned earlier we have Rich Tabor with us today. He's the head of products at Extendify and a contributor to the core design, meta, photo, plugins, test and themes teams. Thank you so much for your contributions Rich. And he's also a block artist which is what brings him here today. He has a few pieces in the block museum already. I have taken a screenshot of them here. They kind of look really nice next to each other here so this is what he's contributed to the museum so far. And again all created with blocks and WordPress. And today he'll be showing us this piece that he calls balance. And this is not in the block museum yet so you're getting a exclusive look at that. So I'll hand it over to Rich. Stop my screen share. Thanks Courtney. Alright, so I actually wanted to ask you if you have any background behind this work and anything that inspired you. I really like geometric shapes like simplicity and design and the challenge that kind of present myself with this particular piece and some of my other ones are along the same vein but it was. And it creates something out of just one kind of block like just one of something. So I started with the group block is really flexible so like how do I kind of flex the group block in a bunch of different ways to come up with some interesting concepts and this is one of those approaches I thought this would be a good one to lean in on as a teachable moment just to kind of flex the new design tooling that landed in 6.1. So starting with a simple group block type type flow and then we'll dive into how style variations kind of affect the way it looks and then also kind of tailor the gradient style to get that kind of balance sort of look to it. So that's kind of the approach I've taken with this one here. Let me show my screen. You can see my screen here. Yes. So I just have a 2023 loaded up here and I do have the Gutenberg plugin activated just to get a few extra little bits that are coming in the next version of WordPress, but I'll just build this in the site editor, just so it's front and center here so I'm just going to hit edit site. This is, if you're not super familiar with all the latest full site editing efforts that are now classified as the site editor is where you can modify your header that's persistent across the entire site. Any blocks like right now I'm on the homepage so I can modify anything on my home and you can also add footers and whatnot but but I'm doing it here so that I could leverage all the global styles pieces for this particular piece of art. So I'm going to start in this group block here, and I'm just going to add another group block. This is an experimental control here where you can you can pick whether or not you want a row or stacks but I'm just going to go with the standard group here. So let's see let's start. I'm just going to start by picking alternating colors maybe start with the green that comes within 2023 out of the box. And then there's these new padding controls so I'm going to add some padding here I'm just you can go all the way up or all the way down, and the theme can pick what these values are and you can even kind of customizes your own with any type of units, or even split it and do the different paddings on different sides but for simplicity sake I'm just going to do. I'm going to set it to one here, and then I'm going to duplicate this block I use the keyboard shortcut for this was the command shift D, but you can duplicate it here as well as to grab a couple. Then I'm going to pick this one up and drop it inside of this one, and then pick a different color. And I'm going to repeat this process a number of times just to get this cool geometric look here and I'm going to keep alternating colors. I'm adding again command shift D to duplicate and already we're starting to see this like kind of trippy design coming through again just using the presets here. I'm going to do this. I don't know. Maybe a few more times here. And a lot of the the improvements that you're seeing to some of the selecting and some kind of how things drag and drop are have been really refined if you're relatively new to the editor, like since, you know, since the last big WordPress release or those a lot of efforts have been going into making sure that these sort of interactions are cleaned up quite a bit and you'll see here I've got this list view. Right now it's not, you know, particularly useful because I just throw in a bunch of group blocks in each other, you can close it up if you want. But I do like to be able to just kind of show, like, I guess, how deep are going here with the group blocks. Now, let's make this one here wider. Yeah, I will, but I'll just go in and change these values here. What I'm doing now is making sure that the blocks within these group blocks are going to stay completely full with and only be affected by the padding. So I'm going to removing the values of the whips from inside of each group block. This is still a little confusing, but the idea is helpful when you're building outsides, but it can get a little confusing can modify the layouts there. And stop that one. See how we're looking. I think it looks all right. So we're going to save this here. And I'm going to go and do it on the front end. So here we've got the same thing. The only difference is I have the place over here for the group block versus what's on the front end. And just and also this is kind of cool here. You're going to shrink my window down and you can start seeing this like this like cool offset effects. So if I add a couple more, I bet I could come up with an interesting type of art that changes based on device to it's not just a static image. I'm just going to add a couple more here to see what I can get. Alternate that color. Let's do maybe one or two more. Close that up so I can see. Get in there and see how it's reflected. Oh yeah so this is getting cool. So I love the idea that it ships based on your view it's kind of like you know like real art when you sometimes there's a lot of art that when you have a different perspective it completely shifts and I just think that's a fun way to bring that in the digital world. So just something simple like that is fun. Is that like a like mobile with or similar to a mobile with. Yeah so yeah so if you're viewing it from a desktop and it was you know the live pixel art not just a screenshot this is what you would see but if you're on your phone this is kind of what you're seeing it which I like I like the intentional kind of almost distortion almost like something's coming up we've got triangles now we've got this kind of stair step view here another triangle and you can almost picture this triangle coming all the way up here. I think it's fun. Yeah it's super cool. So now we're going to shift into some of these style variations I want to see what happens when I start changing up colors. There's a new approach within the Gutenberg plugin right now but it'll probably land in the next version of WordPress where when you activate the new styles area. You can see a more full screen view and ideally, you know if your whole page is as much longer than just my piece here. It makes a little more sense as you'll see all the different pieces. But as I'm choosing these I'm seeing the whip changing and seeing the colors changing the paddings can even change like the sizes. Cool sense to get a bunch of different views here. Brian, I think Brian Gardner made this one here with Sherbert one. What a fun. What I'll do also say I don't like prefer any of those perhaps I like this starting canvas and I just want to change colors within the global styles interface you can click on colors here and palette and start modifying these colors now I used as a primary and secondary to alternate all these so I would change the same values after I go here. I say I want to do black, I got really, even all the way black, maybe a hint of blue. And then for secondary, I'll do like a greater little hint of blue as well. And then what I did here is change the color palette across the whole site so anywhere that those colors the primary secondary colors were used. Those will be these changes would be reflected so if I had buttons that were stopped with that on the site with those styles would also be reflected there. Which is a cool way to just quickly change your the look of your site or the vibe of your site, especially with the accent color type situation if you didn't really if green wasn't your thing. You could change those two to differentiate the blue or whatnot for the 2023 theme. And then I hear when it comes to like the palettes and uses the word theme. Does this affect your sites theme when you're you're editing it where you were showing it. Yeah, so the theme, the theme collection here is anything that is added by the theme out of the box so 2023 includes these five colors by went ahead and changed these two. And so, so these theme colors are just reflecting of what's available in the theme, and you can have custom colors as well. Like if I go through and set, like a purple, like a deeper purple, name it like accent. And then now this color is also available anywhere else in in the, in the, any of the design tools so I could use this blue, or this purplish blue that I just added. A collection of colors and, and within the themes theme that Jason file you can turn off like even these default colors if you don't want any of these to show. And you can even set specific colors to show up for specific box like say your, your button blocks might have, you know this this color blue here in the white or black, but nothing else like maybe this blues reserved only for buttons you can kind of tailor that experience, but yeah these are just kind of collections here. So let's put this back to that. Save that and see that. Okay, we're getting there. I think that's interesting. I want to kind of go a little bit further I think playing with gradients now. So if your theme supports gradients which most do out of the box for block things here, we've got this gradient tab here, within the background, and we can select one this pick. And we're going to go through and we get this really cool effect when we reuse the same gradient across the board. Now right now it's a little bit cumbersome to add gradients to every single one of these in future versions of the editor. You should be able to copy and paste styles so like, I should be able to copy this style, which includes the gradient any colors or typography your pattings even probably, and paste them across all these. So this will improve. It's not every day you'll be applying gradients to 20 group blocks within each other, but paste all these and get all these in here. I've already seen this like cool staggered effect because the gradients resetting with a hard line, but then it gets much softer along the middle. I really like, like how this has come in. Let's keep going. Yeah, that's cool. You can really see that at first and as you're getting closer to this, you're seeing really subtle line. Yeah, exactly. That's cool. And now let's see what that looks like. Now these gradients. Oh yeah, that looks pretty cool. And then I'll shift it to mobile. Yeah, it's getting that same, same cool effect. I like where this is going. Now these gradients that we're showing here again, it's under default. So these are the gradients provided by core WordPress out of the box. Your theme can turn these off and your theme can provide its own set of gradients as well. And you would see just like this says theme and it has the colors provided by 233. You would see a section of theme and gradients under here that your theme would provide. So out of the box, you can basically design, you come up with a design system of colors and gradient, like the spacing here font sizes. And the editor is meant to encourage, you know, that design system by having presets like these gradient presets and padding presets, but you can still flex it out if you need to to dive in a little bit further. All right, so that's what we're going to do here. We're going to do the same thing. Actually, let's go to 1000 see if any other. And then these are switching up the gradients are there. That's not a big deal because we'll do it ourselves. So I'm going to go to the colors again in global styles, but this time instead of editing those values, I'm going to edit these gradients. So these gradients are the ones provided by core. We use this blush one here. And I think we could do like more like a grayscale type thing. So we'll change these here. It's already looking cool. That's fun. And again, like this is changing anywhere on the site that I would have this gradient applied, it would change not just on the blocks that I have here but anywhere throughout the site. And then so that's how you change those, but I'm also going to drop in some more color stops here. Maybe it's through. Maybe I could purplish. It's kind of fun. And then we'll do another one down here. Maybe this one will be more purple. And then we'll make that run less. And then it's kind of fun to like sit here and play with what you think it work. I guess it's a little bit too bright. Yeah, I like something like this. And I like how this color in the middle, we may give it a tiny bit of purple. But I like how it's almost like a green like the perception. It's almost there and it kind of highlights that line idea that there's like balance and I like how this is growing to lighter and this is going to darker I think that's really interesting. Alright, so let's save that here. And let's do it on the front end. And there we go. And then it gets, it gets kind of trippy here because now it looks almost 3D with each one of these are kind of lining up, but I do like, you'd like how that looks, you can then go in. This might be the last step but changing the angle here. So you can rotate this around. Or you can type that number if you know the integer what you're looking for 135 maybe, or let's go back the other way. That looks cool. There we go. And the cool thing with block themes and this, you know, all this new stuff that's coming to WordPress is that you know I keep switching to the front end to show the front end but the reality is like these are getting so close it's almost imperceptible how alike they are. And there's a like it's just really phenomenal that you know a couple years ago theme authors had to write a bunch of styling just to get this to look remotely close but now that your 2023 actually has no custom CSS in it. And it's pretty impressive what you can get out of the box without complicating things. Yeah, so that's, that's how I built what I'm calling balance. That's very cool. Yeah, I agree with you. It's like we've come so far in to think that only just a few years ago we couldn't do anything like creative like this so I can just mess around and and then see it on the front like reflected on both in both the editor and the in the front end it's, it's amazing. So, yeah, thanks for, for sharing that with us. It's really cool. Do we have any questions, or is there anything that you folks and in the attendees. Anything you'd like to see more detail on or something you'd like to see again. I think it looks like the, the Gita pyramid on the top view. Oh yeah. Yeah, I can see like if you change the colors to be like sand color or something that would totally look like a pyramid. Yeah, see that. This is fun just to kind of play around and see. This is cool. What you can get just by using some of these like presets combined with just go more purple here. I'm just creativity it's fun. And again, like this was my challenge to like use one kind of block in the most simple way to get some sort of artistic expression. Yeah, that's great. And when you're showing like the kind of mobile with you maybe think like these could easily be like mobile device wallpapers or some people come screen savers. And that's a way to make it so much easier. I'm a old school graphic designers, so much easier in the block editor than it is in like say illustrator. I had to use a, I was using Photoshop. Just, just a thing I was trying to open up some old pile the other day and it was like, oh man, this is not used to this anymore. I think with, you know, with most things, especially design tools. There are, there are, there is a level of learning and block editors know differently and trying to learn how some of the nuances of the editor work and there's still a lot to iron out. But overall, it really is moving in the right direction quickly like the pace of innovation is faster than ever I would say. And just this year alone, I would 100% lean on that. Oh, yeah. Well, it's like we have a pretty quiet chat right now. But yeah, as you had mentioned rich to me earlier that like this is super simple yet to accomplish yet. Like when you're looking at it. And well as I was looking at it before I was just kind of staring it's like how is this done. And, and you're like, it's just one block. That's, that's amazing and then yeah you're just using the tools within the editor to to make something really complex looking. And yeah, it's really like the point of these demos that were just like showing up the power in just like the simple, simple tools so anyone can create a piece of art like this. Yeah. And share back over to you. Yeah. And maybe we'll be seeing the soon in the, the museum. Yeah, now I'm not sure if I like the one I just created or the original one better. I'll see which one. Yeah, I'll share my speaking again and we'll go. We'll go through that process. So folks can see how that goes. Well, I won't go completely through the process because I don't have a piece of art to submit. But, oh yeah so, as we said, one block was used to take the crew block. Sometimes we'll have a list of blocks here but it was as simple as just the group block. And we went through any questions which there didn't seem to be any early discussion. I'm just double checking one more time. Oh we do have a question from Brian. He is asking you rich. What is your favorite new feature in WordPress. In parentheses he says core of Gutenberg. I would say the, some of the new stuff coming into the next version of WordPress that's in the Gutenberg plugin now are really improved the experience, especially around styling. Like when I showed how you zoomed out whenever you go to blocks or to theme styles, how you can really see the effect of those changes like something like that I think is really cool. You can see the pattern insert or changes. So instead of opening up to a wall of patterns that may or may not be relevant, you open up to the category system with an additional fly out, where you can list out all the different patterns based on what category was. So it's much more user friendly in, in building out sites I think the, the progression of design tools was a huge focus this year and there's still a lot more to do out front but now it's like, how do we refine what's there and improve the editing experience not just for writing which is very important but also for page creation like making rich pages and beautiful layouts like out of the box and anything that leads in that direction is my favorite but but those two things in there I would, I can't wait for those to land in WordPress core. And what, what are you excited about in, in the future in terms of like what's coming up. Yeah I think that you know style variations were a big hit. I think that once more folks lean in on that now that 2023 really showcases what's possible. We, I think we'll see a lot more of those within all the different block things that are already out there but also unlocking the creativity of folks who couldn't necessarily, or didn't have all the skills to put together, you know PHP based themes. And now will kind of unlocking that. So I'm excited to see a lot more creativity through all the effort that's been going into making those systems for themes easier to design it's really, it's really more about designing the building, which I think is great because they're, you know design tools it's your theme is how things look. So I think that's something that I think I hope you see a big wave of creative expression. And we're I think we're already seeing some of it so I think in just some time we'll see a lot more. I mean, hence, these, these pieces of art in the block museum. Yeah we're seeing this inflex of creativity since yeah all of this these tools are available to designers and artists. I just wanted to just quickly go through how you can contribute your own piece of art to the museum of block art it's very simple is go to the block museum that block dash museum.com. And click here on the contribute link. And there are some guidelines here. So you're contributing to the museum so you know review those, and you can submit your piece of art down here with this form is pretty simple and yeah Rich here is on the review crew for for the museum so it is likely he will see your piece of art. Anyone can contribute, just like any almost everything in WordPress really is you can, you can contribute because this is, this is your community. So that's pretty simple. Since we do have a little bit of time I think maybe going through this interactive walk through a little bit would be fun. Because a lot of us in the community are really excited about this it's another creative way of exploring the museum. So again, like, it is a similar to like a choose your own adventure click through adventure kind of kind of almost game in a way so. As I say here, the tour allows you to choose how you experienced our pieces that have been curated here for you so you simply just go through and click step into the main exhibit here. It just unfolds as you go through and tells the story of you enter a large room with art carefully covering the walls around you large windows break up the scene and open up to the city below, allowing for soft light to fall onto each piece of art. And that's very evocative for me it's been been a while since I've been to a museum in person since like the pandemic and everything but yeah that's reminded of those experiences. So here you can again choose your own adventure, you can read the curator statement here. And Karthi wrote that there and yeah then you can step in and view the first piece of art and it just unfolds again. It's this, this ballerina art that was created with blocks. And you can click through to find out how the art was made. So this takes you to the opening a new window, but I think it unfolds. Oh, there it is. I just have a habit of opening things in new tabs. Yeah, it gives you the details that so fellow artist, honestly go to made it made this piece of art with the ballerina and when you click to see how it was made this is your behind the scenes look. And you get to see the code here. You can download the image if it's something you like. So you can take this and put it in your own site. So yeah I can copy paste and you can have that piece of art in your own site so that's pretty cool. I see that Brian has shared his favorite piece of art and chat. I'm going to go ahead and open. This is, this is a fun one so it's called it's me but I think this is pretty recognizable of who this is. So, yeah, and again this is the individual page for a piece of art like you can get to it from the index of the museum. Yeah, this is, this is really cool. It's just made off made with blocks again, and I think that pixel art is kind of a fun. In general, is a fun thing to do with blocks. And in one of our previous workshops. Brian kind of deconstructed this so check out check out on WordPress dot TV. It was kind of a fun, fun little exercise. Yeah, and again back to this interactive exhibit. You can just continue through the museum this way. Sorry if I'm going a little faster. First piece of art, and then yeah you can go to the next piece of art and it just continues. It's got a little bit of movement in there. And this one was made with just two blocks cover block and image block and yeah it's just something I could just stare at for a while, continue on. Yes, you could get really lost in this. Here's one of my brands. Like I said you could get really lost in this and I could just do this for for like an entire hour. I'm going to go ahead and start wrapping up here. If folks have any questions or anything you'd like to add to the conversation. Our chat is open. And I would like to add that we have a survey that we would love for you all to fill out. We call the individual learner survey which is where we're trying to determine ways to improve the resources that we provide to the WordPress community on learn WordPress so that's learn Wordpress.org. We want to figure out how the community prefers to learn. Do you like workshops like these do you like doing tutorials, do you not like video at all, do you like text based learning. Based on this survey, you know we were going to set some goals for the upcoming years for how we would like to provide educational materials to you all so your, your input there is really important and valued so thank you if you're able to just take a few minutes and fill out that survey. Looks like we are still a little quiet in the chat so yeah so I'm going to wrap up here and thank you all for learning with us today and being a part of our community. Again, as I mentioned before we have more online workshops and some video tutorials at learn.wordpress.org. Also what I haven't mentioned before is that over at learn.wordpress.org we have materials for educators as well so we have like lesson plans for folks to teach their own communities about certain things in WordPress. So it's really broad there's also sort of learning resources there for you all related to WordPress. And if you'd like to connect with more WordPress contributors like myself and like rich. We have a chat instance in Slack at chat.wordpress.org and you can join there. And then finally, we have the recordings of these workshops posted on WordPress dot TV so this and other workshops are posted at this link that I've shared in the chat. And yeah you'll find this in previous online workshops and tutorials posted there as well. That is it for me. Unless anyone else has anything else to add. I wanted to thank Rich again for being here with us today and demoing his his artwork. And we hope to see you at the next one. Yeah thanks for having me. And thank you Brian for being here too.