Verwenden des neuen eingeschränkten Layouts in WordPress -Block -Themen

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!