Template Builder (Layout & Titlebar)

The Template Builder is a separate editor focused on layout schema for templates and titlebars. It is intentionally layout-only: no data fetching or WP_Query logic should be present in this system.

Key concepts

• Node tree schema: nodes have type, id, children, and style fields
• Builder types: template and titlebar (some node types include both)
• Compiler: schema JSON → compiled PHP + CSS used by the runtime

Where to look in the codebase

• Editor mount and injected data: admin/templates/template-builder/editor-page.php
• Node type registry: admin/assets/js/src/template-builder/config/nodeTypes.js
• Template Builder state: admin/assets/js/src/template-builder/stores/useTemplateBuilderStore.js
• Compiler (schema → PHP/CSS): includes/class-sanilwb-template-compiler.php
• Runtime schema renderer (fallback): includes/class-sanilwb-schema-renderer.php
• Canvas iframe renderer: admin/assets/js/src/template-builder/utils/renderCanvas.js

Adding a new node type (checklist)

1. Add entry to NODE_TYPES in nodeTypes.js with type, label, canHaveChildren, defaultValues, and dialogTabs.
2. Add compiler HTML case in includes/class-sanilwb-template-compiler.php (case 'your-type':) to render HTML output.
3. Add CSS builder method in the compiler (build_{type}_style()), mirror existing build_button_style() or build_div_style().
4. Add JS-side style generation to admin/assets/js/src/template-builder/utils/buildNodeStyles.js so the iframe preview matches compiled output.
5. Add runtime schema renderer case if needed in includes/class-sanilwb-schema-renderer.php.

Developer notes

• The Template Builder must remain layout-only — avoid introducing data fetching in the builder UI.
• Preview iframe sizing and responsive breakpoints are defined to match compiler media queries.