Wie CSS in WordPress -Themen geschrieben ist, ?ndert sich dramatisch. Ich habe kürzlich eine Technologie geteilt, die in WordPress über theme.json flüssige Schriftart unterstützt, ein neues Dokument, das von WordPress stark beworben wird, das zur zentralen Quelle der Wahrheit wird, um WordPress-Themenstile zu definieren, die die Funktionalit?t der Site-Ganzen-Bearbeitung (FSE) unterstützen.

Warten Sie, keine style.css Datei? Wir haben es immer noch. Tats?chlich ist style.css immer noch eine notwendige Datei in einem Blockthema, obwohl es einen stark reduzierten Effekt hat und nur zur Registrierung der Meta-Information für das Thema verwendet wird. Das hei?t, theme.json steht noch in aktiver Entwicklung, was bedeutet, dass wir uns in einer übergangszeit befinden, in der Sie m?glicherweise Stile finden, die in theme.json, styles.css und sogar Blockebenen definiert sind.

Wie sehen die Stile in diesen WordPress -FSE -Epochen tats?chlich? Das m?chte ich in diesem Artikel vorstellen. Das WordPress Theme Developer -Handbuch fehlt die Dokumentation zu Block -Themenstilen.

Evolution des WordPress -Stils

Die in WordPress 6.1 enthaltenen neuen Entwicklungsfunktionen bringen uns n?her an ein System, das Stile vollst?ndig in theme.json definiert. Es gibt jedoch noch viel zu tun, bevor wir uns vollst?ndig darauf verlassen k?nnen. Wir k?nnen lernen, was in zukünftigen Releases erscheint, indem wir das Gutenberg -Plugin verwenden, wo normalerweise experimentelle Merkmale getestet werden.

Wir k?nnen auch unseren aktuellen Status kennenlernen, indem wir die Entwicklung des Standard -WordPress -Themas betrachten. Bisher gibt es drei Standardthemen, die die ortsweite Bearbeitung unterstützen:

• zwanzig einundzwanzig (TT1): Dies ist die erste klassische Standard-Themenversion, die mit Bl?cken kompatibel ist. Es gibt auch eine Blockversion (TT1 -Block) und seitdem eine zuverl?ssige Ressource für Blockthemen. Alle 5900 CSS -Zeilen in TT1 befinden sich jedoch in style.css. Keine theme.json Datei. TT1 Block ist das erste Mal, dass wir Stile in der Blockeditor -?ra gesehen haben, die wir uns eher als Trailer als als Modell vorstellen k?nnen.
• Twenty-Two (TT2): Dies ist das erste wirklich blockbasierte Standard-WordPress-Thema und das erste Mal, dass wir theme.json begegnen. Diese Datei enth?lt nur 373 Codezeilen. Die Hauptentwickler haben koordinierte Anstrengungen unternommen, um es zu einem CSS-freien Thema zu machen. style.css theme.json
zwanzig dreiundzwanzig (TT3):
• Dies wird in WordPress 6.1 ver?ffentlicht und es ist das erste Beispielbeispiel ohne CSS in der erforderlichen -Datei. style.css
ersetzen Sie jedoch nicht sofort das CSS in

durch das JSON-Attributwertpaar in

. Bevor Sie dies in Betracht ziehen, gibt es immer noch einige CSS -Stilregeln, die in style.css unterstützt werden k?nnen. Derzeit werden die verbleibenden wichtigen Themen er?rtert. Ziel ist es, alle CSS -Stilregeln vollst?ndig in theme.json zu verschieben und verschiedene Quellen von theme.json in eine Benutzeroberfl?che zusammenzuführen, um globale Stile direkt im WordPress -Site -Editor aufzunehmen. theme.json theme.json Dies bringt uns in eine relativ schwierige Situation. Es gibt nicht nur keinen klaren Pfad, um die Themenstile zu überschreiben, sondern es ist auch unklar, aus welchen Stilen sie aus verschiedenen Ebenen von

Dateien,

, Gutenberg Plugin oder anderswo sind? theme.json style.css Warum thema.json anstelle von style.css w?hlen?

Sie fragen sich vielleicht, warum WordPress anstelle herk?mmlicher CSS-Dateien an JSON-basierte Stildefinitionen wendet. Ben Dwyer von Gutenbergs Entwicklungsteam erkl?rt eloquent, warum die

-Methode ein Vorteil für Themenentwickler ist.

theme.json Lesen Sie Bens Beitrag, aber der Punkt ist in diesem Zitat:

ob es sich um Layout-, Preset- oder Blockstil handelt, das überschreiben von CSS kann ein Hindernis für die Integration und Interoperabilit?t darstellen: Die visuelle Konsistenz zwischen dem Front-End und dem Editor wird schwieriger zu warten, und das Upgrade innerhalb des Blocks kann mit Override in Konflikt stehen. Darüber hinaus ist benutzerdefinierte CSS in anderen Blockthemen weniger tragbar.

Die Hierarchie der "Grundlagen" definierten Stile k?nnen korrekt gel?st werden, indem die Autoren der Themen so weit wie m?glich die

-API verwenden.

Einer der Hauptvorteile des Verschiebens von CSS in JSON ist, dass JSON ein maschinenlesbares Format ist, was bedeutet, dass es in der Benutzeroberfl?che der WordPress-Site-Editor ausgesetzt werden kann, indem die API abgerufen werden kann, sodass Benutzer die Standardwerte ?ndern und das Erscheinungsbild der Site anpassen k?nnen, ohne CSS zu schreiben. Es bietet auch eine M?glichkeit, Bl?cke konsistent zu stylen, und bietet gleichzeitig eine Struktur, die eine bestimmte Ebene erstellt, damit die Benutzereinstellungen eine h?here Priorit?t haben als in theme.json definierte Einstellungen. Diese Interaktion zwischen Stilen auf Themenebene in theme.json und benutzerdefinierten Stilen in der UI Global Style UI macht die JSON-Methode so attraktiv.

Entwickler behalten die Konsistenz bei JSON bei und die Benutzer erhalten Flexibilit?t durch codeless Anpassung. Dies ist eine Win-Win-Situation.

Natürlich gibt es andere Vorteile, und Mike McAlister von WP Engine listet mehrere in diesem Twitter -Thread auf. In der eingehenden Diskussion über den Make WordPress Core-Blog finden Sie mehr Vorteile. Vergleichen Sie nach dem Lesen die Vorteile der JSON -Methode mit den verfügbaren Methoden, die Stile in klassischen Themen definieren und überschreiben.

Stile mit JSON -Elementen definieren

Wir haben viele Fortschritte in Bezug auf die Teile des Themas gesehen. Vor WordPress 6.1 konnten wir nur den Titel und den Link stylen. Jetzt k?nnen wir mit WordPress 6.1 Schaltfl?chen, Titel, Zitate und Titel hinzufügen. theme.json

wir tun dies, indem wir das

JSON -Element definieren. Ein Element kann als einzelne Komponente behandelt werden, die in einem WordPress -Block existiert. Angenommen, wir haben einen Block mit dem Titel, dem Absatz und den Schaltfl?chen. Diese einzelnen Teile sind Elemente, und es gibt ein Objekt, in dem wir ihren Stil definieren: theme.json elements

Eine bessere M?glichkeit, JSON-Elemente zu beschreiben, besteht darin, Komponenten von Themen und Bl?cken auf niedriger Ebene zu sein, für die keine Blockkomplexit?t erforderlich ist. Sie sind Darstellungen von HTML -Primitiven, die nicht in Bl?cken definiert sind, sondern zwischen den Bl?cken verwendet werden k?nnen. Wie sie in WordPress (und Gutenberg Plug-In) unterstützt werden, wird im Block-Editor-Handbuch und in diesem ortsweiten Bearbeitungs-Tutorial von Carolina Nymark beschrieben.

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

Zum Beispiel die Linkstile im Objekt

, sind aber kein Block selbst. Der Link kann jedoch in einem Block verwendet werden, er erbt den im

-Otjekt von elements definierten Stil. Dies fasst jedoch nicht vollst?ndig die Definition von Elementen zusammen, da einige Elemente auch als Bl?cke wie Titel- und Tastebl?cke registriert sind - aber diese Bl?cke k?nnen weiterhin in anderen Bl?cken verwendet werden. theme.json elements.link Folgendes ist die Tabelle der von Carolina bereitgestellten Elemente, die verwendet werden kann, um in

vor WordPress 6.1:

zu stylen theme.json Wie Sie sehen, ist dies noch in den frühen Stadien und es gibt immer noch viele Dinge, die Sie vom Gutenberg -Plugin zum WordPress -Kern bewegen k?nnen. Sie k?nnen jedoch sehen, wie schnell es w?re, alle Titel im Thema global festzulegen, ohne nach Selektoren in CSS -Dateien oder Devtools zu suchen.

Zus?tzlich k?nnen Sie verstehen, wie die Struktur von theme.json eine bestimmte Schicht bildet, von globalen Elementen (wie Titeln) bis hin zu einzelnen Elementen (wie H1) und Styles auf Blockebene (wie H1 in einem Block enthalten).

Weitere Informationen zu JSON -Elementen finden Sie unter diesem WordPress -Vorschlag und diesem offenen Ticket im Gutenberg Plugin Github Repository.

JSON und CSS -Spezifit?t

Lassen Sie uns weiterhin die CSS -Spezifit?t diskutieren. Wie ich bereits erw?hnt habe, erstellt JSONs Stilmethode eine Hierarchie. Das ist wahr. Stile, die auf JSON -Elementen in theme.json definiert sind, gelten als Standard -Themenstil. Alles, was der Benutzer in der Benutzeroberfl?che des globalen Stils festgelegt hat, wird den Standardwert überschreiben.

Mit anderen Worten: Benutzerstile haben eine h?here Spezifit?t als Standard -Themenstile. Schauen wir uns den Button -Block an, um zu verstehen, wie er funktioniert.

Ich benutze das leere Thema, ein leeres WordPress -Thema ohne CSS -Stil. Ich werde der neuen Seite einen Button -Block hinzufügen.

Ok, wir wissen, dass WordPress Core mit einigen einfachen Stilen ausgestattet ist. Jetzt wechsle ich zum Standard -TT3 -Thema in WordPress 6.1 und aktiviere es. Wenn ich die Seite mit der Schaltfl?che aktualisiere, ?ndert sich der Stil der Schaltfl?che.

Sie k?nnen genau sehen, woher diese neuen Stile in der

-Datei von TT3 stammen. Dies sagt uns, dass JSON -Elementstile Vorrang vor den WordPress -Kernstilen haben. theme.json

Jetzt werde ich TT3 ?ndern, indem ich es im untergeordneten Thema überschreibe, wobei die Standardhintergrundfarbe des Schaltfl?chenblocks auf rot eingestellt ist.

Aber bitte beachten Sie die Suchschaltfl?che im letzten Screenshot. Es sollte auch rot sein, oder? Dies bedeutet, dass die ?nderungen, die ich vorgenommen habe, auf globaler Ebene sind, sie auf einer anderen Ebene gestylt werden muss. Wenn wir die zwei

-Stasten ?ndern m?chten, k?nnen wir mit der Benutzeroberfl?che des globalen Stils im Site -Editor ?nderungen auf Benutzerebene vornehmen. Wir haben die Benutzeroberfl?che des globalen Stils verwendet, um die Hintergrundfarbe der beiden Schaltfl?chen in Blau zu ?ndern und den Text zu modifizieren. Beachten Sie, dass das Blau dort Vorrang vor dem Themenstil hat!

style motor

Dies ist eine sehr schnelle, aber gute Vorstellung davon, wie man die CSS -Spezifit?t in WordPress -Block -Themen verwaltet. Dies ist jedoch nicht das gesamte Bild, da nicht klar ist, wo diese Stile erzeugt werden. WordPress hat seine eigenen Standardstile, die von irgendwoher stammen, verwenden die Daten in

, um mehr Stilregeln zu erhalten und diese Regeln mit dem zu überschreiben, was im globalen Stil festgelegt ist.

Sind diese Stile eingefahren? Sind sie in getrennten Stylesheets? Vielleicht wurden sie auf die Seite injiziert? theme.json Dies ist das Problem, dass die neue Style -Engine erwartet wird. Die Style Engine ist eine neue API in WordPress 6.1, die darauf abzielt, die generierten Stile und den Anwendungsort der Stile konsistent zu halten. Mit anderen Worten, es dauert alle m?glichen Stilquellen und ist individuell für die korrekte Generierung von Blockstilen verantwortlich. Ich wei?, ich wei?. Nur um einige Stile zu schreiben, wurde eine Abstraktionsschicht auf andere Abstraktionsschichten hinzugefügt. Eine zentralisierte API im Stil ist jedoch wahrscheinlich die eleganteste L?sung, da Stile von mehreren Orten stammen k?nnen.

Wir sehen nur die Style Engine zum ersten Mal. Tats?chlich wurde laut Ticket die folgenden Arbeiten bisher durchgeführt:

• Audit und Fusion -Backend erstellen Bl?cke, die CSS -Code -Stellen unterstützen, sodass sie vom selben Ort (anstelle mehrerer Standorte) geliefert werden. Dies umfasst CSS -Regeln wie R?nder, Füllungen, Typografie, Farben und Grenzen.
• Entfernen Sie doppelte Layout-spezifische Stile und generieren Sie semantische Klassennamen.
• Reduzieren Sie die Anzahl der Inline -Stil -Tags, die das Drucken auf Seiten zu Bl?cken, Layouts und Elementen unterstützen.

im Grunde ist dies die Grundlage für den Aufbau einer einzelnen API, die alle CSS -Stilregeln für das Thema enth?lt, unabh?ngig davon, woher sie kommen. Es reinigt die Art und Weise, wie WordPress Inline -Stile vor 6.1 injiziert und ein System für semantische Klassennamen erstellt.

Weitere Informationen zu den langfristigen und kurzfristigen Zielen von Style-Engines finden Sie in der WordPress-Kerndiskussion. Weitere Updates k?nnen Sie auch nachverfolgten Problemen und Projektboards befolgen.

Verwenden von JSON -Elementen

Wir haben die HTML -Primitiven in den theme.json JSON -Elementen in der Datei besprochen und wie sie den Standardstil von Inhalten wie Titeln, Schaltfl?chen und Links im Grunde definieren. Lassen Sie uns nun sehen, wie das tats?chliche JSON -Element verwendet und wie es sich in verschiedenen Stilkontexten verh?lt.

JSON -Elemente haben normalerweise zwei Kontexte: globales Level und Blockebene . Die Definition globaler Ebene ist niedriger als die Blockebene, um sicherzustellen, dass blockspezifische Stile bevorzugt werden, sodass die Konsistenz überall überall, wo der Block verwendet wird, aufrechterhalten wird.

globaler Stil des JSON -Elements

Schauen wir uns das neue Standard -TT3 -Thema an und überprüfen Sie den Stil seiner Schaltfl?chen. Hier ist eine kurze Kopie der TT3 theme.json -Datei (dies ist der vollst?ndige Code), der den Abschnitt Global Style zeigt. Hier finden Sie jedoch den Originalcode.

Ansicht Code

`` ` { "Version": 2, "Einstellungen": {}, // ... "Stiles": {{ // ... "Elemente": {{ "Taste": { "Grenze": { "Radius": "0" }, "Farbe": { "Hintergrund": "var (-wp-preset-color-primary)", "Text": "var (-wp-preset-color-kontrastisch)" }, ": schwebe": {{ "Farbe": { "Hintergrund": "var (-wp-preset-color-kontrastiere)", "Text": "var (-wp-preset-color-base)" } }, ": fokus": { "Farbe": { "Hintergrund": "var (-wp-preset-color-kontrastiere)", "Text": "var (-wp-preset-color-base)" } }, ": aktiv": { "Farbe": { "Hintergrund": "var (-wp-preset-color-sekund?r)", "Text": "var (-wp-preset-color-base)" } } }, "H1": {{ "Typografie": {} }, // ... "überschrift": { "Typografie": {{ "Schriftgewicht": "400", "LineHeight": "1.4" } }, "Link": { "Farbe": { "Text": "var (-wp-preset-color-kontrastisch)" }, ": schwebe": {{ "Typografie": {{ "Textdekoration": "Keine" } }, ": fokus": { "Typografie": {{ "TextDecoration": "Unterstreich" unterstreicht " } }, ": aktiv": { "Farbe": { "Text": "var (-wp-preset-color-sekund?r)" }, "Typografie": {{ "Textdekoration": "Keine" } }, "Typografie": {{ "Textdekoration": "Unterstreich" } } }, // ... }, "TemplateParts": {} }

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

{ "Version": 2, // ... "Stiles": {{ // Global Level Style "Elemente": {}, // Blockstil blockieren "Bl?cke": {{ "Core/Search": { "Elemente": {{ "Taste": { "Farbe": { "Hintergrund": "var (-WP-Preset-Color-Quart?r)", "Text": "var (-wp-preset-color-base)" } } }, // ... } } } }

<code>
所有按鈕都在全局級(jí)別（`styles.elements.button`）設(shè)置樣式。

我們也可以在DevTools中確認(rèn)這一點(diǎn)。請(qǐng)注意，名為`.wp-element-button`的類是選擇器。相同的類也用于設(shè)置交互式狀態(tài)。

同樣，所有這些樣式都在全局級(jí)別發(fā)生，來自`theme.json`。每當(dāng)我們使用按鈕時(shí)，它都將具有相同的背景，因?yàn)樗鼈児蚕硐嗤倪x擇器，并且沒有其他樣式規(guī)則覆蓋它。

順便說一句，WordPress 6.1添加了對(duì)使用`theme.json`中的偽類（包括`:hover`、`:focus`和`:active`）或全局樣式UI設(shè)置某些元素（如按鈕和鏈接）的交互式狀態(tài)樣式的支持。Automattic工程師Dave Smith在一個(gè)YouTube視頻中演示了此功能。

我們可以在`theme.json`中（最好在子主題中，因?yàn)槲覀兪褂玫氖悄J(rèn)WordPress主題）或在站點(diǎn)編輯器中的全局樣式設(shè)置中覆蓋按鈕的背景顏色（不需要子主題，因?yàn)樗恍枰a更改）。

但是，按鈕將同時(shí)更改。如果我們想在按鈕是特定塊的一部分時(shí)覆蓋背景顏色怎么辦？這就是塊級(jí)樣式發(fā)揮作用的地方。

#### 元素的塊級(jí)樣式

為了了解如何在塊級(jí)別使用和自定義樣式，讓我們更改包含在搜索塊中的按鈕的背景顏色。請(qǐng)記住，有一個(gè)按鈕塊，但我們正在做的是在搜索塊的塊級(jí)別覆蓋背景顏色。這樣，我們只在那里應(yīng)用新顏色，而不是將其全局應(yīng)用于所有按鈕。

為此，我們在`theme.json`的`styles.blocks`對(duì)象上定義樣式。沒錯(cuò)，如果我們在`styles.elements`上定義所有按鈕的全局樣式，我們可以在`styles.block`上定義按鈕元素的塊特定樣式，這遵循類似的結(jié)構(gòu)：
</code>

{ "Version": 2, "Stiles": {{ // Global Level Style "Elemente": {}, // Blockstil blockieren "Bl?cke": {} } }

<code>
看到了嗎？我在`styles.blocks.core/search.elements.button`上設(shè)置了背景和文本屬性，并使用了WordPress中預(yù)設(shè)的兩個(gè)CSS變量。

結(jié)果？搜索按鈕現(xiàn)在是紅色的（`--wp--preset--color--quaternary`），默認(rèn)按鈕塊保留其亮綠色背景。

我們也可以在DevTools中看到更改。

如果我們想設(shè)置包含在其他塊中的按鈕的樣式，也是如此。按鈕只是一個(gè)例子，所以讓我們再看一個(gè)。

### 示例：在每個(gè)級(jí)別設(shè)置標(biāo)題樣式

讓我們用一個(gè)例子來鞏固所有這些信息。這次，我們將：

- 全局設(shè)置所有標(biāo)題的樣式
- 設(shè)置所有二級(jí)標(biāo)題元素的樣式
- 設(shè)置查詢循環(huán)塊中二級(jí)標(biāo)題元素的樣式

首先，讓我們從`theme.json`的基本結(jié)構(gòu)開始：
</code>

{ "Version": 2, "Stiles": {{ // Global Level Style "Elemente": {{ "überschrift": { "Farbe": "var (-wp-preset-color-base)" }, }, // Blockstil blockieren "Bl?cke": {} } }

<code>
這為我們的全局和塊級(jí)樣式建立了輪廓。

#### 全局設(shè)置所有標(biāo)題的樣式

讓我們將`headings`對(duì)象添加到我們的全局樣式并應(yīng)用一些樣式：
</code>

{ "Version": 2, "Stiles": {{ // Global Level Style "Elemente": {{ "überschrift": { "Farbe": "var (-wp-preset-color-base)" }, "H2": {{ "Farbe": "var (-wp-preset-color-primary)", "Typografie": {{ "Fontsize": "Clamp (2,625REM, CALC (2,625REM ((1VW - 0,48REM) * 8,4135), 3,25Rem)" } } }, // Blockstil blockieren "Bl?cke": {} } }

<code>
這將所有標(biāo)題的顏色設(shè)置為WordPress中的預(yù)設(shè)基本顏色。讓我們在全局級(jí)別更改二級(jí)標(biāo)題元素的顏色和字體大?。?</code>

{ "Version": 2, "Stiles": {{ // Global Level Style "Elemente": {{ "überschrift": { "Farbe": "var (-wp-preset-color-base)" }, "H2": {{ "Farbe": "var (-wp-preset-color-primary)", "Typografie": {{ "Fontsize": "Clamp (2,625REM, CALC (2,625REM ((1VW - 0,48REM) * 8,4135), 3,25Rem)" } } }, // Blockstil blockieren "Bl?cke": {{ "Core/Query": { "Elemente": {{ "H2": {{ "Typografie": {{ "Fontsize": 3.25Rem } } } } } } }

<code>
現(xiàn)在，所有二級(jí)標(biāo)題元素都設(shè)置為主要預(yù)設(shè)顏色，并具有流體字體大小。但也許我們希望在將二級(jí)標(biāo)題元素用于查詢循環(huán)塊時(shí)使用固定fontSize：
</code>

Das obige ist der detaillierte Inhalt vonVerwalten von CSS -Stilen in einem WordPress -Block -Thema. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!