feat: Divi hints point to the read tools; guides divi-structure/attrs/design-system; test: Divi read end-to-end
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01At3V6SjwbMe6eMzVGW3Hs7
This commit is contained in:
Claude Opus 5.5
@@ -23,8 +23,8 @@ Werkzeugnamen: `lit-…` sind direkt aufrufbare Tools; `lit/…` sind Abilities,
|
||||
Trefferliste. Geliefert werden nur Einträge, die der verbundene Nutzer selbst bearbeiten darf (fremde
|
||||
Entwürfe/private Inhalte ohne die passende Berechtigung erscheinen nicht).
|
||||
- `lit-content-get`: alle Daten eines Eintrags inkl. Feldern, Begriffen, Beitragsbild und `rev`.
|
||||
Bei Divi-Seiten fehlt `content`; Divi-Werkzeuge folgen in einer späteren Version, bis dahin werden
|
||||
Divi-Inhalte im Divi-Builder bearbeitet (Titel, Auszug, Felder und Begriffe gehen weiter über
|
||||
Bei Divi-Seiten fehlt `content`; den Aufbau liest `lit-divi-outline` (siehe `divi-structure`), geändert
|
||||
wird er vorerst im Divi-Builder (Titel, Auszug, Felder und Begriffe gehen weiter über
|
||||
`lit-content-update`).
|
||||
|
||||
## Anlegen und Ändern
|
||||
@@ -59,7 +59,8 @@ Werkzeugnamen: `lit-…` sind direkt aufrufbare Tools; `lit/…` sind Abilities,
|
||||
## Sicher überarbeiten
|
||||
|
||||
1. `lit/post-duplicate` → Entwurfskopie; die Antwort enthält die `rev` der Kopie für `lit-content-update`.
|
||||
2. Kopie mit `lit-content-update` (Divi-Inhalte bis zu den Divi-Werkzeugen im Divi-Builder) bearbeiten und dem Nutzer die Vorschau zeigen.
|
||||
2. Kopie mit `lit-content-update` (Divi-Inhalte vorerst im Divi-Builder) bearbeiten und dem Nutzer die
|
||||
Vorschau zeigen; `lit-page-render-summary` fasst den gerenderten Inhalt zusammen.
|
||||
3. `lit/post-replace-with-copy` übernimmt die Kopie ins Original (ID, URL, Status und Menüeinträge bleiben).
|
||||
Voraussetzungen: die Kopie muss noch Entwurf oder ausstehend sein, `rev` des Originals aus
|
||||
`lit-content-get` ist Pflicht (sie deckt Titel, Inhalt, Auszug und Status ab – Felder/Meta, die direkt am
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
# Divi-Einstellungen (Vollform)
|
||||
|
||||
Jedes Divi-5-Modul speichert seine Einstellungen unter **Attributpfaden**, z. B.
|
||||
|
||||
- `title.innerContent` – Text der Überschrift,
|
||||
- `title.decoration.font.font` – Schrift der Überschrift (Farbe, Größe, Ebene `headingLevel`),
|
||||
- `button.innerContent` – Beschriftung und Link eines Buttons (`text`, `linkUrl`, `linkTarget`),
|
||||
- `module.decoration.background` – Hintergrund, `module.decoration.spacing` – Innen-/Außenabstand,
|
||||
- `module.meta.adminLabel` – Admin-Label im Divi-Builder.
|
||||
|
||||
Der Wert eines Pfads ist eine Zuordnung **Breakpoint → Zustand → Wert**:
|
||||
|
||||
```json
|
||||
{ "desktop": { "value": { "color": "#1a1a1a", "headingLevel": "h2" }, "hover": { "color": "#000000" } },
|
||||
"phone": { "value": { "size": "28px" } } }
|
||||
```
|
||||
|
||||
Breakpoints: `desktop`, `tablet`, `phone` (je nach Website auch `tabletWide`, `phoneWide`, `widescreen`,
|
||||
`ultraWide`); Zustände: `value`, `hover`, `sticky`.
|
||||
|
||||
## Pfade finden
|
||||
|
||||
- `lit-divi-catalog` mit `module` (z. B. `"heading"`) listet alle gültigen Pfade dieses Moduls auf dieser
|
||||
Website (live aus Divi) und die Kurzform-Felder mit ihrem Pfad. `path_kinds` nennt die Feldart eines Pfads
|
||||
(`text`, `richtext`, `code`, `url`, `image`, `color`, `enum`, `onoff`, `number`, `list`, `icon`), soweit aus
|
||||
den Divi-Metadaten ableitbar; zusammengesetzte Pfade (mehrere mögliche Feldarten je nach Unterschlüssel)
|
||||
gelten als unbekannt, statt eine Feldart zu raten.
|
||||
- `lit-divi-node-get` zeigt die gesetzten Werte eines vorhandenen Knotens in genau dieser Form (`attrs`).
|
||||
- Schrift-Gruppen liegen eine Ebene tiefer: `…decoration.font.font`, `…decoration.bodyFont.body.font`,
|
||||
`…decoration.headingFont.h2.font`, `module.advanced.text.text`.
|
||||
- Werte wie `$variable({…})$` sind Verweise auf globale Farben, Variablen oder dynamische Inhalte – nicht
|
||||
durch feste Werte ersetzen (siehe `divi-design-system`).
|
||||
@@ -0,0 +1,20 @@
|
||||
# Divi-Designsystem
|
||||
|
||||
`lit-divi-design-system` liest das Designsystem der Website live aus Divi:
|
||||
|
||||
- **Globale Farben** (`colors`): ID (`gcid-…`), Name, Wert und der Platzhalter für neue Inhalte, z. B.
|
||||
`{{color:primary}}` für die Primärfarbe oder `{{color:Nachtblau}}` für eine eigene globale Farbe. Die fünf
|
||||
Theme-Farben heißen `primary`, `secondary`, `heading`, `body` und `link`.
|
||||
- **Globale Variablen** (`variables`): Zahlen, Texte, Bilder, Links (`gvid-…`), Platzhalter `{{var:<Name>}}`.
|
||||
- **Theme-Schriften** (`fonts`): Überschrift und Fließtext, Platzhalter `{{font:heading}}` / `{{font:body}}`.
|
||||
- **Größen** (`sizes`): Schriftgrößen, Inhaltsbreite und Spaltenabstand aus den Theme-Optionen.
|
||||
- **Presets** (`presets`): Modul-Presets je Modul (`kind: module`, z. B. alle Button-Presets) und
|
||||
Gruppen-Presets (`kind: group`); `default: true` markiert das Standard-Preset eines Moduls.
|
||||
|
||||
Regeln:
|
||||
|
||||
1. Vor dem Gestalten einer Seite das Designsystem lesen.
|
||||
2. Globale Farben, Variablen und Presets vor festen Werten verwenden; feste Farben oder Schriften nur, wenn
|
||||
der Nutzer es ausdrücklich möchte.
|
||||
3. Gibt es für einen Zweck noch keine Farbe, Variable oder kein Preset, dem Nutzer vorschlagen, es im
|
||||
Divi-Builder anzulegen, statt feste Werte zu verteilen.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Divi-Seiten: Aufbau lesen
|
||||
|
||||
Divi 5 speichert eine Seite als Block-Markup: Abschnitte (`section`) enthalten Zeilen (`row`), Zeilen
|
||||
Spalten (`column`), Spalten Module (`text`, `heading`, `button`, …). Manche Module haben Kind-Module
|
||||
(`accordion` → `accordion-item`). Die Divi-Werkzeuge gibt es nur, wenn der Divi-5-Builder aktiv ist.
|
||||
|
||||
## Seitenbaum
|
||||
|
||||
- `lit-divi-outline` mit `post_id` liefert jeden Knoten mit **Pfad-ID**, Modultyp, Admin-Label, Textauszug,
|
||||
Layout-Info (z. B. `Spalten 8_24+16_24`) und Preset-Namen – als kompakten Text (`outline`) und als Liste
|
||||
(`nodes`). Mit `id` nur ein Teilbaum, mit `depth` begrenzte Tiefe.
|
||||
- Pfad-IDs: `s0` = erster Abschnitt, `s0.r1` = zweite Zeile darin, `s0.r1.c0` = erste Spalte,
|
||||
`s0.r1.c0.m2` = drittes Modul, `…m2.m0` = erstes Kind-Modul. `g` = globales Modul, `x` = fremder Block
|
||||
(z. B. aus dem Block-Editor). Gezählt wird je Buchstabe innerhalb des Elternknotens.
|
||||
- `lit-divi-node-get` mit `post_id` und `id` liefert alle Einstellungen eines Knotens (siehe `divi-attrs`),
|
||||
die aktuellen Kurzform-Werte (`shortform`) und die IDs der Kinder.
|
||||
|
||||
## Stand und Sperre
|
||||
|
||||
- `tree_rev` ist der Stand des Seiteninhalts. Pfad-IDs gelten nur für diesen Stand – ändert jemand die Seite
|
||||
(auch im Divi-Builder), verschieben sich die IDs. Divi-Änderungen verlangen deshalb immer die `tree_rev`
|
||||
des letzten Lesevorgangs.
|
||||
- `rev` ist davon getrennt: der Stand des ganzen Eintrags (Titel, Auszug, Status …) für `lit-content-update`.
|
||||
|
||||
## Was nicht bearbeitet wird
|
||||
|
||||
- Knoten mit „nur lesbar“ (globale Module `g…`, fremde Blöcke `x…`) ändern die Divi-Werkzeuge nicht.
|
||||
- Divi-4-Inhalt (Shortcodes `[et_pb_…]`) wird nicht gelesen oder geändert: Seite einmal im Divi-Builder
|
||||
öffnen und speichern, Divi 5 wandelt sie dabei um.
|
||||
- Ist das Markup beschädigt, lehnen die Werkzeuge ab (`unsupported`); die Seite im Divi-Builder öffnen und
|
||||
speichern.
|
||||
|
||||
## Ergebnis prüfen
|
||||
|
||||
`lit-page-render-summary` rendert den Inhaltsbereich wie im Frontend und listet Überschriften, Texte, Links
|
||||
und Bilder samt Warnungen (Sprünge in der Überschriftenhierarchie, fehlende Alt-Texte, Links ohne Ziel).
|
||||
Header, Footer und Theme-Builder-Vorlagen sind nicht enthalten.
|
||||
@@ -33,7 +33,10 @@ Status (`lit/post-unpublish`, `lit/post-schedule`, `lit/post-trash`), Kopien (`l
|
||||
Einstellungen (`lit/wp-settings-get`, `lit/wp-settings-update`), Medien (`lit/media-get`, `lit/media-upload`,
|
||||
`lit/media-update`, `lit/media-delete`).
|
||||
|
||||
Weitere Themen: `lit-guide` mit `topic` = `content-types`, `workflows` oder `media`.
|
||||
Die `lit-divi-…`-Werkzeuge gibt es nur, wenn der Divi-5-Builder aktiv ist.
|
||||
|
||||
Weitere Themen: `lit-guide` mit `topic` = `content-types`, `workflows`, `media`, `divi-structure`,
|
||||
`divi-attrs` oder `divi-design-system`.
|
||||
|
||||
## Rückmeldungen
|
||||
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
# Etappe 2a – Manuelle Abnahme (Divi lesen)
|
||||
|
||||
Vorbereitet von Task 8 (Hinweise/Guides/Serveranweisungen/Ende-zu-Ende-Test). Automatisiert geprüft ist
|
||||
bereits: alle Unit-Tests (`composer test`, 692 Tests), Lint (`composer lint`) und alle vier
|
||||
Integrationsskripte (`tests/Integration/divi-read-smoke.sh`, `tests/Integration/mcp-smoke.sh`,
|
||||
`tests/Integration/wp-basis-smoke.sh`, `tests/Integration/media-admin-smoke.sh`) – Details im Report von
|
||||
Task 8 (`.superpowers/sdd/2026-09-26-etappe-2a-divi-lesen/task-8-report.md`).
|
||||
|
||||
Die folgenden Punkte lassen sich nicht automatisiert prüfen (echter Divi Visual Builder,
|
||||
claude.ai-Connector); das führt Jan-Niclas selbst durch.
|
||||
|
||||
## 1. Builder-Fixtures exportieren (Roundtrip mit echten Seiten)
|
||||
|
||||
Alle bisherigen Divi-Fixtures sind entweder handgeschrieben (`synthetic-*.html`), von Divis eigener
|
||||
Shortcode→Block-Konvertierung erzeugt (`converted-*.html`) oder reine Modul-Metadaten
|
||||
(`metadata-sample.json`). Es fehlt noch mindestens eine echte, im Visual Builder gebaute Seite als
|
||||
Gegenprobe für Parser/Serializer.
|
||||
|
||||
- [ ] 2–3 Seiten im Divi Visual Builder bauen. Zusammen sollten sie enthalten:
|
||||
- ein **globales Modul** (aus der Divi-Bibliothek eingefügt),
|
||||
- ein **Modul-Preset**,
|
||||
- eine **globale Farbe** und eine **globale Variable**,
|
||||
- **Dynamic Content** (z. B. Beitragstitel, ein Meta-Feld),
|
||||
- einen **Spezialabschnitt** (Specialty Section) und eine **verschachtelte Zeile**.
|
||||
- Keine personenbezogenen Daten verwenden – die Fixtures werden eingecheckt.
|
||||
- [ ] Je Seite exportieren und den Roundtrip prüfen:
|
||||
```bash
|
||||
cd /home/janniclas/Projekte/WordPress
|
||||
timeout 300 ddev exec wp eval-file wp-content/plugins/WP-LIT-MCP/tests/Integration/divi-export-page.php <post_id> <name>
|
||||
cd wp-content/plugins/WP-LIT-MCP && composer test
|
||||
```
|
||||
Erwartet: `Success: builder-<name>.html: <N> bytes, <N> blocks, globalModule: ja/nein, tree_rev <hash>.`,
|
||||
danach `composer test` weiterhin grün (der Test läuft automatisch über alle `builder-*.html`-Dateien mit).
|
||||
- [ ] Schlägt der Roundtrip fehl (Parser/Serializer erzeugen nicht mehr das byte-identische Markup): das
|
||||
ist ein **Fehler im Plugin** (`Parser`/`Serializer`), nie ein Grund, die Fixture anzupassen. Als
|
||||
Folgeaufgabe melden statt selbst zu reparieren.
|
||||
- [ ] Fixtures ohne personenbezogene Daten einchecken:
|
||||
```bash
|
||||
git add tests/Fixtures/divi/builder-*.html
|
||||
git -c user.name="Jan-Niclas Loosen" -c user.email="janniclas@loosen-it.de" commit -m "test: Divi builder fixtures"
|
||||
```
|
||||
|
||||
## 2. claude.ai: Divi-Lese-Werkzeuge im Gespräch
|
||||
|
||||
Mit dem claude.ai-Connector gegen eine Website mit aktivem Divi-5-Theme (z. B. dieses DDEV-Setup oder
|
||||
Staging) verbinden und prüfen, dass die Antworten mit dem tatsächlichen Aufbau im Divi-Builder
|
||||
übereinstimmen:
|
||||
|
||||
- [ ] „Zeig mir den Aufbau der Startseite“ → sollte `lit-divi-outline` aufrufen und einen Seitenbaum mit
|
||||
Pfad-IDs, Modultypen und Textauszügen liefern, der zum Divi-Builder passt.
|
||||
- [ ] „Welche Farben und Presets hat die Website?“ → sollte `lit-divi-design-system` aufrufen und die
|
||||
globalen Farben/Presets nennen, die auch im Divi-Builder (Designsystem-Bereich) zu sehen sind.
|
||||
- [ ] „Was sieht ein Besucher auf der Seite?“ → sollte `lit-page-render-summary` aufrufen und
|
||||
Überschriften/Texte/Links/Bilder liefern, die dem Frontend entsprechen.
|
||||
- [ ] Bei einer der zuvor im Visual Builder gebauten Seiten (Schritt 1): stichprobenartig prüfen, dass
|
||||
globales Modul, Preset, Dynamic Content und Spezialabschnitt im Outline/Node-Get sinnvoll
|
||||
wiedergegeben werden (globales Modul und Spezialabschnitt ggf. als „nur lesbar“ markiert – das ist
|
||||
in dieser Etappe so vorgesehen, siehe `divi-structure`-Guide).
|
||||
|
||||
## Ergebnis
|
||||
|
||||
Kurze Rückmeldung an den Ausführenden (Task 8 / Controller): welche Punkte grün sind, welche
|
||||
Builder-Fixtures committet wurden, und was ggf. als Folgeaufgabe (Bugfix im Parser/Serializer oder
|
||||
Doku-Korrektur) aufgenommen werden muss.
|
||||
Reference in New Issue
Block a user