← All posts

Gutenberg Nested Blocks: Parent and Child Blocks in FanCoolo WP

fancoolo

Gutenberg nested blocks let you build a parent block that only accepts the child blocks you choose. This video shows why that matters and how to create a parent and child block in FanCoolo WP. You get the parent to allow only the child, insert one child automatically, and put your styles in one place.

Why nest blocks in Gutenberg

We nest blocks for two reasons:

  • You control what editors can add. When an editor places the parent block (think of it as a section), you decide what they can put inside it. You can lock it down or filter it to specific blocks.
  • Styling stays scoped. The parent owns the layout and look, and the children only hold content.

Native examples: Gallery and List

Core Gutenberg already works this way.

Gallery. When you add a Gallery, the List View shows an Image block for each picture inside it. Select the Gallery itself and you set options once for all images. That covers styles, randomized order and one aspect ratio for every image.

List. A List block contains List Item blocks. You write the items, and the parent List block holds the style options. In the Styles panel you can switch between Default and Checkmark, and you can also switch to a numbered list.

In both cases the parent sets the rules and the children only hold content. That is the pattern we copy below.

Building a parent/child block

We build two blocks in FanCoolo WP → Editor, both with the Blocks component type: one called Child and one called Parent. On screen the parent block is spelled "Parrent", so its block name and CSS class show up as parrent in the code below.

Create the child block

We always create the child first, because the parent needs it to exist before we can pick it.

  1. In FanCoolo WP → Editor, choose Blocks, enter the title Child and click Create.
  2. In the Content tab, add a paragraph with the text "child element".
  3. If you need editable values, you can add them under Attributes → Add attribute. In this video the content stays hardcoded.
  4. Click Save, then reload the page. The parent can only find the child in its block list after you save and reload.

Create the parent + Allowed Blocks

  1. Create a second block named Parent. Its Content tab starts with the default wrapper:
<div <?php echo get_block_wrapper_attributes(); ?>>

    <!-- Your code goes here -->

</div>
  1. In the right sidebar under Settings, turn on Inner Blocks Settings.
  2. In Allowed Block Types, select fancoolo/child. You can add more than one block here. If you leave the field blank, all blocks are allowed.

Add one child block by default

  1. In Block added by default, select fancoolo/child again. Now every time someone inserts the parent, one child block is added inside it right away.

The same panel also has Lock Template, which stops users from adding, removing or moving blocks (set to False here). It also has Parent Block, which limits where a block shows up in the inserter. We leave both at their defaults.

Add InnerBlocks support

  1. Save the block. Then add inner blocks to the parent so it can actually hold children. With inner blocks in place, you get the + button inside the parent in the editor.

Result: parent auto-adds a child

Reload the page editor and search the inserter for "par". The Parent block appears next to Paragraph. Insert it and it already contains one child element. You can duplicate that child to add more.

Where to style: child vs parent (DRY CSS)

Each block has its own Style tab with the block's class already filled in. For the child:

.wp-block-fancoolo-child {

}

For the parent:

.wp-block-fancoolo-parrent {

}

You can style either one, but the parent is the better place. If you style inside the child, you get a CSS file for every child. If you style in the parent, you get one CSS file per parent. That way you reuse your styles and keep them DRY.

FAQ

What are nested blocks in Gutenberg? A nested block is a parent block that holds other blocks inside it. Core examples are Gallery, which holds Image blocks, and List, which holds List Item blocks. The parent sets the options and the children hold the content.

How do I restrict which blocks can go inside a parent block? In FanCoolo WP, turn on Inner Blocks Settings on the parent. Then add the allowed blocks, such as fancoolo/child, to Allowed Block Types. If you leave it blank, all blocks are allowed.

Why doesn't my child block show up in the parent's Allowed Block Types? Save the child block first, then reload the page. The parent only picks up the child from the list after it has been saved.

Can the parent insert a child block automatically? Yes. Set Block added by default to your child block, and every new parent starts with one child inside.

Should I put CSS on the child or the parent block? Put it on the parent when you can. Styling the child gives you a CSS file per child, while styling the parent gives you one CSS file per parent.

Get FanCoolo WP → dplugins.com

Related posts