Anmelden

WordPress-Formularblöcke und bedingte Logik mit Flow

Flow bietet einen nativen Gutenberg-Formular-Builder mit Layout-, Container- und Feldblöcken, die in einer gemeinsamen React-Laufzeit gerendert werden. Der Editor serialisiert den Blockbaum in eine einzige Frontend-Laufzeitdefinition. Dadurch verhält sich das fertige Formular wie eine koordinierte Anwendung und nicht wie eine Sammlung isolierter dynamischer Blöcke.

Containerblöcke​

Flow enthält unter anderem folgende Container- und Layoutblöcke:

  • Formular
  • Gruppe
  • Raster
  • Stapel
  • Feldgruppe
  • Einklappbarer Bereich
  • Assistent
  • Assistentenschritt
  • Erfolgsansicht
  • Visuell ausgeblendet
  • Trennlinie

Präsentationsblöcke im Light DOM​

Flow enthält außerdem einen Galerie-Block für modale und Lightbox-Layouts. Er akzeptiert innere core/image-Blöcke, wird im normalen Dokument-DOM statt in der Mantine-Shadow-Root-Laufzeit gerendert und kann Bedienelemente für das vorherige und nächste Bild, optionale Vorschaubilder, Bildunterschriften und Zähler sowie eine modalabhängige Startposition anzeigen.

Wenn sich die Galerie in einem Flow-Modal befindet, kann der öffnende Wrapper sie mit wps-flow-gallery-target--{galleryId} ansprechen und mit wps-flow-gallery-index--N ein bei 1 beginnendes Startbild anfordern. Die Gutenberg-Seitenleiste enthält zudem ein Hilfsfeld, das diese Klassenmuster für Autoren erzeugt.

Diskussionsblock​

Der Block Discussion rendert einen inhaltsgebundenen öffentlichen Kommentarbaum aus dem Flow-Backend. Ein zugehöriges Flow-Formular erstellt Kommentare und Antworten. Der Diskussionsblock übernimmt Auflistung, Seitennavigation, Eigentümeraktionen, Datumswerte, Anzahlen, Antwortnavigation sowie optionale Bewertungszusammenfassungen und Filter für Stammkommentare. Er kann öffentlich lesbar bleiben, während die Cognito-Authentifizierung Kommentaränderungen schützt, auch auf einer statisch exportierten Seite.

Unter Diskussionen und Kommentare finden Sie die Einrichtung von Formular und Diskussion, Zielidentität, Zugriffsmodi, Antwortgrenzen und Anforderungen an statische Websites.

Feldblöcke​

Flow enthält vielseitige Eingabe- und Werteblöcke, darunter:

  • Textfeld
  • Mehrzeiliges Textfeld
  • Auswahlfeld
  • Kontrollkästchengruppe
  • Kontrollkästchen
  • Datumsfeld
  • Schalter
  • Zahlenfeld
  • Optionsfeld
  • Passwortfeld
  • PIN-Feld
  • Farbfeld
  • Dateifeld
  • Schieberegler
  • Bereichsschieberegler
  • Schlagwortfeld
  • Bewertungsfeld
  • KI-Vorschläge
  • Übermittlungsmetadaten
  • Schaltfläche „Entwurf speichern“
  • Absenden-Schaltfläche

Assistenten- und Erfolgsabläufe​

Mit den Blöcken Wizard und Wizard Step erstellen Sie mehrstufige Formulare mit Validierung pro Schritt, optionalen Navigationsregeln und optionalen Fortschrittsanzeigen.

Der Block Success State rendert nach dem Absenden oder der Annahme eines KI-Vorschlags eine eigene Ansicht statt nur einer allgemeinen Erfolgsmeldung. Das eignet sich für eine ausführlichere Bestätigung mit Folgeaktionen, Übermittlungsmetadaten oder Bedienelementen wie „Zum Formular zurückkehren“ und „Trotzdem absenden“.

Der Editor enthält außerdem eine Vorschau für Formularautoren. Damit können sie einen bestimmten Assistentenschritt oder eine Erfolgsansicht direkt in Gutenberg prüfen, ohne jedes Mal den gesamten Ablauf durchlaufen zu müssen.

Block für KI-Vorschläge​

Der Block AI Suggestions unterstützt Benutzer vor der endgültigen Übermittlung. Er kann:

  • mit einer ausgewählten Voreinstellung ausgeführt werden,
  • optional Inhalte aus einer Knowledge Base abrufen,
  • mehrere Vorschläge mit Konfidenzwert und zugehöriger Dokumentation darstellen,
  • Aktionen zum Annehmen und Ablehnen anbieten,
  • Benutzern nach der Prüfung der Vorschläge weiterhin eine normale Übermittlung erlauben.

Die Laufzeit verfolgt den Status der KI-Vorschläge. Andere Blöcke und Bedingungen können dadurch darauf reagieren, ob Vorschläge bereits ausgeführt, angenommen oder abgelehnt wurden.

Entwürfe und Übermittlungsmetadaten​

Der Block Save Draft button ermöglicht die dauerhafte Speicherung von Entwürfen in Formularen, die Entwürfe zulassen. Die Laufzeit kann einen Entwurf speichern, später fortsetzen und optional löschen.

Der Block Submission Meta ist für Erfolgsansichten und ähnliche Antwortoberflächen vorgesehen. Er kann vom Backend bereitgestellte Metadaten wie Übermittlungs-ID, Status, Annahmezeitpunkt oder KI-bezogene Antwortdetails darstellen.

Bedingte Logik​

Bedingte Logik kann das Verhalten von Feldern und Containern dynamisch steuern. Unterstützte Aktionen sind Ein-/Ausblenden, Aktivieren/Deaktivieren, Pflichtfeld/optional setzen, Optionen aktualisieren sowie Werte setzen und löschen. Zu den Operatoren gehören Gleichheits-, Enthalten-, Anfangs-/End-, numerische und Leerheitsprüfungen sowie Zugehörigkeitstests wie „einer von“ und „keiner von“.

Flow bietet außerdem KI-bezogene Bedingungen, mit denen Layouts auf den Vorschlagsstatus der Laufzeit reagieren. Typische Beispiele:

  • einen Folgeabschnitt erst nach dem Ausführen der KI-Vorschläge anzeigen,
  • manuelle Felder einblenden, wenn der Benutzer alle Vorschläge abgelehnt hat,
  • nach Annahme eines KI-Vorschlags eine alternative Erfolgsansicht darstellen.

Gestaltung und Darstellung​

Flow-Formulare unterstützen konfigurierbare Darstellungseinstellungen wie Sprache, Textrichtung, Farbmodus, Primärfarben, erzeugte eigene Paletten und Theme-Überschreibungen. Hinweise zum Überschreiben der Mantine- und Flow-Design-Tokens finden Sie auf der Seite Gestaltung (CSS-Variablen).