Exercise 3: Grouping Content and Making Reusable Blocks in Gutenberg

Click the "+" icon below our column to add another image.

Add image.

Always select "Media Library" instead of an upload to avoid multiples of the same images getting uploaded many times on the same website.

Select an image.

Place image.

Click this icon to display the List View of all content.

Here we have a list view of our columns and our image at the bottom. Notice it is formatted in a nesting order.

In order to group, we can only group on the same level of nesting. We can group the top level of "Column" and "Image" together. By holding down click and dragging with our mouse all our content in our block area, we can see we've highlighted all content by both the blue outline around our content, and the highlighted blue in our list view. Click the three dots.

Click "Group"

Now our list view shows we have grouped our elements. Click the three dots again to ungroup.

Click "Ungroup"

Now the list view shows the elements are ungrouped.

Other than clicking and dragging, you can also select one side of the column, and click the highlighted column button.

Then, select the column button again to select the highest level, called "Columns". Note how the icons match the list view and highlight accordingly.

Holding down shift, select the image as well to highlight that in list view and to have all elements selected.

Click the three dots.

Click "Group"

Click the three dots.

Click "Add to Reusable blocks"