So erstellen Sie Stilvariationen in WordPress 6.0 -Blockthemen

Globale Stile, ein Merkmal der Blockthemen, ist einer meiner Lieblingsteile bei der Erstellung von Blockthemen. Das Konzept der globalen Stilvariationen in WordPress wurde in Gutenberg 12.5 eingeführt, mit dem die Autoren von Themen alternative Variationen eines Blockthemas mit unterschiedlichen Farben, Schriftarten, Typografie, Abstand usw. erstellen können.

Die Global Styles Panel UI befindet sich in aktiver Entwicklungsiteration. Weitere Details zur Entwicklung dieser Funktion finden Sie hier in diesem Github -Ticket (#35619).

In diesem Artikel werde ich mithilfe alternate /styles/theme.json-Dateien eine globale Variation des globalen Stils erstellen und unter Verwendung von Alternate /Styles/theme.json-Dateien mit unterschiedlichen Farbmodi durch Austausch von Farbpaletten erstellen.

Inhaltsverzeichnis

• Inhaltsverzeichnis
• Voraussetzungen
• Globale Stilvariationen
• Abschnitt 1: Erstellen von Themenstilvariationen
• Abschnitt 2: Ein Beispiel für einen Anwendungsfall
• Beispiel für Blockthemen mit Themenstil -Variationen
• Einpacken
• Ressourcen

Voraussetzungen

Dieser Artikel ist für diejenigen gedacht, die ein grundlegendes Verständnis der WordPress -Block -Themen und der Verwendung der FSE -Schnittstelle (Full Site Editor) haben. Wenn Sie neu sind, um Themen und die FSE zu blockieren, können Sie hier auf CSS-Tricks mit dieser tiefen Einführung in die WordPress-Block-Themen und die Dokumentation von Site Editor beginnen. Diese vollständige Website zur Bearbeitung von Site ist eines der aktuellsten Tutorials-Guides, um alle FSE-Funktionen zu lernen, einschließlich Blockthemen und Stilvariationen, die in diesem Artikel diskutiert werden.

Globale Stilvariationen

Für einige Hintergrundinformationen übersehen wir kurz die Variation der globalen Stilstil. Zweiundzwanzig zwei (TT2) Themen-Lead- und Automattic-Designdirektor Kjell Reiglstad führte mit diesem Tweet- und Github-Ticket Nr. 292 als Kinderthemen globale Stilvariationen ein. Im Ticket stellt Kjell fest, dass sie ursprünglich als alternative Farbmuster und Schriftarten gedacht waren, aber sie können zum Aufbau einfacher Kinderthemen verwendet werden.

Dieses Beispiel von Kjell zeigt, wie unterschiedliche Stilkombinationen aus den in der Seitenleiste verfügbaren Optionen ausgewählt werden können.

Seitdem experimentiert das Automattic -Thementeam mit dem Konzept, um variable untergeordnete Themen (nur variable Farbe und Schriftarten) zu erstellen, einschließlich der folgenden:

• Geologe mit Blau, Sahne, Schiefer, gelbe Variationen
• Quadrat mit schwarzen, grün, rot, weißen und gelben Versionen

Global Style Switcher

Die Release Gutenberg 12.5 hat einen globalen Styles -Switcher eingeführt, mit dem Benutzer schnell und einfach zwischen verschiedenen Looks im selben Thema über verschiedene Themen wechseln können.

Das Konzept, die Variation des globalen Stils über thema zu wechseln. Json wird seit einiger Zeit auf Github diskutiert. Die Gutenberg -Lead -Ingenieurin Matias Ventura gab ihm kürzlich eine erneute Bedeutung, indem sie es zur WordPress 6.0 -Roadmap hinzufügte.

Embrace -Stil Alternativen von JSON -Variationen angetrieben. Dies wurde in verschiedenen Videos rund um das neue Standardthema geärgert und sollte vollständig vorgestellt und in 6.0 präsentiert werden. Eines der parallelen Ziele ist es, einige unterschiedliche Variationen von TT2 zu erstellen, die nur mit Stilen hergestellt wurden. (35619)

Matias Ventura, "Vorläufige Roadmap auf 6.0"

Die neueste Entwicklungs -Iteration des Themenstil -Variationsschalters ist mit Gutenberg 13.0 erhältlich und in WordPress 6.0 enthalten. In diesem ErkundungswordPress 6.0 -Video bietet Automattic Product Liaison Anne McCarthy einen Überblick über seine Hauptfunktionen, einschließlich Stilvariationen und Webfonts -API (ab 5:18), die in diesem Artikel diskutiert werden.

Themenstil -Variation im Vergleich zu Kindernthemen

In meinem vorherigen Artikel habe ich kurz die Kinderthemen für Bausteine ​​behandelt. Globale Stilvariationen haben die Grenze zwischen Alternativ-Themen- und Kinderthemen verwischt. Beispielsweise ist der einzige Unterschied zwischen einem kürzlich veröffentlichten Alante-Dark-Kindsthema und seinem übergeordneten Thema eine alternative.json-Datei in dem untergeordneten Thema, das die globalen Themenstile wie folgt überschreibt:

Ebenso unterscheiden sich die beiden neueren Alara -Kinderthemen im WordPress -Verzeichnis - Framboise und Richmond - nur in ihrer einzelnen themen.json -Datei.

Abschnitt 1: Erstellen von Themenstilvariationen

Erstellen Sie im Ordner Ihres untergeordneten Ordners Ihres untergeordneten Themas einen A /Styles -Ordner, der Stilvariationen als JSON -Dateien enthält. Für dieses Demo-Beispiel habe ich drei Variationen von Twenty-Two's Thema erstellt.

Hier ist das Endergebnis nach dem Klicken auf das Styles -Symbol aus dem Admin -Dashboard (befindet sich bei Aussehen → Editor ):

Klicken Sie auf die Schaltfläche " Andere Stile" (kürzlich in Browser -Stile überarbeitet), in der neben seinen Originalstilen „Blue“, „Maroon“ und „Pink“ -Konponstil -Symbole angezeigt werden.

Um einen Stil zu ändern und auszuwählen, wählen Sie Ihre bevorzugte Variation aus und klicken Sie auf die Schaltfläche Speichern (oben rechts), die am vorderen Ende Ihres Browsers angezeigt wird.

Hinzufügen von Beschriftungen zu alternativen Stilvariationen und Dateinamen mit Hover -Animationseffekt sind in Gutenberg 13.0 verfügbar.

Schritt 1: Einrichtung und Installation

Installieren Sie zuerst eine WordPress -Site mit Dummy -Inhalten. Für diese Demo habe ich eine frische WordPress-Installation erstellt, das 22-2-Thema aktiviert und Gutenberg-Testdaten hinzugefügt.

Die in diesem Artikel diskutierten Variationen und WebFonts -API -Stil -Stil -Stil erfordern die Installation und Aktivierung des Gutenberg 13.0 Plugin oder WordPress 6.0.

Schritt 2: Erstellen Sie ein TT2 -Kinderthema

Lassen Sie uns in diesem Beispiel für Demo -Kinderthemen die Körperfarbe von der Kopf- und Fußzeile -Farbe leicht variieren, wobei alle Site -Inhalte zentriert sind:

Schritt 3: JSON -Dateien erstellen

Erstellen /Stile im Root -Ordner Ihres Kinderthemens mit blauen, kastanienbraunen und pink.json -Dateien:

 __ style.css
__ themen.json
__ Funktionen.php
__ INDEX.PHP
__ Vorlagen
__ ...
__ Teile
__ ...
__ Stile
__ Blue.json
__ maroon.json
__ pink.json

Schritt 4: Erstellen Sie alternative Thema JSON -Dateien

Erstellen Sie als nächstes Ihre alternativen-themen.json-Dateien mit gewünschten Farbpaletten im Ordner /Styles. Für dieses Demo -Beispiel habe ich drei Farbpaletten (blau, kastanienbraun und rosa) erstellt. Hier ist der Code für maroon.json:

 {
  "Version": 2,
  "Titel": "Maroon",
  "Einstellungen": {
    "Farbe": {
      "Palette": [
        {"Slug": "Vordergrund", "Farbe": "#7c290f", "Name": "Vordergrund"},
        {"Slug": "Hintergrund", "Farbe": "#ffffff", "Name": "Hintergrund"},
        {"Slug": "Vordergrund-Dark", "Farbe": "#000000", "Name": "Vordergrund dunkel"},
        {"Slug": "Hintergrundkörper", "Farbe": "#ffd8be", "Name": "Hintergrundkörper"},
        {"Slug": "primär", "Farbe": "#000000", "Name": "primär"},
        {"Slug": "sekundär", "Farbe": "#ffe2c7", "Name": "sekundär"},
        {"Slug": "Tertiär", "Farbe": "#55acee", "Name": "Tertiary"}
      ]
  },
  "Typografie": {}
},
"Stiles": {{
  "Farbe":
      {
        "Hintergrund": "var (-wp-preset-color-background-körper)",
        "Text": "var (-wp-preset-color-Feurer-Dark)"
      },
  "Elemente": {{
      "Link": {
        "Farbe": {"Text": "var (-wp-preset-color-primary)"}
      }
    }
  }
}

Die beiden anderen alternativen Blue.json- und Pink.json-Dateien tauschen Werte von Vordergrund- und Hintergrundkörper-, Vordergrund- und Primärfarbeigenschaften mit ihren jeweiligen blauen und rosafarbenen Farbwerten aus.

Abschnitt 2: Ein Beispiel für einen Anwendungsfall

Wie ich in meinem vorherigen Artikel festgestellt habe, habe ich an Blockthemen gearbeitet und sie für meine persönliche Projektseite verwendet. Inspiriert von den Themenstil-Variationen und Webfonts-API-Funktionen im Gutenberg-Plugin begann ich, mein Blockthema in progressener Progress mit einem alternativen dunklen Farbmodus zu optimieren und die WebFonts-API zu konfigurieren.

In diesem Abschnitt werde ich Sie durch die Erstellung von TT2-Gopher-Blöcken führen, ein Demo-Geschwister meines für diesen Artikel erstellten Blockthema. Das Thema enthält kastanienbraune, dunkle und helle Farbmodi, die mithilfe von Themenstil -Variationen und Webfonts -API erstellt wurden, die mit der Release Gutenberg 12.8 verfügbar wurden.

Einige Highlights des TT2-Gopher-Themas umfassen eine zentrierte Anzeige für einspaltige Inhalte, eine unterschiedliche Header und Fußzeile, benutzerfreundlichere Archiv- und Suchseiten.

Eine Kopie von TT2 Gopher -Blöcken ist im GitHub -Repository erhältlich, das Sie aufgeben und anpassen können.

Erstellen Sie den dunklen Modus auf WordPress

Erstens einige Hintergrundinformationen im Dunklen Modus. Der Dark -Modus ist eine persönliche Präferenz, und Entwickler bieten sie oder andere Modus -Kippschalter wie auf dieser Website an, was für die meisten regulären Entwickler keine kleine Aufgabe ist. Das Erstellen des Dunklen Modus ist hier bei CSS-Tricks gut bedeckt, einschließlich dieser vollständigen Anleitung zum Dark-Modus und der Typografie des Dunklen Modus.

Auf einer WordPress -Site können wir mit dem WP Dark -Modus -Plugin einen Dark -Modus -Umschalter hinzufügen. Erin Myers von WP Engine und WPBegner beschreiben, wie das WP Dark -Modus -Plugin verwendet wird, während Brenda Barron in diesem WPExplorer -Beitrag weitere Optionen für Dark -Modus -Plugin auflistet.

Das Erstellen eines dunklen Modus in WordPress -Blockthemen ohne Plugin umfasst mehrere Schritte. Vor über einem Jahr hat Ari Stathopoulos eine dunkle Unterstützung für das Thema TT1 Blocks im GitHub geschaffen. Wenn Sie sich das Beispiel hier ansehen, beinhaltet es einige JavaScript-Kenntnisse zum Erstellen von Assets (z. B. Toggler, Anpassen, Editor-Mode-Support), dunkle CSS-Variablen und erweiterten Funktionen.Php-Dateien.

In diesem kurzen Video zeigt Anne McCarthy von Automattic, wie einfach es ist, einen dunklen Modus des TT2 -Block -Themas mit globaler Stilvariation zu erstellen, indem Kllejrs Kern von JSON -Snippets im Ordner TT2 /Styles hinzugefügt werden.

Erstellen des Demo TT2 Gopher Blocks -Thema

Der TT2-Gopher ist eine sehr einfache und modifizierte Version des Standard-22-2-Themas. Es enthält drei Variationen im Themenstil - kastanienbraun, dunkel und weiß.

Die Beschreibung jedes Anpassungsschritts geht über den Rahmen dieses Artikels hinaus. Sie können jedoch mehr aus meiner tiefen Einführung in WordPress -Block -Themen sowie des Block -Editor -Handbuchs unter wordpress.org erfahren.

Ein kurzer Überblick über die Farb- und Schriftkombinationen von TT2 Gopher -Themen umfassen:

• Lichtmodus
  • Der Header ist weiß und die Fußzeile hat eine rauchige Körperhintergrundfarbe.
  • Offene Sans ist die primäre Schriftart.
• Dunkler Modus
  • Die Kopfzeile und die Fußzeile sind schwarz mit helleren dunklen Farben für den Körperhintergrund.
  • Source Serif Pro ist die primäre Schriftart.
• Maroon -Modus
  • Die Kopfzeile und die Fußzeile haben beide eine dunkle kastanienbraune Farbe mit einem helleren gelblichen Körperhintergrund.
  • Arbeit sans ist die primäre Schriftart.

Lassen Sie mich Sie kurz durch die Erstellung von Themenstil -Variationen führen.

Hinzufügen und Konfigurieren von Webfonts

Das Gutenberg 12.8-Plugin führte eine neue Webfonts-API ein, mit der die Autoren lokale (gebündelte) Schriftarten "in eine leistungsfreundliche, Privatsphäre-freundliche und zukunftssichere Weise laden können". Diese Funktion kann in einem Blockthema im PHP -Weg oder im themen.json Way implementiert werden.

Derzeit funktioniert diese Funktion nur mit Bündel mit Blockthemen gebündelt und unterstützt aufgrund von Datenschutzbedenken nicht. Weitere Einzelheiten zum aktuellen Status der Webfonts -API -Entwicklung finden Sie in diesem Artikel von WordPress Core und in diesem Artikel von WP Tavern.

Schritt 1: Herunterladen und fügen Sie Schriftarten im Blockthema herunter und fügen Sie hinzu

Das TT2 -Thema fügt Quelle SeriF Pro -Schriftart Dateien zum Assets/Schriftarten des Themas hinzu. In He Github Repository werden auch zwei zusätzliche Schriftarten - Arbeit ohne öffentliche Sans - bereitgestellt.

Schritt 2: Registrieren von Webfonts

Im TT2 -Thema sind lokale Quell -SeriF -Pro -Webfonts in der Datei functions.php bei PHP registriert:

 Funktion TwentytWentytwo_get_font_face_styles () {
  zurückkehren "
  @font-face {
    Schriftfamilie: 'Quelle Serif Pro';
    Schriftgewicht: 200 900;
    Schriftstil: normal;
    Schriftart: normal;
    Schriftart-Display: Swap;
    src: url ('". get_theme_file_uri (' assets/fonts/Quellerif4Variable-roman.ttf.woff2 ')."') Format ('Woff2');
  }
  @font-face {
    Schriftfamilie: 'Quelle Serif Pro';
    Schriftgewicht: 200 900;
    Schriftstil: kursiv;
    Schriftart: normal;
    Schriftart-Display: Swap;
    src: url ('". get_theme_file_uri (' assets/fonts/Quellerif4Variable-iTitalic.ttf.woff2 ')."') Format ('Woff2');
  }
  ";
}

Gutenberg 12.8 führte die Möglichkeit vor, lokale Web -Schriftarten bei themen.json -Datei zu registrieren. Das folgende Thema.

 "Typografie": {{
  "Fontfamilies": [
    {
      "Fontfamily": "Arbeit Sans ', -Apple-System, BlinkmacSystemfont,' Helvetica Neue ',' Helvetica ', sans-serif",
      "Slug": "Work-Sans",
      "Name": "Arbeit sans",
      "Schriftface": [
        {"Fontfamily": "Work Sans", "fontDisplay": "Block", "Fontweight": "400", "FontStyle": "Normal", "Fontstretch": "Normal", "src": ["Datei: ./ Assets/Fonts/WorksaSs/Worksans-VarableFont_wght.t.t.t.t.t.t.ttf"]}/Worksans-Varable_wght.t.t.t.t.t.t.ttf "]}, uws-varable_wg_wght.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.tf.
        {"Fontfamily": "Work Sans", "fontDisplay": "Block", "Fontweight": "700", "FontStyle": "Normal", "Fontstretch": "Normal", "src": ["Datei: ./ Assets/Fonts/WorksaSs/Worksans-VarableFont_wght.t.t.t.t.t.t.ttf"]]}/-Asans-varable_wght.t.t.t.t.t.t.t.t.t.t.t.ttf "]}/-Asans-varable_wg_wght.t.t.t.t.t.t.t.ttf"]]
        {"Fontfamily": "Work Sans", "fontDisplay": "Block", "Fontweight": "400", "fontStyle": "italic", "fontstretch": "normal", "src": ["Datei: ./
        {"Fontfamily": "Work Sans", "fontDisplay": "Block", "Fontweight": "700", "fontStyle": "italic", "fontstretch": "normal", "src": ["Datei: ./
      ]
    }
  ]
}

Weitere Informationen zur Registrierung und Verwendung lokaler Webfonts in Blockthemen finden Sie in diesem Tutorial und in diesem Artikel von WP Tavern.

Erstellen von Themenstil -Variationen

Nach den im vorherigen Abschnitt beschriebenen Schritten habe ich zwei alternative Versionen der themen.json -Datei erstellt - White.json und Black.json - mit unterschiedlichen Farb- und Schriftartenkombinationen im Ordner des untergeordneten Themas /Stiles.

Diese Funktion erfordert Version 2 von thema.json. Da Gutenberg 12.5, kann der Titel auch bei thema.json hinzugefügt werden, um das Label im Site -Editor oder Dateinamen (ohne Erweiterung) standardmäßig anzuzeigen.

Hier ist ein Beispiel von White.json:

 {
  "Version": 2,
  "Titel": "White",
  "Einstellungen": {
    "Farbe": {
      "Palette": [
        {"Slug": "Vordergrund", "Farbe": "#000000", "Name": "Vordergrund"},
        {"Slug": "Hintergrund", "Farbe": "#f2f2f2", "Name": "Hintergrund"},
        {"Slug": "Hintergrundleder", "Farbe": "#ffffff", "Name": "Hintergrundheader"},
        {"Slug": "primär", "Farbe": "#0d0d0d", "Name": "primär"},
        {"Slug": "Secondary", "Color": "#f0eae6", "Name": "sekundär"},
        {"Slug": "Tertiär", "Farbe": "#EB3425", "Name": "tertiär"},
        {"Slug": "Quaternary", "Farbe": "#7c7e83", "Name": "Quaternary"}
      ]
    },
    "Typografie": {{
      "Fontfamilies": [
        {
        "Fontfamily": "\" öffentliche Sans \ ", sans-serif",
        "Name": "Öffentliche Sans",
        "Slug": "öffentliche Sans",
        "Schriftface": [
          {"fontfamily": "public sans", "fontDisplay": "block", "fontStyle": "normal", "fontstretch": "normal", "src": ["Datei: .assets/fonts/publicss/publics-variable
          {"fontfamily": "public sans", "fontDisplay": "block", "fontStyle": "italic", "fonttretch": "normal", "src": ["Datei: ./
        ]
      }
    ]
  }
},
"Stiles": {{
  "Blöcke": {{
    "Core/Bild": {
      "Filter": {"Duotone": "var (-wp-preset-duotone-Default-filter)"}
    },
    "Core/Posttitle": {
      "Typografie": {"fontfamily": "var (-wp-preset-font-familie-öffentlich-sans)", "font-weight": "700", "fontsize": "var (-wp-bustom-typography-
    },
    "Core/Query-Title": {
      "Typografie": {"fontfamily": "var (-wp-preset-font-familie-öffentlich-sans)", "font-weight": "300", "fontsize": "var (-wp-bustom-typography-
    },
    "Kern-/nachgefertigte Image": {
      "Filter": {"Duotone": "var (-wp-preset-duotone-Default-filter)"}
    },
    "Core/Site-Logo": {
      "Filter": {"Duotone": "var (-wp-preset-duotone-Default-filter)"}
    },
    "Core/Site-Title": {
      "Typografie": {"fontfamily": "var (-wp-preset-fachfamilie-öffentlich-sans)", "fontsize": "var (-wp-preset-font-size-normal)", "fontweight": "normal"}
    }
    },
    "Farbe": {"Hintergrund": "var (-wp-preset-color-background)", "text": "var (-wp-preset-color-Feur
    "Elemente": {{
      "H1": {{
        "Typografie": {"fontfamily": "var (-wp-preset-font-familie-öffentlich-sans)", "font-weight": "600", "fontsize": "var (-wp-bustom-typography-font-size-colossal)"} "}"} "}"} "}"} "}"
      },
      "H2": {{
        "Typografie": {"fontfamily": "var (-wp-preset-font-familie-öffentlich-sans)", "font-weight": "600", "fontsize": "var (-wp-bustom-typography-
      },
      "H3": {{
        "Typografie": {"Fontfamily": "var (-wp-preset-font-familie-öffentlich-sans)", "font-weight": "300", "fontsize": "var (-wp-bustom-typography-
      },
      "H4": {{
        "Typografie": {"fontfamily": "var (-wp-preset-fautfamilie-öffentlich-sans)", "font-weight": "300", "fontsize
      },
      "H5": {{
        "Typografie": {"fontfamily": "var (-wp-preset-fautfamilie-öffentliche Sans)", "font-weight": "700", "texttransform": "Großbuchstaben", "fontsize": "var (-wp-preset-
      },
      "H6": {
        "Typografie": {"Fontfamily": "var (-wp-preset-fautfamilie-öffentliche Sans)", "font-weight": "400", "texttransform": "Großbuchstaben", "fontsize": "var (-wp-preset-
      },
      "Link": {
        "Farbe": {"Text": "var (-WP-Custom-Color-Feur
      }
    },
    "Typografie": {"fontfamily": "var (-wp-preset-fautfamilie-öffentlich-sans)", "fontsize": "var (-wp-preset-font-size-normal)"} "}"} "}"} "}"} "
  }
}

Dieser Code tauscht Farbpaletten von themen.json aus und registriert und definiert die lokalen öffentlichen Sans -Schriftart Dateien.

Der Black.json ist ebenfalls sehr ähnlich und verwendet Source SeriF Pro -Schriftarten, die in der Datei functions.php registriert sind.

Beispiel für Blockthemen mit Themenstil -Variationen

• Zweiundzwanzig zwei-das erste Standardthema, das Stilvariationen enthält. Das mit WordPress 6.0 gebündelte 1.2 bündelte 1.2 enthält drei Variationen im Stil - „blau“, „rosa“ und „schweizerisch“ - sodass Benutzer schnell zwischen verschiedenen visuellen Stilen tauschen können.
• Frost - Ein experimentelles Blockthema mit Dark -Themenstil -Variation.
• ALARA - hat über 100 aktive Installationen und enthält 7 Stilvariationen.
• WABI - Die Rich Tabor -Website enthält 3 Stilvarianten und 300 aktive Installationen.
• BRISHY - hat mehr als 600 Installationen und eine Variation im dunklen Themenstil.
• Anhänger - Ein Thema des Automattic -Thementeams, das bei GitHub entwickelt wurde, enthält eine Variation von 3 Themenstilen.

In diesem Artikel von WP Tavern spekuliert Justin, dass diese neue Funktion von Themenautoren verwendet werden kann, indem sie sich an die Einstellungen des Site-Besucheres verbinden, während einige Benutzer ihre Website vorziehen, um einen saisonalen oder ereignisbasierten Design-Look zu veröffentlichen. Dies ist wahrscheinlich ein wenig früh, aber nur die Zeit wird zeigen, wie diese leistungsstarke Funktion sowohl von Autoren als auch von Benutzern verwendet wird.

Einpacken

Das Erstellen von Stilvariationen eines Blockthemas mit unterschiedlicher Typografie und Farbkombination wurde ohne Verwendung von Plugins stark vereinfacht. Es ist eines meiner Lieblingsfunktionen des Blockeditors, den ich in meinen persönlichen Projekten bewerben möchte.

Meiner Meinung nach sind Variationen im Themenstil definitiv ein Spielveränderer für Blockthemen, und mit dieser praktischen Funktion besteht möglicherweise keine Notwendigkeit für Kinderthemen oder sogar viele kochende Blockthemen. Ein paar gut gestaltete Basisblockthemen, ähnlich wie Block-Canvas oder Blockbase des Automattic Theme Teams (Arbeitsblockthemen bei GitHub), könnten mit Variation zum Thema Theme-Stil angepasst werden.

Ressourcen

• Globale Styles Presets (Block Editor Handbook)
• Ermöglichen Sie die Variationen der globalen Stile #35619 (GitHub).
• Fügen Sie die erste Version des Style Engine #37978 (GitHub) hinzu.
• Globale Stilvariationen, „Skins“ für Themen, sind in Gutenberg (WP Tavern) gelandet.
• Ein globaler Stilschalter (Critterverse.Blog)
• Global Styles Panel: Iterieren auf der Schaltfläche „Durchsuchen Styles“ #40478 (GitHub)
• Ein Blick auf die bevorstehenden Variationen des globalen Stils von 222 (WP Tavern)
• Erkundung von WordPress 6.0: Stilvariationen, Blocksperrungs -Benutzeroberfläche, Verbesserungen schreiben (Anne McCarthy - Video)
• Was ist neu in WordPress 6.0: Neue Blöcke, Stilwechsel und vieles mehr (Aleksandar Savkovic - Cloudways)

Dunkler Modus

• Geben Sie den Augen eine Pause, fügen Sie Ihrer WordPress -Site einen dunklen Modus hinzu (Erin Myers).
• Eine vollständige Anleitung zum Dunklen Modus im Web (Adhuham)
• Nehmen wir an, Sie würden einen Blog -Beitrag über den Dunklen Modus schreiben (Chris Coyier)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Stilvariationen in WordPress 6.0 -Blockthemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!