Eines der Hauptziele des WordPress -Site -Editors (jetzt offiziell benannt) ist es, den grundlegenden Blockstil von CSS zu strukturiertem JSON zu migrieren. JSON-Dateien sind maschinell lesbar, sodass JavaScript-basierte Site-Editoren globale Themen direkt in WordPress konfigurieren k?nnen.

Aber diese Arbeit wurde noch nicht vollst?ndig abgeschlossen! Wenn wir uns das Standardthema 22 (TT2) ansehen, gibt es zwei Hauptprobleme, die nicht behoben wurden: Stilinteraktion (z. B. Hover ,: Active, Focus) und R?nder und Polsterung des Layout-Containers. Sie k?nnen sehen, wie diese Probleme in der Datei style.css -Datei von TT2 vorübergehend behoben werden, anstatt sie zur Datei theme.json hinzuzufügen.

WordPress 6.1 behebt diese Probleme, und ich m?chte mich auf letztere spezialisieren. Jetzt haben wir JSON -Stile für Layout -Containerr?nder und -polsterung, was uns eine flexiblere und leistungsf?higere M?glichkeit bietet, den Abstand in Themenlayouts zu definieren.

über welchen Abstand sprechen wir?

Zun?chst haben wir bereits

Root Level Fill , was eine ausgefallene Anweisung zur Elementfüllung ist. Dies ist gro?artig, da es einen konsequenten Abstand zu Elementen sicherstellt, die auf allen Seiten und Posts geteilt werden. Aber es gibt noch mehr, denn jetzt haben wir einen Weg, den Block dazu zu bringen, diese Polsterung zu umgehen und ihn mit voller Breite auszurichten. Dies ist der fill-bewusstes Ausrichtung zu verdanken, eine neue optionale Funktion in thema.json. Selbst wenn Sie auf der Polsterung auf Root-Ebene verfügen, k?nnen Sie zum Beispiel ein Bild (oder einen anderen Block) durchbrechen und die vollst?ndige Breite anstellen.

Dies erinnert uns an eine andere Sache:

eingeschr?nktes Layout . Die Idee hier ist, dass jeder im Layout verschachtelte Block der Inhaltsbreite des Layouts (dies ist eine globale Einstellung) und nicht aus dieser Breite herausflie?t. Wir k?nnen diesen Verhaltensblock mithilfe der Ausrichtung durch Block überschreiben, aber wir werden ihn sp?ter besprechen.

Beginnen wir mit ...

Root Level Fill

Dies ist wieder nichts Neues. Da das experimentelle Gutenberg -Plugin es in Version 11.7 eingeführt hat, k?nnen wir die Ausfüllung von Elementen in thema.json festlegen. Wir setzen es auf das Objekt der Stile.

Dies ist eine globale Einstellung. Wenn wir also Devtools ?ffnen und die Elemente überprüfen, werden wir diese CSS -Stile sehen:

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

nicht schlecht. Die Frage ist jedoch, wie bestimmte Bl?cke diesen Abstand durchbrechen k?nnen, um den gesamten Bildschirm zu füllen, Rand bis zur Kante. Deshalb existiert der Abstand, oder? Es hilft, dies zu verhindern!

<code>body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}</code>

Bei der Arbeit in einem Block -Editor gibt es jedoch in der Tat viele F?lle, in denen Sie diesen Abstand in einer sexuellen Instanz durchbrechen m?chten. Angenommen, wir setzen einen Bildblock auf die Seite und m?chten, dass er die vollst?ndige Breite angezeigt wird, w?hrend der Rest die Polsterung auf Wurzelebene befolgt?

eingeben ...

AUS AUWARE ALGEIRMENT

Lead-Designer Kjell Reiglstad veranschaulicht die herausfordernden Aspekte des Durchbruchs von Root-Level Füllen Sie diese Github-Frage, wenn Sie versuchen, das erste Standard-WordPress-Thema zu erstellen, das alle Stile in der Datei thema.json definiert.

Neue Funktionen in WordPress 6.1 sollen dieses Problem l?sen. Lassen Sie uns als n?chstes in diese Dinge graben.

userootpaddingAWareAlignments

Es wurde eine neue Eigenschaft von UserootpaddingawareAlignments erstellt, um dieses Problem zu l?sen. Es wurde tats?chlich zum ersten Mal in Gutenberg Plugin V13.8 eingeführt. Die ursprüngliche Pull -Anfrage bietet eine gute Einführung in die Funktionsweise, wie sie funktioniert.

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

Zuallererst ist es eine Funktion, die wir uns entscheiden müssen. Diese Eigenschaft ist standardm??ig auf false gesetzt, und wir müssen sie ausdrücklich auf True setzen, um es zu aktivieren. Beachten Sie auch, dass wir auch auf truecetools eingestellt haben. Auf diese Weise k?nnen wir UI -Steuerelemente im Site -Editor verwenden, um Stilgrenzen, Linkfarben, Typografie und Abstand (einschlie?lich R?nder und Füllungen) festzulegen.

Setzen Sie die Auftritte für true automatisch ein, indem Sie den Block Margen und Padding ohne Einstellungen einstellen.

Wenn wir UserootpaddingAwareAlignments aktivieren, erhalten wir ein benutzerdefiniertes Attribut mit dem Stammverfüllwert im Front-End-Element. Interessanterweise wendet es auch die Polsterung auf die Klasse-Wrapper-Klasse. Zu cool! Ich konnte diese CSS -benutzerdefinierten Eigenschaften in Devtools best?tigen, w?hrend ich herumgraben konnte.

Aktivieren Sie UserootPaddingAwareAlignments auch nach links und rechts auf einen beliebigen Block, der die Breite "Inhalt" und "Breite" -Wr?une im obigen globalen Stil -Bild unterstützt. Wir k?nnen diese Werte auch in thema definieren.json:

<code>body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}</code>

Wenn sich die globalen Stileinstellungen von denen unterscheiden, die in Theme.json definiert sind, hat der globale Stil Vorrang. In meinem vorherigen Beitrag k?nnen Sie alles über die Verwaltung von Block -Themenstilen lernen.

• contentSize ist die Standardbreite des Blocks.
• WideSize bietet eine "Breite" -Layoutoption und erstellt eine breitere Spalte für die Blockdehnung.

Das letzte Code -Beispiel gibt uns also das folgende CSS:

<code>{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },</code>

[id] repr?sentiert eine eindeutige Zahl, die automatisch von WordPress generiert wird.

Aber raten Sie mal, was wir sonst noch haben? Voll ausgerichtet!

<code>{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}</code>

Hast du es gesehen? Durch Aktivieren von UserootpaddingAwareAlignments und Definieren von ContentSize und WideSize erhalten wir auch eine vollst?ndig ausgerichtete CSS -Klasse für drei Containerkonfigurationen, die die Blockbreiten steuern, die der Seite und dem Artikel hinzugefügt wurden.

Dies gilt für die folgenden layoutspezifischen Bl?cke: Spalten, Gruppen, Artikelinhalte und Abfrageschleifen.

Blocklayout -Steuerung

Angenommen, wir fügen der Seite einen der oben genannten Layout-spezifischen Bl?cke hinzu. Wenn wir einen Block ausw?hlen, wird die UI -Blockeinstellungs -Benutzeroberfl?che neue Layouteinstellungen basierend auf dem Wert der Einstellungen bereitgestellt. Die Einstellung der internen Blocknutzungsinhaltsbreite ist standardm??ig aktiviert. Wenn wir es schlie?en, hat der Container keine maximale Breite und die darin enthaltenen Bl?cke werden Kanten-zu-Kanten angezeigt.

Wenn wir den Umschalter einhalten, befolgt der verschachtelte Block den Werten der Contentwidth- oder Widewidth (dazu sp?ter mehr). Alternativ k?nnen wir die numerische Eingabe verwenden, um benutzerdefinierte Contentwidth- und Weitbreitenwerte in dieser einmaligen Instanz zu definieren. Dies ist eine gro?e Flexibilit?t!

breites Block

Die Einstellungen, die wir gerade gesehen haben, wurden auf dem übergeordneten Block gesetzt. Sobald wir den Block im Inneren nisten und ihn ausw?hlen, k?nnen wir in diesem Block zus?tzliche Optionen für Contentwidth, Widewidth oder Vollbreite verwenden.

Beachten Sie, wie WordPress das kundenspezifische CSS -Attribut von CSS mit -1 multipliziert, um einen negativen Rand zu erstellen, wenn die Option der vollst?ndigen Breite ausgew?hlt ist.

Verwenden von eingeschr?nktem Layout

Wir haben gerade den neuen Abstand und die neue Ausrichtung von WordPress 6.1 eingeführt. Diese sind spezifisch für Bl?cke und verschachtelte Bl?cke in Bl?cken. WordPress 6.1 führt jedoch auch neue Layoutfunktionen ein, um eine gr??ere Flexibilit?t und Konsistenz in Themenvorlagen zu erzielen.

Beispiel: WordPress refaktoren seine Flex- und Flow -Layout -Typen vollst?ndig und liefert uns einen eingeschr?nkten Layout -Typ, wodurch es einfacher ist, Blocklayouts im Thema mit den Einstellungen der Inhaltsbreite in der globalen UI des Site -Editors auszurichten.

Flex, Fluss und eingeschr?nktes Layout

Der Unterschied zwischen diesen drei Layouttypen ist der Stil, den sie ausgeben. Isabel Brison hat einen ausgezeichneten Artikel, der diese Unterschiede gut beschreibt, aber lassen Sie sie hier als Referenz interpretieren:

• Flusslayout: Fügen Sie den vertikalen Abstand zwischen verschachtelten Bl?cken in die Rand-Block-Richtung hinzu. Diese verschachtelten Bl?cke k?nnen auch links ausgerichtet, rechts ausgerichtet oder zentral ausgerichtet werden.
• eingeschr?nktes Layout: entspricht genau dem Flusslayout, aber die Breitenbeschr?nkungen für verschachtelte Bl?cke basieren auf Contentwidth- und Widewidth -Einstellungen (in themen.json oder globalem Stil).
• Flex -Layout: Dies hat sich in WordPress 6.1 nicht ge?ndert. Es verwendet CSS Flexbox, um ein Layout mit Standardhorizontalfluss (eine Zeile) zu erstellen, kann aber auch vertikal flie?en, sodass Bl?cke einzeln gestapelt werden. Verwenden Sie die CSS GAP -Eigenschaft, um den Abstand anzuwenden.

Dieser neue Layouttyp erstellt semantische Klassennamen für jedes Layout:

Justin Tadlock bietet eine breite Einführung in verschiedene Layouttypen und semantische Klassen, einschlie?lich Anwendungsf?lle und Beispiele.

Aktualisieren Sie Ihr Thema, um eingeschr?nkte Layouts

zu unterstützen

Wenn Sie bereits ein Blockthema verwenden, das Sie selbst herstellen, müssen Sie es aktualisieren, um ein eingeschr?nktes Layout zu unterstützen. Es gibt nur wenige Dinge, die in thema austauschen k?nnen.json:

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

Dies sind die kürzlich ver?ffentlichten Abstandseinstellungen mit aktivierter UserootpaddingAwareAlignments und haben themen.json -Dateien aktualisiert, um eingeschr?nkte Layouts zu definieren:

Layoutstil

deaktivieren

Der grundlegende Layoutstil ist die Standardfunktion in WordPress 6.1 Core. Mit anderen Worten, sie arbeiten aus der Box. Wenn wir es jedoch brauchen, k?nnen wir sie mit diesem kleinen Code in Funktionen deaktivieren.php:

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

Hier ist eine wichtige Warnung: Deaktivieren der Unterstützung für Standard -Layout -Typen werden auch alle grundlegenden Stile dieser Layouts entfernt. Dies bedeutet, dass Sie Ihren eigenen Stil für den Abstand, die Ausrichtung und alles, was Sie sonst noch ben?tigen, um Inhalte in verschiedenen Vorlagen anzuzeigen und Kontexte zu blockieren, stylen müssen.

Zusammenfassung

Als gro?er Fan von Bildern mit voller Breite umfassen die neuen Funktionen WordPress 6.1 Layout und Fill-Sense-Ausrichtung zwei meiner Lieblingsfunktionen. Die Arbeit mit anderen Tools, einschlie?lich besserer Margen- und Füllsteuerung, reibungsloser Typografie sowie aktualisierten Listings und Referenzbl?cken, ist ein Beweis für eine bessere Erfahrung in der Erstellung von Inhalten.

Jetzt müssen wir abwarten, wie durchschnittliche Designer und Inhaltsersteller diese unglaublichen Tools verwenden und sie auf die n?chste Stufe bringen k?nnen.

Da die Iteration der Standorteditorentwicklung im Gange ist, sollten wir immer die schwierigen Stra?e vorwegnehmen. Als Optimist würde ich jedoch gerne sehen, was in der n?chsten Version von WordPress 6.2 passiert. Einige Dinge, auf die ich genau aufmerksam bin, umfassen Funktionen, die in Betracht gezogen werden, Unterstützung für die klebrige Positionierung, neue Layout -Klassennamen für den internen Blockverpackung, aktualisierte Optionen für Fu?zeile aus Alignment -Ausrichtungen und Hinzufügen von eingeschr?nkten und Flusslayoutoptionen in den Deckblock.

Dieses GitHub-Problem Nr. 44720 listet Layout-bezogene Diskussionen auf, die für WordPress 6.2 geplant sind.

Zus?tzliche Ressourcen

Ich habe viele Quellen konsultiert und mich auf all dies befasst. Hier ist eine riesige Liste von dem, was ich hilfreich fand, und ich denke, Sie k?nnten es auch m?gen.

Tutorial

• Layoutstile (Stil | Entwicklerressourcen)
• themen.json Layout- und Abstandsoptionen (ortsweite Bearbeitung)
• Bevollm?chtigte Ausrichtung (ortsweite Bearbeitung)
• Layout und breite Ausrichtung in WordPress: Vergangenheit, Gegenwart und bevorstehende ?nderungen (Gutenberg Times)
• Gutenberg Zeiten für Layoutklassen in WordPress 6.1

WordPress -Artikel

• Editor -Layout -Unterstützung nach 6.1 Refactoring (WordPress Core erstellen)
• Kernblockstil verschieben auf JSON (Make WordPress Core)

GitHub Pull -Anfrage und Frage

• CORE CSS unterstützt Root Fill und Alignful Blacs (Github PR 42085)
• Layout: Fix Has-Global-Padding-Klassenname für eingeschr?nkte Layouts ohne ContentSize (Github PR #43689)
• Layout: Verwenden Sie semantische Klassennamen, zentralisieren Sie Layout -Definitionen, reduzieren Sie die Duplikation und beheben Sie BlockGap in thema.json (GitHub PR 40875)
• Tracking: Andere Layoutoptionen, Designwerkzeuge und Verbesserungen (GitHub Ausgabe 44720)

Das obige ist der detaillierte Inhalt vonVerwenden des neuen eingeschr?nkten Layouts in WordPress -Block -Themen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!