Editable blocks inside the Custom HTML block ![rw-book-cover](https://s.w.org/images/home/wordpress-default-ogimage.png) 🔗 **Source:** [Editable blocks inside the Custom HTML block](https://make.wordpress.org/core/2026/07/23/editable-blocks-inside-the-custom-html-block/) > [!note]+ Document Notes > --- > tags: [wordpress-7-1, block-editor, custom-html-block, block-variations, ai-generated-markup] > author: WordPress Core contributors > source: Make WordPress Core > reference: https://make.wordpress.org/core/2026/07/23/editable-blocks-inside-the-custom-html-block/ > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > --- > # 🏷️ Title: Editable blocks inside the Custom HTML block > ## 🧭 Table of Contents > - [📝 Summary](#-summary) > - [📖 Main Content](#-main-content) > - [🗒️ Notes](#️-notes) > - [📚 References](#-references) > - [🗣️ Paraphrase](#️-paraphrase) > - [📰 Newsletter](#-newsletter) > - [✅ Action Items](#-action-items) > - [🧪 Hypotheses](#-hypotheses) > - [📊 Methodology](#-methodology) > - [❓ Questions](#-questions) > - [🔮 Future Research](#-future-research) > - [💡 Implications](#-implications) > - [🧠 Learning Styles Assessment](#-learning-styles-assessment) > - [📊 Accessibility Assessment](#-accessibility-assessment) > - [🌍 DEIB Assessment](#-deib-assessment) > - [✅ Logical Validity](#-logical-validity) > - [🛡️ DARVO Analysis](#-darvo-analysis) > - [🎯 Conclusion](#-conclusion) > - [🔄 Refactor Appendix](#-refactor-appendix--editable-blocks-inside-the-custom-html-block) > - [🧰 Template Library](#-template-library) > ### 🔗 References > - [Editable blocks inside the Custom HTML block](https://make.wordpress.org/core/2026/07/23/editable-blocks-inside-the-custom-html-block/) > - [Editable inner blocks implementation](https://github.com/WordPress/gutenberg/pull/79115) > - [Block variation innerContent support](https://github.com/WordPress/gutenberg/pull/79659) > ## 📝 Summary > - WordPress 7.1 lets a Custom HTML block contain regular editable blocks between static HTML fragments. > - Inner blocks are editable but structurally locked: users cannot move, remove, or add siblings. The surrounding markup remains fixed and round-trips without changing. > - `core/html` block variations gain `innerContent`, which maps static fragments around `innerBlocks` slots and exposes the result as a named inserter item. > - Theme authors, plugin developers, agencies, content editors, and AI-tool builders are the main stakeholders. > - Bottom line: developers can ship fixed markup shells with controlled editing slots without creating a custom block or build pipeline. > ## 📖 Main Content > - **Mixed content model:** The Custom HTML block can now interleave static markup and block delimiters. In the canvas, WordPress renders the shell but lets users edit the embedded blocks. > - **Locked structure:** The inner blocks are content-editable but not structurally editable. Users cannot move or delete them, and cannot add sibling blocks. This preserves the author-defined shell. > - **Round-trip behavior:** The full source remains available in the Edit HTML modal, and serialization preserves existing content. > - **Variations:** A `core/html` variation can define `innerContent` as static fragments plus `null` placeholders aligned with `innerBlocks`. This creates a higher-level inserter item with constrained slots. > - **AI angle:** Generated block markup can contain editable slots without a custom block. The source calls this immediately safe to edit, though safety here means structural editing constraints, not security validation or content accuracy. > - **Scope:** `innerContent` applies only to `core/html` variations and is ignored for other blocks. > ## 🗒️ Notes > - The feature creates a middle ground between a free-form Custom HTML block, a pattern, and a custom block. > - The shell belongs to the developer; the editable slot belongs to the content author. > - A pattern normally lets users alter structure. This variation keeps the shell fixed. > - The same design suits AI-generated components because the model can produce a shell while leaving selected text editable. > - Security review still matters: editable blocks inside a Custom HTML block do not make arbitrary generated HTML trustworthy. > - Accessibility review still matters: a locked shell can preserve good semantics or preserve a mistake users cannot repair. > ## 📚 References > - [Make WordPress Core dev note](https://make.wordpress.org/core/2026/07/23/editable-blocks-inside-the-custom-html-block/) > - [Gutenberg PR 79115](https://github.com/WordPress/gutenberg/pull/79115) > - [Gutenberg PR 79659](https://github.com/WordPress/gutenberg/pull/79659) > ## 🗣️ Paraphrase > - WordPress now treats the Custom HTML block as a container that can expose selected nested blocks for editing while leaving the raw shell inert. > - Editors can change the intended content but cannot rearrange the component's structure. > - Developers can register these shells as block variations using static fragments and slot markers. > - This cuts the cost of shipping small structured components, but it also puts more responsibility on the shell author to get semantics, security, and responsive behavior right. > ## 📰 Newsletter > WordPress 7.1 gives the Custom HTML block a surprisingly useful new trick: fixed HTML can now wrap regular editable blocks. Think testimonial card, promo banner, or odd legacy component where the editor should change the words but not pull the structure apart. Block variations can package those shells as inserter items with no custom block or build step. It's a sharp tool, so test semantics and generated markup before calling it safe. [Read the dev note](https://make.wordpress.org/core/2026/07/23/editable-blocks-inside-the-custom-html-block/). > ## ✅ Action Items > #### DevRel > - Demo a fixed shell with two editable slots and explain its limits. > - Publish a comparison of Custom HTML variations, patterns, and custom blocks. > - Collect agency use cases and failure reports. > - Measure whether the feature reduces time to ship small structured components. > #### OSPO > - Document ownership for shared shell markup. > - Add accessibility and security review to variation contribution policy. > - Track third-party snippets and their licenses. > - Encourage upstream examples with tests and provenance. > #### Community > - Maintainers: publish tested starter variations. > - Contributors: add docs and edge-case tests. > - Sponsors: support accessibility review for common shells. > - Ecosystem: share examples that explain when a custom block remains the better choice. > #### WordPress > - Core: define serialization and invalid-block edge cases. > - Core Performance: compare output and editor cost with patterns and custom blocks. > - Core AI: constrain generated shells and label what remains unverified. > - Core Program Team: coordinate documentation, security, accessibility, and release testing. > - Mobile: confirm whether mixed Custom HTML editing is supported or safely degraded. > - Playground: host copyable labs for variations and malformed markup. > - Community: teach the feature in developer sessions. > - Training: add a lesson on choosing the right block abstraction. > - Marketing: describe the editing constraint accurately; avoid broad no-code claims. > - Support: document recovery when a shell becomes invalid. > - Design: define clear locked-state affordances. > - Documentation: publish API shape, examples, and limitations. > - Photos: no direct action. > - TV: caption a short implementation demo. > - Polyglots: test editable text and translation workflows inside fixed shells. > - Accessibility: audit semantics, focus order, labels, and locked error recovery. > - Meta: consider controlled shells for repeated WordPress.org interface content. > - CLI: add examples for registering variation code in scaffolds. > - Hosting: include the feature in 7.1 editor compatibility tests. > - Tide: scan variation code for unsafe or invalid markup where feasible. > - Openverse: test image and attribution blocks when placed in fixed shells. > - Themes: publish semantic, responsive shell examples. > - Plugins: review generated markup, capabilities, and sanitization. > #### The WPCC > - Fund reusable, accessible variation examples and independent testing. > - Sponsor docs that help small maintainers avoid unnecessary custom blocks. > ### FAIR > - Keep shell definitions portable and inspectable. > - Record provenance for generated or copied markup. > - Define operator rules for accepting third-party variations. > ## 🧪 Hypotheses > - Fixed shells with editable slots reduce development time for small content components. > - Editors m In WordPress 7.1, the Custom HTML block supports interleaving static HTML with regular, editable blocks ([79115](https://github.com/WordPress/gutenberg/pull/79115)): ``` <!-- wp:html --> <div class="banner"><h1>Static heading</h1><!-- wp:paragraph --> <p>Editable paragraph</p> <!-- /wp:paragraph --><footer>Static footer</footer></div> <!-- /wp:html --> ``` In the editor, the static markup renders inert while the inner blocks are editable in place — but locked: they can’t be moved, removed, or have siblings added. The surrounding structure stays intact. The full markup remains accessible in the “Edit HTML” modal, and serialization round-trips unchanged, so existing content is unaffected. This also makes block markup a friendlier target for AI tools: a model can generate one Custom HTML block mixing arbitrary markup with editable slots — no custom block, no build step — and the output is immediately safe to edit. #### Registering variations as “higher level blocks” Block variations now accept an `innerContent` field ([79659](https://github.com/WordPress/gutenberg/pull/79659)): an array of static HTML fragments where each `null` marks the position of the corresponding `innerBlocks` entry. This lets you ship a fixed markup shell with editable slots as its own inserter item — no custom block needed: ``` wp.blocks.registerBlockVariation( 'core/html', { name: 'testimonial-card', title: 'Testimonial Card', icon: 'format-quote', innerContent: [ '<div class="testimonial-card">', null, '</div>' ], innerBlocks: [ [ 'core/paragraph', { content: 'An inspiring quote.' } ], ], } ); ``` Inserting the variation produces a Custom HTML block with the preset structure and an editable paragraph inside it. Unlike a pattern, the user can edit only the designated slots, not the structure. `innerContent` only applies to `core/html` variations; it is ignored elsewhere., Editable blocks inside the Custom HTML block, WordPress Core contributors, 01ky7rgvgwnym3v2yyz5j065q8.