• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    How and When to Use the Gutenberg Group Block

    February 5, 2023 by ProfK Leave a Comment

    After I became comfortable with Gutenberg (WordPress editor), I started looking for ways to take my skills to the next level. The Gutenberg Group block is a powerful tool for placing several blocks together in a single container. In this article, I discuss how and when to use the Group block.

    How to Use the Gutenberg Group Block

    1. Individual Blocks Into Group Block

    The simplest way to begin is by using individual blocks as needed. Let’s say you have a Heading block followed by 3 Paragraph blocks. Select all 4 blocks. The toolbar now shows the option to group them. You’ll see the group icon in the toolbar itself, as well as in the dropdown menu for “Transform To” and “Options::

    Gutenberg group block containing 4 blocks

    2. List View

    Using the same approach as method #1 above, start with the individual blocks you need. We’ll continue with the example of a Heading block and 3 Paragraph blocks. Instead of selecting the 4 blocks in the editor area, open up the List View (3 lines at top left of the Editor) and select them there. Next, click on the Toolbar options (3 vertical dots) and click on “Group“.

    Gutenberg group block containing 4 blocks - listview

    What’s really cool about the List View is that it provides a visual representation of the blocks in an outline format. When there are a lot of blocks grouped together, the List View helps you find a specific block.

    3. Add Group Block First

    You can use the Group block to begin a new section, then add other blocks inside it. Choose one of the following options for “Add block“:

    • Type a backslash “/” at the start of a new paragraph. If you see the Group block in the short list, great! Otherwise, type the letter “g” or “group” after the backslash to filter the block list and select “Group“.
    • Click on the plus (+) sign to display the abbreviated list of common blocks, which normally includes the Group block. If you don’t see the Group block here, type “group” in the search field OR click on “Browse all” to display the full list.
    Shortlist of Gutenberg blocks
    • Use the “Toggle block inserter” plus (+) sign at the top left of Editor to display the entire list of blocks. Browse through the list (it’s in the Design section) or type “group” in the search field.
    Top of window Add Block Plus Sign
    Add Blocks List
    Insert Other Blocks into the Group

    Now you can start inserting other blocks into the Group block. Any type of block can be added or moved into a Group block. We’ll continue with our original example of a Heading block and 3 Paragraph blocks.

    METHOD 1 – Add New Blocks
    1. Select the Group block.
    2. Add block by clicking the plus “+” sign. Choose the Heading block, then type the head.
    3. Insert additional blocks with either a hard return or by clicking the plus “+” sign.
    add blocks to Gutenberg group block
    Add blocks to group block
    METHOD 2 – Select and Copy, then Paste into Group Block

    Select the desired blocks. Go to the options icon (3 dots) in either the Toolbar or List View, then click on “Copy blocks“.

    Copy blocks using the toolbar
    Select and Copy Using the Toolbar
    Copy blocks using the listview
    Select and Copy Using the List View

    Next, you’ll paste the copied blocks inside the Group block. The technique is simple.

    1. Select the Group block.
    2. Add a paragraph block by clicking the plus “+” sign.
    3. Paste the copied blocks. It doesn’t matter if the copied blocks are paragraphs or not. Whatever you copied will be pasted inside the group block!
    add blocks to Gutenberg group block
    Add blocks to group block
    add paragraph to group block
    Add paragraph to group block
    paste copied blocks here
    Paste copied blocks here
    METHOD 3 – Click and Drag into Group Block

    This method can be used in the Editor area or in the List View. In the Editor, it’s best to configure the Toolbar so that it sits above the block you’re working on (rather than in the static, sticky position at the top of the Editor): this gives you access to the Drag tool. Once you’ve selected the blocks you want, drag them into the Group block. Hover above the 6-dotted grid in the toolbar to activate the Drag tool.

    Moving the Gutenberg Blocks

    The Moving Handles will allow you to reposition the individual or grouped blocks up or down as usual, one block at a time. However, the Moving Handles can’t move blocks from the outside to the inside of a Group block. Nor can the handles move blocks from the inside to outside of a Group block.

    Move handles inside group
    Moving Handles inside a group block
    Move handles and Add block options inside/outside a group
    Moving Handles and Add block inside a group block

    Insert Other Blocks BEFORE or AFTER the Group

    You can add blocks before or after the grouped set, too. Just be sure you’ve selected the Group block! The List View can help avoid confusion. Click on the options icon (3 dots) and select “Insert before (or after)“. Alternatively, hover above or underneath the grouped set and click on the plus “+” sign.

    Ungroup

    If you decide to unlink the blocks, you can separate them at any time! Select the group, go to Toolbar options (3 vertical dots), and click on “Ungroup“.

    Developer Tip

    If you examine the code on the front-end with Developer Tools, you’ll see that each Group block is actually a generic <div> HTML element. These <div>s use classes, which are either “wp-block-group” or another class that includes “wp-block” as its prefix (such as “wp-block-group__inner-container“. Essentially, then, the Group Block is Gutenberg’s UI for the <div> element.

    Under “Advanced“, you can change the default from <div> to other semantic elements, including <header>, <main>, <section>, <article>, <aside> and <footer>.

     

    When to Use the Gutenberg Group Block

    There are many advantages to grouping 2 or more blocks. Here are my top 4:

    1. Easily move the group to a new position on the page/post
    2. Apply styles to the entire group (for example, background color)
    3. Very useful for containers with complex layouts
    4. Can be saved as Reusable

    1. Easily Move Elements – My Calendar Page

    I began using the Group block on the Calendar page in my blog. The listings became a bit unwieldy, so I decided to group blocks together for easier duplication and repositioning. Below, I illustrate the List View before and after grouping. Notice how consolidated everything gets in the list after grouping:

    Calendar - before grouping blocks
    Calendar – before grouping blocks
    Calendar - grouped blocks
    Calendar – grouped blocks

    2. Apply Styles to the Set

    Rather than styling each individual block, you can apply certain shared attributes to the entire set. I have found this feature a bit quirky. Custom theme styles, for instance, will override styles you attempt to apply to a group. I’m hoping that the kinks are ironed out as the feature evolves. But, for now, I recommend using the Kadence plugin, which provides a Section block with many style options. You still might need to style individual blocks within a group and/or section to get the results you want.

    Below is a comparison of heading color, text color, and background color applied individually vs. the group:

    • Heading color = blue
    • Text color = purple
    • Background color = yellow
    Individual styles

    After inserting a Section block, I duplicated the Heading and 2 Paragraphs and grouped them. I then moved the group into the section. Here are the settings I used for the section and the results:

    Styles applied to the group

    Notice that there are no gaps between the heads and paragraphs.

    Kadence section block options
    Kadence section block options

    3. Complex Layouts

    The following layout (“Developer Tip“) is relatively complex, yet readily achieved using a group inside the Section block.

    Developer Tip

    Several blocks are inherently grouped. You can use them inside any other group to enhance a page layout. Explore and play with them!

    • Lists
    • Columns
    • Media & Text
    • Gallery
    • Pullquote
    • Quote

    The List View shows its structure:

    complex layout - group

    4. Reusable Blocks

    There comes a time when you realize that it would be prudent to save a block so that you can reuse it. There’s a tool for that! We’ll return to my Calendar page for our example.

    • Select the Group that you want to save as reusable.
    • Go to the Toolbar options and click on “Create Reusable block“.
    Create Reusable block
    • Name the Reusable block (Calendar entry in our example)
    Naming a Reusable block
    • Add block wherever you want the new block
    • Be sure to Browse all
    • Click on the Reusable tab and select the block you want (Calendar item)
    Insert Reusable block
    IMPORTANT NOTE on Editing Reusable Blocks

    If you use a Reusable block exactly as is, all is well. However, if you edit it in any way, you will also be changing the saved version of it in the Reusable blocks area. BEFORE YOU EDIT ANYTHING, be sure you Convert to regular blocks!

    Toolbar options > Convert to regular block

    Video Tutorial

    If you prefer learning by watching, check out my video tutorial that shows you how and when to use the Gutenberg group block.

    VIDEO!

    Related Posts

    WordPress Maintenance – The Essentials
    Beginner’s Guide to Gutenberg Blocks
    Installing WordPress Plugins
    How Do I Install a WordPress Theme?

    Filed Under: WordPress Tagged With: containers, div, Gutenberg, Gutenberg blocks, Gutenberg group block, List View, wp-block

    Reader Interactions

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    StudioPress
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design