The editor follows the Flatsome UX Builder: dark top bar with the device
switch, one sidebar with tabs for elements, structure and page, an element
view with breadcrumbs, property tabs and actions, element cards, a context
menu in the preview and keyboard shortcuts that also work inside the preview.
Entrance and hover effects play for every visitor unless the website chooses
to respect the browser's reduced-motion preference (setting "motion", class
"motion-respect" on <html>). Waiting blocks stay hidden until they scroll into
view and are shown at once when the reader jumps past them.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Die Elementwahl war eine Liste aus Schriftzeichen - "▣" fuer Sektion, "☰" fuer
Zeile. Jetzt traegt jeder der 34 Eintraege eine Strichzeichnung, die zeigt, was
er baut: die Sektion ein gefuelltes Band, "Zeile, 3 Spalten" tatsaechlich drei
Kaesten, das Bild einen Rahmen mit Bergzug.
Zeichnungen statt Bilddateien. Flatsome liefert je Element ein PNG mit.
Gezeichnet ist hier besser: library-previews.js ist ein paar hundert Byte statt
eines Ordners voller Bitmaps, die Formen nehmen die Farbe der Flaeche an, auf
der sie liegen - gesperrte Eintraege werden damit von selbst blass - und sie
bleiben auf jedem Bildschirm scharf. Die Zeilenvorschau wird gerechnet: zwei,
drei oder vier Kaesten aus derselben Funktion.
Suche. Ein Feld ueber der Liste filtert ueber alle Gruppen, gesucht wird ueber
Namen, internen Typ und Gruppennamen - wer "slider" eingibt, muss nicht wissen,
dass er unter "Gruppen" steht. Gruppen ohne Treffer verschwinden, darunter
steht wie viele von wie vielen uebrig sind.
Dabei bemerkt: es gab zwei Suchfelder namens "Element suchen" auf einem
Bildschirm, fuer eine Sprachausgabe nicht unterscheidbar. Sie heissen jetzt
nach dem, was sie durchsuchen.
Geprueft: der Browsertest zaehlt die Vorschaubilder gegen die Eintraege und
sucht nach Name, Gruppenname und etwas Nichtvorhandenem. npm test 28/28,
phpunit 452/452, npm run test:editor vollstaendig ohne axe-Verstoss.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Drei Bedienungen, die Flatsome an jeder Option hat und die hier fehlten.
Geraeteschalter je Option. Bisher entschied ein einziger Schalter ueber der
Vorschau, welches Geraet das ganze Bedienfeld bearbeitet; "ist die Ueberschrift
auf dem Telefon kleiner" liess sich nur durch Umschalten und Hinsehen
beantworten. Jetzt traegt jede Option drei Chips (D, T, M): sie zeigen, wo ein
eigener Wert liegt, und ein Klick wechselt dorthin. Bedienfeld und Vorschau
wechseln gemeinsam - einen Wert fuer ein Geraet zu setzen, das man nicht
ansieht, ist blindes Aendern.
Abstand als Rahmen. Vier Felder untereinander, beschriftet "Oben, Rechts,
Unten, Links", zwangen zum Lesen. Jetzt sitzt jedes Feld an seiner Kante, die
Lage ist die Beschriftung; in der Mitte verkettet ein Schalter alle vier. Er
startet aus: er ersetzt den frueheren Knopf "Alle Seiten gleich setzen", und
das war eine bewusste Handlung. Seiten mit unterschiedlichen Einheiten gelten
als "gemischt" und bleiben unangetastet - ein gespeichertes 2rem wird nicht
still zu 2px.
Ziehfelder. Zahlenfelder lassen sich seitwaerts ziehen, Umschalt grob, Alt
fein. Tippen und Pfeiltasten bleiben unveraendert. Nur fuer Maus und Stift:
auf einem Tippgeraet ist ein seitliches Ziehen ueber ein Feld die Art, wie das
Bedienfeld gescrollt wird.
Dabei behoben: der Zug war nach einem Pixel zu Ende, weil jede Aenderung das
Bedienfeld neu zeichnete und damit das Feld ersetzte, an dem der Zeiger hing
(keepPanel). Der Kettenschalter verlor aus demselben Grund seinen Zustand. Und
das Gleichziehen nahm den Wert des ersten Feldes, auch wenn es leer war - ein
Druck auf die Kette loeschte damit die Seiten, die einen Wert hatten.
Geprueft: npm test 27/27, phpunit 452/452, npm run test:editor vollstaendig
mit neuem Abschnitt und ohne axe-Verstoss.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Umuts Einwand: Zeile und Spalte standen oben in der Auswahl, als waeren sie
Seitenanfaenge. Sie gehoeren in den Inhalt - erst eine Sektion, dann eine Zeile
darin. Das war nicht nur eine Anzeigefrage: eine Zeile nahm bisher jedes Kind
an, eine Ueberschrift konnte neben den Spalten landen, und eine Spalte durfte
ueberall stehen. Die Struktur, die der Editor in seinem eigenen Hinweistext
beschreibt, galt fuer die Schaltflaechen nicht.
Uebernommen ist Flatsomes Regelmodell (Elements.php): ALLOW - eine Zeile nimmt
nur Spalten; REQUIRE - eine Spalte lebt nur in einer Zeile. Dazu ein Zusatz,
den Flatsome nicht hat: ROOT_NEEDS_CONTAINER - eine Zeile ist kein
Seitenanfang. In jedem Behaelter bleibt sie erlaubt, auch in einem Tab.
Daraus die Bedienung:
- Werkzeugkasten nach Aufbau gruppiert statt flacher Liste aus 31 Typen.
- Was nicht hingehoert, ist gesperrt und sagt beim Ueberfahren warum. Eine
Regel, die man erklaert bekommt, lernt man; eine Schaltflaeche, die nur
nicht mehr reagiert, drueckt man weiter.
- Was moeglich ist, sagt wohin es kommt.
- Die Zeile wird nach Spaltenzahl angeboten und bringt ihre Spalten mit; der
separate Zeilenbereich ist entfallen.
- insertionTarget beantwortet "wohin kaeme das?", ohne etwas einzufuegen.
Knopf, Einfuegepunkt, Ziehen und die Sperrlogik nutzen dieselbe Funktion -
vorher entschied insertBlock allein, und insertRow hatte eine zweite Kopie
derselben Platzierungslogik.
Ein Element, das der gewaehlte Behaelter nicht nimmt, wird nicht gesperrt,
sondern steigt auf, bis ein Elternteil es annimmt.
Nebenbei behoben: postnav fehlte seit Schema v18 in labels und icons, der
Strukturbaum zeigte dafuer "Unbekannt" und ein Fragezeichen.
Geprueft: npm test 27/27, phpunit 446/446, npm run test:editor vollstaendig
mit neuem Abschnitt und ohne axe-Verstoss.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Abgleich mit dem Flatsome UX Builder (docs/FLATSOME-ABGLEICH.md): die Gestaltung
ist Flatsome voraus, die Luecken liegen beim Elementkatalog und bei der
Bedienung. Umuts Entscheidung: Bedienung zuerst, Shop-Elemente ausgelassen.
Erste Haelfte der Bedienung:
- Werkzeugleiste am Element in der Vorschau. Sie nennt das Element, auf das sie
wirkt - die Seitenleiste hat dieselben fuenf Aktionen, und zwei gleichnamige
Bedienelemente auf einem Bildschirm sind fuer eine Sprachausgabe nicht
unterscheidbar. Beide Wege rufen dieselben Funktionen auf.
- Auswahl- und Ueberfahrrahmen mit Beschriftung.
- Einfuegepunkte an Ober- und Unterkante: das naechste Element landet dort
statt am Ende.
- Ziehen aus dem Werkzeugkasten in die Vorschau, mit Ablegemarke zwischen den
Elementen und Rahmen um einen aufnehmenden Behaelter. Der Strukturbaum zieht
in dieselbe Flaeche.
Die Ebene liegt ueber dem Rahmen, nicht darin: die Vorschau wird bei jeder
Aenderung ersetzt, eingezeichnete Bedienelemente waeren weg und stuenden in der
Auszeichnung, die die Vorschau wahrheitsgetreu zeigen soll. Leiste und
Pluszeichen werden gegenskaliert und bleiben in der Mobilvorschau fingergross.
Im Modell neu: insertBlockAt, moveBlockTo, dropList.
Dabei behoben: die Ebene war aria-hidden und enthielt fokussierbare
Schaltflaechen; canContain zerbrach an einem fehlenden Block beim Ziehen aus
dem Werkzeugkasten; beim Verschieben ans Listenende wurde der Index begrenzt,
bevor die Entnahme verrechnet war.
Geprueft: npm test 22/22, phpunit 434/434, npm run test:editor vollstaendig
mit neuem Abschnitt und ohne axe-Verstoss.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Neunzig Eigenschaften in acht zugeklappten Gruppen: "wo ist die
Rahmenstaerke" ist eine berechtigte Frage. Jetzt filtert ein Suchfeld die
Eigenschaften, oeffnet die passenden Gruppen und sagt, wie viele Treffer es
gibt - und wenn keine, wo eigenes CSS zu finden ist. Getestet: "rahmen" laesst
die Gruppen Rahmen und Bild stehen, 14 Treffer.
Neu im Ausbauplan, Paket O: Sicherung und Wiederherstellung als Funktion statt
als Disziplin. Heute entstehen Sicherungen nur als Nebenprodukt des Updaters
und weil ich vor jeder Migration von Hand eine Kopie lege. Geplant sind
Datenbank per VACUUM INTO statt copy (eine Kopie waehrend eines
Schreibvorgangs kann unbrauchbar sein), Medienordner, ein Manifest mit
Fassung, Migrationsstand und Pruefsummen - und ohne .env, weil darin
APP_SECRET steht und eine Sicherung den Server verlaesst. Dazu Rotation, damit
die Platte nicht vollaeuft und die naechste Sicherung nicht genau dann
scheitert, wenn man sie braucht.
Die Abnahme ist die Wiederherstellung, nicht die Sicherung: eine Seite
loeschen, zurueckspielen, pruefen dass sie wieder da ist. Eine
Sicherungsfunktion, deren Wiederherstellung nie gelaufen ist, ist eine
Vermutung.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Umut fragte nach Zeilen, nach Rahmen und Rundungen - und ob der Designer so
aufgestellt ist wie Flatsome. Der Vergleich steht in
docs/DESIGNER-VERGLEICH.md, mit der Einschraenkung, dass Flatsome hier nicht
installierbar war: das ist Wissen, keine Messung.
Zwei echte Fehler kamen dabei heraus, beide vorher unbemerkt.
Eine Rahmenstaerke je Seite wurde zu border-width-top. Das ist kein CSS, der
Browser verwirft die Zeile stillschweigend - Rahmenstaerken je Seite hatten
nie eine Wirkung, und es gab keine Meldung, die darauf hingewiesen haette. Die
Schreibweise steht jetzt je Eigenschaft im Schema, weil padding-top dem Namen
folgt und border-top-width nicht.
Und eine Rundung auf einem Bildblock landete auf dem figure, waehrend das Bild
darin eckig blieb. Eigenschaften koennen jetzt auf das Bild im Block zielen
(target 'img' im Schema, eine zweite Regel im Compiler) - deshalb tut
object-fit ueberhaupt etwas, denn auf einem figure tut es nichts.
Von 50 auf 93 Eigenschaften: Bild (Ausschnitt, Bildmitte, Seitenverhaeltnis,
Hoehe, Ecken, Rahmen), Positionierung mit z-index, getrennte Zeilen- und
Spaltenabstaende, Flex je Element, Innen- und Textschatten, acht Bildfilter
als eine filter-Deklaration in fester Reihenfolge, Mischmodus, Zusatzrahmen,
Mauszeiger. Neun Einblendungen mit Verzoegerung, sieben Hover-Effekte, alle
innerhalb von prefers-reduced-motion.
Drei neue Bausteine (Dokumentschema v15): Symbol als eigenes Element,
Fortschritt mit role=meter und dem Wert im Markup statt nur in der
Balkenbreite, und ein Slider als Scrollbereich mit Einrasten - ohne
JavaScript, ohne Autoplay, mit Finger, Trackpad, Mausrad und Tastatur.
Zeilen waren nicht unauffindbar, sondern unbrauchbar leer: eine Zeile ohne
Spalten sieht aus wie nichts. Jetzt legt "Zeile, 2/3/4 Spalten" beides auf
einen Klick an, und im Werkzeugkasten steht, wie der Aufbau gemeint ist.
315 PHP-Tests / 1309 Assertions, 16 JS-Modelltests, axe auf dreizehn
Bildschirmen ohne Verstoesse. 16 Datensaetze rechnen jede Eigenschaftsform
gegen die erwartete Deklaration nach - die Pruefung, die die beiden Fehler
oben gefunden haette, wenn es sie vorher gegeben haette.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Jede Verwaltungsseite trug bisher ihre eigene Kopfzeile und ihre eigene,
unvollständige Liste von Links auf die anderen Seiten - die Seitenübersicht
verlinkte sieben Bereiche, das Menü fünf, die Fassungen drei. Wo man war,
stand nirgends.
Jetzt gibt es einen Rahmen für alle: eine feste Seitenleiste mit der
Navigation, der aktive Eintrag über aria-current markiert, und eine Kopfzeile
mit Titel, einem Satz Erklärung und Platz für die Hauptaktion. Jede Seite
füllt nur noch heading, lead, actions und content. Auf schmalen Fenstern wird
die Seitenleiste zu einer scrollbaren Leiste, ohne JavaScript.
Die Seitenübersicht zeigt je Seite eine Zeile mit dem Alltäglichen und einem
Aufklappfeld "Einstellungen", das darunter an seinem Platz öffnet - vorher
waren es sechs Aufklappfelder, deren Inhalt als absolut positionierter Kasten
über den Rand der Karte hinausragte. Tabellen scrollen seitlich, statt die
Karte aus dem Fenster zu schieben.
Das Stylesheet ist geteilt: die Editorregeln stehen in editor.css, das nur
Editor und Mediathek laden; admin.css ist neu geschrieben und lesbar. Der
Editor behält seinen Aufbau und übernimmt die neue Gestaltung - Systemschrift,
gleiche Radien, gleiche Schaltflächen, und ein paar Panelgrößen, die zum Lesen
zu klein waren.
Beim Zerlegen des Stylesheets schnitt mein Skript am Ende jedes @media-Blocks
alle schließenden Klammern ab statt nur einer. editor.css war damit ab dem
ersten Medienblock ungültig: der Browser behielt 29 von 202 Regeln. Gefunden
hat das der Browsertest, an einer Vorschaubreite von 1236 statt 1240 Pixeln -
vier Pixel als einziges Anzeichen dafür, dass dreiviertel des Stylesheets
fehlte.
201 PHP-Tests / 716 Assertions unter PHP 8.2.12 und 8.4.22, Playwright-
Editortest mit axe ohne Verstöße auf Anmeldung, Seitenübersicht und Editor,
öffentliche Browserprüfung grün. Zwei Testselektoren zeigten auf umbenannte
Klassen und prüfen dieselbe Sache nun über den neuen Namen. Nicht geprüft:
kein Screenreader, und die Bildschirme Menüs, Formulare, Bereiche, Design,
Einstellungen und Fassungen sind nur von Hand bedient, nicht automatisiert
geprüft.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
kantarciandClaude Fable 5.1