PageBuilder-Integration und Inline-Editing

Im Editor markiert der Builder jede ausgegebene Einstellung automatisch, damit Redakteure Texte direkt auf der Seite bearbeiten können. Ein Klick wählt den richtigen Block aus und setzt den Cursor.

So markiert der Editor

<!-- aus <h2>{{ section.settings.heading }}</h2> wird im Editor: -->
<h2 data-lf="heading" data-lf-type="text" data-lf-placeholder="Überschrift">Willkommen</h2>

<!-- aus <div class="intro__text">{{ block.settings.text }}</div>: -->
<div class="intro__text" data-lf-block="text" data-lf-type="richtext"><p>…</p></div>

Steht das Feld als einziger Inhalt in seinem Element, landen die Marker direkt am Element – ohne zusätzliches DOM. Nur bei gemischtem Inhalt erzeugt der Builder einen Wrapper.

Regeln für Inline-Editing

1. Die Ausgabe {{ … }} steht im Textinhalt eines Tags, nicht in einem Attribut.

2. Text-Felder sind der einzige Inhalt eines semantischen Elements (<h2>, <span> …).

3. Richtext steht immer in einem eigenen <div> – nie in <p>, <span>, <a> oder Überschriften.

4. Block-Felder haben einen Block-Kontext: Standard-Schleife über section.blocks oder {{ block.editor_attributes }}.

5. Jede Section hat genau ein Root-Element.

{# ✅ inline bearbeitbar #}
<h2>{{ section.settings.heading }}</h2>
<div class="text">{{ section.settings.content }}</div>

{# ❌ nur über den Inspector #}
<a href="{{ section.settings.url }}">…</a>
<p>{{ section.settings.content }}</p>   {# Richtext in <p> – ungültiges HTML #}

Blocks außerhalb der Standard-Schleife

{% assign title_block = section.blocks | where: 'type', 'title' | first %}
<h2 {{ title_block.editor_attributes }}>{{ title_block.settings.text }}</h2>

Im Editor wird daraus data-pb-block="<id>", live ist die Ausgabe leer. Ohne Block-Kontext entfernt der Editor den Feld-Marker stillschweigend.

Links im Editor

Im Editor navigiert kein Link per Klick – Buttons und Richtext-Links werden ausgewählt bzw. bearbeitet. Einzige Ausnahme: Menü-Links mit {{ item.editor_attributes }}.

Delta-Rendering

Reine Textänderungen aktualisiert der Editor direkt im DOM. Strukturelle Änderungen (Einstellungen, Reihenfolge, Blocks) rendert der Server neu, und nur die betroffene Section wird ausgetauscht. Dein JavaScript muss darauf reagieren – siehe „JavaScript im Theme: pb:patch und Editor-Events“.

Kein Script-Zugriff auf Kundenskripte

Verwaltete Consent-Skripte werden in der Editor-Vorschau nie ausgeführt. Prüfe Tracking deshalb immer auf der Live- oder Vorschau-Domain.