Wie man Stilvarianten in WordPress 6.0 Block Themes erstellt

Avatar of Ganesh Dahal
Ganesh Dahal am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Globale Stile, eine Funktion von Block-Themes, ist einer meiner Lieblingsteile bei der Erstellung von Block-Themes. Das Konzept von globalen Stilvarianten in WordPress wurde in Gutenberg 12.5 eingeführt, was es Theme-Autoren ermöglichen würde, alternative Varianten eines Block-Themes mit unterschiedlichen Kombinationen von Farben, Schriftarten, Typografie, Abständen usw. zu erstellen. Unterschiedliche theme.json-Dateien, die im Ordner /styles gespeichert sind, „ermöglichen es Benutzern, schnell und einfach zwischen verschiedenen Looks im selben Theme zu wechseln.“

Die Benutzeroberfläche des globalen Stilpanels befindet sich in aktiver Entwicklung. Weitere Details zur Entwicklung dieser Funktion finden Sie hier auf diesem GitHub-Ticket (#35619).

In diesem Artikel führe ich Sie durch die Erstellung einer Proof-of-Concept-globalen Stilvariante unter Verwendung alternativer /styles/theme.json-Dateien und erstelle Child-Themes mit unterschiedlichen Farbmodi, indem nur die Farbpaletten ausgetauscht werden.

Inhaltsverzeichnis

Voraussetzungen

Dieser Artikel richtet sich an Personen mit grundlegenden Kenntnissen von WordPress Block-Themes und einiger Vertrautheit mit der Verwendung der Full Site Editor (FSE)-Oberfläche. Wenn Sie neu bei Block-Themes und FSE sind, können Sie hier auf CSS-Tricks mit dieser tiefen Einführung in WordPress Block-Themes und Site Editor Dokumentation beginnen. Diese Full Site Editing-Website ist einer der aktuellsten Tutorial-Leitfäden, um alle FSE-Funktionen, einschließlich der in diesem Artikel besprochenen Block-Themes und Stilvarianten, zu erlernen.

Globale Stilvarianten

Zurück zu den Grundlagen, lassen Sie uns kurz die globalen Stilvarianten im Überblick betrachten. Kjell Reigstad, Lead von Twenty Twenty-Two (TT2) und Design Director bei Automattic, führte globale Stilvarianten mit diesem Tweet und GitHub-Ticket #292 als Child-Themes ein. Im Ticket merkt Kjell an, dass sie ursprünglich als alternative Farb- und Schriftkombinationen gedacht waren, aber für die Erstellung einfacher Child-Themes verwendet werden können.

Dieses Beispiel von Kjell zeigt, wie verschiedene Stil-Kombinationen aus Optionen in der Seitenleiste ausgewählt werden können.

Seitdem experimentiert das Automattic Theme-Team mit dem Konzept, variable Child-Themes (nur variable Farben und Schriftarten) zu erstellen, darunter die folgenden

  • geologist mit blauen, cremefarbenen, schiefergrauen und gelben Varianten
  • quadrat mit schwarzen, grünen, roten, weißen und gelben Versionen

Globaler Stilwechsler

Das Release von Gutenberg 12.5 hat einen globalen Stilwechsler eingeführt, der es Benutzern ermöglicht, schnell und einfach zwischen verschiedenen Looks im selben Theme über verschiedene theme.json-Dateien zu wechseln, die in einem /styles-Ordner gespeichert sind.

Das Konzept, den Wechsel von globalen Stilvarianten über theme.json zu ermöglichen, wird auf GitHub schon seit einiger Zeit diskutiert. Der leitende Gutenberg-Ingenieur Matias Ventura hat ihm durch die Aufnahme in die WordPress 6.0 Roadmap kürzlich neue Bedeutung verliehen.

Nutzen Sie Stilalternativen, die von json-Variationen angetrieben werden. Dies wurde in verschiedenen Videos rund um das neue Standard-Theme angedeutet und sollte in 6.0 vollständig enthüllt und präsentiert werden. Eines der parallelen Ziele ist es, einige deutliche Variationen von TT2 zu erstellen, die nur mit Stilen gemacht sind. (35619)

Matias Ventura, „Preliminary Roadmap to 6.0“

Die neueste Entwicklungsiteration des Theme-Stilvariantenwechslers ist mit Gutenberg 13.0 verfügbar und in WordPress 6.0 enthalten. In diesem Exploring WordPress 6.0 Video gibt Anne McCarthy, Produktbeauftragte bei Automattic, einen Überblick über die wichtigsten Funktionen, darunter Stilvarianten und die Webfonts API (ab 5:18), die in diesem Artikel besprochen werden.

Theme-Stilvariante versus Child-Theme

In meinem letzten Artikel habe ich kurz die Erstellung von Block-Child-Themes behandelt. Globale Stilvarianten haben die Grenze zwischen alternate-theme.json und Child-Themes verwischt. Zum Beispiel ist der einzige Unterschied zwischen einem kürzlich veröffentlichten alante-dark Child-Theme und seinem übergeordneten Theme eine alternate.json-Datei im Child-Theme, die die globalen Theme-Stile wie folgt überschreibt:

Screenshot of the Visual Studio Code UI displaying the contents of alante-dark.
Das Alante-Dark-Theme.

Ebenso unterscheiden sich die beiden kürzlich veröffentlichten Alara Child-Themes im WordPress-Verzeichnis – Framboise und Richmond – nur durch ihre einzelne theme.json-Datei.

Abschnitt 1: Erstellung von Theme-Stilvarianten

Erstellen Sie im Stammverzeichnis Ihres Child-Themes einen /styles-Ordner, der Stilvarianten als JSON-Dateien enthält. Für dieses Demo-Beispiel habe ich drei Variationen der theme.json-Farbpaletten von Twenty Twenty-Two erstellt – blue.json, maroon.json und pink.json – indem ich Vorder- und Hintergrundfarben ausgetauscht habe.

Screenshot of the Visual Studio Code UI displaying the child theme file structure of "blue.json", "maroon.json", and "pink.json" in the styles directory.
Die Dateistruktur des Child-Themes „blue.json“, „maroon.json“ und „pink.json“ im Styles-Verzeichnis.

Hier ist das Endergebnis nach dem Klicken auf das Stil-Symbol im Admin-Dashboard (zu finden unter **Design → Editor**)

Animated GIF showing the theme variations in WordPress.
Durchlaufen der WordPress-Adminoberfläche zur Auswahl der „blue“, „maroon“ und „pink“ Stile.

Klicken Sie auf die Schaltfläche **Andere Stile** (kürzlich überarbeitet zu Browser-Stile), die zusätzlich zu den Originalstilen „blue“, „maroon“ und „pink“ Farbstil-Symbole anzeigt.

Um einen Stil zu ändern und auszuwählen, wählen Sie Ihre bevorzugte Variante aus und klicken Sie auf die Schaltfläche **Speichern** (oben rechts), die auf der Frontend Ihres Browsers angezeigt wird.

Das Hinzufügen von Labels zu alternativen Stilvarianten und Dateinamen mit Hover-Animationseffekt sind in Gutenberg 13.0 verfügbar.

Schritt 1: Einrichtung und Installation

Installieren und richten Sie zuerst eine WordPress-Site mit Dummy-Inhalten ein. Für diese Demo habe ich eine frische WordPress-Installation durchgeführt, das Twenty Twenty-Two-Theme aktiviert und Gutenberg-Testdaten hinzugefügt.

Die in diesem Artikel besprochenen Theme-Stilvarianten und die Webfonts-API erfordern die Installation und Aktivierung des Gutenberg 13.0 Plugins oder WordPress 6.0.

Schritt 2: Erstellen eines TT2 Child-Themes

In diesem Demo-Child-Theme-Beispiel variieren wir die Körperfarbe leicht von der Kopf- und Fußzeilenfarbe, wobei der gesamte Website-Inhalt zentriert ist.

The lower part of the site design are not visible because it is not scrolled into view. Site navigation is present in the header. A large banner image with a bird is visible. A date and title for the latest blog entry is also visible.
Screenshot des Standardaussehens des Demo-Themes in einem Browserfenster.

Schritt 3: Erstellen von JSON-Dateien

Erstellen Sie /styles im root-Ordner Ihres Child-Themes mit den Dateien blue, maroon und pink.json.

__ style.css
__ theme.json
__ functions.php
__ index.php
__ templates
__ ...
__ parts
__ ...
__ styles
__ blue.json
__ maroon.json
__ pink.json

Schritt 4: Erstellen alternativer theme.json-Dateien

Als Nächstes erstellen Sie Ihre alternate-theme.json-Dateien mit den gewünschten Farbpaletten im Ordner /styles. Für dieses Demo-Beispiel habe ich drei Farbpaletten erstellt (blue, maroon und pink). Hier ist der Code für maroon.json:

{
  "version": 2,
  "title": "Maroon",
  "settings": {
    "color": {
      "palette": [
        { "slug": "foreground", "color": "#7C290F", "name": "Foreground" },
        { "slug": "background", "color": "#ffffff", "name": "Background" },
        { "slug": "foreground-dark", "color": "#000000", "name": "Foreground Dark" },
        { "slug": "background-body", "color": "#ffd8be", "name": "Background Body" },
        { "slug": "primary", "color": "#000000", "name": "Primary" },
        { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" },
        { "slug": "tertiary", "color": "#55ACEE", "name": "Tertiary" }
      ]
  },
  "typography": {}
},
"styles": {
  "color":
      {
        "background": "var(--wp--preset--color--background-body)",
        "text": "var(--wp--preset--color--foreground-dark)"
      },
  "elements": {
      "link": {
        "color": { "text": "var(--wp--preset--color--primary)" }
      }
    }
  }
}

Die anderen beiden alternativen blue.json- und pink.json-Dateien tauschen die Werte von foreground und background-body, foreground-dark und primary color Eigenschaften mit ihren jeweiligen blue- und pink-Hex-Farbwerten aus.

Abschnitt 2: Ein Anwendungsfallbeispiel

Wie ich in meinem vorherigen Artikel erwähnt habe, arbeite ich an Block-Themes und nutze sie für mein eigenes persönliches Projekt-Website. Inspiriert von den Theme-Stilvarianten und der Webfonts API-Funktionen im Gutenberg-Plugin, begann ich, mein in Arbeit befindliches Block-Theme mit einem alternativen dunklen Farbmodus und der Konfiguration der Webfonts API anzupassen.

In diesem Abschnitt führe ich Sie durch die Erstellung von TT2 Gopher Blocks, einer Demo-Schwester meines in Arbeit befindlichen Block-Themes, das für diesen Artikel erstellt wurde. Das Theme beinhaltet Marroon-, Dunkel- und Hell-Farbmodi, die mithilfe von Theme-Stilvarianten und der Webfonts-API erstellt wurden, welche mit der Gutenberg 12.8-Version verfügbar wurden.

Showing the homepage we are creating with style variations in WordPress.
Screenshot, der eine Beispiel-Website mit dem TT2 Gopher Theme in der Standardfarbe Maroon zeigt.

Einige Highlights des TT2 Gopher Themes sind zentrierte, einspaltige Inhaltsanzeige, deutliche Kopf- und Fußzeile, benutzerfreundlichere Archiv- und Suchseiten.

Eine Kopie von TT2 Gopher Blocks ist im GitHub-Repository verfügbar, das Sie forken und anpassen können.

Dark Mode in WordPress erstellen

Zuerst einige Hintergrundinformationen zu Dark Mode. Dark Mode ist eine persönliche Präferenz und Entwickler bieten ihn oder andere Modus-Umschalter an, wie auf dieser Seite, was für die meisten normalen Entwickler keine kleine Aufgabe ist. Die Erstellung von Dark Mode ist hier auf CSS-Tricks gut abgedeckt, einschließlich dieses vollständigen Leitfadens zu Dark Mode und Dark Mode Typografie.

Auf einer WordPress-Website können wir einen Dark-Mode-Umschalter mit dem WP Dark Mode Plugin hinzufügen. Erin Myers von WP Engine und WPBeginner beschreiben die Verwendung des WP Dark Mode Plugins, während Brenda Barron andere Dark-Mode-Plugin-Optionen in diesem WPExplorer-Beitrag auflistet.

Die Erstellung eines Dark Modes in WordPress Block-Themes ohne Plugin erfordert mehrere Schritte. Vor über einem Jahr erstellte Ari Stathopoulos eine Dark-Unterstützung für das TT1 Blocks Theme auf GitHub. Wenn man sich das Beispiel hier ansieht, sind einige JavaScript-Kenntnisse erforderlich, um Assets (z.B. Umschalter, Anpassung, Editor-Modus-Unterstützung), dunkle Farb-CSS-Variablen und erweiterte functions.php-Dateien zu erstellen.

In diesem kurzen Video zeigt Anne McCarthy von Automattic, wie einfach es ist, einen Dark Mode des TT2 Block-Themes mit globaler Stilvariante zu erstellen, indem sie Kjellrs Gist von JSON-Snippets im TT2 /styles-Ordner hinzufügt.

Erstellung des Demo TT2 Gopher Blocks Themes

TT2 Gopher ist eine sehr einfache und modifizierte Version des Standard-Themes Twenty Twenty-Two. Es enthält drei Theme-Stilvarianten – Maroon, Dark und White.

Die Beschreibung jedes Anpassungsschritts sprengt den Rahmen dieses Artikels, aber Sie können mehr in meiner tiefen Einführung in WordPress Block-Themes sowie im Block Editor Handbook auf WordPress.org erfahren.

Ein kurzer Überblick über die Farbkombinationen und Schriftarten des TT2 Gopher Themes beinhaltet

  • Lichtmodus
    • Die Kopfzeile ist weiß und die Fußzeile hat eine rauchige Hintergrundfarbe für den Körper.
    • Open Sans ist die primäre Schriftart.
  • Dunkelmodus
    • Die Kopf- und Fußzeile sind schwarz, mit helleren dunklen Farben für die Hintergrundfarben des Körpers.
    • Source Serif Pro ist die primäre Schriftart.
  • Maroon-Modus
    • Die Kopf- und Fußzeile sind beide eine dunkelrote Farbe, mit einem helleren gelblichen Hintergrund für den Körper.
    • Work Sans ist die primäre Schriftart.

Ich werde Ihnen kurz erklären, wie ich Theme-Stilvarianten erstellt habe.

Webfonts hinzufügen und konfigurieren

Das Gutenberg 12.8 Plugin hat eine neue Webfonts API eingeführt, die es Autoren ermöglicht, lokale (gebündelte) Schriftarten „auf eine leistungsschonende, datenschutzfreundliche und zukunftssichere Weise“ zu laden. Diese Funktion kann in einem Block-Theme auf PHP- oder theme.json-Wege implementiert werden.

Derzeit funktioniert diese Funktion nur mit Schriftarten, die mit Block-Themes gebündelt sind, und unterstützt keine Google-gehosteten Schriftarten wegen Datenschutzbedenken. Weitere Details zum aktuellen Stand der Webfonts API-Entwicklung sind in diesem Artikel von make WordPress core und diesem Artikel von WP Tavern zu finden.

Schritt 1: Schriftarten herunterladen und zum Block-Theme hinzufügen

Das TT2-Theme fügt Source Serif Pro-Schriftartdateien zum assets/fonts-Ordner des Themes hinzu. Zwei zusätzliche Schriftarten – Work Sans und Public Sans – werden ebenfalls im GitHub-Repository bereitgestellt.

Schritt 2: Webfonts registrieren

Im TT2-Theme werden lokale Source Serif Pro Webfonts mit PHP in seiner functions.php-Datei registriert.

function twentytwentytwo_get_font_face_styles() {
  return "
  @font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
  }
  @font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
  }
  ";
}

Gutenberg 12.8 hat die Möglichkeit eingeführt, lokale Webfonts mit der theme.json-Datei zu registrieren. Die folgenden theme.json-Snippets aus dem Demo TT2 Gopher Theme zeigen, wie lokale Work Sans Webfonts in der Maroon-Theme-Stilvariante registriert werden.

"typography": {
  "fontFamilies": [
    {
      "fontFamily": "'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif",
      "slug": "work-sans",
      "name": "Work Sans",
      "fontFace": [
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] }
      ]
    }
  ]
}

Zusätzliche Informationen zur Registrierung und Verwendung lokaler Webfonts in Block-Themes finden Sie in diesem Tutorial und diesem WP Tavern-Artikel.

Erstellung von Theme-Stilvarianten

Nach den im vorherigen Abschnitt beschriebenen Schritten habe ich zwei alternative Versionen der theme.json-Datei erstellt – white.json und black.json – mit unterschiedlichen Farb- und Schriftkombinationen im /styles-Ordner des Child-Themes.

Diese Funktion erfordert Version 2 von theme.json. Seit Gutenberg 12.5 kann ein Titel auch in theme.json hinzugefügt werden, um das Stil-Label im Site-Editor anzuzeigen, oder der Dateiname (ohne Erweiterung) wird standardmäßig angezeigt.

Hier ist ein Beispiel für white.json:

{
  "version": 2,
  "title": "White",
  "settings": {
    "color": {
      "palette": [
        { "slug": "foreground", "color": "#000000", "name": "Foreground" },
        { "slug": "background", "color": "#f2f2f2", "name": "Background" },
        { "slug": "background-header", "color": "#ffffff", "name": "Background header" },
        { "slug": "primary", "color": "#0d0d0d", "name": "Primary" },
        { "slug": "secondary", "color": "#F0EAE6", "name": "Secondary" },
        { "slug": "tertiary", "color": "#eb3425", "name": "Tertiary" },
        { "slug": "quaternary", "color": "#7c7e83", "name": "Quaternary" }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
        "fontFamily": "\"Public Sans\", sans-serif",
        "name": "Public Sans",
        "slug": "public-sans",
        "fontFace": [
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:.assets/fonts/publicSans/PublicSans-VariableFont_wght.ttf.woff2" ] },
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/publicSans/PublicSans-Italic-VariableFont_wght.ttf.woff2" ] }
        ]
      }
    ]
  }
},
"styles": {
  "blocks": {
    "core/image": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/post-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
    },
    "core/query-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
    },
    "core/post-featured-image": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/site-logo": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/site-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)", "fontWeight": "normal" }
    }
    },
    "color": { "background": "var(--wp--preset--color--background)", "text": "var(--wp--preset--color--foreground)" },
    "elements": {
      "h1": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--colossal)" }
      },
      "h2": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
      },
      "h3": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--huge)" }
      },
      "h4": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--preset--font-size--x-large)" }
      },
      "h5": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
      },
      "h6": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "400", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
      },
      "link": {
        "color": { "text": "var(--wp--custom--color--foreground)" }
      }
    },
    "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)" }
  }
}

Dieser Code tauscht Farbpaletten aus theme.json und registriert und definiert auch die lokalen Public Sans-Schriftdateien.

Das black.json ist ebenfalls sehr ähnlich und verwendet die in der functions.php-Datei registrierten Source Serif Pro-Schriftarten.

Screenshot of the light color theme on the left. And screenshot of the dark color theme on the right. The heading navigation and first blog entry are visible.
Seitenvergleich der hellen (links) und dunklen (rechts) Farbthemen für TT2 Gopher.

Beispiel für Block-Themes mit Theme-Stilvarianten

  • Twenty Twenty-Two – das erste Standard-Theme mit Stilvarianten. Sein aktualisiertes 1.2, gebündelt mit WordPress 6.0, enthält drei Stilvarianten – „Blue“, „Pink“ und „Swiss“ –, die es Benutzern ermöglichen, schnell zwischen verschiedenen visuellen Stilen zu wechseln.
  • Frost – ein experimentelles Block-Theme mit dunkler Theme-Stilvariante.
  • Alara – hat über 100 aktive Installationen und enthält 7 Stilvarianten.
  • Wabi – das die Rich Tabor Website betreibt, enthält 3 Stilvarianten und über 300 aktive Installationen.
  • Brisky – hat mehr als 600 Installationen und eine dunkle Theme-Stilvariante.
  • Pendant – ein Theme des Automattic Theme-Teams, das sich in der Entwicklung auf GitHub befindet, enthält 3 Theme-Stilvarianten.

In diesem WP Tavern-Artikel spekuliert Justin, dass diese neue Funktion von Theme-Autoren genutzt werden könnte, indem sie an die Einstellungen des Website-Besuchers gekoppelt wird, während einige Benutzer möglicherweise ihre Website mit einem saisonalen oder ereignisbasierten Design verändern möchten. Dies ist wahrscheinlich noch etwas früh, aber nur die Zeit wird zeigen, wie diese leistungsstarke Funktion sowohl von Theme-Autoren als auch von Benutzern genutzt wird.

Zusammenfassung

Das Erstellen von Stilvarianten eines Block-Themes mit unterschiedlicher Typografie und Farbkombinationen wurde stark vereinfacht, ohne Plugins zu verwenden. Es ist eine meiner Lieblingsfunktionen des Block-Editors, die ich in meinen persönlichen Projekten anwenden möchte.

Meiner Meinung nach sind Theme-Stilvarianten definitiv ein Game Changer für Block-Themes und mit dieser praktischen Funktion besteht möglicherweise keine Notwendigkeit mehr für Child-Themes oder sogar viele einfallslose Block-Themes. Einige gut gestaltete Basis-Block-Themes, ähnlich den block-canvas oder blockbase (in Entwicklung befindliche Basis-Block-Themes auf GitHub) des Automattic Theme-Teams, könnten mit Theme-Stilvarianten angepasst werden.

Ressourcen

Dark Mode

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Hinterlassen Sie eine Antwort

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

© .