Transcript
Introduction
In this lesson we will examine designing with the Group block. The Group block is a container that allows you to bundle multiple blocks together. Think of it as a box that can hold other boxes inside it. This feature helps you organize your content and apply styles to multiple elements at once. When the Group block is created you will find different variations to choose from, namely group, row, stack and grid. But in this session we will focus on the default grouping option to arrange in a box in a container.
Customizing
Once you’ve added a Group block you can start filling it with content. Click on the Inserter or plus icon and then select the blocks one by one. Another option is to select all the blocks you want to group in the List View. Then you can use the block toolbar to group them or click on the three vertical dots and then select Group. And now you will notice all these blocks have been nested in a Group block. Now we can start styling and customizing this section or group to our liking. We can change the background color. We can tweak the dimensions by adding padding and I will update the alignment of the Group block to full width. To keep your design organized you can also rename your Group block. Click on the three vertical dots in the List View, select Rename and then add a descriptive name. Let’s look at a quick example where we add all these steps together. I want to add a testimonial section and have already added a Heading block and two Columns blocks.
Next I will select all three blocks in the List View and then click on Group in the block toolbar. Now these blocks have been nested in the Group block and the next step is to rename the block to Testimonial. Then we can style our blocks so we’ll make our way to our sidebar settings, open Styles and then I will select one of the style variations that come with the Twenty Twenty-Five theme followed by adding some horizontal and vertical padding or space around the content in my block. And lastly I will add a 10 pixel border around my Group block.
Inner blocks use content width
Next let’s discuss “Inner blocks use content width.” One thing you will notice when you add a Group block and nest other blocks within it and change the background color is that Inner blocks use content width is enabled by default. What does that mean? It means blocks inside a group inherit the width defined by your theme. So even if you change the alignment of the Group block to wide width or for example full width the blocks don’t follow suit. The inner blocks remain at a standard width typically centered but if you disable Inner blocks use content width the inner blocks will expand to full the width of the group offering more flexibility in design.
Sticky header
Did you know the Group block can be made sticky? This is especially helpful for example when you want to make a header stick. Let’s see how it works. I am in my page template where I am able to modify my header and footer. So let’s go ahead and select the header, click on the three vertical dots and then wrap it in a Group. Then we can make our way to settings and scroll down to position. When you click on Default you can scroll down a little bit and then select the option to stick the block to the top of the window. Two things to remember though is to firstly change the background color of the Group block so that it is not transparent meaning that if you don’t change the background color the text you scroll over will be visible. And the second is to return to settings and deselect Inner blocks use content width. And now we can preview it on the front end.
Responsiveness
Lastly it is also important to note that the Group block is responsive by default and when we preview it on mobile we will see it automatically adjusts its layout.
Conclusion
To conclude, utilizing the Group block streamlines the design process making it both simpler and more efficient.