WordPress Gutenberg Block Projekt aufsetzen

Zuletzt geändert: 2. Mai 2020
Geschätzte Lesezeit: 2 min

Ein Wor­d­Press Guten­berg Block Pro­jekt auf­set­zen bedeu­tet Web­pack, Babel und SASS-Com­pi­ler instal­lie­ren. Es gibt einen kur­zen Weg, und einen lan­gen Weg ein Guten­berg-Block Pro­jekt auf zu set­zen. Natür­lich brauch ich auch eine loka­le Entwicklungsumgebung. 

Vorbereitungen

Man kann das zu Fuß — nur mit einem Code-Edi­tor und viel Tip­pe­rei lösen. Wer sich öfter mit dem The­ma aus­ein­an­der­set­zen will für den lohnt sich der Weg über zusätz­li­che Tools und Libraries.… 

Lokale Entwicklungsumgebung

Code-Editor

Ich benut­ze VSCo­di­um zum entwickeln. 

Tools und Libraries

Neben dem Code-Edi­tor benö­ti­ge ich noch: 

Aus­ser­dem natürlich: 

  • Web­pack
  • Babel
  • SASS-Com­pi­ler

Der kurze Weg: Create Guten Block

Der kur­ze Weg führt über das Zero Con­fi­gu­ra­ti­on Dev-Tool­kit Create Guten Block von Ahmad Awais ein. Das spart mir die Installation/Konfiguration von React, Web­pack und Babel. Dazu ein­fach im Ter­mi­nal ins in Plugin Ver­zeich­nis wech­seln und füh­re zum tes­ten npx aus: 

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

Wobei mein-gutenberg-block-name der Name mei­nes Plugins ist. Es wird ein Gerüst ange­legt, das ich gleich star­ten kann. 

Fol­gen­de Befeh­le ste­hen mir im Ter­mi­nal zur Ver­fü­gung, die im Plugin-Ver­zeich­nis aus­ge­führt wer­den müssen: 

  • npm start — Den Code im Ent­wick­lungs­mo­dus kom­pi­lie­ren und aus­füh­ren. Web­pack über­wacht alle Ände­run­gen im src-Ver­zeich­nis und kom­pi­liert den Code neu, wenn ich ihn ände­re. Feh­ler­mel­dun­gen wer­den im Ter­mi­nal zurückgemeldet.
  • npm run build — Baut den Code für die Pro­duk­ti­on im dist-Ver­zeich­nis. Der Code wird kom­pi­liert, kom­pri­miert & alle Kom­men­ta­re ent­fernt. Lie­fert die Grö­ße der gzip-Datei des gebau­ten Codes zurück.
  • npm run eject — Ent­fernt die­ses Tool und kopiert Build-Abhän­gig­kei­ten, Kon­fi­gu­ra­ti­ons­da­tei­en und Skrip­te in den Plugin-Ord­ner. Das ist eine Ein­bahn­stra­ße. Ach­tung: Es gibt kein Zurück!

Jetzt kann ich im Ter­mi­nal mit sudo apachectl -k start den loka­len Web­ser­ver star­ten. Die Wor­d­Press URL im Brow­ser auf­ru­fen — https://localhost/wp/wp-login.php — mich im Backend ein­log­gen, das Block-Plugin akti­vie­ren, und den Block im Edi­tor aus­pro­bie­ren. Hooray! 

Ps. den lan­gen Weg beschrei­be ich hier.

Der lange Weg: Manuelle Installation

Ich öff­ne das Plugin-Ver­zeich­nis im Ter­mi­nal 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
Code-Sprache: CSS (css)

Was mir eine package.json und ein node-modu­les Ver­zeich­nis anlegt, mit den benö­tig­ten Biblio­the­ken und allen Abhängigkeiten. 

PostCSS konfigurieren

Eine postcss.config.js erstel­len, und reinpacken: 

module.exports = { plugins: { autoprefixer: { grid: true } } }
Code-Sprache: JavaScript (javascript)

und in der package.json ergän­ze ich: 

"browserslist": [ "extends @wordpress/browserslist-config" ],
Code-Sprache: JavaScript (javascript)

Über npx autoprefixer --info kann man sich die von Wor­d­Press unter­stütz­ten Brow­ser und ihre Eigen­schaf­ten und Wer­te anzei­gen lassen. 

Webpack konfigurieren

Es ist kei­ne eige­ne Con­fig-Datei nötig wenn man nur eine Datei und Java­script kom­pi­lie­ren möch­te. Das Modul @wordpress/scripts bringt eine Stan­dard-Datei mit, die eine src/index.js zu einer build/index.js kompiliert. 

Da ich aber etwas mehr möch­te, erstel­le eine webpack.config.js Datei, und packe fol­gen­des 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' }] }] } };
Code-Sprache: JavaScript (javascript)

Was pas­siert hier? 

  1. In defaultConfig steht Kon­fi­gu­ra­ti­ons­da­tei des @wordpress/scripts-Pakets.
  2. In path steht das Node-Modul path (Aus­ga­be­ver­zeich­nis der Dateien).
  3. Inner­halb von module.exports ent­hält die Webpack-Konfiguration.
  4. defaultConfig Ent­hält Stan­dard-Kon­fi­gu­ra­ti­on, die ich erwei­tern will:
  5. Das entry Array ent­hält die Quell­da­tei­en des Blocks.
  6. output Ent­hält der Aus­ga­be­pfad “assets”, und ein Unter­ver­zeich­nis js mit dem Namen editor.blocks.js.
  7. module ent­hält Com­pi­ler-Regeln für die Datei­en in entry.
    1. Regeln der Stan­dard-Kon­fi­gu­ra­ti­on defaultConfig.module.rules : Kom­pi­lie­rung der JavaScript-Datei.
    2. Meh­re­re Regeln für scss Datei­en um SASS in CSS zu kom­pi­lie­ren, und das Ergeb­nis nach dem Sche­ma [name].blocks.css inner­halb des css-Ver­zeich­nis­ses abzu­le­gen. Das ergibt zwei CSS-Datei­en 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 Ele­ment fol­gen­den Code einfügen: 

,"start": "wp-scripts start", "build": "wp-scripts build"
Code-Sprache: JavaScript (javascript)
  • npm run start führt Web­pack in der Ent­wick­lung aus.
  • npm run build kom­pi­liert die Datei­en für die Produktion.

Jetzt kann ich mit den Dateien 

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

in der Ent­wick­lung arbei­ten und bekommt mit Hil­fe von Web­pack alles in assets gepackt, die das Plugin ein­bin­den kann. 

… wird fortgesetzt… 

Tags:
War der Artikel hilfreich?
Nich so 0 0 von 0 fanden den Artikel hilfreich.
Ansichten: 181
Nächster Artikel: Favicon für die Webseite