WordPress ist Ende 2018 in Version 5 erscheinen und seither ist der neue Block-Editor – Codename Gutenberg – eingebacken. Das Update war und ist bei vielen Anwendern und Entwicklern umstritten, da die Neuerungen im Eiltempo entwickelt und nicht fehlerfrei zur Verfügung gestellt wurden. Die Entwickler geben aber weiterhin Vollgas und die Probleme werden eines nach dem anderen beseitigt, mit regelmässigem Feedback aus der Community.
Aus der Redaktionssicht bietet Gutenberg den Luxus an, mit fortgeschrittenen Layouts zu arbeiten. Und zwar oft ohne zusätzliche Plugins. Wir haben unsere Projekte schon immer mit einem optimalen Redaktionserlebnis umgesetzt. Mit dem Block-Editor wird das Erlebnis nun aber noch besser, da ein Redaktor mit einer Live-Vorschau der Seite oder des Beitrags im Admin-Bereich arbeitet.
WordPress 5.1 hat eine extreme Geschwindigkeitsverbesserung gegenüber Version 5.0 geliefert. Für uns war das dann auch der richtige Zeitpunkt um unsere neuen Projekte wo immer möglich und sinnvoll mit Gutenberg umzusetzen. Dies spart nicht nur Zeit und den Einsatz von manchen Drittplugins, sondern gibt uns die Möglichkeit, mit der gleichen Technik wie Core-Entwickler zu arbeiten.
Eines unserer ersten Projekten mit Gutenberg ist bereits in der Abschlussphase und wir sind begeistert, wie gut die Technik funktioniert. Der neue Editor hat uns natürlich zur Weiterbildung gefordert, wie Matt Mullenweg uns in 2015 aufgerufen hat: Learn JavaScript, deeply.
JavaScript ist für uns grundsätzlich kein Problem – ich arbeite seit 2001 an komplexen Lösungen und Webapplikationen mit Einsatz von JavaScript, Say Hello fokussiert seit ein paar Jahren auf die Technik hinter Progressive Web Apps. PWAs bringen die interaktive Technik des Webbrowsers wirksam ein und basieren zu einem grossen Teil auf JavaScript.
Sobald man die Basics im Griff hat, ist die Entwicklung von Gutenberg-Blöcke gar nicht so schwierig. Hat man Erfahrung mit React und JSX, ist man bereits auf der Spitze der Technik. Dieses Know-How ist aber keinesfalls Pflicht für einfache Anpassungen.
Als Beispiel, einer der Core-Blöcke ist der Cover-Block, den man in folgendem Screenshot sieht. Eine Überschrift mit einem grossflächigem Bild in Hintergrund.
Man kann ein Problem im Screenshot sofort erkennen: unsere Köpfe sind abgeschnitten! Dies passiert, weil der Block in den mittelgrossen bis grossen Auflösungen immer gleich hoch ist, unabhängig der Bildproportionen.
Will man keinen eigenen Block programmieren, kann man stattdessen manche Core-Blöcke erweitern. Wir wollen das Verhalten dieses Blocks leicht umwandeln: das Bild soll nicht abgeschnitten werden.
Um dies zu erreichen haben wir konzipiert, dass die Bilder in solchen Blöcke entweder im Verhältnis 2:1 oder 3:1 aufbereitet werden. Um diese Verhältnisse zu berücksichtigen, fügt man ein paar Block Styles zum Gutenberg-Block hinzu. Man lädt eine zusätzliche JavaScript-Datei in den Block-Editor, die der Cover-Block mit diesen Stile versieht.
function block_styles_enqueue_javascript() {
wp_enqueue_script( 'cover-custom-styles-script',
plugins_url( 'cover-custom-styles.js', __FILE__ ),
['wp-blocks']
);
}
add_action( 'enqueue_block_editor_assets', 'block_styles_enqueue_javascript' );Diese Datei bestimmt, dass unsere Technik von der Core-Datei wp-blocks abhängig ist, die uns das JavaScript-Objekt wp.blocks zur Verfügung stellt.
In unsere Datei fügen wir lediglich drei Funktionsaufrufe ein. (Die Option «Standard» ist nur dafür da, um die übliche Einstellung auswählen zu können.)
wp.blocks.registerBlockStyle("core/cover", {
name: "standard",
label: "Standard"
});
wp.blocks.registerBlockStyle("core/cover", {
name: "aspect-21",
label: "2:1"
});
wp.blocks.registerBlockStyle("core/cover", {
name: "aspect-31",
label: "3:1"
});Das reicht für die Funktionalität im Editor aus! Bei dieser Einfachheit sieht man, wie die Gutenberg-Entwickler sich nicht nur um den Einsatz gekümmert haben, sondern auch um die Vorbereitung für solche Erweiterungen. Eine tolle Sache.
Nachdem man die Stile angefügt hat, stehen diese in der Block-Sidebar zur Auswahl. Wählt man eine Option aus, wird das HTML des Blocks mit einem weiteren Klassennamen versehen. Klug gelöst, da wir nun unser eigenes CSS schreiben können, entsprechend dem Einsatz.
Wir sprechen den Klassennamen .is-style-aspect-21 und .is-style-aspect-31 mit folgenden Regeln an. Das CSS wird im Gutenberg-Editor und auf der Website mit dem passenden Hooks eingebunden, damit die Ansichten im Editor und auf der Website gleich aussehen.
.wp-block-cover.is-style-aspect-21::after {
display: block;
content: '';
width: 100%;
padding-bottom: 50%;
flex: 0;
}
.wp-block-cover.is-style-aspect-21 .wp-block-cover-text {
flex: 1 0 100%;
}
.wp-block-cover.is-style-aspect-31::after {
display: block;
content: '';
width: 100%;
padding-bottom: 33.33333333%;
flex: 0;
}
.wp-block-cover.is-style-aspect-31 .wp-block-cover-text {
flex: 1 0 100%;
}
Ziemlich simpel – nun sieht man unsere Köpfe, wie gewünscht. 🙂
Willst du mehr über Gutenberg wissen, oder ein Projekt mit uns und dieser tollen Technik besprechen, bin ich gerne für dich unter mark@sayhello.ch da.
