Group – core/group

Combine blocks into a group.

Use the Group block to wrap your blocks in a container. Embed a variety of blocks. Choose the background colour for the group.

Screenshot

Examples

This is the first paragraph in a Group block with the background colour set to Very light gray.

Media and text

Paragraph with a background colour inherited from the Media and Text block and Cyan bluish gray Text colour.

This is a Group set to Full width. It has white text with a dark grey background.

It doesn’t appear as Full width since it’s being displayed inside a template part which is normal width.

This is a Group set to Wide width. It has black text with a cyan bluish gray background. As with the Full width group block, it doesn’t appear as Wide width since it’s contained within a template part of normal width.

Note: The padding is set to 20 pixels all around.

Notes

  • A group block can be aligned: wide or full.
  • Use Block navigation to select the Group block.
  • The default content is a placeholder [block core/paragraph].
  • Settings include:
    • Layout.
    • Colour settings: text colour, background colour and link colour.
    • Spacing: Padding ( in pixels ).
  • Save the Group block as a Reusable block.

Toolbar icons

  • Change alignmentUse Change alignment to choose the alignment
    • Align leftAlign to the left
    • Align centerAlign in the center
    • Align rightAlign to the right
    • Wide widthIncrease the width of the block beyond the content size. Requires theme support.
    • Full widthExtend the block to cover the full width of the screen. Requires theme support.
  • More optionsDisplay more options
    • Show More SettingsShow the block settings in the sidebar.
    • CopyCopy the block to the clipboard.
    • DuplicateUse Duplicate to create a copy of the block.
    • Insert AfterInsert a new block after the selected block(s).
    • Insert BeforeInsert a new block before the selected block(s).
    • Move To Use Move To to move a block. Up/Down or Left/Right
    • Edit as HTMLEdit the HTML of the block.
    • GroupTransform the selected block(s) into a group.
    • Add to Reusable blocksCreate a Reusable block.
    • Remove blockDelete the block.

More examples