skills.rest
petenelson
petenelsonCOMMUNITY
Explore all skills by this author →
Website𝕏@CodeGeekATXGitHub

10up-inner-blocks

Build nested Gutenberg block layouts using InnerBlocks for parent and child blocks.

87|32|Updated Jul 3, 2015
Search Tags:#templates#wordpress#gutenberg#parent-child#block-editor#innerblocks#nested-blocks
One-click install
npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-inner-blocks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 10up-inner-blocks
Source: https://github.com/petenelson/wp-rest-api-log/tree/main/.claude/skills/10up-inner-blocks
Command: npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-inner-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables building modular, reusable Gutenberg blocks by nesting blocks inside other blocks, simplifying complex layouts and content composition.

Core Features & Use Cases

  • Nested content organization through InnerBlocks for parent/child blocks
  • Template and templateLock support for predictable layouts
  • Support for allowedBlocks and dynamic composition for containers like cards, grids, sections

Quick Start

Set up a parent block that uses InnerBlocks and define a TEMPLATE to seed child blocks.

Frequently Asked Questions about 10up-inner-blocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create nested Gutenberg blocks with InnerBlocks in WordPress?▼

InnerBlocks in Gutenberg works by allowing a parent block to render and manage child blocks inside its edit component. You define parent/child relationships and control the nested content structure using the useInnerBlocksProps hook in edit.js.

How do I lock a block template and restrict allowed blocks in Gutenberg?▼

To set up a parent block, define a TEMPLATE array in your edit.js to seed default child blocks. You then apply useInnerBlocksProps to manage the nested content area, establishing the parent/child relationship for your custom layout.

When should I use parent-child blocks instead of a single block in WordPress?▼

InnerBlocks supports both dynamic composition and strict templateLock for predictable layouts. You can use allowedBlocks to let users insert specific child blocks, or apply templateLock to fully restrict the layout to a deterministic, reusable structure.

How do I define a template for nested blocks in the block editor?▼

You define a template by passing a TEMPLATE array to useInnerBlocksProps in your block's edit.js file. This seeds the parent block with specific child blocks automatically, creating a deterministic and reusable starting structure for content composition.

Related Skills

Explore More Software Engineering Skills→
WesleySmitsWesleySmits
6

generating-wordpress-fse-blocks

Generate WordPress Full Site Editing blocks and theme scaffolding.

Community
Advanced
oileroiler

wordpress-blocks

Create WordPress Gutenberg blocks with PHP render callbacks and register_block_type.

Community
Intermediate
wpgauravwpgaurav
14

wp-block-quick

Scaffold custom Gutenberg blocks for WordPress using the Block API and @wordpress/scripts.

Community
Intermediate
codigodoleocodigodoleo
13

superpowers-sage:wp-block-native

Build native Gutenberg blocks in Sage projects with block.json and Vite assets.

Official
Advanced