Multiple Editable Zones
Use SlotBlocks when one block needs more than one child area
WordPress only allows one InnerBlocks area per block. Use SlotBlocks when a single block needs multiple independent editable zones, such as footer columns, mega menu regions, or a header with separate navigation and CTA areas.
For normal nested blocks, start with Nested Blocks. Reach for SlotBlocks only when one InnerBlocks area cannot model the layout.
Create Named Slots
Each SlotBlocks call creates or renders a hidden core/slot-group for the given id.
import { defineBlock, EditableText, SlotBlocks } from "eddev/blocks"
export const meta: BlockMeta = {
title: "Site Footer",
inserter: false,
templatePart: {
area: "footer",
slug: "siteFooter",
},
}
export default defineBlock("parts/footer", () => {
return (
<footer>
<section>
<EditableText
as="h2"
store="subscribe-heading"
defaultValue="Stay in the loop"
plainText
/>
<SlotBlocks
id="subscribe-text"
title="Subscribe Text"
allowedBlocks={["core/paragraph"]}
appender={{ type: "button2" }}
orientation="vertical"
/>
</section>
<nav>
<SlotBlocks
id="footer-primary-links"
title="Primary Footer Links"
allowedBlocks={["core/navigation-link"]}
appender={{ type: "button2" }}
orientation="vertical"
/>
</nav>
<div>
<SlotBlocks
id="footer-legal"
title="Footer Legal"
allowedBlocks={["core/navigation-link"]}
appender={{ type: "button2" }}
orientation="horizontal"
/>
</div>
</footer>
)
})Use stable slot IDs. Changing an id later creates a different editable region, so existing content will not appear in the renamed slot.
Add Editor Layout Classes
Use adminClassName when the editor needs layout hints that are different from the frontend wrapper.
<SlotBlocks
id="footer-columns"
title="Footer Columns"
allowedBlocks={["parts/footer-group-main"]}
adminClassName="grid grid-cols-1 md:grid-cols-3 gap-4"
appender={{ type: "button2" }}
orientation="vertical"
/>When Not To Use It
Do not use slots for ordinary sections, accordions, cards, or button rows. A normal InnerBlocks container is simpler, easier to query, and should be the default. See Nested Blocks for the simpler pattern.