Im August soll WordPress 5.0, das lang ersehnte WordPress Update, erscheinen. Eine der Änderungen: Es ersetzt den bisherigen Editor durch den Gutenberg Editor. Ob das Update nun wirklich im August kommt oder nicht, sei mal dahingestellt. Nichtsdestotrotz stellt Gutenberg schon jetzt nicht nur Seitenbetreiber vor Herausforderungen, sondern auch WordPress Entwickler. Diese müssen viele ihrer gewohnten Workflows, die Editorenseite zu individualisieren, überarbeiten. Denn mit WordPress 5.0 müssen diese nun im Wesentlichen mit einer React-Applikation interagieren.
Im Zentrum der Diskussionen zur Gutenberg Entwicklung steht die Frage, wie man individualisierte Blöcke entwickeln kann. Das Entwicklerhandbuch für Gutenberg stellt hier schon ausreichend Informationen bereit. Auch darüber hinaus finden sich schon zahlreiche How-Tos und Tutorials zur Registrierung des eigenen Blocks im Netz. Was dagegen bisher eher weniger Aufmerksamkeit erfahren hat, ist, wie man Gutenberg jenseits von Blöcken erweitern kann.
Wer ein wenig Erfahrung mit der Entwicklung von WordPress Plugins und Themes für Kunden hat, weiß allerdings, das Kundenwünsche sich kaum auf die Entwicklung von Blöcken beschränkt. Stattdessen erfordern sie zum Teil hochindividualisierte Anpassungen des Editors. In unserem Developer Meeting haben wir uns deshalb intensiv mit Gutenberg beschäftigt. Unter anderem gab es auch die Präsentation “Beyond the Block”, welche einen tieferen Einblick in die Gutenberg Applikation bietet. Zu diesem Thema gibt es bisher erst wenige Informationen. Darum dachten wir uns, dass auch andere WordPress Entwickler ein Interesse an dieser Präsentation haben könnten. Und hier ist sie:
Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Gutenberg entwickeln: Zur Präsentation “Beyond the block”
Anhand eines Beispielplugins und eines fiktiven Kunden diskutieren wir anhand einzelner Features wichtige Aspekte von Gutenberg. Die einzelnen Features werden dabei in einzelnen Branches entwickelt. Da der diskutierte Code in der Präsentation selbst auf das besprochene Problem fokussiert, ermöglicht ein git diff zwischen einer Branch und seiner Vorgänger-Branch so einen genauen Überblick über den benötigten Code.
Der Vortrag selbst fokussiert auf die Data Stores, welche in WordPress für das Statemanagement verantwortlich sind. Diese enthalten wesentliche Informationen, beispielsweise welcher Beitrag gerade bearbeitet wird, welche konkreten Inhalte bearbeitet wurden oder auch die einzelnen genutzten Blöcke. Mithilfe dieser Data Stores ist es also möglich, Informationen über den aktuellen Beitrag zu erhalten und den aktuellen Beitrag zu verändern.
Ein Beispiel. Wenn du folgenden Code in der Console ausführst, wird der Titel deines Beitrags “Another title” sein und der bisherige Titel überschrieben:
wp.data.select('core/editor').editPost({title:'Another title'})
Neben einem Einblick in das Statemanagement von Gutenberg führt der Vortrag auch kurz in das Slot/Fill-Konzept ein. Dieses beantwortet im Wesentlichen die Frage, wie man eigene Inhalte in eine schon bestehende Komponente rendern kann.
Edit: Nachdem WordPress 5.0 herausgekommen ist habe ich nun das Github repository entsprechend aktualisiert. Seit dem Vortrag gab es doch noch einige Änderungen, welche nun in der master Branch des Repositories reflektiert werden.
Failed to submit:
one or more fields are invalid.