Die Einführung des Full Site Editing (FSE) in WordPress verdeutlicht die wachsende Bedeutung der Datei theme.json. Es gibt jetzt eine ganz neue Hierarchie und Struktur zu verstehen, zusammen mit den verschiedenen Eigenschaften, die dir helfen, deine Designs zu erstellen. Insbesondere die Eigenschaft blocks in theme.json ist wichtig, wenn du moderne, flexible WordPress-Themes mit einzigartigen Blöcken erstellen willst.

In diesem Leitfaden erkunden wir die Besonderheiten der Eigenschaft blocks in theme.json, damit du mit Blöcken arbeiten, sie entwerfen und gestalten kannst, um dynamischere und anpassbare WordPress-Erlebnisse zu schaffen.

Die Eigenschaft blocks in theme.json verstehen

Bevor wir in die Feinheiten der Eigenschaft blocks eintauchen, wollen wir zunächst ihre Rolle innerhalb von theme.json und der WordPress-Theme-Entwicklung verstehen.

Ein Code-Editor-Fenster, das einen Teil einer theme.json-Datei für ein WordPress-Theme anzeigt. Die JSON-Struktur definiert benutzerdefinierte Vorlagen für „leere“, „blog-alternative“ und „404“-Seiten. Der Editor hat ein dunkles Design mit Syntaxhervorhebung und der Hintergrund zeigt eine neblige Waldlandschaft.
Die Datei theme.json von Twenty Twenty-Three

Zunächst einmal ist theme.json die Konfigurationsdatei, in der du globale Stile und Einstellungen für deine Themes festlegen kannst. In diesem „zentralen Knotenpunkt“ kannst du verschiedene Aspekte des Aussehens und Verhaltens deines Themes steuern, darunter Typografie, Farben und Layout-Optionen. Sie kann aber noch mehr als nur kosmetische Anpassungen vornehmen.

Mit der Eigenschaft blocks kannst du einzelne Blocktypen und nicht nur die gesamte Website steuern. Du kannst Standardstile, -einstellungen und -verhaltensweisen für bestimmte Blöcke festlegen, was die Konsistenz deines Themes und die Flexibilität für Website-Betreiber gewährleistet.

Die Beziehung zwischen der Block-Eigenschaft und der vollständigen Website-Bearbeitung

FSE ist ein eher visueller Ansatz für den Aufbau deiner Website mit Blöcken als Kernstück. Auf dem Frontend stehen dir die meisten Styling- und Anpassungsoptionen für deine gesamte Website zur Verfügung:

Der Hauptbildschirm des WordPress-Site-Editors zeigt eine blaue Startseite mit dem Titel „Ein Bekenntnis zu Innovation und Nachhaltigkeit“. Die Seite enthält ein modernes Architekturbild und Anpassungsoptionen in einer schwarzen linken Seitenleiste.
Die vollständige Website-Bearbeitungsoberfläche in WordPress

Die Eigenschaft blocks ist aus mehreren Gründen ein wichtiger Teil der theme.json Datei:

  • Sie bietet eine standardisierte Möglichkeit, Blockstile und Einstellungen zu definieren.
  • Du kannst kohärente Designsysteme auf einer programmatischen Basis erstellen.
  • Du kannst das Erscheinungsbild von Blöcken besser kontrollieren, ohne dass du benutzerdefiniertes CSS verwenden musst.
  • Die Eigenschaft hilft dir, Blockmuster und Vorlagen zu erstellen.

Entwickler können die Eigenschaft blocks nutzen, um Themes zu erstellen, die die vollständige Bearbeitung der Website ermöglichen.

Wie die Eigenschaft Blöcke strukturiert wird (und ihre Syntax)

Die Standardisierung, die die Eigenschaft blocks bietet, ist hilfreich, wenn es um Struktur und Syntax geht. Du wirst sie immer innerhalb des settings Objekts verschachteln:

{
"version": 3,
  "settings": {
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSizes": [
            {
              "name": "Small",
              "slug": "small",
              "size": "13px"
            },
            {
              "name": "Medium",
              "slug": "medium",
              "size": "20px"
             }
           ]
…

Das obige Beispiel definiert benutzerdefinierte Schriftgrößen für einen Absatzblock. Die wichtigsten Komponenten lassen sich ganz einfach aufschlüsseln:

  • Du verschachtelst die Eigenschaft blocks unter dem Objekt settings.
  • Jeder Blocktyp hat einen Namespace und einen Namen (hier core/paragraph).
  • Dann legst du die Einstellungen des Blocks innerhalb des Objekts fest.

Die Einstellungen umfassen das meiste, was für globale Stile verfügbar ist. Dazu gehören zum Beispiel Typografie, Farbe, Abstände und viele andere.

Konfigurieren der globalen Blockeinstellungen

Schauen wir uns an, wie du globale Einstellungen definierst und wie sich dies auf die Eigenschaft blocks auswirkt. So schaffst du eine Grundlage für ein einheitliches Design in deinem Theme.

{
"version": 3,
  "settings": {
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "13px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "20px"
        }
…

In diesem Beispiel legen wir die globalen Schriftgrößen fest, die für alle Blöcke verfügbar sind. Im WordPress-Site-Editor findest du diese Optionen im Bereich Typografie > Elemente > Text:

Der WordPress-Site-Editor zeigt die Optionen des Bedienfelds „Stile“ für Text an. Er zeigt Optionen zur Auswahl und Anpassung von Schriftart, Größe, Darstellung, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung an.
Die meisten Typografie-Einstellungen in der theme.json sind auch im Site-Editor zugänglich

Jede Schriftgröße, die du auf theme.json definierst, entspricht einer der Größenoptionen hier:

Nahaufnahme eines Code-Editors, der einen Teil einer WordPress-Datei „theme.json“ anzeigt. Der sichtbare Code definiert Schriftgrößen, einschließlich „Small“, „Medium“ und „Large“, mit ihren jeweiligen Größen in Rem-Einheiten. Die Größe „Large“ enthält eine Einstellung für fließende Typografie. Der Editor verwendet ein dunkles Design mit Syntaxhervorhebung vor einem verschwommenen Waldhintergrund.
Du legst die Voreinstellungen für die Schriftgröße in der Datei theme.json fest

Natürlich gibt es noch viele andere Möglichkeiten, dein Theme anzupassen. Die Idee ist, ein globales Design zu erstellen, das in 80% der Anwendungsfälle funktioniert.

Mit der Eigenschaft blocks kannst du die grundlegenden Blockstile überschreiben, um die letzten 20% abzudecken. Auf der Seite Stile im Seiteneditor kannst du auch die Designeinstellungen für jeden Block anpassen:

Eine Nahaufnahme der WordPress-Site-Editor-Oberfläche, die Inhaltsblockoptionen wie Absatz, Bild, Überschrift und Galerie zeigt. Der Hauptinhaltsbereich zeigt die Startseite der Website an.
Im Seiteneditor kannst du die Einstellungen für alle WordPress-Kernblöcke bearbeiten

Das ist für Endnutzer/innen hervorragend, aber für Entwickler/innen weniger wertvoll. Wir konzentrieren uns auf die Verwendung von theme.json, um mit der Eigenschaft blocks zu arbeiten.

Wie man einzelne Blocktypen anpasst

Während globale Einstellungen wichtig sind, um die Konsistenz zu wahren, liegt die wahre Stärke in der Anpassungsfähigkeit der Eigenschaft blocks. Mit dieser granularen Einstellung kannst du das Aussehen und Verhalten bestimmter Blöcke an das Design deines Themes anpassen, genau wie beim Site Editor

Schauen wir uns ein Beispiel für die Anpassung des Überschriftenblocks für dein Theme an:

{
"version": 3,
  "settings": {
    "blocks": {
      "core/heading": {
        "typography": {
          "fontSizes": [
            {
              "name": "Small",
              "slug": "small",
              "size": "20px"
            },
            {
              "name": "Medium",
              "slug": "medium",
              "size": "30px"
            },
            {
              "name": "Large",
              "slug": "large",
              "size": "40px"
            }
            ],
            "fontWeight": "bold"
            },
            "color": {
              "palette": [
                {
                  "name": "Heading Primary",
                  "slug": "heading-primary",
                  "color": "#333333"
                },
                {
                  "name": "Heading Secondary",
                  "slug": "heading-secondary",
                  "color": "#666666"
                }
              ]
…

Wie du siehst, spiegeln die Attribute wider, wie du globale Änderungen vornehmen würdest. Fassen wir zusammen, was wir hier tun:

  • Wir legen bestimmte Schriftgrößen für Überschriften fest und ordnen sie Größenbezeichnungen zu.
  • Die Schriftstärke für alle Überschriften wird einfach fett sein.
  • Diese Überschriften erhalten außerdem eine eigene Farbpalette.

So wird sichergestellt, dass unsere Überschriften im gesamten Design einheitlich aussehen. Außerdem können wir diese Elemente kontrollieren, wenn wir nicht wissen, wie der Endnutzer sie anwenden wird, was einem einheitlichen Design zugute kommt.

Die richtige Kombination aus Namespace und Slug verwenden

Wenn du Blocktypen aufrufst, ist es wichtig, dass du die richtige Namespace- und Slug-Kombination verwendest. Sonst werden deine Änderungen nicht auf die Blöcke angewendet, auf die du abzielen willst.

Jeder Block hat einen Namespace und einen Slug. WordPress-Kernblöcke haben in der Regel den Namespace core. Der Slug ist der Name des Blocks:

…
"blocks": {
  "core/image": {
…

Wenn du den Slug eines Blocks wissen willst, kannst du in seiner spezifischen block.json Datei nachsehen. Du findest sie im Verzeichnis wp-includes/blocks. Hier gibt es verschiedene Ordner, von denen jeder eine block.json Datei enthält. In jedem Ordner sollten der Namensraum und der Slug für den Block ganz oben in der Datei stehen:

Ein Teil eines macOS-Finder-Fensters, das den Inhalt des Code-Verzeichnisses anzeigt. Außerdem ist ein Teil eines Code-Editors mit einer geöffneten block.json-Datei zu sehen. Der sichtbare Code definiert Eigenschaften für einen WordPress-Block namens „core/code“ mit dem Titel „Code“ und einer Beschreibung zur Anzeige von Code-Snippets.
Die Datei block.json enthält die wichtigsten Metadaten für jeden einzelnen Block

Wenn du diese Verzeichnisse durchsuchst, wirst du feststellen, dass das Verzeichnis wp-includes eine eigene Datei theme.json hat. Das mag verwirrend erscheinen, ist aber einfach zu erklären.

Warum theme.json standardmäßig angepasste Block-Einstellungen enthält

Die WordPress-eigene Datei theme.json mag auf den ersten Blick seltsam erscheinen, weil es sich nicht um ein Theme handelt. Das ist jedoch kein Zufall. Der Hauptgrund ist die Abwärtskompatibilität mit älteren WordPress-Versionen.

Der Button-Block legt zum Beispiel einen Rahmenradius fest:

…
"blocks": {
  "core/button": {
    "border": {
      "radius": true
     }
  },
…

Andere Blöcke haben ähnliche Einstellungen, um die Konsistenz zwischen verschiedenen WordPress-Versionen zu gewährleisten. Dies kann jedoch zu Problemen führen, wenn du dir dessen nicht bewusst bist.

Wenn du versuchst, globale Einstellungen zu definieren und dich fragst, warum diese Änderungen nicht für bestimmte Blöcke gelten, könnte die Abwärtskompatibilität die Antwort sein. Natürlich kannst du diese Einstellungen in deiner eigenen theme.json Datei problemlos außer Kraft setzen.

Entwicklung von benutzerdefinierten Blöcken mit theme.json

Die Datei theme.json ist ideal für die Anpassung bestehender Blöcke, aber ihre Möglichkeiten reichen auch für die Entwicklung eigener Blöcke. Du kannst theme.json nutzen, um Standardstile und -einstellungen für deine eigenen Blöcke zu definieren. So kannst du eine nahtlose Integration in das Design deines Themes erreichen.

Zuerst musst du jedoch den Block selbst erstellen. Das würde den Rahmen dieses Artikels sprengen, aber zusammenfassend lassen sich ein paar wichtige Facetten hier auflisten:

  • Das Gerüst für den Block. Dazu musst du eine lokale Entwicklungsumgebung einrichten und die Dateistruktur für den gesamten Block erstellen.
  • Aktualisieren der Datei block.json. Hier musst du die Identität des Blocks ändern und Unterstützungen hinzufügen. Letzteres sind Möglichkeiten, um die Unterstützung für bestimmte WordPress-Funktionen zu deklarieren. So kannst du zum Beispiel die Ausrichtung anpassen, Ankerfelder implementieren, mit verschiedenen Typografieeinstellungen arbeiten und vieles mehr.
  • Passe die JavaScript-Dateien des Blocks an. Sowohl index.js als auch edit.js benötigen Code, um WordPress mitzuteilen, wie der Block funktioniert und damit er im Site-Editor angezeigt wird.

Möglicherweise musst du auch render.php bearbeiten, statisches Rendering hinzufügen und eine ganze Reihe anderer Aufgaben erledigen. An dieser Stelle kannst du wie bei jedem anderen Block auch stilistische Änderungen an theme.json vornehmen. Schauen wir uns jetzt block.json genauer an.

Die Datei block.json

Diese Datei wird vom WordPress-Entwicklungsteam als „kanonischer“ Weg bezeichnet, um Blöcke sowohl auf der Server- als auch auf der Client-Seite zu registrieren. Die Metadaten, die du hier einträgst, informieren WordPress über den Blocktyp und die dazugehörigen Dateien:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-plugin/notice",
  "title": "Notice",
  "category": "text",
  "parent": [ "core/group" ],
  "icon": "star",
  "description": "Shows warning, error or success notices...",
  "keywords": [ "alert", "message" ],
  "version": "1.0.3",
  "textdomain": "my-plugin",
  "attributes": {
    "message": {
      "type": "string",
      "source": "html",
      "selector": ".message"
    }
  },
…

Sie sind vergleichbar mit den Metadaten, die du am Anfang einer PHP-Datei für Themes und Plugins angeben würdest. Auch wenn die Datei ausschließlich JSON-Daten verwendet, kannst du dennoch Code über PHP, JavaScript und CSS austauschen:

…
"editorScript": "file:./index.js",
"script": "file:./script.js",
"viewScript": [ "file:./view.js", "example-shared-view-script" ],
"editorStyle": "file:./index.css",
"style": [ "file:./style.css", "example-shared-style" ],
"viewStyle": [ "file:./view.css", "example-view-style" ],
"render": "file:./render.php"
…

Darauf kommen wir später im Abschnitt über Variationen zurück. Zum Abschluss dieses Abschnitts musst du wissen, wie du deinen benutzerdefinierten Block als Standard in WordPress festlegen kannst. Es gibt mehrere Möglichkeiten, dies zu erreichen. Der klassische Weg ist, einen benutzerdefinierten Beitragstyp zu registrieren und die Blöcke dort einzufügen. Es gibt aber auch noch ein paar andere Methoden.

Du könntest zum Beispiel einen bestehenden Beitragstyp aktualisieren, um eine Block-Vorlage hinzuzufügen. Hier ist ein einfaches Beispiel:

…
function load_post_type_patterns() {
    // Define an initial pattern for the 'HypnoToad' post type
    $post_type_object = get_post_type_object( 'hypnoToad' );
    $post_type_object->template = array(
    array(
        'core/block',
…

Eine weitere Möglichkeit ist, den default_content Hook aufzurufen und den Block mit Markup zu definieren:

function toad_content( $content, $post ) {
    if ( $post->post_type === 'hypnoToad' ) {
        $content ='
        <div class="is-layout-flex wp-container-1 wp-block-columns"><!-- wp:column →
        <div class="wp-block-column">
        <p></p>
        </div>
        


        <div class="is-layout-flow wp-block-column">
        <p></p>
        </div>
        </div>
        ';
    }
    return $content;
}
add_filter( 'default_content', 'toad_content', 10, 2 );

Natürlich wirst du nicht nur JSON, HTML und PHP verwenden. Du wirst auch andere Sprachen verwenden, um das Design und die Interaktivität zu verbessern. Die gute Nachricht ist, dass WordPress dir eine unkomplizierte Möglichkeit bietet, dies zu tun.

Benutzerdefinierte CSS-Eigenschaften für deine Blöcke verwenden

Mit den vorhandenen Eigenschaften, Attributen und Objekten von theme.json kannst du viel erreichen, aber das deckt nicht jeden Anwendungsfall ab. Die Datei gibt dir die Eigenschaft custom an die Hand, mit der du relevante CSS-Eigenschaften erstellen kannst:

{
"version": 3,
  "settings": {
    "custom": {
      "toad": "hypno"
    }
  }
}

Hier gibst du ein Schlüssel-Wert-Paar an, das am Frontend zu einer CSS-Variablen wird:

body {
    --wp--custom--toad: hypno;
}

Beachte, dass die Variable doppelte Bindestriche verwendet, um ihre Elemente zu trennen. In der Regel siehst du immer --wp--custom--, die dann den Schlüssel am Ende kennzeichnet. Manchmal definierst du Variablen und Eigenschaften mit Camel Case:

{
"version": 3,
  "settings": {
    "custom": {
      "hypnoToad": "active"
    }
  }
}

In diesem Fall verwendet WordPress Bindestriche, um die Wörter zu trennen:

body {
    --wp--custom--hypno-toad: active;
}

Zwischen der Eigenschaft custom und block.json hast du alle Möglichkeiten, deine Blöcke so zu gestalten, wie du es für richtig hältst, einschließlich aller Variationen, die du einbauen möchtest.

Ein kurzer Blick auf Block, Stil und Blockstilvariationen

Bevor wir uns der Gestaltung mit der Eigenschaft blocks zuwenden, werfen wir einen Blick auf die Variationen. Es gibt verschiedene Variationen für deine Designs, und die Namenskonventionen könnten dazu führen, dass du den falschen Typ für deine Bedürfnisse verwendest. Hier ist eine Aufschlüsselung der Unterschiede:

  • Blockvariationen. Wenn dein Block alternative Versionen hat (denk an einen Block, der viele benutzerdefinierte Links anzeigt, die vom Nutzer eingestellt wurden), ist dies eine Blockvariation. Der Social Media Block ist ein gutes Beispiel dafür.
  • Stilvariationen. Dies sind alternative Versionen von theme.json, die auf deiner globalen Website funktionieren. Wir gehen hier nicht darauf ein, aber die meisten Block-Themes bieten sie für verschiedene Farbpaletten und Typografieeinstellungen an.
  • Block-Stilvariationen. Hier wird die Kernfunktionalität der Stilvariationen übernommen und du kannst alternative Designs für einen Block erstellen.

Du fragst dich vielleicht, ob du eine Blockvariation oder eine Blockstilvariation verwenden sollst; die Antwort ist ganz einfach. Wenn die Änderungen, die du vornehmen willst, innerhalb von theme.json oder mit CSS erfolgen können, erstelle eine Blockstilvariation. Alles andere erfordert eine Blockvariation.

Blockvariationen

Blockvariationen registrierst du mit JavaScript. Es ist eine gute Idee, eine Datei im Verzeichnis des Themes zu erstellen, aber sie kann überall hingehen. Du brauchst nur eine Zeile, um eine Variation in deiner JavaScript-Datei zu registrieren:

const registerBlockVariation = ( blockName, variation )

Für blockName musst du auch hier den Namespace angeben, wie bei der Eigenschaft blocks. Innerhalb des variation Objekts fügst du den Namen, den Titel, die Beschreibung, ob die Variation standardmäßig aktiv ist und mehr hinzu. Um die Datei im Site Editor zu laden, rufst du einfach den enqueue_block_editor_assets Hook auf und reihst dein Skript darin ein.

Blockstilvariationen

Bei den Blockstilvariationen hast du zwei Möglichkeiten:

  • Verwende die Funktion register_block_style() mit PHP.
  • Erstelle eine block-editor.js JavaScript-Datei, verwende die registerBlockStyle() Funktion ähnlich wie bei Blockvariationen und reihe das Skript ein.

Sobald du eine Blockstilvariation registriert hast, kannst du den Block mit der Eigenschaft variations ansteuern:

…
"styles": {
  "blocks": {
    "core/button": {
      "variations": {
        "outline": {
          "border": {
            "color": "var:preset|color|black",
            "radius": "0",
            "style": "solid",
            "width": "3px"
          },
…

Das bedeutet, dass du unter Umständen überhaupt kein benutzerdefiniertes CSS benötigst – fast jeder Aspekt der Gestaltung eines Blocks ist über die Eigenschaft blocks möglich.

Die komplette Gestaltung eines Standardblocks mit der Eigenschaft blocks 

Um zu zeigen, wie die Eigenschaft blocks funktioniert, gehen wir ein Beispiel aus der Praxis durch. Unsere Website nutzt das Twenty Twenty-Four-Theme und verwendet die Standardstilvariante:

Der WordPress-Site-Editor zeigt auf der rechten Seite eine Website-Startseite und auf der linken Seite das Menü „Stile“. Es gibt mehrere Optionen zur Auswahl eines alternativen Farbschemas sowie Optionen zur Anpassung der Palette.
Jedes Theme wird oft mit verschiedenen Stilvariationen ausgeliefert, die unterschiedliche Looks erzielen

Bisher sieht das für uns ideal aus – obwohl die Überschriften und der Fließtext in der Farbe zu ähnlich erscheinen. Wir möchten eine oder beide Farben ändern, um sie voneinander zu unterscheiden. Als Endnutzer oder Website-Betreiber können wir dies in der Seitenleiste des Website-Editors ändern. Wenn du zu Blöcke > Überschrift gehst, kannst du auf das Element Text klicken und die Farbe in etwas Passenderes ändern:

Die WordPress-Site-Editor-Oberfläche zeigt eine Startseite einer Website. Der Hauptinhaltsbereich zeigt eine Überschrift, eine kurze Beschreibung und eine Schaltfläche „Über uns“, die alle in Schwarz gehalten sind. Darunter befindet sich ein architektonisches Bild, das ein modernes Gebäude mit schrägen Holzlatten zeigt. In der rechten Seitenleiste werden die Stiloptionen angezeigt, mit einem Pop-up-Fenster zur Auswahl einer Textfarbe.
Du kannst die Einstellungen der einzelnen Blöcke ganz einfach im Seiteneditor ändern

Als Entwickler kannst du dies jedoch auch innerhalb von theme.json tun. Wie bei jedem anderen Theme auch, ist es am besten, ein Child-Theme zu erstellen, damit alle Änderungen erhalten bleiben. Ein weiterer Vorteil ist, dass deine theme.json Datei sauberer aussehen wird.

Wir werden ein Verzeichnis innerhalb von wp-content/themes/ erstellen und es twentytwentyfour-child nennen. Hier fügst du eine gültige Datei style.css und eine leere Datei theme.json hinzu.

Ein macOS-Datei-Explorer-Fenster für das Twentytwentyfour-Child-Theme, das zwei Dateien anzeigt: style.css und theme.json, was auf eine Child-Theme-Einrichtung für die WordPress-Entwicklung hinweist.
Jedes Child-Theme-Verzeichnis braucht eine style.css-Datei und eine theme.json-Datei

Von hier aus kannst du die JSON-Datei öffnen und dich an die Arbeit machen.

Eine theme.json-Datei für das Child-Theme erstellen und auffüllen

Der Hauptunterschied zwischen der Erstellung eines Parent- und eines Child-Themes in Bezug auf theme.json ist die Struktur der Datei. Du musst das Schema nicht angeben und nicht unbedingt alles in das settings Objekt einfügen. In unserem Fall müssen wir die Eigenschaft styles verwenden:

{
"version": 3,
  "styles": {
    "blocks": {}
  }
}

Als Nächstes müssen wir den Namespace und den Slug für den Heading Block finden. Der offizielle Core Blocks Reference Guide listet alle diese Angaben auf und sagt uns sogar, welche Attribute und Eigenschaften der Block unterstützt. Der Leitfaden sagt uns, dass wir die Werte background, gradient, link und text für die Eigenschaft color anpassen können.

"blocks": {
  "core/heading": {
    "color": {}
  }
}

Wenn die Struktur fertig ist, können wir uns überlegen, wie wir den Text umgestalten können.

Ein Farbschema finden und die Änderungen anwenden

Jetzt brauchen wir eine Farbe, die unseren Bedürfnissen entspricht. Die Standardvariante von Twenty Twenty-Four verfügt über eine hervorragende Farbpalette, und wenn wir sie in einem speziellen Kontrast-Checker überprüfen, bekommen wir einige Ideen:

Das Coolors-Tool zur Überprüfung des Farbkontrasts zeigt verschiedene Farbkombinationen mit Textbeispielen
Die Überprüfung deines Farbschemas auf den richtigen, zugänglichen Kontrast ist ein wichtiger Schritt bei der Gestaltung eines Themes

Als Nächstes können wir die Farbauswahl für unseren Block zu theme.json hinzufügen. Da das übergeordnete Twenty Twenty-Four-Theme benutzerdefinierte CSS-Eigenschaften verwendet, um Palettenstile zu definieren, können wir dies auch hier aufrufen:

…
"core/paragraph": {
    "color": { "text": "var(--wp--preset--color--contrast)" },
…

Wenn du den Namen einer Palettenfarbe wissen willst, kannst du ihn im Site Editor über den Farbwähler finden:

Eine Nahaufnahme der Farbauswahl-Oberfläche von Text Elements. Sie zeigt eine Auswahl von Farbmustern mit hexadezimalen Farbcodes, wobei die Kontrastfarbe als primäre Option eingestellt ist.
Du kannst den Namen einer Farbe herausfinden, indem du sie in einer Farbpalette des Site Editors ansiehst

Sobald du deine Änderungen gespeichert hast, aktualisiere deine Seite und du solltest das neue Farbschema sehen. Falls nicht, überprüfe, ob du die Eigenschaft blocks im richtigen Objekt verschachtelt hast, denn das ist ein häufiger Fehler.

Wenn wir uns die Seite ansehen, ist der Text weniger kontrastreich und leichter zu lesen. Wir wollen aber immer noch eine gewisse Abgrenzung zwischen dem Absatzblock und den umgebenden Überschriften sehen. Die Standardpalette des Themes bietet einige andere, kräftige Farben. Wir werden die Farbe Accent / 3 für den Überschriftenblock ausprobieren:

"blocks": {
  "core/heading": {
    "color": { "text": "var(--wp--preset--color--accent-3)" }
  },
  "core/paragraph": {
    "color": { "text": "var(--wp--preset--color--contrast)" }
  }
}

Nachdem du die Änderungen gespeichert und das Frontend aktualisiert hast, wirst du sehen, dass der Überschriftenblock nun deutlicher zu erkennen ist:

Der WordPress-Site-Editor zeigt eine Website-Startseite mit einem Header-Bild einer modernen architektonischen Struktur. Der Hauptinhalt zeigt den Text „Ein Bekenntnis zu Innovation und Nachhaltigkeit“ in orangeroter Farbe.
Das Frontend ändert den Heading Block basierend auf den Einstellungen in der theme.json

Das muss noch nicht das Ende deiner Bearbeitung sein. Du kannst sogar die Optionen des Site Editors unter theme.json anpassen.

Hinzufügen von Attributoptionen zu Blöcken

Die Optionen für die Blöcke im Site-Editor werden durch die Unterstützung der einzelnen Blöcke bestimmt. Beim Absatzblock zum Beispiel ist die Funktion der Initialen standardmäßig deaktiviert.

Der WordPress-Site-Editor zeigt eine Nahaufnahme der rechten Options-Seitenleiste. Das schwebende Typografie-Anpassungsfeld zeigt Optionen für Schriftart, Größe, Aussehen, Zeilenhöhe, Buchstabenabstand, Dekoration, Ausrichtung und Groß-/Kleinschreibung an – aber keine Initialen.
Im Site-Editor kannst du standardmäßig keine Initialisierungsfunktion auswählen

Wir können dies in der Datei theme.json und der Eigenschaft blocks wieder einschalten. Wenn wir uns das Referenzmaterial ansehen, können wir die Eigenschaft Typografie nutzen, um Initialisierungen zu aktivieren:

…
"core/paragraph": {
  "color": { "text": "var(--wp--preset--color--contrast)" },
  "typography": { "dropCap": true }
…

Sobald wir die Änderungen speichern und den Editor aktualisieren, steht dir die Option zum Aktivieren von Kapitälchen wieder zur Verfügung:

Die WordPress-Blockeditor-Oberfläche zeigt einen Absatz mit Lorem Ipsum-Text mit einer großen Initiale. In der rechten Seitenleiste sind Optionen zur Anpassung der Typografie sichtbar, und das geöffnete Menü „Weitere Elemente“ zeigt die aktivierte Option „Initiale“.
Das Aktivieren der Drop Cap-Funktion im WordPress-Site-Editor dauert nur wenige Sekunden mit theme.json

Die Datei theme.json ist nicht nur eine Konfigurationsdatei für das Design. Sie kann auch dabei helfen, Funktionen zum Site-Editor hinzuzufügen oder zu entfernen.

Wie das Managed Hosting von Kinsta deine WordPress-Theme-Entwicklung unterstützen kann

Die Feinheiten der Theme-Entwicklung und theme.json sind auf hochwertige Lösungen in der gesamten Entwicklungskette angewiesen, um das Potenzial für eine verbesserte Leistung auszuschöpfen.

Eine lokale Entwicklungsumgebung ist von entscheidender Bedeutung, denn so kannst du WordPress-Websites auf deinem lokalen Rechner erstellen, verwalten und daran herumschrauben. DevKinsta kann dir dabei helfen.

Das Dashboard für Website-Informationen in DevKinsta. Es zeigt technische Details wie die WordPress-Version, den Webserver und den Datenbanktyp an, zusammen mit Optionen zur Verwaltung der Website.
Die DevKinsta-Benutzeroberfläche

DevKinsta bietet viele Vorteile:

  • Es läuft auf Docker-Containern, was bedeutet, dass du deine Installation vom Rest deines Rechners isolierst. So kannst du deine theme.json Konfigurationen und benutzerdefinierten Blöcke in aller Ruhe testen.
  • Du kannst schnell Änderungen an deiner theme.json Datei vornehmen und die Ergebnisse sofort in deiner lokalen Umgebung sehen.
  • Es ist ein Kinderspiel, mehrere lokale Websites zu erstellen, um dein Theme mit verschiedenen WordPress-Versionen und -Konfigurationen zu testen.

Außerdem beanspruchst du keine Ressourcen deines Servers, bis du zufrieden bist und fertig bist. Die Staging-Umgebungen von Kinsta sind ein idealer nächster Schritt. Du kannst schnell eine Kopie deiner Produktionsseite erstellen und sie sogar auf deine lokale Umgebung herunterziehen, um weiter zu arbeiten.

Dies ist eine großartige Möglichkeit, die Leistung deines Themes zu testen, vor allem, wenn du die Staging-Umgebung mit dem Application Performance Monitoring (APM) von Kinsta kombinierst.

Du kannst auch die Git-Integration von Kinsta für alle deine Umgebungen nutzen. So kannst du Änderungen in die Repos schieben und von dort aus bereitstellen.

Zusammenfassung

Das Verständnis der blocks Eigenschaft in theme.json ist ein essentieller Schritt für alle Theme-Entwickler. Damit kannst du ein globales Design einzigartiger, kohärenter und relevanter machen. Die Möglichkeit, mit individuellen Core- und Custom-Block-Einstellungen zu arbeiten, hilft jedem Nutzer, die Möglichkeiten der vollständigen Website-Bearbeitung zu nutzen. Außerdem bedeutet die Verfügbarkeit dieser Optionen im Seiteneditor, dass die Endnutzer ihre eigenen Änderungen ohne Code vornehmen können, während du stellare Standardoptionen präsentierst.

Hast du noch Fragen zur Verwendung der Eigenschaft blocks mit der Datei theme.json? Stelle deine Fragen einfach in den Kommentaren unten!

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).