 All right everyone, so hi and welcome to the workshop on to group or not to group how to use the group block. We're going to start at the dashboard and I kind of want to go over a fun thing that I don't know if a lot of people know about or that the dashboard has this little welcome here and this is where you can find the latest version and updates. And if for some reason, your dashboard doesn't have it, it disappears. Sorry, I'm trying to move my little window here. Sometimes we dismiss that so we can see the rest of our dashboard, the screen options is where you will find it so you just click on that in the upper right hand corner, and just click on that welcome back. And it'll come back. And when you click on that link, you get a lot of information about the releases and the maintenance so we did have a 6.4.2 version that just popped came this week. So just be aware of that and then some of the fun things that are happening with the 2024. So that's a nice read and a resource to have at your fingertips. So group block definition of a group block allows you to group different blocks together and customize them to your liking, including setting custom background colors, spacing and more. For this demo, I'm going to do a page and it's going to be a bakery themed page. So we're going to go over and create our page will go to the right side to our tools and go to appearance and go to editor. And now that we're in our editing tools, we are under design, we're going to go over to pages. Okay, and we're going to click on that little arrow there to open up our pages. And sometimes you'll see all the ones that you've created or and then there's a couple of default ones. We're going to create a new page. So we're going to go up to the plus sign that says draft a new page and click on that. And we have a pop up window that comes up draft a new page. And it's asking for a page title. So I'm going to name this group right now, because we're talking about the group block. It will hit create. Give it a second and it'll pop up. So this page is kind of just basic, but there is a footer and a headed heading and a footer. And if we look on the right side and we open up our tools. So if we go, we're here and next to the save button, there's a settings. If we click on that, we can see that we're using the template pages. So it's pulling the template parts into here. And if we click on our list view, which is in the upper left hand corner, our list view is showing three different items. And they have blocks on them. So we have a title featured image and the content. And these are the items from our page template. And this is going to be different from just our regular page. So if we look in the middle here, we see that we're on the group page. But it's nice that we can see what the template is going to have in it. And on the right side, we also under page, we also have that listed to. So for right now I'm going to leave this title alone, but I want to show I'm going to show you a way to change it so that it doesn't show up on your front page. Okay. So the first thing we're going to do is we're going to come down here. And you see where it says type slash to choose a block. So we're going to click on that. And the default block is always a paragraph. So we can add a new block a couple different ways. And I'm going to show you that in the different demonstrations. So the first way we're going to do the slash and just type in group, or since I use the group a lot, it tends to be the first one there. We have a little window that pops up for us and we can select three different from one of the three different types of group blocks. And I'm going to just going to go with the plain one, but a row is also a group. And so is a stack. Okay. So if you look on the lift view, you see that we have our group here. Now one of the fun new features is that we can rename it. So I'm going to click on this group block. And there is a couple different ways to rename it. So I'm just going to show you a different variety. So we're going to come over to the right side and up at the top we're going to click on our block. We're going to go to group block, we're going to scroll down, and we're going to go to advanced. So under advanced is block name. Okay. And we're going to give it a name. So this is going to be my first demo. And it's going to be about setup. But I'm going to also give it a name baking. So then I kind of recognize it. Hit save. We're going to save again, because it's going to ask you to make sure that you're saving for that page. So there's usually two save sometimes it kind of glitches and the two saves are like one click. So sometimes that happens. All right. So if we look in the list view, we now have our name group. The other thing that I'm going to do for right now is in our tools for our group, we have a line. So we have, we're going to keep it at none for right now because I want to show you a different varieties of how these align these widths work. Okay, so this one's going to be none. I'm going to click on the group block and I'm going to start adding things to this group block. In the work area, I'm going to click on this plus sign, and I'm going to add a heading. And my heading for this is going to be baking. Now I'm, this is going to be the title of my page eventually. So I'm going to make this into an H1. The width is going to stay none. Okay. Just because it's also a heading and it really doesn't need to be like full and stuff like that. So you can play around with those. And I'm going to align it to the center. Go over and hit save and hit save again. Okay. Next, I'm going to come over to my list view and I want to add a paragraph. So I'm going to come over to and highlight the heading and I'm going to click on the three dots. And we're going to scroll down to add after on this window. And like I said before, the, the fault is a paragraph. So you don't really need to add a paragraph or anything. And I'm going to add some filler text. And since we're doing baking and one of my favorite sites is of cake. And you can create different paragraphs and generate those as filler text. So I'm just going to copy and paste and add that there. We'll hit save and save again. And let's take a look at what this looks like so far. So I'm going to refresh my page and we have our group. We have baking and we have our paragraph. So remember how I said we want to get rid of this because I want baking to be kind of the title of my page. So I'm going to go back in and we're going to go over to the right side in our, in our tools and our settings and click on page. And remember how we looked at our template and what the page template was. We can now click and this is one of my favorite new features because I've been wishing that they do this. Like, why, why can't this be so easy to just change to a different template, right? Besides edit, we now have swap, swap the template. Okay. If you haven't tried this, are you ready? It's going to blow your mind. It has a preview. Yes. So look at all the different previews that you can change it to. So I'm going to do the page, no title. And so now my template is page, no title. Yes. It's, it's a game changer for me. So we're going to hit make sure we hit save, save again. And then let's look at it on the front end. Always hit refresh of your page. And it's really good to have this other, the second tab out. So because the spacing and stuff within your editor, even though they've improved it, it's still nice to see it on the full screen with that. The chat's going crazy on me. All right. Are there any questions so far? Yeah, we have a, we have three questions. The first comes from Lisa S. She asks, are there any core blocks that are not eligible to be grouped? I don't know that I, I think they all are. Except, yeah, if anyone else can chime in in the chat. Yeah, I'm not sure about that either. That's a really good question. I think there, there is, I'm trying to chat over to a different window so I can look at it. And yes, we are. I am using the 2024 default theme. For those of you who the next. Oh, sorry, go ahead. Yeah, I assume so far everything that I've, I've grouped has been able to group so maybe like pageation and stuff like, you know, because that needs to be a query, but you could group a query loop too. So, okay. Next one. Next one comes from Shari. First save is for the group and second save is for the page template. Yeah, it's kind of, I guess so. Well, no, because you're not changing the page, you're not changing the page template. It's just, for some reason, so let's see me change up. All right, so we're just saving what I did on the, on the screen first. Oops, see it glitched and it saved two times, and then it's saving to the page. Yeah, so there. It's not saving anything to the actual template because the template has to just stay like plain. But I think it's just a reassurance. It's just asking like, are you sure you want to save it to this page. So it's just a double check. Right. And then the next question also comes from Lisa is the group's name only for use inside the editor. So for example, not any part of the source code. I don't know enough about coding, but I would assume so because of the fact that you could also add an HTML anchor, and that's in a different window. So that would be more code base, as opposed to block name. Does that make sense? Do people agree with me? My coders. Yeah, not me. Yeah, Shari says she agrees. That's what I would assume that this is just for reference. It's going to be within, you know, it, you know, like if you leave it and come back, they will still be there so it's somewhere within maybe the theme JSON or, you know, it's got to be somewhere right that it's going to remember it, but it's not going to be. Yeah, we have some confirmation from a couple people in the chat. Let's say yes. That's good to me right. All right, questions for now. Okay, well now we're going to go to styling this, adding some of the fun stuff. Okay. So first of all, we're going to make sure that we're in our group block. So we're going to click on that in the list view and go over to block and we're going to scroll down to our styling styles. And the first thing I'm going to do is add some padding. Because we got a little on the top and the bottom. And then on the sides to and I like that they've added this little feature where it highlights on your screen, where it is so then you can adjust it the way you want like ooh. Okay, I see where that blue is, and I kind of like that or I want a little bit more padding on the sides. So that is like that. So first of all, we're going to scroll down a little bit more and add a border. So my click here and it's the theme is using these accent colors. And you can always change your colors and themes and stuff like that. That's another video. And we're going to give it five pixels. Okay. And hit save. And yeah, so the second save is are you ready to save and usually, you know, a lot of things nowadays, you know, it's like, are you sure are you positive. You're making sure that this is where you want to save it to. And we're going to go to the front end. Refresh. Now we have a border. Okay. So I'm going to add a little bit of spacing right here so that that. And I'm just going to do it the easy way and just add a before. And I'm just going to add a spacer so spacer. And you can adjust this within the frame here, or you can use the tools on the side and adjust the height within here and there is different variations if you like the rem and percentage and stuff like that. So I just wanted to add a little bit for aesthetics. And there we have that. Right. So we're going to add a background color. So make sure that we're in our group block and go to styles again. And under color, we have our background. So I'm going to go bold and go with the orange. And save that. Refresh the page. So we have our orange. Okay. Now another within the color background colors is the gradient. And the theme pulls in a couple different variations. We can look at and I'm going to stick with this one for a second. And the fun thing is, is that when I go back in. Make sure you click on the group block that I can adjust the gradient up here. And you have to hold your mouse and I can just make the gradient highlight the heading. And it looks like that. So a couple different effects within, which are pretty cool. So I'm going to go in and clear that out. And I want to show you a new feature with the background, which is adding a background image. So under our colors, we have background. And if I click on here, I've downloaded a couple images already. So I'm going to open my media library. And I choose this one. And we can add the background image to our group block. Now, this is a new feature. And there we go. Now the one thing is, because it's still new, there's not a lot of styling with this. So, but it does have our three little dots that kind of tell us that there's options there. So I'm hoping that they have the option of opacity because you can see that the text is kind of hard to read. And even when I put it on white, it's even like harder to read. So for right now, I would say a get around of that would be to think about the image first and use a photo editor to kind of add the opacity to it and play around with the coloring of your lettering. And then add the image so then you can add it as the background. So I'm hoping that that opacity comes soon. Okay. So I'm going to pause here and if there's any questions. Looks like we have one question from Lisa is adding a background image in a group block a better option than using the core cover block. So the cover block will give you the option for opacity. That's the only that's the other way that you can kind of get around this. So that's why I'm saying I bet I'm hoping that in the future, they will kind of merge and have the same options as the cover block in this group block with the background to have that opacity. So yeah, the cover block would be the other option to to use within this. Okay, any other questions. I'm from Jean. Can you add a block under the text, such as white, so the text can be easier to read. Oh, okay. So, so make. So yes, this like that. Yeah, I think that's what she's asking. There isn't control for opacity of the white is there. No. Yeah. Yeah, that the opacity is only for like images in an image block or the cover block. Because I was testing that out. Yeah, that's exactly what Jean was asking so. Yeah. Then you lose the picture, you know, it's kind of. Refeats the purpose. It's kind of, it kind of looks like a recipe card actually. Yeah. Oh yeah. Yeah, that'd be cool. All right. See lots of comments so thank you all for adding your experiences with this. So now we're going to do where, if you wanted to kind of do it the opposite way where you start with your blocks and then group them. So I'm going to click on my previous block group block and I'm going to just go into add after. And I'm going to add my heading. Oops, forgot this. I scroll up a little bit. And this is going to be a h2 so I'm going to keep this and we're going to make this cookies yum yum. And we're going to line the text to the center. And we're going to keep the heading block as none, but we will we will adjust some other things. Okay, so since we have our toolbar up we can use our options are three dots right here to add after. And this time I want to add an image. Okay. So I'm going to come over here. And I want to show you the toggle block insert or which is the big plus sign in the upper left hand corner. Click on that. Because we have blocks patterns in our media. So this is an easier way to kind of get to your media. And if we click on that, we have images and the open verse. So any image that I have in my media library, I can preview right here. Okay. If I would like to find a new new image, I can go to the open open verse. And type in cookies. And I have a selection of images that I can use here. Now you will get a warning. That this is an external image. Okay, and it can't be uploaded to your media library. So just be aware of that, that it could get changed in the future. And that's the, you know, using of that kind of material. So we're going to click insert. And sometimes it glitches up. So we just kind of click somewhere else on the page to close that up. All right. So I have my heading and my image. And now I want to add my text. I'm going to come over to remember these are just sing separate blocks for right now. So I'm going to go to my image. I'm going to add after I'm going to get some more text, filler text, all kinds of yummy goodies. Come back. And we will save all of that. Okay. So let's look at that at the front end. So here's the start of our second demo with cookies, our image and our text. Okay. So it looks the same, but if we want to group it so that we can style it a little bit differently, we're going to come over to our list view. I'm going to click on the first item in my list view to highlight it. And then I'm going to hold down my shift key. And I can either click on the other two, or I can just click on the third one, and it'll highlight all of them. Okay. And if you look over here, you can see that they're highlighted to they have that blue cast to them. I'm going to click on the three dots and I usually try and go for the top one. You can go for the bottom one, whatever. And then we open up our little options and we can go down to group. So now we have grouped those together. Okay. I'm going to come over and I'm going to rename it. So remember how I said that you can rename it a couple different ways. So this other way that you can do it is using our three block three dots. Those are going to be your best friends. And scroll down to rename. So the same little window pops up. And this is my second block. And I'm using we're grouping things. I'm going to use group and cookies. And we'll save that. So now you can see now that we have more than one group. It's so much easier to find which one to work on. I've highlighted the group and remember how we talked about the width. So we're going to open this and I want to make it a wide width. So we're going to click on that. And it's kind of hard to see here because it gets a little glitchy. But so you kind of have to play around with that a couple of times. Let's see how it looks on the front end. There we go. Okay. So we want the image a little bit bigger. I'm going to add a little bit of styling. So let's open this up. And I've clicked on the group block. Now remember I'm only styling the group. Oh, and I want to go into the image. I'm sorry. And click on the alignment for that and make that a wide width. I think it's already there though. Because it's highlighted. So that's good. All right. So we're back in their group block and we're going to go to styles. We're going to go all the way down. We're going to add another border. This time we're going to do the orange. Make it the same amount of pixels. And hit save. Okay. And let's see how that looks. So now we have a border around that. Another cool feature that I like and I'm going to zoom in just a little bit more. A lot more is when you have an image or gallery or cover, it gives you a little thumbnail. So that's kind of nice to be able to find if you, if you did a whole group of images to be able to pinpoint one of the images. And we were talking about, let's go into the image and the styling. It doesn't have the opacity, but it has do a tone. So the do a tone kind of does kind of the same thing. We can add a shading to it and change that up a little bit with shade and highlights. So that's a little fun thing to do with within that. I found out about this image too is interesting enough. Let me go back to this thing, the align. Let's go back to the non. If you go into settings and you're on that non with you have the option of the aspect ratio. So you can change the size of your image. Make that a little bit bigger. Over here on the right side. And you have the width and height options that you can kind of change up so we can zoom it, make it smaller and stuff. If you go into the wide with those things disappear. Let's go back to the image. Those aspect ratios disappear. So just to realize that wait a minute I just, I was just able to do that. That's why and then full with also has it the same that they don't have that aspect ratios. Any questions. No new questions, but Sharon mentioned that she thought you can change the opacity of the background if you go into the custom settings. And Lisa mentioned there seems to be a an adjustment available for background capacity. And she tried it on a group block and paragraph and was able to see that adjustment. Okay, very cool. Awesome. Thank you for sharing that. Thank you. Yeah, no, no new questions. Okay. I have one last demo, we're going to group a block. So sometimes we the theme comes with a bunch of different patterns. And this is pretty cool. So if we click on our Inserter, we have blocks and patterns, we're going to go to the patterns and lots of different categories, we're going to go to pages. And when we click on the arrow, we get a little preview. Now I have created a bunch of posts with featured images. And so they're going to populate my previews. So you see these yummy desserts. And we're going to come down and use this pattern. Okay. And I put it in the wrong place. So bear with me, let me undo this. I wanted it to come after. There we go. So now we put the pattern. So let's save that and look at it on the front end. And let's look at it in our list view. What is that pattern made out of? So the pattern has a spacer block. It has a group block with just the heading in it. It has a second group block with the columns in it. And this columns block is made up of four columns. So I want to change that to just three. Okay. And I'm going to hit save on that just to make sure I have that. But I don't feel like I really need two separate group blocks. I think I can combine these all together. So what I'm going to do is I'm going to highlight the first group. Let me close that up. So the heading is, and I'm going to click on the three dots. And our little options come up. And I'm going to go down to ungroup. So it just takes away the group. And now we just have the heading. So I'm going to change the heading to favorite face. Okay. And I'm going to align the text to the middle. And I'm going to ungroup the other group block. I'm going to do the same thing. I'm going to highlight it. Click on the three dots. Scroll down to ungroup. Okay. And we're going to hit save and save again. So on the front end, you really can't see a difference. You can't see if they're blocks, you know, they're grouped together or not grouped together. But what we're going to do is we're going to actually group them together. So, because I've kind of almost made a new pattern, right? But for the way I'm categorizing things and organizing, it's, it's, it's better for me. And that's the whole point too is, you know, like if you're the person who's going to maintain the site, if you're the person who's going to be updating, how do you organize the list view, you know, or are you handing this off to somebody, make it as simple as possible for them to find things and to organize things. So to have, you know, a whole page that has all this, it's easier to put it into a group. I'm going to keep the spacer separate. I could put that in the group, but I'm just going to keep it separate for right now because of the styling that I want to do. So again, we're going to highlight those two. We're going to click on the three blocks, dots, go down to group. I'm going to rename this like on the rename. So this is my third group. And it's about one group. And it's about cakes. So what I want to do is I want to add a little bit of a background and I know that I want to add some padding into the sides. And let's see how that looks. Refresh. Oh, one last thing I wanted to. Make this the full with. So that you can see all three different variations of the width. Okay. So we have. That group. We have our. Wide width and we have our none. Okay. So. Are we on questions? We had a question from Mr. Chris F. What we were discussing in the chat. He asked, or I'm sorry, they asked what is the purpose of grouping since everything is a block. And you seem to answer that. In your demo just now is like, it seemed like. It's good for organizing in list view. And Lisa also mentioned that a group block has some options that other blocks don't have to change the HTML wrapper. Yeah. And if you, you know, if you're. Somebody that's used a classic. It used to be called a container. So, you know, now it's just a kind of a group. We're doing the same thing. We're, we're containing the group, right? So it's just a more universal word to use for the future. And that's what that is. Thank you. If there's any other questions. Be happy to answer them or if anyone wants to see anything. No other questions. I'm sure you also mentioned, I would think it has to do with how your source code is organized also. We're talking about the purpose of grouping. And one question just came up from Lisa. Are you planning to mention block spacing? I wasn't going to. But I can kind of show you there. There is an option down here to kind of, let me close this up. So if you need to space things, you can add spacing here, which is nice. Can't really see if we can see it up here. See if we can see. That's very, there we go. Get a little bit more dramatic that because we have. Two blocks within the group, we can add spacing that way. And then you can still, you know, also use the padding. So if I highlight just the text and go to dimensions, I can add padding that way too. So there's a couple of different ways to add spacing without using the spacing block as much as. But sometimes you, you might need to use it in that way too. All right. Well, if there are no other questions. I wanted to kind of go back to that poll question, if you can answer it in the chat. Now that you finished the workshop. What is something that you'll use the group block for? If I can pull it back up. Will you add a background to a group block? Will you make a group block? Will you go and rename a group block? So folks are answering in the chat here. Well, thank you everyone. Thank you for joining my first workshop. So super excited that you all joined. And any feedback would be greatly appreciated. So you can add that to the, the meetup. And the replay will be on the WordPress YouTube channel. At youtube.com slash at WordPress. Give me a couple of days. You can learn more about WordPress at learn.wordpress.org. And any of our tutorials and lessons and courses. We also have a link to our calendar for upcoming events. So start planning your 2024, your brand new calendar out there. And if you'd like to volunteer for any of the teams. In the open source word WordPress project. Check out make.wordpress.org. Or if your heart is set on joining our lovely training team. We're at learn.wordpress.org contribute. So thank you again everyone for coming and I appreciate your comments and your questions. And enjoy the rest of your, your day and have a great weekend. Thank you. Thanks Laura. Thanks everybody.