Theme-Support für Gutenberg-Funktionen hinzufügen

Veröffentlicht: 22. Februar 2018 – Kommentar hinterlassen Letzte Aktualisierung: 14. Februar 2022

Zwar ist die grundlegende Unterstützung von Gutenberg im eigenen Theme bereits dann zumindest größtenteils gegeben, wenn auch der Standard-Editor unterstützt wird, allerdings gibt es neue Funktionen, die erst im Theme selbst aktiviert werden müssen, bevor sie in Gutenberg genutzt werden können.

Zu diesen Funktionen gehören zwei neue Bildausrichtungen namens „Wide width“ und „Full width“, also ein breiteres Bild und ein Bild über die volle Seitenbreite.

Diese unterscheiden sich darin, dass beide Bildausrichtungen breiter sind als der Inhaltsbereich, ein „Wide width“-Bild allerdings eine Maximalbreite hat, die im Theme frei definiert werden kann. Ein „Full width“-Bild dagegen geht immer über die volle Breite des Bildschirms.

Beispiel „Wide width“:

Das Bild ist breiter als der eigentliche Inhaltsbereich und maximal 1024 px breit – die Breite, die ich im Theme-CSS angegeben habe. Dazu unten mehr.

Beispiel „Full width“:

Das Bild geht immer bis zum Rand und ist dabei auch immer breiter als der eigentliche Inhaltsbereich.

Umsetzung

Zuerst benötigt das Theme generellen Theme-Support für diese Funktionen. Dieser muss in der functions.php mit folgender Zeile hinzugefügt werden:

add_theme_support( 'align-wide' );Code-Sprache: PHP (php)

Diese Zeile muss innerhalb der Setup-Funktion eingegeben werden, welche über den Hook after_setup_theme aufgerufen wird. Bei mir sieht das beispielsweise folgendermaßen aus:

/**
 * Setup Twenty Seventeen child theme.
 */
function kpress_setup() {
	// Add theme support for Custom Logo.
	add_theme_support( 'custom-logo', [
		'width' => 361,
		'height' => 67,
		'flex-height' => true,
		'flex-width' => true,
	] );
	// add Gutenberg align-wide and align-full support
	add_theme_support( 'align-wide' );
}

add_action( 'after_setup_theme', 'kpress_setup', 100 );
Code-Sprache: PHP (php)

Nun hat man bei Bild-Blöcken zwei neue Auswahlmöglichkeiten bezüglich deren Darstellung. Wie auch an diesem Block zu erkennen ist (wenn dieser Beitrag mit einer Auflösung > 1024 px aufgerufen wird), so gilt das nicht nur für Bilder, sondern für alle Arten von Blöcken, wenn sie die Klasse .alignwide oder .alignfull besitzen. Diese beiden neuen Auswahlmöglichkeiten sind die bereits angesprochenen „Wide width“ und „Full width“.

Per CSS muss nun noch das eigentliche Aussehen angegeben werden, denn das kommt nicht von allein. Es gibt bereits einen interessanten Beitrag von Jason Yingling dazu, allerdings habe ich noch etwas hinzugefügt, um mehr als nur Bilder zu unterstützen. Außerdem ist meines Wissens nach transform performanter als das dort genutzte margin-left bzw. margin-right.

Die neuen Block-Ausrichtungen ergeben entweder die Klasse .alignfull oder .alignwide. Deren Basis-Design ist erst einmal identisch:

.alignfull,
.alignwide {
	left: 50%;
	max-width: none;
	position: relative;
	transform: translate(-50%);
	width: 100vw;
}Code-Sprache: CSS (css)

Um nun für .alignwide die Ausnahme zu machen, dass es maximal 1024 px breit sein soll, muss folgendes CSS hinzugefügt werden:

.alignwide {
	max-width: 1024px;
}Code-Sprache: CSS (css)

Befinden sich innerhalb eines derartig ausgerichteten Blocks Bilder, sollen diese auf 100 % Breite dargestellt werden. Das erreicht man mit folgendem CSS-Code:

.alignfull img,
.alignwide img {
	width: 100%;
}Code-Sprache: CSS (css)

Es kann sein – je nach System – dass das zu einem horizontalen Scrollbalken bei einem „Full width“-Bild führt. Dann muss man noch eine CSS-Anweisung bezüglich des overflow einem übergeordneten Container geben, der eine Breite von 100 % besitzt. Im Falle des Twenty Seventeen ist .site-content ein idealer Selektor dafür und kann mit folgendem Code genutzt werden, um den Scrollbalken zu unterdrücken:

.site-content {
	overflow-x: hidden;
}Code-Sprache: CSS (css)

Zu guter Letzt – und das wird häufig vergessen – hat man nun das Problem, dass normale Absatz-Blöcke (Paragraphen) bei geringeren Auflösungen (bzw. bei „Full width“ immer) das Problem haben, dass sie keinen Abstand zum Browserrand besitzen. Dies kann man umgehen, indem man explizit Absatz-Blöcke mit dieser Ausrichtung einen zusätzlichen Abstand gibt.

Ich habe in meinem Theme denselben Abstand in Verwendung, den der Inhaltsbereich auch im mobilen Modus zum Browserrand besitzt. Damit sieht der CSS-Code dann folgendermaßen bei mir aus:

p.alignfull,
p.alignwide {
	padding-left: 1rem;
	padding-right: 1rem;
}Code-Sprache: CSS (css)

Fazit

Schon mit wenigen Code-Zeilen (einer) und 21 Zeilen CSS, wenn man es ebenso formatiert wie ich, erreicht man schnell und leicht interessante neue Darstellungsmöglichkeiten für Gutenberg-Blöcke. Warum kann nicht alles so leicht sein? 🙄