Eines der Hauptziele des WordPress-Site-Editors (und ja, das ist jetzt das "Offizieller Name) besteht darin, das grundlegende Block-Styling zu verschieben für CSS zu strukturiertem JSON. JSON-Dateien sind maschinenlesbar, was sie für den JavaScript-basierten Site-Editor nutzbar macht, um die globalen Stile eines Designs direkt in WordPress zu konfigurieren.
Es ist noch nicht ganz so weit! Wenn wir uns das Standardthema Twenty Twenty-Two (TT2) ansehen, gab es zwei ungelöste Hauptprobleme: Styling-Interaktionen (mögen :hover, :active, :focus), Und die Ränder und Polsterung von Layout-Containern. Sie können sehen, wie diese vorübergehend im TT2 behoben wurden style.css Datei, anstatt es in die theme.json Datei.
WordPress 6.1 diese Probleme behoben und ich möchte mich speziell mit letzterem befassen. Jetzt, da wir JSON-ifizierte Stile für die Ränder und das Auffüllen von Layout-Containern haben, öffnet uns das flexiblere und robustere Möglichkeiten, Abstände in unseren Themenlayouts zu definieren.
Von was für einem Abstand reden wir?
Zunächst einmal haben wir bereits Polsterung auf Root-Ebene Das ist eine ausgefallene Art, die Polsterung auf dem zu beschreiben Element. Das ist schön, weil es konsistente Abstände auf einem Element gewährleistet, das auf allen Seiten und Beiträgen geteilt wird.
Aber es steckt noch mehr dahinter, denn jetzt haben wir eine Möglichkeit für Blöcke, diese Polsterung zu umgehen und sich in voller Breite auszurichten. Das ist dank Padding-bewusste Ausrichtungen Dies ist eine neue Opt-in-Funktion theme.json. Selbst wenn Sie also eine Auffüllung auf Root-Ebene haben, können Sie beispielsweise einem Bild (oder einem anderen Block) erlauben, auszubrechen und die volle Breite zu erreichen.
Das bringt uns zu einer anderen Sache, die wir bekommen: eingeschränkte Layouts. Die Idee dabei ist, dass alle im Layout verschachtelten Blöcke die Inhaltsbreite des Layouts respektieren – was eine globale Einstellung ist – und nicht außerhalb davon fließen. Wir können dieses Verhalten Block für Block mit Ausrichtungen überschreiben, aber dazu kommen wir noch.
Lass uns beginnen mit…
Polsterung auf Root-Ebene
Auch dies ist nicht neu. Wir hatten die Möglichkeit, Polsterung auf dem festzulegen Element in theme.json seit dem experimentellen Gutenberg-Plugin hat es in Version 11.7 eingeführt. Wir setzen es auf die styles.spacing Objekt, wo wir haben margin und padding Objekte, um den oberen, rechten, unteren und linken Abstand auf dem Körper zu definieren:
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}Dies ist eine globale Einstellung. Wenn wir also DevTools knacken und die -Element würden wir diese CSS-Stile sehen:
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;
}Kühl. Aber hierin liegt die Frage, wie in aller Welt wir zulassen können, dass einige Blöcke aus diesem Abstand ausbrechen, um den gesamten Bildschirm von Kante zu Kante zu füllen. Deshalb ist der Abstand da, richtig? Es hilft, das zu verhindern!
Aber es gibt tatsächlich viele Fälle, in denen Sie diesen Abstand bei der Arbeit im Blockeditor für eine einmalige Instanz ausbrechen möchten. Angenommen, wir platzieren einen Bildblock auf einer Seite und möchten, dass er in voller Breite angezeigt wird, während der Rest des Inhalts die Auffüllung auf Stammebene respektiert?
Eingeben…
Padding-bewusste Ausrichtungen
Beim Versuch, das erste Standard-WordPress-Theme zu erstellen, das alle Stile in der theme.json Datei veranschaulicht der leitende Designer Kjell Reigstad die herausfordernden Aspekte des Ausbrechens der Polsterung auf Wurzelebene in dieser Datei GitHub-Problem.
Neue Funktionen in WordPress 6.1 wurden erstellt, um dieses Problem zu beheben. Lassen Sie uns diese als nächstes untersuchen.
useRootPaddingAwareAlignments
Neue useRootPaddingAwareAlignments Property wurde erstellt, um das Problem zu lösen. Es wurde tatsächlich erstmals im Gutenberg-Plugin v13.8 eingeführt. Das ursprünglicher Pull-Request ist eine schöne Einführung in die Funktionsweise.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},Beachten Sie gleich zu Beginn, dass dies eine Funktion ist, für die wir uns entscheiden müssen. Die Eigenschaft ist auf eingestellt false standardmäßig und wir müssen es explizit auf setzen true um es zu ermöglichen. Beachten Sie auch, dass wir haben appearanceTools einstellen true . Das aktiviert uns für UI-Steuerelemente im Site-Editor zum Gestalten von Rändern, Linkfarben, Typografie und, ja, Abständen, einschließlich Rand und Polsterung.
Rahmen appearanceTools einstellen true wählt Blöcke automatisch in Margin und Padding aus auch ohne einstellen zu müssen settings.spacing.padding or setting.spacing.margin zu true.
Wenn wir aktivieren useRootPaddingAwareAlignments, werden uns benutzerdefinierte Eigenschaften mit Root-Padding-Werten bereitgestellt, die auf der festgelegt sind Element am vorderen Ende. Interessanterweise gilt das auch für die Polsterung .editor-styles-wrapper Klasse, damit der Abstand angezeigt wird, wenn Sie im Backend-Blockeditor arbeiten. Ziemlich cool!
Ich konnte diese benutzerdefinierten CSS-Eigenschaften in DevTools bestätigen, während ich mich umsah.
Aktivieren useRootPaddingAwareAlignments wendet auch linkes und rechtes Padding auf jeden Block an, der die Werte „content“ width und „wide“ width im Bild „Global Styles“ oben unterstützt. Wir können diese Werte auch in definieren theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}Wenn die Einstellungen für globale Stile anders sind als in definiert theme.json, dann haben die globalen Stile Vorrang. Sie können alles über das Verwalten von Blockdesignstilen erfahren in meinem letzten Artikel.
contentSizeist die Standardbreite für Blöcke.wideSizebietet eine „breite“ Layoutoption und erstellt eine breitere Spalte, in der sich Blöcke ausdehnen können.
Das letzte Codebeispiel gibt uns also das folgende CSS:
/* The default content container */
.wp-container-[id] > * {
max-width: 640px;
margin-left: auto !important;
margin-right: auto !important;
}
/* The wider content container */
.wp-container-[id] > .alignwide {
max-width: 1000px;
}[id] gibt eine eindeutige Nummer an, die automatisch von WordPress generiert wird.
Aber raten Sie mal, was wir sonst noch bekommen? Auch Vollausrichtung!
.wp-container-[id] .alignfull {
max-width: none;
}Siehst du das? Durch Aktivieren useRootPaddingAwareAlignments und definieren contentSize und wideSize, erhalten wir auch eine CSS-Klasse mit vollständiger Ausrichtung für insgesamt drei Containerkonfigurationen zum Steuern der Breite von Blöcken, die Seiten und Beiträgen hinzugefügt werden.
Dies gilt für die folgenden layoutspezifischen Blöcke: Spalten, Gruppieren, Beitragsinhalt und Abfrageschleife.
Blocklayout-Steuerelemente
Nehmen wir an, wir fügen einer Seite einen der oben genannten layoutspezifischen Blöcke hinzu. Wenn wir den Block auswählen, bietet uns die Benutzeroberfläche für Blockeinstellungen neue Layouteinstellungen basierend auf der settings.layout Werte, die wir definiert haben theme.json (oder die Benutzeroberfläche für globale Stile).
Wir haben es hier mit sehr spezifischen Blöcken zu tun – solchen, in denen andere Blöcke verschachtelt sein können. Bei diesen Layout-Einstellungen geht es also wirklich darum, die Breite und Ausrichtung dieser verschachtelten Blöcke zu steuern. Die Einstellung „Innere Blöcke verwenden Inhaltsbreite“ ist standardmäßig aktiviert. Wenn wir es ausschalten, dann haben wir nein max-width auf dem Container und die Blöcke darin gehen Kante an Kante.
Wenn wir den Schalter eingeschaltet lassen, bleiben verschachtelte Blöcke entweder bei den contentWidth or wideWidth Werte (dazu gleich mehr). Oder wir können die numerischen Eingaben verwenden, um benutzerdefinierte zu definieren contentWidth und wideWidth Werte in diesem einmaligen Fall. Das ist große Flexibilität!
Breite Blöcke
Die Einstellungen, die wir gerade angesehen haben, werden im übergeordneten Block festgelegt. Sobald wir einen Block darin verschachtelt und ausgewählt haben, haben wir zusätzliche Optionen in diesem Block, um die zu verwenden contentWidth, wideWidth, oder gehen Sie in voller Breite.
contentWidth Einstellung, die im Kontextmenü mit „Keine“ gekennzeichnet ist, aber auch auf eingestellt werden kann wideWidth (beschriftet mit „Wide width“) oder „Full width“.Beachten Sie, wie WordPress die benutzerdefinierten Padding-CSS-Eigenschaften auf Stammebene mit multipliziert -1 um negative Ränder zu erstellen, wenn Sie die Option „Volle Breite“ auswählen.
.alignfull -Klasse legt negative Ränder für einen verschachtelten Block fest, um sicherzustellen, dass er die volle Ansichtsfensterbreite einnimmt, ohne mit den Padding-Einstellungen auf Stammebene in Konflikt zu geraten.Verwenden eines eingeschränkten Layouts
Wir haben gerade die neuen Abstände und Ausrichtungen behandelt, die wir mit WordPress 6.1 erhalten. Diese sind spezifisch für Blöcke und alle verschachtelten Blöcke innerhalb von Blöcken. Aber WordPress 6.1 führt auch neue Layout-Funktionen für noch mehr Flexibilität und Konsistenz in den Templates eines Themes ein.
Ein typisches Beispiel: WordPress hat seine Flex- und Flow-Layouttypen komplett neu strukturiert und uns eine eingeschränkt Layout -Typ, der das Ausrichten von Blocklayouts in Designs mithilfe der Einstellungen für die Inhaltsbreite in der Benutzeroberfläche für globale Stile des Website-Editors erleichtert.
Flex-, Flow- und Constrained-Layouts
Der Unterschied zwischen diesen drei Layouttypen besteht in den Stilen, die sie ausgeben. Isabel Brison hat eine ausgezeichnete Beschreibung das umreißt schön die Unterschiede, aber lassen Sie uns sie hier als Referenz umschreiben:
- Ablauflayout: Fügt vertikalen Abstand zwischen verschachtelten Blöcken in der hinzu
margin-blockRichtung. Diese verschachtelten Blöcke können auch links, rechts oder zentriert ausgerichtet werden. - Beschränktes Layout: Genauso wie ein Flow-Layout, aber mit Breitenbeschränkungen für verschachtelte Blöcke, die auf dem basieren
contentWidthundwideWidthEinstellungen (entweder intheme.jsonoder globale Stile). - Flex-Layout: Dies war in WordPress 6.1 unverändert. Es verwendet CSS-Flexbox um ein Layout zu erstellen, das standardmäßig horizontal (in einer Reihe) fließt, aber auch vertikal fließen kann, sodass Blöcke übereinander gestapelt werden. Der Abstand wird mithilfe von CSS angewendet
gapEigentum.
Diese neue Liste von Layouttypen erstellt semantische Klassennamen für jedes Layout:
| Semantische Layout-Klasse | Layouttyp | Unterstützte Blöcke |
|---|---|---|
.is-layout-flow |
Flow-Layout | Spalten, Gruppe, Beitragsinhalt und Abfrageschleife. |
.is-layout-constrained |
Eingeschränktes Layout | Spalten, Gruppe, Beitragsinhalt und Abfrageschleife. |
.is-layout-flex |
Flex-Layout | Spalten, Schaltflächen, soziale Symbole |
Justin Tadlock hat einen ausführlichen Bericht über die verschiedenen Layouttypen und semantischen Klassen, einschließlich Anwendungsfällen und Beispielen.
Aktualisieren Sie Ihr Design, um eingeschränkte Layouts zu unterstützen
Wenn Sie bereits ein selbst erstelltes Blockthema verwenden, werden Sie dies tun wollen Aktualisieren Sie es, um eingeschränkte Layouts zu unterstützen. Alles, was Sie brauchen, ist, ein paar Dinge auszutauschen theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}Dies sind kürzlich veröffentlichte Blockthemen, die Abstandseinstellungen mit aktiviert haben useRootPaddingAwareAlignments und habe ein Update theme.json Datei, die ein eingeschränktes Layout definiert:
Deaktivieren von Layoutstilen
Die grundlegenden Layoutstile sind Standardfunktionen, die in WordPress 6.1 Core enthalten sind. Mit anderen Worten, sie sind direkt nach dem Auspacken aktiviert. Aber wir können sie bei Bedarf mit diesem kleinen Ausschnitt deaktivieren functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Große Warnung hier: Deaktivieren Sie auch die Unterstützung für die Standardlayouttypen entfernt den gesamten Basisstil für diese Layouts. Das bedeutet, dass Sie Ihre eigenen Stile für Abstände, Ausrichtungen und alles andere erstellen müssen, was zum Anzeigen von Inhalten in verschiedenen Vorlagen- und Blockkontexten erforderlich ist.
Wrapping up
Als großer Fan von Bildern in voller Breite sind das neue enthaltene WordPress 6.1-Layout und die padding-bewussten Ausrichtungsfunktionen zwei meiner bisherigen Favoriten. Zusammen mit anderen Tools, einschließlich besserer Rand- und Polsterkontrolle, flüssige Typografie, und aktualisierte List- und Quote-Blöcke sind unter anderem ein solider Beweis dafür, dass WordPress sich in Richtung einer besseren Erfahrung bei der Erstellung von Inhalten bewegt.
Jetzt müssen wir abwarten und uns ansehen, wie die Vorstellungskraft und Kreativität gewöhnlicher Designer und Ersteller von Inhalten diese unglaublichen Tools nutzen und auf eine neue Ebene heben.
Aufgrund der laufenden Iterationen der Entwicklung des Site-Editors sollten wir immer mit einem schwierigen Weg rechnen. Als Optimist bin ich jedoch gespannt, was in der kommenden Version von WordPress 6.2 passieren wird. Einige der Dinge, die ich genau im Auge behalte, sind Dinge wie Merkmale berücksichtigt für Inklusion, Unterstützung für klebrige Positionierung, neue Layout-Klassennamen für Innenblockwickler, aktualisierte Ausrichtungsoptionen für die Fußzeile und Hinzufügen von eingeschränkten und fließenden Layoutoptionen zu Cover-Blöcken.
Dieser GitHub gibt #44720 aus listet die layoutbezogenen Diskussionen auf geplant für WordPress 6.2.
Zusätzliche Ressourcen
Ich habe viele Quellen konsultiert und referenziert, während ich mich mit all dem beschäftigt habe. Hier ist eine große alte Liste von Dingen, die ich hilfreich fand und von denen ich denke, dass sie Ihnen auch gefallen könnten.
