Practice: Control Child Blocks and Movement
Configure a two-child section that allows text editing and reordering while preserving its child count.
Extend the nested section recipe by creating a separate Stay Summary shell. It should start with a heading and paragraph, allow those two children to change order, and preserve that starting child count through normal editor controls.
Your task
pnpm forgewp make:shell StaySummary --layout=stack --yesWork in src/blocks/StaySummary.tsx and keep the recipe's Content Section block too.
Configure:
- Registered name
stay-summaryand title Stay Summary. - Allowed direct children:
core/headingandcore/paragraph. - A starting
h2reading Your stay at a glance and a paragraph reading A comfortable base for exploring the coast. templateLock: "insert".- A vertical arrangement with a bordered, padded shell.
Choose the right lock
templateLockAdd or remove children Reorder children Edit child text falseAllowed Allowed Allowed "insert"Restricted Allowed Allowed "all"Restricted Restricted Allowed |
|---|
These describe the shell's structural lock. Check them in your site's editor context: roles, surrounding templates, and other block locks can add restrictions. allowedBlocks controls eligible direct child types; templateLock controls structural operations on the nested composition.
Acceptance criteria
- A fresh Stay Summary starts with exactly the configured heading and paragraph.
- Editors can change both children's text, save, and reload those edits.
- Normal child insertion and removal controls are restricted by the
"insert"lock. - Editors can reorder the two children where other editor settings permit it.
- The visitor sees the saved text and order inside the shell.
- Content Section from the recipe remains flexible and can still accept images.
- Two Stay Summary instances keep independent text.
Use List View to distinguish the selected child from its parent. The inner lock applies to the children; configure Page-level restrictions separately if you also want to control moving or removing the whole parent section.
Hints
Hint 1: Define the starting children
Each template row is [blockName, initialAttributes]. Give the heading level: 2 and set each child's initial content. This supplies a new instance's starting composition.
Hint 2: Preserve content editing
Use "insert" for the main task. It preserves the nested structure while allowing movement and editing of the existing children. The child blocks supply their usual text controls.
Hint 3: Test one layer at a time
Test Stay Summary on a Page where the surrounding template allows normal editing. Then repeat with the client's role and intended Page configuration to see the combined editing experience.
Verify and compare
pnpm typecheck
pnpm forgewp export --validate --strictUpdate the theme and insert a fresh Stay Summary. Test the acceptance criteria on that instance, save, reload the editor, and inspect the visitor page.
Compare your implementation with Solution: Structured Stay Summary.
Extension: preserve the order too
Change the lock to "all", export, and test a fresh instance. Confirm that text editing still works while child reordering is restricted. Compare all three lock modes deliberately; choose the editing contract that fits your client.