Block-Editor-Konfiguration mit der theme.json

Bisher ist es teilweise (sehr) frustrierend, einzelne Block-Optionen im Editor zu konfigurieren oder zu deaktivieren. Wollten wir etwa, dass für unterschiedliche Blöcke unterschiedliche Farbpaletten zur Verfügung stehen, müssten wir aktuell einige Umwege in Kauf nehmen. Und um zum Beispiel die Ausgabe der Initialbuchstabe-Option beim Absatz-Block zu deaktivieren, hilft nur das Ausblenden mit CSS, das auch nicht so einfach ist, weil die meisten Optionen nur sehr generische Klassen haben (zum Beispiel die Initiale-Option …).

Doch am Horizont erscheint, als Retterin in der Not: die theme.json (beziehungsweise aktuell noch experimental-theme.json).

Was die experimental-theme.json kann

Alles! Na gut, das ist ein wenig übertrieben. Aber sie kann sehr viel. Momentan kann sie das allerdings nur, wenn das Gutenberg-Plugin installiert ist. Aber wenn das der Fall ist, können wir eine experimental-theme.json in das oberste Verzeichnis eines Themes legen und mit der Konfiguration des Block-Editors beginnen. Eine Auflistung aller Möglichkeiten gibt es auf einer Handbook-Seite zur experimental-theme.json.

Zusammenfassend können in der Datei sowohl Einstellungen vorgenommen werden, wie die Definition der Farben für Farbpaletten oder das Aktivieren und Deaktivieren von bestimmten Block-Optionen, als auch Standard-Styles für einige fest definierte Eigenschaften festgelegt werden.

Erstellung einer experimental-theme.json

Das JSON-Objekt in der Datei definiert als Schlüssel der obersten Ebene Kontexte, die Objekte mit Einstellungen enthalten, die nur für diesen Kontext gelten. Für Anpassungen an allen Blöcken gibt es den global-Kontext, für Anpassungen bestimmter Blöcke gibt es Block-Kontexte, wie zum Beispiel core/heading/h2 für den Überschriften-Block der Ebene h2. Um im ersten Schritt beispielhaft den globalen Kontext und den erwähnten Überschriften-Block anzusprechen, würden so anfangen:

{ "global": {}, "core/heading/h2": {} }
Code-Sprache: JSON / JSON mit Kommentaren (json)

Innerhalb der Objekte können, wie kurz angerissen, sowohl Einstellungen des Editors verändert werden, als auch ein paar Standard-Styles. Die Einstellungen werden in einem Objekt settings vorgenommen und die Standard-Styles in einem Objekt styles festgelegt.

Nehmen wir an, wir möchten eine globale Farbpalette mit nur zwei Farben erstellen, einer dunklen und einer hellen. Bei dem Überschriften-Block soll die dunkle Farbe allerdings etwas heller sein, weil die Schriftgröße deutlich größer ist als beim normalen Text und ein fetter Schriftschnitt eingesetzt wird. Dafür können wir wie folgt vorgehen:

{ "global": { "settings": { "color": { "palette": [ { "name": "Dark", "slug": "dark", "color": "hsl(208.2, 67.1%, 14.3%)" }, { "name": "Light", "slug": "light", "color": "hsl(208.2, 34.4%, 87.5%)" } ] } } }, "core/heading/h2": { "settings": { "color": { "palette": [ { "name": "Dark", "slug": "dark", "color": "hsla(208.2, 67.1%, 14.3%, 0.8)" }, { "name": "Light", "slug": "light", "color": "hsl(208.2, 34.4%, 87.5%)" } ] } } } }
Code-Sprache: JSON / JSON mit Kommentaren (json)

Diese Angaben sorgen dafür, dass die verfügbare Farbpalette in Gutenberg für alle Blöcke auf zwei Farben eingestellt wird, wobei sich die dunkle Farbe für den Überschriften-Block h2 etwas unterscheidet. Daraus generiert Gutenberg das folgende CSS, das sowohl im Frontend als auch Backend angewendet wird:

:root { --wp--preset--color--dark: hsl(208.2, 67.1%, 14.3%); --wp--preset--color--light: hsl(208.2, 34.4%, 87.5%); } h2 { --wp--preset--color--dark: hsla(208.2, 67.1%, 14.3%, 0.8); --wp--preset--color--light: hsl(208.2, 34.4%, 87.5%); } .has-dark-color { color: hsl(208.2, 67.1%, 14.3%); } .has-dark-background-color { background-color: hsl(208.2, 67.1%, 14.3%); } .has-light-color { color: hsl(208.2, 34.4%, 87.5%); } .has-light-background-color { background-color: hsl(208.2, 34.4%, 87.5%); } h2.has-dark-color { color: hsla(208.2, 67.1%, 14.3%, 0.8); } h2.has-dark-background-color { background-color: hsla(208.2, 67.1%, 14.3%, 0.8); } h2.has-light-color { color: hsl(208.2, 34.4%, 87.5%); } h2.has-light-background-color { background-color: hsl(208.2, 34.4%, 87.5%); }
Code-Sprache: CSS (css)

Schauen wir uns jetzt in einem Beispiel mit styles an, wie die Farbwerte direkt für einen Block genutzt werden können:

{ "global": { "settings": { "color": { "palette": [ { "name": "Dark", "slug": "dark", "color": "hsl(208.2, 67.1%, 14.3%)" }, { "name": "Light", "slug": "light", "color": "hsl(208.2, 34.4%, 87.5%)" } ] } } }, "core/group": { "styles": { "color": { "background": "var(--wp--preset--color--dark)", "text": "var(--wp--preset--color--light)" } } } }
Code-Sprache: JSON / JSON mit Kommentaren (json)

Dieser Code sorgt dafür, dass Gruppen-Blöcke beim Einfügen die dunkle Farbe als Hintergrund und die helle als Textfarbe haben.

Zusätzlich zu den Farbpaletten-Anpassungen zeige ich jetzt noch, wie sich ein paar der Text-Einstellungen deaktivieren lassen:

{ "global": { "settings": { "color": { "palette": [ { "name": "Dark", "slug": "dark", "color": "hsl(208.2, 67.1%, 14.3%)" }, { "name": "Light", "slug": "light", "color": "hsl(208.2, 34.4%, 87.5%)" } ] }, "typography": { "customFontSize": false, "customLineHeight": false, "dropCap": false, "fontSizes": [] } } } }
Code-Sprache: JSON / JSON mit Kommentaren (json)

Mit dem typography-Objekt sorgen wir dafür, dass keine eigenen Schriftgrößen oder Zeilenhöhen festgelegt werden können, keine Option für einen Initialbuchstaben und kein Auswahlfeld für Schriftgrößen angezeigt wird. 🎉

Ein Absatzblock hat damit in der aktuellen Gutenberg-Plugin-Version nur die Farb-Optionen übrig, und auch die ließen sich entfernen, falls gewünscht. Die folgende experimental-theme.json räumt die Block-Optionen ordentlich auf:

{ "global": { "settings": { "color": { "palette": [], "gradients": [], "custom": false, "customGradient": false }, "typography": { "customFontSize": false, "customLineHeight": false, "dropCap": false, "fontSizes": [] } } } }
Code-Sprache: JSON / JSON mit Kommentaren (json)

Für einzelne Blöcke können die Optionen wieder aktiviert werden.

Was bei der experimental-theme.json noch geplant ist

Im Gutenberg-Repo gibt es ein Issue zu geplanten Updates der experimental-theme.json-Möglichkeiten. Teil davon ist beispielsweise die Integration der Theme-Metadaten in diese Datei, sowie Unterstützung für eigene Templates in Block-basierten Themes.

Um diese zusätzlichen Informationen sinnvoll eintragen zu können, wird in naher Zukunft wahrscheinlich die JSON-Struktur angepasst, sodass settings und styles auf die oberste Ebene des JSON-Objekts wechseln und die Kontexte dann innerhalb des settings– und styles-Objekts stehen.

Innerhalb von settings soll es möglich werden kleinteiliger festzulegen, wo Optionen angezeigt oder nicht angezeigt werden. So könnten Optionen dann zusätzlich zu nirgends und überall noch nur in der Block-Sidebar oder nur in der Styles-Sidebar des Site-Editors angezeigt werden, der bei Block-basierten Themes aktiv ist.

Zudem wird überlegt, den global-Kontext durch * (zum Ansprechen aller Blöcke) und root (zum Ansprechen des Site-Blocks im Site-Editor) zu ersetzen, und wie am besten verschachtelte Style-Angaben gemacht werden können, zum Beispiel um einen Block in der Sidebar anzusprechen.

Fazit

Die experimental-theme.json ist sicher noch nicht bereit für den Einsatz auf Kunden-Sites, schon alleine wegen der Notwendigkeit, das Gutenberg-Plugin aktiv zu haben. Aber die Funktion ist definitiv etwas, worauf ich mich sehr freue – ganz besonders auf die Möglichkeiten, die Optionen zu konfigurieren und auszublenden.

12 Kommentare

Reposts

  • Florian Brinkmann
  • Torsten Landsiedel
  • Johannes Kinast

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.