When designing posts or pages with complex layouts, blocks are often nested inside other blocks (for example, placing an image or a text paragraph block inside a column block).
Because these blocks are layered, clicking on an item usually selects the innermost element first. This guide explains how to easily navigate up the "layer stack" to select the parent block using the floating toolbar.
Understanding Nested Blocks
A common example of nesting blocks is when using the Column block Layout:
- The Parent Block: The overall Columns block that controls the layout (e.g., number of columns, background color).
- The Child Block: The individual Column inside that layout.
- The Grandchild Block: Content inside that column, such as an Image, Paragraph, or Gallery block.
Screenshot: A column block (parent), setup with 3 individual columns (child blocks), with an image block nested inside each column (grandchild blocks)
Step-by-Step: Selecting the Parent Block
If you click on an element and notice you've only selected a single item instead of the group it belongs to, use the Parent Selection shortcut:
- Click the inner element (e.g., a single image or a specific text block) to activate it.
- Look at the floating formatting menu that appears directly above or below your selection.
- Click the very first icon on the left side of that floating menu (this is typically the "Select Parent" or "Group" icon).
- Once clicked, your selection will automatically expand to the next layer up.
Tip: You can check the right-hand sidebar menu to confirm your selection. The sidebar settings will update to reflect the parent block's controls (such as changing column counts or gallery layouts).
GIF Video: You can select each individual block by simply clicking on them. To select the parent block, first click an individual block > navigate to the floating menu > click the first icon
