Turn It On#
Add auto_editable: true to block front matter:
title: Herocategory: Sectionsauto_editable: true---<section> <h1>Build faster</h1> <p>Create pages from clean theme markup.</p> <a href="/contact">Start a project</a> <img src="sample/hero.jpg" alt="Hero image"></section>The text, link, and image become editable in Gutenberg. The values you write in the template become the defaults. The visible block preview keeps the frontend-rendered markup. Inferred values also appear in the block's Editable Content controls, so they can be edited without changing the preview's HTML shape. In the editor list and sidebar, inferred elements use readable names such as Heading 1, Paragraph, Link, and Image.
What Becomes Editable#
TemplateX can infer simple leaf text:
<h2>Services</h2><p>Strategy, design, and development.</p><div>Editable div text.</div><section>Editable section text.</section><span>Featured</span>A leaf text element contains plain text only. Wrapper elements can still contain editable children:
<section> <p>Editable paragraph.</p> <div>Editable div text.</div></section>When a <section> wraps other elements, it is structure. The nested leaf text becomes editable.
It can also infer static links and images:
<a href="/about">About us</a><img src="sample/team.jpg" alt="Team portrait">The inferred fields are hidden block attributes. They appear in the Editable Content controls, separate from normal declared fields.
Code examples are editable when a <pre> wraps one plain-text <code> element:
fields: language: text---<pre> <code class="language-{{ language }}">Enter Code...</code></pre>The code text stays editable in the block preview. TemplateX keeps a frontend-shaped pre > code preview layer and places the editor control over it without changing the block's layout. Dynamic attributes such as the language class can still come from normal block fields. Whitespace between <pre> and <code> is treated as authoring indentation, so it is not rendered as extra blank lines.
What Gets Skipped#
TemplateX skips markup when inference would be unclear:
<p>{{ intro }}</p><p><?php echo esc_html( $intro ); ?></p><picture> <img src="sample/team.jpg" alt="Team portrait"></picture><img src="sample/team.jpg" srcset="sample/team-large.jpg 2x" alt="Team portrait">Use explicit block fields when you need custom controls, repeaters, responsive image markup, or dynamic values.