Verwalten von CSS -Stilen in einem WordPress -Block -Thema

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

. 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

, 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

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

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

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

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

Zum Beispiel die Linkstile im Objekt

-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

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.

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

-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

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.

<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>
所有按钮都在全局级别（`styles.elements.button`）设置样式。

我们也可以在DevTools中确认这一点。请注意，名为`.wp-element-button`的类是选择器。相同的类也用于设置交互式状态。

同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。

顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。

我们可以在`theme.json`中（最好在子主题中，因为我们使用的是默认WordPress主题）或在站点编辑器中的全局样式设置中覆盖按钮的背景颜色（不需要子主题，因为它不需要代码更改）。

但是，按钮将同时更改。如果我们想在按钮是特定块的一部分时覆盖背景颜色怎么办？这就是块级样式发挥作用的地方。

#### 元素的块级样式

为了了解如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。请记住，有一个按钮块，但我们正在做的是在搜索块的块级别覆盖背景颜色。这样，我们只在那里应用新颜色，而不是将其全局应用于所有按钮。

为此，我们在`theme.json`的`styles.blocks`对象上定义样式。没错，如果我们在`styles.elements`上定义所有按钮的全局样式，我们可以在`styles.block`上定义按钮元素的块特定样式，这遵循类似的结构：
</code>

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

<code>
看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。

结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。

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

如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。

### 示例：在每个级别设置标题样式

让我们用一个例子来巩固所有这些信息。这次，我们将：

- 全局设置所有标题的样式
- 设置所有二级标题元素的样式
- 设置查询循环块中二级标题元素的样式

首先，让我们从`theme.json`的基本结构开始：
</code>

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

<code>
这为我们的全局和块级样式建立了轮廓。

#### 全局设置所有标题的样式

让我们将`headings`对象添加到我们的全局样式并应用一些样式：
</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>
这将所有标题的颜色设置为WordPress中的预设基本颜色。让我们在全局级别更改二级标题元素的颜色和字体大小：
</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>
现在，所有二级标题元素都设置为主要预设颜色，并具有流体字体大小。但也许我们希望在将二级标题元素用于查询循环块时使用固定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!