Verwendung des neuen eingeschränkten Layouts in WordPress Block Themes

Eines der Hauptziele des WordPress Site Editors (und ja, das ist jetzt der „offizielle“ Name) ist es, grundlegende Block-Stile von CSS in strukturiertes JSON zu verschieben. JSON-Dateien sind maschinenlesbar, was sie für den JavaScript-basierten Site Editor zur Konfiguration der globalen Stile eines Themes direkt in WordPress nutzbar macht.

Das ist noch nicht ganz fertig! Wenn wir uns das Standard-Theme Twenty Twenty-Two (TT2) ansehen, gab es zwei Haupt ungelöste Probleme: Styling von Interaktionen (wie :hover, :active, :focus) und die Ränder und Abstände von Layout-Containern. Man kann sehen, wie diese temporär in der TT2 style.css Datei behoben wurden, anstatt in die theme.json Datei zu gelangen.

WordPress 6.1 hat diese Probleme behoben und ich möchte mich speziell mit Letzterem befassen. Jetzt, da wir JSON-formatierte Stile für die Ränder und Abstände von Layout-Containern haben, eröffnet uns das flexiblere und robustere Möglichkeiten zur Definition von Abständen in unseren Theme-Layouts.

Um welche Art von Abstand geht es?

Zunächst einmal haben wir bereits Abstand auf Root-Ebene, was eine schicke Art ist, den Abstand auf dem <body> Element zu beschreiben. Das ist gut, da es konsistenten Abstand auf einem Element gewährleistet, das auf allen Seiten und Beiträgen gemeinsam genutzt wird.

Aber es gibt noch mehr, denn jetzt haben wir eine Möglichkeit für Blöcke, diesen Abstand zu umgehen und sich im Vollbildmodus auszurichten. Das liegt an abstandsfreundlichen Ausrichtungen, einer neuen Opt-in-Funktion in theme.json. Selbst wenn Sie Abstand auf Root-Ebene haben, können Sie zum Beispiel einem Bild (oder einem anderen Block) erlauben, sich auszubrechen und im Vollbildmodus zu erscheinen.

Das bringt uns zu einer weiteren Sache, die wir bekommen: eingeschränkte Layouts. Die Idee ist, dass alle Blöcke, die in das Layout verschachtelt sind, die Inhaltsbreite des Layouts respektieren – was eine globale Einstellung ist – und nicht darüber hinausgehen. Wir können dieses Verhalten blockweise mit Ausrichtungen überschreiben, aber dazu kommen wir noch.

Beginnen wir mit...

Abstand auf Root-Ebene

Auch das ist nicht neu. Wir haben die Möglichkeit, den Abstand auf dem <body> Element in theme.json festzulegen, seitdem das experimentelle Gutenberg-Plugin es in Version 11.7 eingeführt hat. Wir legen es im Objekt styles.spacing fest, wo wir margin- und padding-Objekte haben, um den oberen, rechten, unteren und linken Abstand auf dem Body 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 öffnen und das <body> Element inspizieren würden, 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 hier liegt das Problem: Wie um alles in der Welt können wir einigen Blöcken erlauben, diesen Abstand zu sprengen, um den gesamten Bildschirm, Kante an Kante, zu füllen? Dafür ist der Abstand da, oder? Er verhindert, dass dies geschieht!

Aber es gibt tatsächlich viele Fälle, in denen Sie diesen Abstand bei einer einmaligen Verwendung im Block-Editor umgehen möchten. Nehmen wir an, wir setzen ein Bild-Block auf einer Seite und möchten, dass er im Vollbildmodus angezeigt wird, während der Rest des Inhalts den Abstand auf Root-Ebene beachtet?

Hier kommt...

Abstandsfreundliche Ausrichtungen

Während des Versuchs, das erste Standard-WordPress-Theme zu erstellen, das alle Stile in der theme.json Datei definiert, veranschaulicht der leitende Designer Kjell Reigstad die herausfordernden Aspekte des Ausbrechens aus dem Root-Level-Padding in diesem GitHub-Issue.

Root-Level-Padding verhindert, dass Blöcke die volle Viewport-Breite einnehmen (links). Aber mit abstandsfreundlichen Ausrichtungen können einige Blöcke aus diesem Abstand „opt-outen“ und die volle Viewport-Breite einnehmen (rechts). (Bildnachweis: Kjell Reigstad)

Neue Funktionen in WordPress 6.1 wurden entwickelt, um dieses Problem anzugehen. Schauen wir uns diese als nächstes an.

`useRootPaddingAwareAlignments`

Eine neue Eigenschaft useRootPaddingAwareAlignments wurde geschaffen, um das Problem zu lösen. Sie wurde tatsächlich zuerst im Gutenberg-Plugin v13.8 eingeführt. Der ursprüngliche Pull Request ist eine gute Einführung in die Funktionsweise.

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

Sofort fällt auf, dass dies eine Funktion ist, in die wir uns einklinken müssen. Die Eigenschaft ist standardmäßig auf false gesetzt, und wir müssen sie explizit auf true setzen, um sie zu aktivieren. Beachten Sie auch, dass appearanceTools ebenfalls auf true gesetzt ist. Dies ermöglicht uns UI-Steuerelemente im Site Editor für das Styling von Rändern, Linkfarben, Typografie und ja, Abstände, die auch Ränder und Abstände beinhalten.

Das Setzen von appearanceTools auf true aktiviert Blöcke automatisch für Abstände und Ränder, ohne dass entweder settings.spacing.padding oder setting.spacing.margin auf true gesetzt werden müssen.

Wenn wir useRootPaddingAwareAlignments aktivieren, erhalten wir benutzerdefinierte Eigenschaften mit Root-Padding-Werten, die auf dem <body> Element im Frontend gesetzt sind. Interessanterweise wird das Padding auch auf die Klasse .editor-styles-wrapper angewendet, so dass der Abstand auch im Backend-Block-Editor sichtbar ist. Ziemlich cool!

Ich konnte diese benutzerdefinierten CSS-Eigenschaften in DevTools bestätigen, als ich herumstöberte.

Die Aktivierung von useRootPaddingAwareAlignments wendet auch Links- und Rechtsabstände auf jeden Block an, der die Werte „Inhalt“ und „breit“ in der obigen globalen Stil-Grafik unterstützt. Wir können diese Werte auch in theme.json definieren.

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

Wenn die globalen Stileinstellungen von denen abweichen, die in theme.json definiert sind, dann haben die globalen Stile Vorrang. Sie können alles über die Verwaltung von Block-Theme-Stilen in meinem letzten Artikel erfahren.

contentSize ist die Standardbreite für Blöcke.
wideSize bietet eine Option für ein „breites“ Layout und etabliert eine breitere Spalte, in die sich Blöcke ausdehnen können.

Das letzte Codebeispiel ergibt 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] steht für eine eindeutige Nummer, die automatisch von WordPress generiert wird.

Aber raten Sie mal, was wir noch bekommen? Volle Ausrichtung auch!

.wp-container-[id] .alignfull {
  max-width: none;
}

Sehen Sie das? Durch die Aktivierung von useRootPaddingAwareAlignments und die Definition von contentSize und wideSize erhalten wir auch eine CSS-Klasse für volle Ausrichtung, was insgesamt drei Container-Konfigurationen für die Steuerung der Breite von Blöcken ergibt, die zu Seiten und Beiträgen hinzugefügt werden.

Dies gilt für die folgenden layoutspezifischen Blöcke: Spalten, Gruppe, Beitragsinhalt und Query Loop.

Block-Layout-Steuerelemente

Nehmen wir an, wir fügen einen der oben genannten layoutspezifischen Blöcke zu einer Seite hinzu. Wenn wir den Block auswählen, bietet uns die Block-Einstellungen-Benutzeroberfläche neue Layout-Einstellungen basierend auf den settings.layout Werten, die wir in theme.json (oder der Global Styles UI) definiert haben.

Wir beschäftigen uns hier mit sehr spezifischen Blöcken – solchen, die andere Blöcke verschachtelt haben können. Diese Layout-Einstellungen dienen also wirklich der Steuerung der Breite und Ausrichtung dieser verschachtelten Blöcke. Die Einstellung „Innere Blöcke verwenden Inhaltsbreite“ ist standardmäßig aktiviert. Wenn wir sie deaktivieren, gibt es keine max-width für den Container und die Blöcke darin werden Kante an Kante angezeigt.

Wenn wir den Schalter eingeschaltet lassen, halten sich verschachtelte Blöcke entweder an die contentWidth oder wideWidth Werte (mehr dazu gleich). Oder wir können die numerischen Eingabefelder verwenden, um benutzerdefinierte contentWidth und wideWidth Werte in diesem Einzelfall zu definieren. Das ist eine großartige Flexibilität!

Breite Blöcke

Die gerade betrachteten Einstellungen werden am Elternblock vorgenommen. Sobald wir einen Block darin verschachtelt und ausgewählt haben, haben wir zusätzliche Optionen in diesem Block, um contentWidth, wideWidth zu verwenden oder im Vollbildmodus zu arbeiten.

Dieser Bild-Block ist so eingestellt, dass er die Einstellung `contentWidth` respektiert, die im Kontextmenü als „Keine“ bezeichnet wird, kann aber auch auf `wideWidth` (als „Breite“) oder „Vollbild“ eingestellt werden.

Beachten Sie, wie WordPress die CSS-Custom-Properties für den Root-Level-Abstand mit -1 multipliziert, um negative Abstände zu erzeugen, wenn die Option „Vollbild“ ausgewählt wird.

Die Klasse `.alignfull` setzt negative Abstände für einen verschachtelten Block, um sicherzustellen, dass er die volle Viewport-Breite einnimmt, ohne mit den Root-Level-Padding-Einstellungen zu kollidieren.

Verwendung 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 darin verschachtelten Blöcke. Aber WordPress 6.1 führt auch neue Layout-Funktionen für noch mehr Flexibilität und Konsistenz in den Vorlagen eines Themes ein.

Fallbeispiel: WordPress hat seine Flex- und Flow-Layouttypen komplett umstrukturiert und uns einen eingeschränkten Layout-Typ gegeben, der es einfacher macht, Block-Layouts in Themes mit den Inhaltsbreiten-Einstellungen in der Global Styles UI des Site Editors auszurichten.

Flex-, Flow- und Constrained-Layouts

Der Unterschied zwischen diesen drei Layouttypen sind die Stile, die sie ausgeben. Isabel Brison hat eine hervorragende Abhandlung, die die Unterschiede schön darlegt, aber lassen Sie uns sie hier zur Referenz paraphrasieren.

Flow-Layout: Fügt vertikale Abstände zwischen verschachtelten Blöcken in Richtung margin-block hinzu. Diese verschachtelten Blöcke können auch links, rechts oder zentriert ausgerichtet werden.
Constrained-Layout: Genau wie beim Flow-Layout, aber mit Breitenbeschränkungen für verschachtelte Blöcke, die auf den contentWidth- und wideWidth-Einstellungen basieren (entweder in theme.json oder Global Styles).
Flex-Layout: Dieses wurde in WordPress 6.1 nicht verä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, so dass Blöcke übereinander gestapelt werden. Abstände werden mit der CSS-Eigenschaft gap angewendet.

Diese neue Reihe von Layouttypen erstellt semantische Klassennamen für jedes Layout.

Semantische Layout-Klasse	Layout-Typ	Unterstützte Blöcke
`.is-layout-flow`	Flow-Layout	Spalten, Gruppe, Beitragsinhalt und Query Loop.
`.is-layout-constrained`	Constrained-Layout	Spalten, Gruppe, Beitragsinhalt und Query Loop.
`.is-layout-flex`	Flex-Layout	Spalten, Buttons, Social Icons

Justin Tadlock hat eine ausführliche Abhandlung über die verschiedenen Layouttypen und semantischen Klassen, einschließlich Anwendungsfällen und Beispielen.

Aktualisierung Ihres Themes zur Unterstützung eingeschränkter Layouts

Wenn Sie bereits ein eigenes Block-Theme verwenden, möchten Sie es aktualisieren, um eingeschränkte Layouts zu unterstützen. Alles, was Sie brauchen, ist der Austausch einiger Dinge in theme.json.

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

Dies sind kürzlich veröffentlichte Block-Themes, die Abstandseinstellungen mit useRootPaddingAwareAlignments aktiviert haben und eine aktualisierte theme.json Datei besitzen, die ein eingeschränktes Layout definiert.

Theme	Abstand auf Root-Ebene	Funktionen für eingeschränkte Layouts
TT3	Quellcode	Quellcode, Vorlagen
ProWP	Quellcode	Quellcode, Vorlagen
Triangulate	Quellcode	Quellcode, Vorlagen
Oaknut	Quellcode	Quellcode, Vorlagen
Loudness	Quellcode	Quellcode, Vorlagen
Pixl	Quellcode	Quellcode, Vorlagen
Block Canvas	Quellcode	Quellcode, Vorlagen
Rainfall	Quellcode	Quellcode, Vorlagen

Layout-Stile deaktivieren

Die grundlegenden Layout-Stile sind Standardfunktionen, die in WordPress 6.1 Core enthalten sind. Mit anderen Worten, sie sind sofort einsatzbereit. Aber wir können sie bei Bedarf mit diesem kleinen Schnipsel in functions.php deaktivieren.

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Große Warnung: Das Deaktivieren der Unterstützung für die Standard-Layouttypen entfernt auch alle grundlegenden Stile für diese Layouts. Das bedeutet, dass Sie Ihre eigenen Stile für Abstände, Ausrichtungen und alles andere, was benötigt wird, um Inhalte in verschiedenen Vorlagen- und Blockkontexten anzuzeigen, selbst erstellen müssen.

Zusammenfassung

Als großer Fan von Vollbild-Bildern sind das neue eingeschränkte WordPress 6.1-Layout und die abstandsfreundlichen Ausrichtungsfunktionen zwei meiner beliebtesten Neuerungen. Zusammen mit anderen Werkzeugen, darunter bessere Steuerungen für Ränder und Abstände, flüssige Typografie und aktualisierte Listen- und Zitatblöcke, unter anderem, sind ein solider Beweis dafür, dass sich WordPress in Richtung einer besseren Inhaltserstellungserfahrung bewegt.

Nun müssen wir abwarten und sehen, wie die Vorstellungskraft und Kreativität von gewöhnlichen Designern und Content-Erstellern diese unglaublichen Werkzeuge nutzen und auf ein neues Niveau heben.

Aufgrund der fortlaufenden Entwicklung des Site Editors sollten wir immer einen schwierigen Weg vorausahnen. Als Optimist bin ich jedoch gespannt, was in der kommenden Version von WordPress 6.2 passieren wird. Einige der Dinge, auf die ich genau achte, sind Dinge wie Funktionen, die für die Aufnahme in Betracht gezogen werden, Unterstützung für Sticky Positioning, neue Layout-Klassennamen für innere Block-Wrapper, aktualisierte Footer-Ausrichtungsoptionen und Hinzufügen von Flow- und Constrained-Layout-Optionen zu Cover-Blöcken.

Dieses GitHub-Issue #44720 listet die Layout-bezogenen Diskussionen auf, die für WordPress 6.2 geplant sind.

Zusätzliche Ressourcen

Ich habe viele Quellen konsultiert und Referenzen genutzt, während ich mich mit all dem beschäftigt habe. Hier ist eine große Liste von Dingen, die ich hilfreich fand und die Ihnen vielleicht auch gefallen.

CELCAMP

# 5. Dezember 2022

Sehr nützlicher Artikel, schade, dass niemand PHP so gut beschreiben wird..

Antworten

MBAPPE IVEN

# 6. Dezember 2022

Wird die Billing-Website, die im Kadence WP Theme gestaltet wurde, von diesem eingeschränkten Layout unterstützt oder nicht? Meine Erfahrung mit dem FAQs-Block ist damit nicht allzu gut. Ich werde prüfen, ob das Layout von Kadence WP unterstützt wird oder nicht.

Geoff Graham

Permalink zum Kommentar# 6. Dezember 2022

Nach meinem Verständnis hat Kadence eigene Layout-Steuerelemente. Zum Beispiel können Sie einen Row Layout Block auf einer Seite platzieren und ihn in den Struktur-Einstellungen des Blocks im Vollbildmodus anzeigen lassen. Dann würden Sie einen weiteren Row Layout Block darin verschachteln und ihn so einstellen, dass er die innere Containerbreite in den Struktur-Einstellungen dieses Blocks verwendet. Die innere Containerbreite ist in den globalen Einstellungen des Themes. Und Sie können diese blockweise überschreiben.
MBAPPE IVEN

Permalink zum Kommentar# 6. Dezember 2022

Ja, Sie haben Recht, ich habe meine Website persönlich gestaltet. Ich habe auch Row Layout verwendet und Infografiken gleicher Größe verwendet, aber als ich die Seite bis zum Äußersten minimierte, waren die Texte der Infografiken unausgeglichen – störendes Layout gleicher Größe. Der Rest des Seiteninhalts und Layouts wurde in Bezug auf den Text ebenfalls in gleicher Größe und gut ausbalanciert. Vielleicht stimmt etwas mit dem Text der Infografiken nicht. Hier können Sie es auch überprüfen, indem Sie es auf volle Kapazität minimieren und die Infografiken betrachten.

Marcio Duarte

# 8. Dezember 2022

Nur eine schnelle Korrektur: Es ist nicht notwendig, die layout-Einstellung in theme.json manuell zu ändern, um eingeschränkte Layouts in Block-Themes zu ermöglichen. Sie ist nicht Teil des theme.json-Schemas. Nur Vorlagen – oder Vorlagenteile – benötigen diese Definition im Code.

Um welche Art von Abstand geht es?

Abstand auf Root-Ebene

Abstandsfreundliche Ausrichtungen

useRootPaddingAwareAlignments

Block-Layout-Steuerelemente

Breite Blöcke

Verwendung eines eingeschränkten Layouts

Flex-, Flow- und Constrained-Layouts

Aktualisierung Ihres Themes zur Unterstützung eingeschränkter Layouts

Layout-Stile deaktivieren

Zusammenfassung

Zusätzliche Ressourcen

Tutorials

WordPress-Beiträge

GitHub Pull Requests und Issues

Kommentare

Hinterlassen Sie eine Antwort Antwort abbrechen

`useRootPaddingAwareAlignments`