Start » Dokumentation » DataStore Struktur

DataStore Struktur

Das Quantum Viewports System verwaltet viewport-spezifische Styles in einem Redux DataStore. Dieser Store enthält sowohl den Editor-Zustand als auch den berechneten Style-Zustand der Blöcke, sodass responsive Styles aus einer zentralen Quelle in der Editor-Vorschau angewendet werden können.

Inhaltsverzeichnis

Den DataStore aufrufen

Erreichbar ist der Store über den Store Namen quantumpress/viewports
Im folgenden als Beispiel angewendet:

wp.data.select( 'quantumpress/viewports' );

Basis-Struktur

Der Store wird mit einem Standardzustand initialisiert, der Basiswerte für Viewports, Block-Styles und Editor-Interaktionsflags bereitstellt. Wichtige Eigenschaften sind:

  • viewports – Eine Liste vordefinierter Viewport-Breiten mit beschreibenden Labels. Die Konfiguration kann über die Konstante QUANTUM_VIEWPORTS_EXTENDED=true in der wp-config.php oder in der .env-Datei erweitert werden. In späteren Versionen wird die Auswahl der Viewports über die Benutzeroberfläche editierbar sein.
  • viewport / iframeViewport – Der aktuell ausgewählte Viewport oder 0 für den Standardwert.
  • isActive / isSaving / isLoading – Flags zur Verfolgung der Simulation und der Speicherprozesse.
  • desktop / tablet / mobile – Standardmäßige numerische Viewport-Breakpoints für Desktop, Tablet und Mobile.
  • saves / changes / removes / valids / defaults – Objekte, die nach Block-clientId organisiert sind und den gespeicherten Zustand, Editor-Änderungen, explizite Löschungen, validierte Styles und Standard-Styles darstellen.
  • renderer – Zuordnung von Style-Properties zu registrierten Renderern, jeweils mit Callback-Funktion, Panel- und Gruppen-Zuordnungen sowie optionalen block-spezifischen Mappings.
  • lastEdit – Zeitstempel der letzten Blockbearbeitung, zur Synchronisation der Benutzeroberfläche.

In zukünftigen Versionen werden Änderungen und Löschungen auch in den Block-Attributen gespiegelt, um vollständige Undo/Redo-Funktionalität über die Editor-History zu ermöglichen.

Viewport-Konfiguration

Standard-Viewportwerte werden für Desktop, Tablet und Mobile bereitgestellt:

  • Desktop: 1360px (Standard)
  • Tablet: 780px (Standard)
  • Mobile: 360px (Standard)

Mit einer Konstante in Ihrer wp-config.php kann die Palette erweitert werden: QUANTUM_VIEWPORTS_EXTENDED=true

SpectrumSets und CSS-Generierung

Die Style-Regeln jedes Blocks werden in SpectrumSets aufgelöst, die den berechneten Style-Zustand pro Viewport darstellen. SpectrumSets entstehen aus der Kombination von:

  • Gespeicherten Werten (saves)
  • Validierten Styles (valids)
  • Expliziten Löschungen (removes)
  • Editor-Änderungen (changes)

In zukünftigen Versionen wird jedes Spectrum-Objekt als Klasse definiert, um die Zugänglichkeit zu erhöhen und eine programmgesteuerte Manipulation zu ermöglichen. CSS wird aus diesen SpectrumSets unter Verwendung der registrierten Renderer generiert und in der cssSet-Eigenschaft des Stores gespeichert.

Actions und Selektoren

Interaktionen mit dem Store erfolgen über Actions und Selectors:

  • Actions werden verwendet, um den Store zu aktualisieren, z. B. um neue Style-Änderungen anzuwenden oder einen Block zu registrieren.
  • Selektoren liefern abgeleitete Zustände, einschließlich aufgelöstem CSS, aktiven Viewport-Styles und berechneten SpectrumSets.