 Alright, welcome everyone to today to today's workshop called the creative side of blocks. This is the fourth in this series. We do have more of the previous volumes on WordPress dot TV so look those up if you will get a chance. And again these resources are brought to you by learn dot WordPress dot org. We will move forward the first part of this presentation. So if you weren't aware the museum of block art is a virtual block art museum. So as it shortens to the MOBA. So the museum of block art is a pop up virtual block art museum which is brought to you by a collection of community members in the WordPress world. And WordPress 5.8 through 6.1. It was packed with an increasing number of nifty design tools and the gears started turning. What wild and wonderful things could be created. So the result is what you can explore in the MOBA. If you're thinking to yourself that you didn't know that you could create these kinds of magical art pieces with WordPress. That's actually the intent. So I'm going to give you a quick look at the museum for a sampling of what you will find in the museum. And like a virtual museum tour. So block dash museum dot com is where you can find the museum. There you go. And there are a couple of ways that you can browse the MOBA. There's here is the, if you click enter museum, there's an interactive exhibit and it takes you through this virtual tour of the museum. It's almost like a choose your own adventure kind of thing, where you can explore the museum. You can also browse the index of art here so this will show you thumbnails of all the art that is within the museum. There's some of some previous art that Mel did. So you can click on individual pieces that that you're interested in. Here we go. So you can view by version 5.9 6.0 and then there's this 20th anniversary exhibit that's coming up. I don't think there's anything quite there yet. Oh, there are some. Fantastic. I did not check since last week and it's great to see that stuff there. Alrighty, so we will go over submitting to the museum of block art because maybe you'll be inspired by Mel's demo. And you'll be inspired to create your own. That said, I would love to introduce to you Mel choice. She's a product designer, a contributor to the core and design teams and a block artist, which is what brings her here today. This is a sneak peek of the art that Mel has created recently and yeah, I'll hand it over to Mel. Hey everybody's so happy to be here. I'm Mel, I'm a product designer based in Philadelphia. And I'm a core contributor, as was mentioned, and recently I've been doing some tech volunteering, where I've been working on WordPress sites for caucuses and campaigns. And so I've been doing a lot with Gutenberg and with blocks in the block editor. But today I'm going to talk to you about something far less practical and much more fun and entertaining, which is block art. In addition, I did some of the early MOBA display actually they might not even be there anymore. It might be too too early on in the gallery. Yeah. But it was really fun to just play around with the block editor and try to figure out what it's capable of what I could do just by combining things like colors and columns and backgrounds. So I've prepared a few pieces for us to go over today. I will start sharing. All right. So when I first started playing around a little bit. I was thinking about what might a gallery in a museum look like what might a digital gallery look like. And so I did just a very simple block here where it is. Let's check it out behind the scenes. What I did was a cover block. Oh actually I did a group block. I usually do cover blocks so kind of surprised at myself. It's a group block that has a background on it. So over here in the design tab. I just have this gray background. I've said it so it is full width. And I ended up adding instead of giving it a height. I just gave it a bunch of top and bottom padding. So if you go over in this sidebar you can see just how much spacing it has there. And then I was like okay for a gallery let's have a gallery. And if you haven't used the gallery block in a little while it's actually evolved quite a bit. You're able to control the number of columns. You can crop images more efficiently I think now than you used to be able to. I also control the spacing between the images in your gallery. And so I went for something that had just a little bit of space to show that these three images are connected. And so I kind of pictured it as like a gallery wall in some art museum. And one thing that I also really love is you can now control the individual border radius on images. So for instance if I wanted this to just be a complete like oval shape. I could do that. And you can control them individually, which means you can make interesting combinations. And so when you click on link you can control each one individually and so we can even do something like that. First I was thinking about like stained glass windows, which is why I kind of went for just like a very simple arch. But just by combining border radius with images, you can make some really interesting patterns on your page, especially if you have a site where you're making, where you're selling products or even displaying some of your own art. Kind of mix and match these border radii to really interesting effects. For instance, if we were to duplicate this gallery, I could now go in and do the opposite. And you almost have this like kind of like pill shape throughout. Just a lot that you can do even just with a gallery block and border radii. And so next I thought okay what else can I do. I really want to try overlapping some things that's something I wanted to do with the block editor for a long time. There isn't sorry I have cats right there. There isn't really a way right now to necessarily like layer things like you would in like a program like Photoshop, but using nested blocks, you can get some pretty interesting effects so in this case, you know, kind of replicating the jaws movie poster with blocks. So we have some text, and then that's an image. That's an image and then this background is a gradient. So when we look at that in the editor. Let's open up our list view. This is my favorite, my favorite thing when building anything is just being able to see kind of the block hierarchy. If I am if I'm finding the editor itself a little fiddly I could use this to drag and drop. I'm kind of using a cover block this. And I changed the positioning. So, the text would be in the top rather than in the middle of this cover. What else did I do so the gradient here is an overlay. So I have white, lighter blue and then a slightly darker blue and kind of the cool thing about this is that if you like, put a color over another color it creates this hard stop rather than like a soft gradient. And so I was able to get like the white of the top of the poster to a hard stop here down to the gradient at the bottom. So that was a pretty fun effect I've seen that also used really well in some patterns in the pattern directory on WordPress.org. It's a good way to like combine colors and also like provide some readable spots. And so within that after the paragraph I have the stack block so it's a variant on the group block. So the group block is just. I have a standard container, but there's now row and stack, which I think are using maybe flexbox on the back end to determine like how things are distributed like through how they like handle existing. I actually haven't written a ton of CSS in the past few years, especially since more and more development has gone kind of in the way of like needing to set up Docker before I can do anything. So I've done much honestly relied more and more and more on the editor itself and finding it significantly easier to do that these days. I feel like at this point I'm like really comfortable just building a site without any custom CSS because of the amount of control I've been able to have in the block editor in the site editor to I've been doing a lot with templates in the site editor lately. And that's been really fun to like something that like would have disqualified a theme for me years ago like oh it would be perfect if only I could you blah. I'm not able to do. But anyway, I can get back to this pattern. So, I ended up fighting a like a free vector of a swimmer and just like editing it a little bit to be more of a silhouette. And doing kind of the same thing with the shark face. And so it's honestly like really just that simple where it's, it's, I guess, in total it's the cover block is one, the paragraph inside of it, the stack is three and then the images four or five inside of it it's like five blocks to get this kind of poster effect. I'm not relying on images to but like just combining colors ingredients and text and whatnot you can do a lot and it's like very versatile. So if we go back to this. It doesn't handle being responsive super well. It's really only perfect in some contexts. Oh it is pretty funny to see this guy like running away from the shark like oh going to jump in the water, like a dolphin. Totally jumping the shark. Oh yeah. It's funny though because like the gallery because it is just really simple it's like a gallery block inside. It handles resizing pretty well. So yeah, and this is just it's honestly like it's text. I changed the color. And I'm also using a lot of the optional type tools. I'm using 2013 which comes with a bunch of fonts included I picked inter just because it has a really nice bold weight. I'm using the black weight for this. It's the heaviest that comes in it. Using letter spacing to make the letters closer like on the poster. I changed the case to uppercase select right now. If I were to type like anything more, it would all be uppercase which is really convenient. Setting the size, I use so I use these type tools like constantly all the time, especially if I'm doing something like this which is art directed rather than like changing styles for an entire site. It makes it really easy to do a bunch of like one off things. I'm not really padding in margin a lot. But in this particular one. I don't think I ended up using a bunch of styles at all I honestly think it ended up being pretty stock behavior. And so once I started thinking about layering I was like okay how kind of kind of how far can I push this. And I ended up with this design. I think that it's core is, I think it's like five layers total so I have this background here with the outside. I have this wall and the floor is another layer. Ouch, all the like chair and the cat and the books. I think I ended up putting the lights are another layer. And then this set of plants is one and then this set of plants is another and actually because it's like that. It actually scales a little bit better than some of the other examples. I'm not peeking out. So we'll dive into this behind the scenes. And so these are all just like illustrations that I made, and then exported as like PNGs. And so this one is just like pretty much a ton of cover blocks. So starts with a cover block. There's another cover cover block nested, there's another cover block nested and then finally the columns and then in the columns images. So this first cover block. I think all of them are set to toggle full height which essentially just makes that container the height of your browser window so it's like 100 view heights. And this unit ph. And so this first one is actually this background. This is the outdoor scene. And then on top of that, we have the window and the wall. So the window is actually just cut out. So it's like the one transparent part of this image. And the rest of it is just solid color. And so let's in that first cover layer behind it. Yeah, we have our chair and lights. And then finally the last layer we have here is columns inside of here I have it docked to the bottom. There's still a little bit of space coming in there I'm not 100% sure where it's from it might be like a built in like block spacing into the theme. But I was able to get like a pretty good approximate of like putting it on like the bottom so it looked like it rested on the floor. So I have two columns inside of this block one with this image of two. I didn't change any settings here. And then with this one. I gave it a spacer to make sure that it was pushed all the way down to the bottom of the container. And so that was like a little kind of hacky thing I had to do to get it to work. I was like really hoping that I would be able to pull this off I had this image of a, like one of those like paper craft layer things you like cut out different layers of paper, and you like put them in a box. There's like an actual name for it that I forget. Yeah, something like that. But there's like some really cool art that you can do that. And so I was like trying to do kind of the same thing or it's just a bunch of overlapping layers to create this like, I don't know illustrated environment. And so I wasn't content to just leave it there I was like it can I push this just a little bit further. I was like okay let's make a night scene. And so this is actually entirely the same blocks. The only difference is that I've added some layers to it, some like color overlays to it. So on this first layer, which is this scene outside, I added a black overlay that's at 70% opacity, or maybe it's a dark blue one not totally black. I can't remember. And so I just said it dark enough that it looks like it could conceivably be nighttime out. And then on this one. So I did a gradient overlay. And that gave it kind of some good. There's like just a tiny bit of depth in here that you wouldn't get from doing a solid color. It's like, it's very subtle. You can see it, you know if I turn it all the way up. But I tried to just get it so like the area by the windows so tiny bit lighter than the area farther away from the window, just as like a kind of little effect there. So I had this chair. The colors didn't look great once I had these overlays on them so I actually used the duotone filter, and I actually I just use one of the standards once I was like let's do the blue. And that added just enough tint to the, the like lights in the background. I should think honestly since it was really just like one color is just like putting black over it I don't think the blue came into play at all. I think like the blue tint is actually coming from the previous copper layer. I'm not totally sure really like most of this is just playing around until I get something cool. A lot of it is really unplanned, like with this I had to plan the different layers in advance so like I sketched it out first, and then I made each layer and illustrator. But once I got into here and like started like trying to like change it. It was really just like poking at it until it did cool things. And then I did I applied the same filter onto the images just so that would be kind of consistent. Since previously they had been kind of like a green blue, and I wanted them more of like a blue blue. And actually one of the cool things will close this is that because this layer with the chair has the do a ton the the blue is actually showing up in the only light part of this layer which is the cat's eyes, which I thought created a pretty fun effect. And so we'll back off there. And yeah, it looked like this. And it still did pretty, pretty decently with resizing. I don't think it would look good on mobile, but it was fun for an experiment and like a piece of art rather than, you know, something functional. It's really cool for presentations, you know, especially if you're using. There's at least one like slide plugin for the block editor where you can like do presentations from it if you want. So, um, yeah, that's kind of have my like my approach here. I want to see how far I could push layering, especially since there isn't like a native net layering feature it's just all nesting things together. And I think I got pretty far with it I'm pretty happy with the effect I was able to get with honestly like pretty minimal fuss. I was able to do all of these and maybe like two hours total of just like playing around. So, very cool. Happy to answer any questions about it. Yeah, do you have any questions for Mel in type in the chat, or if there's any of the steps that she took you might want more information on or want to see again. I'll give folks a minute to type. There are any questions. Can you hear my cat purring in my ear. I did at times. Not right now. I wonder if the zoom body was suppressing it. It's possible. Yeah, so is this this cat inspired by voxel. Yeah, of course. Of course. She's always purchased on like the back of things. Any questions coming in. I'm curious for your jaws poster. We were using like the original as the inspiration where you'd like picking the colors from it or just eyeing it. Yeah, I, so there's like a couple of iterations just based on like how it was scanned. But I think I went for like one of these. I did color pick. I threw this into illustrator and then I started just like trying to like check out the colors. I was trying to figure out if I wanted to like trace the swimmer and the shark and I was like I'm getting way too fussy about this I just need something and so I like search for like open source SVG user whatever. And so I just like edited those a little bit to fit with the colors and use those instead. Very cool. Yeah, I always wonder where folks find inspiration with like any image editor to. Yeah. So this I was like, this I'm like I knew this poster would have a good. Kind of like concept of overlapping, since I was like I know it has text. I know it has like figures. I was originally thinking it would be cool to do the figure and the shark in the background and then like put an overlay on top of it but I actually think the way it works because I was using a stack. I wouldn't have been able to get it to work but actually now that I'm thinking about it I can like, I actually kind of have an idea for doing that. So maybe I don't know maybe I'll try that next see if I can get some transparent water on top of them. Nice. Yeah so iconic in. It really is more iconic. I'm not seeing any questions filing in. All right, so we want to submit this. Yeah, so the next part of this is how to submit art to the museum and since Mel just created these pieces, they're not in the museum yet. So, thought we'd walk through the submission process so like if you come up with your own creations and want to submit to be displayed in the MOBA. So this is a tutorial for that. So go for it Mel. Awesome. I'm going to submit this one here. We'll open this up. So, there's this contribute tab up here. And there's a couple guidelines. You got to use the block editor. You know, make sense. Limited custom CSS. In this case I was able to get away with not using any custom CSS at all I honestly use very little CSS since the like full suite of design tools were introduced. I'm using latest versions of WordPress. I think it is pushing the boundaries. Because I feel like I haven't seen a lot of this. I for this one I'm like all the stuff I made myself. So, I am declaring it all open source CC zero public domain, whichever. But you could use the WordPress photo directory or openverse on WordPress.org to get images. So I made a screenshot in advance I what I ended up doing is I just I literally just like I'm using Firefox for this so I can like right click take a screenshot. And then I just like took a screenshot of the whole page and just like I was logged out so I didn't have the admin bar and I just use that as my as my screenshot. And so I did that in advance. The next thing you need is the HTML markup of the block. It's actually like very easy to grab because all you need to do is just like. So, I right now I'm selecting this first cover to like kind of like container for all of it and I'm just going to literally like command C, where you can do. Copy block, and that actually copies the block and everything inside of it that's nested. And then when you paste it somewhere. It shows the styles. And so one thing it does specify in this is that it needs to get the like markup needs to get added somewhere that can be linked to. It gets stripped from the email. So you can either like provide a link to a text file that you uploaded somewhere. Or you could put it in a code block on a post on your site. In this case I ended up just throwing every all of my assets into a cloud up gallery. If you paste, just like this HTML chunk, like literally like all I did was I went here, and I just like command V and it created this text document for me. And so this is what was actually like copied when you copy that block is all of the block markup. And then, since I'm using images, I included the images that I'm using in this since right now, since this is on, it's not a live site, I'm using a just like a local environment. My images are all like my, yeah, fsc.local. So those images aren't going to like exist anywhere. And so I'm like providing the images standalone in here that'll need to get like recreated a little bit by the folks who manage the MOBA. Hopefully that's okay. So I have my full screenshot. And then I have each individual piece and my code. And so copy this link. But yeah, you could also just like do this on a post on your or like as a hidden page on your site. If you were to contribute anything. So I'm going to submit. So my name, little link to this cloud up. Tell them what's there. And my block code. I'm going to give it a title. Courtney, do you remember what I called it when I sent it to you. Don't recall a pan but I have it noted. I'm like really bad at titles. It's like the hardest part of anything is like creating a title for it whether it's a post whether it's like art. Yeah, relaxing indoors. Okay, cool. It's easier day and night. Oh yeah. So in this case, since I'm only submitting day, I think I'll just just call it the rocks and indoors. Okay, and then a link to my socials so just going to do that. And am I open to having my art printed and displayed at possible events. Sure. Why not. That's a really cool thing to think about. Yes, I hadn't seen that they were doing that but that that seems really fun. Also completely different context so should be interesting. Do you know if they just at the New York office at all. Yeah so at the automatic offices in New York City, they have a gallery wall of art from the block museum as well as like from tumblr and other artists. So it's pretty cool. Awesome. I haven't been I hope to be able to like go to an event there one day. Just got to get invited. If you look at the end of the video. I might. If you see the video recording of the state of the word, you'll see the one of the gallery walls in the background. Yeah, it looks really cool. I'm not here for automatic but I don't anymore. So I'm like totally behind on like kind of like the knowledge. Okay I'm going to submit this. We'll see what happens. It sent awesome. And so, I guess, I don't know if all these folks or like a part of these folks will be reviewing but I am assuming I'll get some sort of like message just saying like hey, it is submitted. I think it's up now. Yeah, cool. We'll see where that goes. Hope to see it soon in the museum. Yeah I think you're right as we were clicking through earlier today I noticed that they took a lot of the older pieces out, and I was looking at the museum literally just like a few days ago, and I started up when I was putting together the deck for this and yeah looks like they updated it with new art as well as, or the 20th WP 20 the 20th anniversary artwork. I can't believe it's the 20th anniversary already. Yes. This is cool. This is the first time I'm seeing these. I guess we're gonna have to do another session with some of these artists. Yeah, oh you should do a WP 20 session. Yeah. That's amazing. I hadn't I hadn't seen these yet. Yeah, this is my first time seeing these. So many things you can do. I love it. Yeah, I see a comment in chat. Yes please more artists sessions. Yeah, would love to. And if you create one yourself, we could, we could do one with you. Yeah I love seeing new ways of using blocks, how we can just push the limit, as they say in the on that WP page. So, yeah, thanks Mel for for sharing your pieces with us. Honestly I was expecting just when you gave us three. Yeah, anytime I had to play around a little bit to figure out what I want to do. Yeah, and I think that's that's the common theme I see with a lot of block artists is that they just come up with just playing around and they something weird happens and they're like oh I could make something cool with this. So it's actually more fun when you find bugs, you can exploit to do cool things, I think. And it's like very ephemeral because like eventually it'll get patched. But in the meantime, you can do fun wacky things if you find like, especially like a style collision between Gutenberg and a theme. Yes, this is this is Voxel who is climbing around. Yes. As we said before cats have a lot to say about WordPress. I do. I will share my screen one more time to to wrap us up. Yeah those were the pieces and honestly yeah I could see these just hanging in an office somewhere or gallery wall. I love movie posters so I would totally go for the jaws one. Yeah blocks that were used today. Very simple cover columns image spacer and stack blocks are the blocks that Mel used in all of her art pieces. And as mentioned before, this is the link to submitting artwork to the Museum of Block art if, if you have anything to contribute. Please check it out there. I know we already opened it up for questions. One more chance if you have a question or comment, or if you want to share something new you've learned today about about using blocks or creating art. I will give you all a minute, but otherwise that's it from Mel and myself wanted to thank folks for being here and learning live with us. We do more online workshops like these, we practically have one every day. You can go to learn.wordpress.org to see what's new. There's also recorded video tutorials that you can view those are usually like five to 10 minutes in length and online workshops like these like what we're doing right now. It tends to be between 30 to 60 minutes and we've record all of these and upload them to WordPress TV as I mentioned. If you'd like to keep in touch, you can join conversations at chat.wordpress.org. That is a, the making WordPress slack. So that's where folks that are contributing to the WordPress project chat about the work we're doing and the contributions that we're making. I think that is it. I don't see any questions. I see some greetings to Voxel and some some thanks from our attendees today. So yeah, that's it. Thanks again Mel. Thanks again Voxel. Thanks again to all of you for attending today. Yeah, we'll see you next time.