So arbeiten Sie mit WordPress-Blöcken außerhalb von Gutenberg mit Node.js

Der WordPress-Blockeditor ändert alles, was damit zu tun hat, wie wir Inhalte mit dieser Plattform erstellen. Es gibt viele Neuerungen, die die neuen Versionen von WordPress in Bezug auf Blöcke bringen, und es gibt noch einen langen Weg in die Zukunft.

Aus diesem Grund dürften sich Entwickler, die mit WordPress als Entwicklungsplattform arbeiten, zunehmend wohler im Umgang mit Blöcken fühlen. Der Sprung von PHP zu JavaScript-basierten Technologien kann jedoch schwierig sein.

Wie auch immer, Sie müssen Ihre Fähigkeiten auf den neuesten Stand bringen und keine Angst vor dem neuen WordPress-Entwicklungsstack haben. Je eher wir uns damit anfreunden, desto mehr Möglichkeiten haben wir für Innovationen.

Heute werden wir sehen, wie wir mit Gutenberg-Blöcken arbeiten können, ohne im WordPress-Editor sein zu müssen. Warum? Aus mehreren Gründen…

Der erste und offensichtlichste ist, weil wir es können. Seit einiger Zeit ist die Definition der Kernblöcke im Gutenberg-Editor als separates Codepaket verfügbar. Das bedeutet, dass wir sie dank des NPM-Paketmanagers außerhalb von WordPress verwenden können.

Darüber hinaus gibt es eine ganze Reihe von Funktionen, um Blöcke zu verwalten und mit ihnen zu arbeiten. Und sie sind auch in einem eigenen Paket enthalten. Wenn wir also mit den Standard-WordPress-Blöcken arbeiten wollen, müssen wir diese beiden Pakete nur als Abhängigkeiten in unser Projekt importieren.

Um dies zu erreichen, müssen wir einen Ordner für unser Projekt erstellen, npm init ausführen, um eine package.json -Datei mit den Projektdaten zu erstellen, und dann den folgenden Befehl ausführen, um diese beiden Abhängigkeiten zu installieren:

 npm install @wordpress/block-library @wordpress/blocks

Der nächste Schritt besteht darin, eine index.js -Datei mit dem Code zu erstellen, den wir ausführen möchten. Dieser Code ist in Node.js geschrieben, einer JavaScript-Variante, die auf Servern ausgeführt wird. Für das heutige Beispiel kann der Inhalt von index.js wie folgt aussehen:

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

Die ersten beiden Anweisungen, die im vorhergehenden Code erscheinen, sind require -Anweisungen zum Importieren der Abhängigkeiten. Wie ich bereits sagte, wollen wir die Standard-WordPress-Blockdefinition importieren. Wir machen das mit require('@wordpress/block-library') . Da wir nur die Funktion registerCoreBlocks aus diesem Paket importieren wollen, destrukturieren wir diese Funktion auf der linken Seite des Gleichheitszeichens.

Auf die gleiche Weise importieren wir das Paket @wordpress/blocks als Abhängigkeit. Dieses Paket hat die Funktionen, um mit Blöcken zu arbeiten. Im Paket sind viele Funktionen definiert (Sie haben sie hier), aber für dieses Beispiel möchten wir nur, dass createBlock neue Blöcke erstellt und serialize , um sie in Zeichenfolgen umzuwandeln, die wir im Inhalt eines WordPress-Beitrags speichern können.

Nachdem wir die Abhängigkeiten importiert haben, rufen wir die Funktion registerCoreBlocks auf, die die Definition der standardmäßigen WordPress-Blocktypen lädt, damit wir sie verwenden können. Von da an können wir Blöcke erstellen, wie Sie sehen können, wenn wir die createBlock Funktion aufrufen und als Parameter den Namen des Blocktyps übergeben, den wir erstellen möchten, und ein Objekt mit seinen Attributen.

Im vorherigen Beispiel werden wir einen Absatzblock erstellen, also übergeben wir den Namen 'core/paragraph' und innerhalb des Attribute-Objekts übergeben wir den Inhalt des zu erstellenden Absatzes als Zeichenfolge innerhalb des content .

Schließlich rufen wir die serialize -Funktion auf und übergeben ihr den soeben erstellten Block. Als Ergebnis haben wir einen String, den wir mit der Funktion console.log können.

Jetzt können wir den obigen Code ausführen, indem wir node index.js im Terminal eingeben. Wenn wir das tun, passiert Folgendes:

Es liegt ein Fehler in der Ausführung vor! Der Grund dafür ist, dass wir die window verfügbar haben müssen, die nicht definiert ist. Aber was ist diese Variable und warum brauchen wir sie?

Window ist ein JavaScript-Objekt, das der Browser definiert und das Browserfenster selbst darstellt. Da wir den Code in unserem Terminal ausführen (oder wenn er in der Produktion läuft, auf einem Server), haben wir keinen Browser mit dieser Variablen. Bedeutet das, dass wir WordPress-Blöcke nicht außerhalb eines Browsers verwenden können? Natürlich nicht!

Node.js verfügt über mehrere Pakete, mit denen wir simulieren können, dass wir unseren Code in einer Browserumgebung ausführen. In diesem Fall verwenden wir das Paket browser-env. Wir müssen es nur wie zuvor mit den WordPress-Paketen installieren:

 npm install browser-env

In unserer index.js -Datei müssen wir require neue Anforderung hinzufügen, um die browser-env Abhängigkeit zu importieren. Aber wir müssen auch das window „reparieren“, da es nicht mit der erforderlichen matchMedia Methode geliefert wird. Wenn Sie den folgenden Code kopieren und am Anfang der Datei index.js , ist das Problem gelöst:

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

Jetzt können Sie den Code erneut ausführen und Sie werden sehen, dass er nicht fehlschlägt und die Textdarstellung des Absatzblocks zurückgibt, den wir gerade mit der createBlock Funktion erstellt haben:

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

Sie haben den gesamten Code in diesem GitHub-Repository. Die Möglichkeiten, mit Blöcken außerhalb des Editors zu arbeiten, sind enorm. Sie können Blöcke erstellen, klonen, in einen anderen Blocktyp umwandeln und vieles mehr.

Die Möglichkeit, mit Blöcken außerhalb des WordPress-Editors zu arbeiten, ermöglicht es uns, den Inhalt unseres WordPress zu manipulieren und von überall aus damit zu arbeiten. Dies eröffnet Entwicklern eine Welt voller enormer Möglichkeiten, die wir gerade erst zu erkunden beginnen.

Wir von Nelio nutzen diese Möglichkeiten bereits. Wir werden in Kürze einen neuen Service einführen, der Sie hoffentlich sehr interessant finden wird. Bleiben Sie dran für die Neuigkeiten, die wir in den kommenden Wochen veröffentlichen werden?.

Ausgewähltes Bild von Kelly Sikkema auf Unsplash .