Using the Group block

[digitalchild]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan):
• Content title: Using the Group block
• Topic description:
• Audience (User, Developer, Designer, Contributor, etc.): Developer
• Experience Level (Beginner, Intermediate, Advanced, Any): Intermediate

Learning Objectives

Related Resources and Other Notes

Automation Code

[digitalchild]

//lesson

[github-actions]

Lesson Development Checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for review
• Lesson reviewed
• Lesson video submitted and published to WPTV
• Lesson created on Learn.WordPress.org
• Lesson video published to YouTube
• Lesson on Learn.WordPress.org updated with YouTube video
• Lesson published to Learn.WordPress.org

Resources:

• To group or not to group: How to use the group block
• Designing with row and stack blocks
• Nesting and using blocks to create visually appealing content
• Group block documentation

Description:
This lesson will focus on how to use the group block and how to rename and style the block.

Objectives:

• Show where to find documentation.
• How to use.
• How to rename.
• How to style.

[westnz]

Hi @lada7042
Can you please update us on this lesson?

[lada7042]

Hi @westnz I got your message about the June deadline for Intermediate pathway. This lesson will be done by the end of the week.

[westnz]

Thank you for the updates 😉

[lada7042]

Ready for review- please use template found in Guidelines for reviewing content

using-the-group-block.mp4

[lada7042]

Thumbnail-

[westnz]

Great job Laura! Some thoughts:

• Learning outcomes: Write Group block - the G should be capitalized :-). Don't worry about the title, as it doesn't apply.
• It might be good to add a short intro about the Group block at the start: "The Group block allows you to group and style multiple blocks together, simplifying content management and design.'
• 0:24... - It might be better to clearly show your three examples and say something like, 'In the first example, I used a Group block to add a heading and background image. In the second example, I grouped a Heading, Image, and Paragraph block together. In the last example, I used a Group block alongside a Gallery block. If you shorten the first example and remove the reference to documentation, you could show how to do the last example - you don't have to add all the images. Have the Gallery block + Heading block ready and then just Group it + style. We can just add the link to the documentation page of the lesson below Resouces?
• 2:27 For accessibility, it would be better to say, "Click on the three vertical dots top right."
• 2:56 I believe the Heading should stay H2 as the page title is H1?
• 3:51 - In the preview, the bottom hand is cut off. I suggest increasing the height so it looks the same as your original preview.
• 4:56 I suggest removing the 'oops that wasn't it' part 😉
• 5:51 I think it would be helpful to show at least one or two style changes.

I hope this is helpful.

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

[lada7042]

Need one more review- please use template found in Guidelines for reviewing contentMade revision as suggested above. I will add the link to the group block documentation in the resources.

using-group-block-final.mp4

[westnz]

Awesome! 💃

Thank you very much for all the hard word that has gone into this!

Here are a few more things I noticed when watching the new recording:

• Please check 2:41 - 3:15. The video and narration don't match. When you click on Align at the beginning, it doesn't open up, so I'm unsure if that caused the issue 😉 I like how you use the focal point picker or position tool.
• The transition from 3:13 - 3:18 can be a bit smoother. It might be a good place to transition and then say; "We can't see our Baking so let's...". It will also be helpful to see how you open Color.
• 5:10 - 5:33 The video and narration must be matched.
• 5:48 - 5:55 The video and narration must be matched. When you start talking about padding, you are still updating the Border. There is also a transition at 5:53, but the padding is still being updated. I suggest when you transition, you remove directly over to the last example.
• 6:11 -17 I can't see you clicking on Copy.
• 7:02 - 7:08 Did you use a different mic here as the voice recording sounds a bit different? Is there any chance you can re-record that section with the same mic as before? Adding a little outro like "Thank you for watching" might also be good.

[lada7042]

@westnz I think I got it. There is one problem. The screen has a couple of glitches that happen. If it is too distracting or you find other issues then I will need to hand this project off to someone else.

using-the-group-block-Final.mp4

[westnz]

You nailed it! 😃

Let's go ahead and publish.

PS: I barely noticed any glitches

[lada7042]

Description:
A lesson to show three ways to set up and style the Group block. Highlights include adding a background image, renaming, borders, radius, grouping and ungrouping.

Chapter markers:
00:00- Introduction
00:10- Learning Outcomes
00:26- Example overview
00:58- Group block demo #1
4:25- Group block demo #2
7:33- Group block demo #3
9:44- Conclusion

updated thumbnail.

[lada7042]

Transcript

Introduction

Welcome to Using the group block. The group block allows you to group and style multiple blocks together, simplifying content management and design.

Example overview

Here is an example page that I want to go through first of some options of how to use the group block. So the first one, I use the group block with a background image and a heading. I've also added a border and radius. The second one, I used a group block with an image, heading and paragraph. Also added a border around that. The third one, example is a group block with a heading and a gallery block to create the page.

Group block demo #1

I've opened up a page, and I'm turned on my list view, which is the three slashes over in the upper left hand corner. I like to have my toolbar at the top. So if you'd like to do this, you can click on the three dots in the upper right hand corner and go to top toolbar and turn that on. We're going to add a group block. So I'll type in group with the slash. I'm just going to click on the front the first one option, and then I'm going to go over to my styling tools. I'm going to add my background image, open up my media library, make sure that you've optimized your images before uploading them, and then add alt text for accessibility. Now we're going to go and style our image so we have the group block clicked. I'm going to go up into my tools at the top and go to align, and I'm going to do a full width on the align. Okay, so now I'm going to go back over to the right and go to the styles. I'm going to scroll down to minimum height, and I want to add probably about 644 let's try that maybe 645 because I want to be able to get the hands in there. So we'll start there and make sure I click Update. And then another tool that you can use is going back up to the background, where you had the background image, and go to size and open that up. So this gives you the option to take the main focus and adjust that so I can adjust that so that the hands are showing, and click update on that. I'm going to then click on the plus sign within the group block and add a heading. We make this baking. I'm going to click on the tools and go to align text center. So we can't see the the heading text very well. So I'm going to do some styling on that. So I'm going to go over to the styling tools and click on background, and it opens up my my colors, and I'm just going to pick the green from here, and then I need to add some padding. So I'm going to go down to dimensions within the heading block and turn on padding. I'm going to do two clicks front and top and bottom, and two clicks side to side. I'm also going to go back up to the group block do a little bit more styling there, because I want a little bit of space between the heading and the top. So I'm going to go to styles, I'm going to add some padding for the top and bottom so that looks good. And then I'm going to add my border. So I'm going to go down to the border, I'm going to add that same green, and then I'm going to add a little bit of thickness to it. And then I'm also going to use the radius to show you how to use that. So we're just going to click on radius, and I'm going to a radius adds a curve to the corner. So I'm just going to make it very dramatic and go all the way to 100 and we're going to click update, and we'll refresh the page, and there's our first block.

Group block demo #2

For our second example, I'm going to click on the three dots and do an add after. This time, I'm not going to start with a group block, because I want to show you how to group blocks together. So let's start with an image. And we're going to make this one a cookie one, and then I'll add a heading. And I'm going to grab some text from my example, and I use cupcake ipsum. It's a free site that you can get filler text from, and this one is just baking, so it's fun. Alright, so we have our three blocks over here in our list view, and we can click on the first one and then hit Shift and click on the last one. And once we have those highlighted, we're going to click on the three dots and we can scroll down to the group. Okay, so that was simple. Click Update, and then we can go back on those three dots and click rename, and keep our list view organized. Okay, so let's go ahead and stop do some styling of this one. This one, I'm going to do a line to a wide width. Okay, give it a little bit different in the layout. I'm going to turn off this just because I want the text to be able to spread out a little bit more. And we'll see when we get all our styling done on that. I do want to click on the image, because the image is going to be a little bit big. It doesn't auto with the original. So I'm going to put in 568, because I want it a little bit smaller. And then I want to align this to this center. Okay, so we'll click on that, click on the Update button. And then I also want to add, go back up to our group block, and I want to add a border around this so I'm going to click on the colors and open that up and just do a small border there. Click on Update. I'm going to go up and add some padding. So on this one, I want to add about four clicks of padding, and then two on the side. Let's do that. And then also, there's an option for this block spacing. So I want to add a little bit of space in between each of the three blocks that I'm using. So we'll do that. And I think I have everything. Let's look at it on the front end. Click and refresh. I forgot to align the text. So let's go back to the header and we'll align that to the center. There we go. And we're good for that.

Group block demo #3

To add our last group block. I'm going to click on the three dots from the previous group and do an add after I'll type in for a group block. I'll pick the first option. I'm going to add a heading, and I'll style my heading to align text center from the toolbar at the top, and then I would add my gallery here like that, but there is the example has Several different images. So to save time, I'm going to do a quick back, back up. And what I'm going to do is just do a copy and paste instead of adding all of the so I'm going to click on that gallery, go to the three dots, and do a copy so I can add my images quickly. If I open up the gallery block, you see that they're all individual images. Okay, so we're going to go back up to our group block. We would rename it. You guys know how to do that. Now, on this one, I'm going to make it a full width, okay? And the other thing is to on my layout for the group block. For this one, I'm going to turn off this toggle, and this is going to make the images spread out a little bit more. So make sure I click that update, because that's a big update. I'm going to add a background, so I'm going to click on the styling, go to background and click on the brown. I need a little bit of padding here, so I'm going to go down to padding under dimensions and do two clicks on the top and bottom and two clicks on the side. We'll click update on that. Think everything looks good. Fingers crossed everyone. We'll do a refresh, and there we are.

Conclusion

See the resource section for the link to documentation about the group block. Have fun exploring all the ways to use the group block. Thank you for watching.

[westnz]

I have published the YouTube video and added the link and featured image to the Group block lesson. Can you please share the ttml version of the subtitles?

[lada7042]

Links where published.
Lesson- https://learn.wordpress.org/lesson/using-the-group-block/
YouTube- https://www.youtube.com/watch?v=UBcwrgVJhLA
WPTV- https://wordpress.tv/2024/06/11/using-the-group-block/