Wordpress Gutenberg Block Projekt aufsetzen

Ein Wordpress Gutenberg Block Projekt aufsetzen bedeutet Webpack, Babel und SASS-Compiler installieren. Es gibt einen kurzen Weg, und einen langen Weg ein Gutenberg-Block Projekt auf zu setzen. Natürlich brauch ich auch eine lokale Entwicklungsumgebung.

Vorbereitungen

Man kann das zu Fuß - nur mit einem Code-Editor und viel Tipperei lösen. Wer sich öfter mit dem Thema auseinandersetzen will für den lohnt sich der Weg über zusätzliche Tools und Libraries….

Lokale Entwicklungsumgebung#

Code-Editor#

Ich benutze VSCodium zum entwickeln.

Tools und Libraries#

Neben dem Code-Editor benötige ich noch:

• Eine lokale Wordpress Installation
• Node https://nodejs.org/en/ 

Ausserdem natürlich:

• Webpack
• Babel
• SASS-Compiler

Der kurze Weg: Create Guten Block

Der kurze Weg führt über das Zero Configuration Dev-Toolkit Create Guten Block von Ahmad Awais ein. Das spart mir die Installation/Konfiguration von React, Webpack und Babel. Dazu einfach im Terminal ins in Plugin Verzeichnis wechseln und führe zum testen npx aus:

npx create-guten-block mein-gutenberg-block-name

Wobei mein-gutenberg-block-name der Name meines Plugins ist. Es wird ein Gerüst angelegt, das ich gleich starten kann.

Folgende Befehle stehen mir im Terminal zur Verfügung, die im Plugin-Verzeichnis ausgeführt werden müssen:

• npm start - Den Code im Entwicklungsmodus kompilieren und ausführen. Webpack überwacht alle Änderungen im src-Verzeichnis und kompiliert den Code neu, wenn ich ihn ändere. Fehlermeldungen werden im Terminal zurückgemeldet.
• npm run build - Baut den Code für die Produktion im dist-Verzeichnis. Der Code wird kompiliert, komprimiert & alle Kommentare entfernt. Liefert die Größe der gzip-Datei des gebauten Codes zurück.
• npm run eject - Entfernt dieses Tool und kopiert Build-Abhängigkeiten, Konfigurationsdateien und Skripte in den Plugin-Ordner. Das ist eine Einbahnstraße. Achtung: Es gibt kein Zurück!

Jetzt kann ich im Terminal mit sudo apachectl -k start den lokalen Webserver starten. Die Wordpress URL im Browser aufrufen - https://localhost/wp/wp-login.php - mich im Backend einloggen, das Block-Plugin aktivieren, und den Block im Editor ausprobieren. Hooray!

Ps. den langen Weg beschreibe ich hier .

Der lange Weg: Manuelle Installation

Ich öffne das Plugin-Verzeichnis im Terminal und mach dort erst mal ein

npm init
npm install --save-dev @wordpress/scripts
npm install --save-dev css-loader extract-loader file-loader postcss-loader sass-loader
npm install --save-dev autoprefixer postcss-cli node-sass
npm install --save-dev @wordpress/browserslist-config

Was mir eine package.json und ein node-modules Verzeichnis anlegt, mit den benötigten Bibliotheken und allen Abhängigkeiten.

PostCSS konfigurieren#

Eine postcss.config.js erstellen, und reinpacken:

module.exports = { plugins: { autoprefixer: { grid: true } } };

und in der package.json ergänze ich:

"browserslist": [ "extends @wordpress/browserslist-config" ],

Über npx autoprefixer --info kann man sich die von Wordpress unterstützten Browser und ihre Eigenschaften und Werte anzeigen lassen.

Webpack konfigurieren#

Es ist keine eigene Config-Datei nötig wenn man nur eine Datei und Javascript kompilieren möchte. Das Modul @wordpress/scripts bringt eine Standard-Datei mit, die eine src/index.js zu einer build/index.js kompiliert.

Da ich aber etwas mehr möchte, erstelle eine webpack.config.js Datei, und packe folgendes Skript hinein:

const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
const path = require("path");
module.exports = {
  ...defaultConfig,
  entry: [
    "./blocks/index.js",
    "./blocks/editor.scss",
    "./blocks/frontend.scss",
  ],
  output: {
    path: path.resolve(__dirname, "assets"),
    filename: "js/editor.blocks.js",
  },
  module: {
    rules: [
      /** * Running Babel on JS files. */ ...defaultConfig.module.rules,
      {
        test: /\.scss$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "css/[name].blocks.css",
            },
          },
          {
            loader: "extract-loader",
          },
          {
            loader: "css-loader?-url",
          },
          {
            loader: "postcss-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
};

Was passiert hier?

1. In defaultConfig steht Konfigurationsdatei des @wordpress/scripts-Pakets.
2. In path steht das Node-Modul path (Ausgabeverzeichnis der Dateien).
3. Innerhalb von module.exports enthält die Webpack-Konfiguration.
4. defaultConfig Enthält Standard-Konfiguration, die ich erweitern will:
5. Das entry Array enthält die Quelldateien des Blocks.
6. output Enthält der Ausgabepfad “assets”, und ein Unterverzeichnis js mit dem Namen editor.blocks.js.
7. module enthält Compiler-Regeln für die Dateien in entry.
   1. Regeln der Standard-Konfiguration defaultConfig.module.rules : Kompilierung der JavaScript-Datei.
   2. Mehrere Regeln für scss Dateien um SASS in CSS zu kompilieren, und das Ergebnis nach dem Schema [name].blocks.css innerhalb des css-Verzeichnisses abzulegen. Das ergibt zwei CSS-Dateien assets/css/editor.blocks.css und assets/css/frontend.blocks.css.

…

Zusätzliche NPM-Skripte für Webpack#

In die Datei package.json im scripts Element folgenden Code einfügen:

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

• npm run start führt Webpack in der Entwicklung aus.
• npm run build kompiliert die Dateien für die Produktion.

Jetzt kann ich mit den Dateien

• blocks/index.js
• blocks/editor.scss
• blocks/frontend.scss

in der Entwicklung arbeiten und bekommt mit Hilfe von Webpack alles in assets gepackt, die das Plugin einbinden kann.

… wird fortgesetzt…