Anmelden

Canvas Design Tokens, Patterns und Accessibility

Canvas trennt autorisierten Inhalt von Präsentation, indem native Blöcke und stabile semantische Rollen genutzt werden. Das Theme liefert die visuelle Interpretation; WordPress speichert den Blockinhalt.

Semantische Tokens​

Das Theme definiert wiederverwendbare Rollen für Farben, Typografie, Abstände, Radii, Schatten und Verläufe in theme.json. Stilvarianten können die Werte hinter diesen Rollen ändern, während die Slugs gleich bleiben. Bevorzuge diese Voreinstellungen gegenüber hartkodierten Farben, willkürlichen Abständen oder Inline-CSS.

Templates, Parts und Patterns​

Canvas enthält elf Templates, sieben Template-Parts und 38 Core-Block-Patterns. Die Patterns decken Header, Footer, Hero, Features, Vorteile, Ablaufschritte, Medienaufteilungen, Architektur, Vergleiche, Preise, FAQ, Aktionen, Artikelstrukturen, verwandte Inhalte, Dokumentations-Navigation und Full-Page-Starter ab.

Patterns nutzen Core-Gutenberg-Blöcke. Canvas fügt Präsentations-Wrapper- und Slot-Klassen hinzu, wo ein stabiles semantisches Ziel die Arbeit für Editoren oder kompatible Tools vereinfacht, aber diese Klassen sind kein separates Inhaltsmodell.

Stilvarianten​

Cloud, Aurora, Emerald, Coral, Slate, Warm und High Contrast nutzen denselben Token-Wortschatz. Prüfen Sie eine Variante mit Fokus auf Navigation, Fließtext, Buttons, Karten, Tabellen, Details-Blöcke, Fokusanzeige und Mobile-Layouts, bevor Sie sie produktiv schalten.

Accessibility-Grundlagen​

Canvas enthält sichtbare Fokus-Behandlung, Reduced-Motion-Verhalten, responsive Layout-Regeln, RTL-Kompatibilität und Editor/Frontend-Parität. Diese Grundlagen ersetzen nicht die redaktionelle Accessibility-Arbeit:

  • halten Sie Überschriftenhierarchie konsistent;
  • verwenden Sie sinnvolle Link- und Button-Beschriftungen;
  • nutzen Sie Alt-Texte nur für informative Bilder;
  • bewahre ausreichenden Kontrast beim Überschreiben von Tokens;
  • teste Tastaturnavigation nach Layoutwechseln;
  • prüfen Sie Inhalte in schmalen und vergrößerten Viewports.

Canvas nutzt den Theme-Tag accessibility-ready, jedoch hängt echte Accessibility auch von Autorenschaft, installierten Blöcken, Plugins und site-spezifischen Änderungen ab.