Benutzerdefinierten Gutenberg-Block erstellen – Teil 1: Einrichten der Entwicklungsumgebung

Im ersten Teil dieser Tutorial-Serie zum Erstellen benutzerdefinierter Gutenberg-Blöcke müssen wir unsere Entwicklungsumgebung einrichten. Wir brauchen einen Ort, an dem wir unseren Code in ES6/ESNext-Syntax schreiben und unterwegs kompilieren können. Es ist möglich, benutzerdefinierte Gutenberg-Blöcke mithilfe der ES5-Syntax zu schreiben, ohne Webpack und Babel einzurichten. Aber der Code wird wirklich umständlich zu lesen und zu schreiben sein. Wenn Sie sich nicht sicher sind, warum wir das alles tun müssen oder was der Unterschied ist, lesen Sie meinen Beitrag, in dem dies erklärt wird. Ich kann Ihnen garantieren, dass Sie bei Ihrer Rückkehr überzeugt sein werden, diesen zusätzlichen Schritt zu tun, um besseren Code zu schreiben.

Ich nehme an, Sie haben bereits ein lokales WordPress, das auf einem LAMP-Stack oder ähnlichem läuft. Und dass Sie entweder ein Thema oder ein Plugin schreiben. Was mich betrifft, so füge ich meinen Code in ein von mir entwickeltes Design ein awp-starter-theme, das sich in meinem WordPress-Designordner befindet. Ich möchte meine Gutenberg-Entwicklung von allen anderen Theme-Dateien trennen, also erstelle ich ein Unterverzeichnis gutenberg-devin meinem Theme-Root-Ordner. Das ist mein Projektordner und der Ordner, auf den ich mich für den Rest der Tutorial-Reihe beziehen werde.

Ich habe bereits eine detaillierte Anleitung zum Einrichten einer Entwicklungsumgebung für Gutenberg geschrieben, daher gehe ich hier nur schnell die Schritte durch. Wenn Sie dies noch nie zuvor getan haben, empfehle ich Ihnen, den unten verlinkten Beitrag zu lesen, da er mehr Informationen enthält als das, was Sie hier finden!

Richten Sie das Projekt mit webpack ein

Navigieren Sie mit dem Terminal (iOS-Terminal oder Windows-cmd funktioniert beide einwandfrei) zu Ihrem Projektordner (in meinem Fall awp-starter-theme/gutenberg-dev). Wir initiieren ein neues Projekt, indem wir npm bitten, eine package.jsonmit generischem Inhalt zu generieren.

Paket.json erstellen

npm init -y

Als nächstes installiere ich die Skripte von WordPress, die uns bei der Konfiguration mit diesem Befehl sehr helfen werden (der den Unterordner node_modulesund package-lock.jsonauch hinzufügt):

npm install --save-dev --save-exact @wordpress/scripts

Öffnen Sie die package.jsonDatei in Ihrem Projektordner in einem Editor und suchen Sie die scriptsEigenschaft. Wir ersetzen es durch zwei Skripte aus dem gerade installierten WordPress-Paket:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

Das „build”-Skript wird meine Dateien kompilieren. Da es jedoch bei jeder Änderung manuell ausgeführt werden muss, verwenden wir während der Entwicklung lieber das „start”-Skript. Es initiiert dann einen „Überwachungsmodus”, in dem es lauscht Änderungen, die in Ihren Skriptdateien vorgenommen wurden, und kompiliert sie neu, wenn Sie Änderungen speichern.

Webpack-Konfig

Der nächste Schritt ist das Erstellen einer Webpack-Konfigurationsdatei. Ich mache das, weil ich nicht die standardmäßigen Quell- und Ausgabedateinamen und -ordner verwenden möchte. Ich möchte selbst entscheiden, wo meine Quelldateien sind und wo die kompilierten Dateien landen sollen.

Mit Hilfe des von @wordpress/scriptsuns installierten Pakets können wir die Webpack-Konfiguration von WordPress erben und nur die Teile überschreiben, die wir ändern möchten.

Erstellen Sie in unserem Projektordner eine neue Datei mit dem Namen webpack.config.jsund öffnen Sie sie in einem Editor. Fügen Sie diesen Inhalt hinzu:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Dadurch wird meine Eintragsdatei (derzeit nur eine) in der entryEigenschaft definiert, die sich in einem Unterordner srcin meinem Projektordner mit dem Namen block-awhitepixel-myfirstblock.js. Benennen Sie Ihre Dateien natürlich nach Belieben, aber denken Sie daran, sowohl den Schlüssel als auch den Wert zu ändern. Weil outputich in der Eigenschaft webpack auffordere, meine Eintragsdateien mit dem Eintragsschlüssel als Dateinamen zu kompilieren. In der pathEigenschaft bitte ich darum, alle kompilierten Dateien einen Schritt aus meinem Projektordner heraus und in den assets/jsOrdner des Themas zu legen. Passen Sie die Dateinamen und den Speicherort an Ihr Projekt an. Lesen Sie meine ausführliche Anleitung, wenn Sie verwirrt sind.

Erstellen Sie einen Unterordner src/im Projektordner und dort werden wir alle Quelldateien ablegen. (Passen Sie an, wenn Sie den entryOrt in geändert haben webpack.config.js). Erstellen Sie block-awhitepixel-myfirstblock.jshier eine Datei und lassen Sie sie vorerst leer.

Es gibt noch einen weiteren Schritt – und das gilt für uns, die die neuesten Funktionen in ESNext nutzen möchten. In der Standard-WordPress-Babel-Konfiguration fehlt dies leider. Und weil ich Funktionen wie Pfeilfunktionen verwenden möchte, muss ich auch Babel einrichten.

Babel einrichten

Zuerst müssen wir einige Pakete für unsere Babel-Konfiguration installieren, indem wir diesen Befehl eingeben:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Wenn das erledigt ist, erstellen Sie eine neue Datei .babelrcin unserem Projektordner. Hier setzen wir unsere Babel-Konfiguration ab:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

Und das war’s für das Setup unserer Entwicklungsumgebung!

Befehle erstellen

Während der Entwicklung müssen Sie Ihre Javascript-Dateien kompilieren. In unserem package.jsonhaben wir genau dafür zwei Skripte hinzugefügt.

Wann immer wir in unseren Javascript-Dateien entwickeln möchten, führen wir dies im Terminal aus:

npm run build

Dieser Befehl führt die Kompilierung durch, wenn Sie dies im Terminal ausführen. Probieren Sie es aus und Sie sollten sehen, dass es die Datei block-awhitepixel-myfirstblock.js(zusammen mit ein oder zwei anderen „Asset”-Dateien) in Ihrem definierten Ausgabeordner generiert, den Sie in definiert haben webpack.config.js. In meinem Fall erscheint es in awp-starter-theme/assets/js/.

Die Verwendung des obigen Befehls funktioniert gut, aber es wird lästig, ihn jedes Mal zu wiederholen, wenn Sie Änderungen an Ihren Dateien vornehmen. Sie würden es wahrscheinlich vorziehen, stattdessen diesen Befehl auszuführen:

npm run start

Dadurch wird Ihr Terminal in den „Überwachungsmodus” versetzt, wobei alle in Ihren Javascript-Dateien gespeicherten Änderungen erkannt und während des Vorgangs kompiliert werden. Jedes Mal, wenn Ihre Dateien Fehler enthalten, gibt das Terminal die Fehlermeldungen aus. Drücken Sie STRG + C, um den Überwachungsprozess zu stoppen.

Als Referenz sieht mein Projektordner jetzt so aus wie auf dem Bild. Ich bevorzuge es, alle Konfigurationsdateien und insbesondere den Unterordner node_modules/(der buchstäblich Zehntausende von Dateien enthält) vom Rest meines Themencodes zu trennen. Erleichtert das Aufstellen von Regeln zum Ignorieren – zum Beispiel SCSS-Compiler oder Git Ignorieren. Wir haben bereits die Webpack-Konfiguration eingerichtet, um die endgültigen Dateien direkt awp-starter-theme/assets/js/zusammen mit anderen Javascript-Dateien für mein Thema zu kompilieren.

Wir sind jetzt bereit für den nächsten Teil, in dem wir mit der Registrierung unseres ersten benutzerdefinierten Blocks beginnen.