Verwenden eines Designsystems mit dem WordPress-Blockeditor Pt. 1: theme.json

Veröffentlicht: 2022-12-15

In unserem vorherigen Blogbeitrag haben wir gezeigt, wie Sie Ihr Designsystem aus Figma in die theme.json eines WordPress-Themes importieren können. Auf diese Weise können Sie die kontinuierliche Konsistenz Ihrer digitalen Objekte sicherstellen.

Unsere neue zweiteilige Serie baut auf dieser Grundlage auf, indem sie Ihnen zeigt, wie Sie importierte Design-Token aus theme.json im Blockeditor verwenden können. Auf diese Weise können Sie Ihre WordPress-Site besser organisieren, um Ihr Designsystem widerzuspiegeln. Es gibt zwei Hauptziele:

  • Verstehen Sie die Teile von theme.json, die für Designsysteme relevant sind
  • Ändern und erweitern Sie theme.json, um das importierte Designsystem zu verwenden

theme.json verstehen

theme.json ist eine Konfigurationsdatei, mit der Sie den Blockeditor konfigurieren und gestalten, Blockeinstellungen ändern und die Grundlagen für die Entwicklung eines vollständigen Blockdesigns schaffen können.

Es soll Ihnen ermöglichen, die globalen Einstellungen und Stile für Ihre WordPress-Site zu steuern. Jede neue WordPress-VIP-Site wird standardmäßig mit dem Twenty Twenty-Three-Theme geliefert, einem Block-Theme. Dieses Design ist ein großartiger Ausgangspunkt, um mit einem leichten Blockdesign zu experimentieren und einige der leistungsstarken Steuerelemente zu verstehen, die in theme.json verfügbar sind.

Ändern von theme.json

Beginnen wir mit dem theme.json, das in unserem vorherigen Blogbeitrag verwendet wurde. Beachten Sie den benutzerdefinierten Abschnitt, in dem unser Bridge-Tool ein Designsystem von Figma einfügen und aktualisieren kann. Dies ist der Schlüsselabschnitt, in dem Sie auf die verschiedenen Komponenten Ihres Designsystems (Design-Tokens) verweisen, um die theme.json tatsächlich effektiv zu verwenden.

Im Folgenden gehen wir auf Tipps und Strategien ein, damit Sie alles nutzen können, was theme.json zu bieten hat.

Speichern von Design-Token

Während die Position Ihrer Design-Token mit dem Bridge-Tool angepasst werden kann, sollten sie immer im benutzerdefinierten Bereich der Einstellungen bleiben. Dies ist der Standardspeicherort des Brückenwerkzeugs und sollte nicht geändert werden. Dadurch bleiben sie ordnungsgemäß an einem einzigen Ort organisiert und können dazu beitragen, Konflikte mit vorhandenen benutzerdefinierten Designabschnitten zu vermeiden.

Verwendung von Design-Token

Sehen wir uns ein Beispiel für die Verwendung des benutzerdefinierten Abschnitts von theme.json an. Hier haben wir ein Snippet, für das wir eine primäre Textfarbe von Grün und einen Hintergrund von Schwarz definiert haben:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

Dadurch können wir diese beiden Farben überall in der theme.json referenzieren, indem wir Folgendes verwenden:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

Das folgende Snippet stellt sicher, dass standardmäßig, sofern nicht anders angegeben, jeder Block einen schwarzen Hintergrund mit grünem Text darauf hat:

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

Das Schema für jeden Schlüssel, auf den Sie in Ihren benutzerdefinierten Einstellungen verweisen möchten, lautet:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

Der Vorteil besteht darin, dass Sie mit diesen Schlüsseln auf alle Ihre Design-Token verweisen können und gleichzeitig einen zentralen Ort haben, an dem der tatsächliche Wert verwaltet wird.

Empfohlene Vorgehensweise

  • Verwenden Sie die von WordPress generierten Design-Token-Variablen (z. B. var(--wp--custom--text--primary) ), um überall auf Token zu verweisen. Beachten Sie das oben bereitgestellte Snippet, in dem wir auf die benutzerdefinierte Primär- und Hintergrundfarbe verweisen, anstatt den tatsächlichen Wert selbst zu verwenden. Dadurch wird sichergestellt, dass Sie beim Aktualisieren von Eigenschaften wie Textfarbe nur eine einzige Stelle ändern müssen, da die anderen Stellen lediglich Referenzen sind.
  • Auf die in theme.json eingefügten Design-Token kann auch außerhalb von theme.json mit CSS zugegriffen werden, wobei dieselbe Schlüsselreferenzierung wie oben gezeigt verwendet wird. Dies gilt für die Blockentwicklung und andere Komponenten, die in einem Thema verwendet werden. Sie sind nicht nur für die Verwendung innerhalb von theme.json gedacht und sollten in jedem benutzerdefinierten CSS wiederverwendet werden.

Wir empfehlen, diese beiden Best Practices zu befolgen, um theme.json als Single Source of Truth beizubehalten. Es ermöglicht Ihnen, Design-Tokens einfach zu aktualisieren, insbesondere wenn Sie automatisierte Tools wie das Bridge-Tool von WordPress VIP verwenden, das eine Verbindung zu Figma herstellt.

Bearbeiten Sie Editor- und Blockstile

Die obigen Snippets sind eine großartige Möglichkeit, um in die Anpassung der Art und Weise einzutauchen, wie Blöcke gestaltet werden. Sie können beispielsweise den Standardstil für einen Block ändern und welche Voreinstellungen aus dem Blockeditor ausgewählt werden können. Dies ist nützlich, wenn Sie detaillierter vorgehen und genau festlegen möchten, wie die auf Ihrer Website verwendeten integrierten Blöcke aussehen sollen.

Es gibt zwei Schlüsselstellen in der theme.json:

  • Einstellungen und settings.blocks – ermöglicht die Anpassung von Einstellungen, die allgemein im Blockeditor verfügbar sind, und maßgeschneiderte Einstellungen für einzelne Blocktypen.
  • Styles und styles.blocks – ermöglicht das Definieren von voreingestellten Stilen für den gesamten Blockeditor und individuelle Anpassungen pro Block.

So stellen Sie beispielsweise sicher, dass alle Überschriften eine standardmäßige grüne (primäre) Farbe und eine sekundäre Farboption haben:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

Dadurch wird jeder Header-Block so konfiguriert, dass er eine primäre grüne Textfarbe hat, und es wird eine zweite Blockeditoroption hinzugefügt, um die Farbe in die rote Sekundärfarbe zu ändern. Hinweis: Dies erfordert einige Wiederholungen. Das Styling gibt die standardmäßige Primärfarbe an, und die Palette kombiniert dieselbe Farbe mit einer Sekundärfarbe, um beide Optionen im Blockeditor bereitzustellen.

Styling-Warnung

Verwenden Sie nach Möglichkeit nur die Abschnitte styles und styles.blocks von theme.json zum Gestalten Ihrer Blöcke. Verwenden Sie kein CSS-Styling zum Überschreiben von Kernblockstilen, es sei denn, dies ist absolut erforderlich. CSS-Überschreibungen für Blockstile sind im Allgemeinen nicht stabil – Aktualisierungen des Blockeditors können Stil und Struktur ändern und dazu führen, dass diese Stile beschädigt werden.

Anpassung pro Block

Während das obige Beispiel zeigt, wie die Einstellungen und das Design eines Blocks angepasst werden, ist es auch möglich, die Anpassung vollständig zu deaktivieren und die Optionen des Blockeditors auf bestimmte Blöcke zu beschränken. Dies ist nützlich, um genau zu steuern, welche Optionen zum Erstellen von Inhalten verfügbar sind, und um das Erscheinungsbild des Designsystems beizubehalten.

Fahren wir mit einem weiteren Beispiel für Farbeinstellungen fort, bei dem die gleichen Prinzipien für andere konfigurierbare Eigenschaften wie Farbe, Typografie und Abstand gelten. Um die Möglichkeit zu deaktivieren, die Standardtextfarbe überall mit Ausnahme von Überschriftenblöcken zu ändern, kann theme.json wie folgt konfiguriert werden:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

Dieses Beispiel zeigt die Konfiguration globaler Einstellungen über Einstellungen und blockspezifischer Einstellungen über den Abschnitt Blöcke unter Einstellungen. Dies gilt auch für das globale Styling (verfügbar unter der Root-Styles-Eigenschaft) und das blockspezifische Styling (unter styles.blocks).

Einfache voreingestellte Vorlage

Eine gute Möglichkeit, mit der Erstellung des Designsystems zu beginnen, besteht darin, die Einstellungen des Blockeditors global zu sperren. Danach können Sie die Einstellungen für einzelne Blöcke schrittweise aktivieren und steuern, wie Ihr Designsystem aussieht und sich anfühlt, ohne von Anpassungsoptionen überwältigt zu werden. Um zu beginnen, hier ein einfacher Satz von Einstellungen, die das Designsystem von WordPress VIP verwendet, um alle Ränder und Farben global zu deaktivieren , Typografie- und Abstandssteuerelemente standardmäßig im Editor:

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

Mit diesen gesperrten Standardeinstellungen können Sie dann settings.blocks verwenden, um Optionen für bestimmte Blöcke im Editor anzuzeigen und die Anpassung auf wohldefinierte Einstellungen zu beschränken.

Abschließend

Theme.json ist ein leistungsstarkes Tool zum Organisieren globaler Design-Token, zum Festlegen globaler Designstile und zum Anpassen einzelner Blöcke. Durch die Nutzung aller Funktionen, die der Blockeditor zur Anpassung bereitstellt, wird die Designsystemimplementierung zentralisiert und mit dem integrierten Blockeditor kompatibel.

In Teil 2 unserer Serie behandeln wir fortgeschrittenere Tipps außerhalb von theme.json zum Verwalten integrierter Blocktypen und -stile in einem Designsystem.

Nützliche Links

  • Was ist Theme.json?
  • Globale Einstellungen und Stile (theme.json)

Autoren

Alec Geatches, leitender Softwareentwickler bei Automattic

Enterprise-WordPress-Entwickler und Designsystem-Enthusiast, der in Taipeh, Taiwan, lebt.

Gopal Krishnan, leitender Softwareentwickler bei Automattic

Gopal arbeitet am entkoppelten WordPress-Angebot von WordPress VIP mit Interesse an Designsystemen und Gutenberg. Er hat seinen Sitz in Sydney, Australien, und ist kürzlich von Kanada hierher gezogen.