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 gewesen, 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 einige Umwege in Kauf nehmen. Und um zum Beispiel die Ausgabe der Initialbuchstabe-Option beim Absatz-Block zu deaktivieren, half 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 mit WordPress 5.8 erscheint, als Retterin in der Not: die theme.json.

Das Durchkoppeln, oder: nutzt mehr Bindestriche!

Bei meinem Praktikum in der t3n-Redaktion hat sich bei mir eine mir vorher unbekannte Rechtschreibregel eingeprägt, die eben schon vorgekommen ist: die Nutzung des Bindestrichs zum Verbinden von Komposita, das Durchkoppeln.

Seitdem fällt mir auf, wie wenig dieses Prinzip zumindest in meinem Umkreis genutzt wird (vielleicht liegt der Ursprung bei angloamerikanischen Vorbildern, wie auf der grammis-Seite »Die Besonderheiten der Kompositaschreibung« vermutet), und ich nerve Simon regelmäßig mit Hinweisen darauf, wenn ich Texte von ihm gegenlese und beispielsweise ein WordPress Theme statt WordPress-Theme finde, oder Open-Source statt Open Source (es wäre zu einfach, wenn überall ein Bindestrich hingehören würde, deshalb wird bei zusammengesetzten Fremdwörtern mit Adjektiv am Anfang kein Bindestrich gesetzt – ein weiteres Beispiel wäre Social Media. Wenn so ein Sonderfall allerdings Teil eines Kompositums ist, wird alles gekoppelt, etwa die Open-Source-Software).

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.

Wie WordPress versucht, 404-Fehler zu vermeiden

Normalerweise tauchen 404-Fehler im Web auf, wenn eine URL falsch eingegeben oder ein veralteter Link aufgerufen wurde. Änderungen an URLs können schnell passieren, mir zum Beispiel geht es manchmal so, dass mir erst nach der Veröffentlichung eines Beitrags einfällt, dass der Slug für einen Artikel nicht optimal ist.

Nur möchte natürlich niemand, dass Besucherinnen und Besucher auf 404-Seiten landen, daher gibt es verschiedene Plugins, um Redirects einzurichten, sodass auch veraltete Links zum richtigen Ziel führen.

Manchmal ist das Erstellen von manuellen Redirects aber gar nicht notwendig, weil WordPress verschiedene Handgriffe tut, um 404-Fehler zu vermeiden und solche Anfragen nach Möglichkeit auf Inhalte weiterzuleiten.

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.