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?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 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 ...
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.
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.
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.
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!
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.
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
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
<code>{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}</code>Layoutstil
<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.
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.
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.
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!
Können Douyin-Funken wieder entzündet werden, wenn sie länger als drei Tage ausgeschaltet waren?
Die zehn besten Börsen für digitale Währungen
css3transition
Was bedeutet WLAN deaktiviert?
Drei Auslösemethoden für SQL-Trigger
Verwendung von ModifyMenu
So erhalten Sie Bitcoin
Was tun, wenn das Laden der DLL fehlschlägt?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
