Container-Queries in CSS – ein Ausblick

Am 11. Februar 2021 war es soweit: die CSS-Working-Group hat in einem Meeting das Thema Container-Queries mit »RESOLVED: Define container queries […]« beendet. Damit ist beschlossen, dass Container-Queries in der CSS-Spezifikation CSS Containment Module Level 3 spezifiziert werden. 🎉

Falls ihr euch jetzt fragt, »Was sind Container-Queries und warum freut sich Florian so darüber?«, findet ihr die Antwort in diesem Beitrag.

Block-Editor-Konfiguration mit der theme.json

Bisher ist es teilweise (sehr) frustrierend, einzelne Block-Optionen im Editor zu konfigurieren oder zu deaktivieren. Wollten wir etwa, dass für unterschiedliche Blöcke unterschiedliche Farbpaletten zur Verfügung stehen, müssten wir aktuell einige Umwege in Kauf nehmen. Und um zum Beispiel die Ausgabe der Initialbuchstabe-Option beim Absatz-Block zu deaktivieren, hilft nur das Ausblenden mit CSS, das auch nicht so einfach ist, weil die meisten Optionen nur sehr generische Klassen haben (zum Beispiel die Initiale-Option …).

Doch am Horizont erscheint, als Retterin in der Not: die theme.json (beziehungsweise aktuell noch experimental-theme.json).

Code in Gutenberg nach dem Speichern/Aktualisieren ausführen

Das Plugin Save Post. Check Links. prüft nach Speichern eines Inhalts, ob die enthaltenen Links gültig sind. Dafür wird in Gutenberg ein AJAX-Request abgeschickt und mit der Antwort eine gegebenenfalls notwendige Fehlermeldung ausgegeben.

Doch wie führen wir in Gutenberg am besten eine Aktion aus, nachdem ein Inhalt gespeichert wurde? Das ist eigentlich recht einfach.

Entwicklungsumgebung für Gutenberg-Blöcke einrichten

Ein Gutenberg-Block kann komplett ohne zusätzliche Tools mit klassischem JavaScript erstellt werden. Einfacher und übersichtlicher (zumindest nach meinem Empfinden) wird es aber durch den Einsatz von Dingen wie JSX, damit HTML-Elemente innerhalb von JavaScript fast wie normale HTML-Elemente erstellt werden können.

Weniger einfach ist an dem Teil die Einrichtung der Entwicklungsumgebung, um etwa JSX nutzen zu können. Inzwischen ist das aber deutlich leichter geworden, so gibt es ein NPM-Package, das eigentlich alles mitbringt, was für die Gutenberg-Entwicklung notwendig ist 🎉

Mehrere REST-API-Aufrufe mit einem Request in WordPress 5.6

WordPress 5.6 bringt ein Framework mit, das es ermöglicht, mit einem Request an den Server mehrere REST-API-Anfragen zu machen. So müssen sich Entwicklerinnen und Entwickler nicht mehr damit auseinandersetzen, mehrere asynchrone Requests an die API abzuschicken.

Außerdem ist es möglich, sicherzustellen, dass die übergebenen Aufrufe alle valide sind, bevor sie ausgeführt werden.

Ein Block für Pattern-Poweruser

Eigentlich wollte ich einen Artikel darüber schreiben, wie einzelne Patterns in einem Block zur Auswahl dargestellt werden könnten, wie die Layout-Optionen im Spalten-Block.

Letztlich wurde es jetzt aber erst mal ein Block, der alle Block-Vorlagen zur Auswahl anbietet und gleichzeitig für jede Block-Vorlage eine Variation beinhaltet, sodass Patterns auch direkt über den Block-Inserter eingefügt werden können. So können sich Benutzerinnen und Benutzer, die häufig Patterns verwenden und nicht mehr die visuelle Vorschau des Pattern-Inserters benötigen, einige Zeit beim Einfügen der Patterns sparen. 🎉

Version 2 der Gutenberg-Block-API

WordPress 5.6 kommt mit einer neuen Block-API-Version, die es Blöcken ermöglicht, ihr eigenes Block-Wrapper-Element zu rendern. Dadurch wird es möglich, das Block-Markup im Editor dem im Frontend ähnlicher zu machen, wodurch das Styling der Editor-Ansicht vereinfacht wird.

Die neue API-Version freischalten

Die API ist nicht standardmäßig aktiv, sondern muss pro Block aktiviert werden. Dazu wird in dem Konfigurations-Objekt in registerBlockType der Wert für apiVersion auf 2 gesetzt: