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!