Einen eigenen WordPress Gutenberg Block entwickeln

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

Ich brau­che für mei­ne Web­sei­ten drin­gend einen eige­nen Guten­berg Block. So soll er aussehen: 

Wie schaut das aktu­ell aus?

Ich komm gera­de nicht mit dem Doku­men­tie­ren hin­ter­her, aber so schaut das aktu­ell aus: 

… und so in Pro­duk­ti­on: https://carsten-nichte.de/vita-referenzen/

Wie geht das?

Viel­leicht lohnt es sich das mal an zu schauen: 

Die Vorbereitungen

  1. Ent­wick­lungs­um­ge­bung einrichten
  2. Guten­berg-Block Pro­jekt aufsetzen

Die Gutenberg Block-Architektur

  1. Um einen Block im Edi­tor ein­zu­bin­den wird ledig­lich eine Java­Script-Datei eingebunden. 

  2. Die Ein­bin­dung die­ses Block-Java­Script erfolgt über die Metho­de wp_enqueue_script() über ein Wor­d­Press Plugin. 

Gutenberg Block-Dateien

  1. block.js — Das Block Java­Script. Hier wird der Block mit der Funk­ti­on registerBlockType() erstellt und in Java­Script und React in Ver­bin­dung mit JSX ent­wi­ckelt. Dazu gehört das Block-Inter­face im Edi­tor, HTML-Mark­up fürs Front­end, die Block-Optio­nen, etc.
  2. block.css — Gemein­sa­me Block-Style­she­ets für Edi­tor und Frontend.
  3. block-editor.css — Zusätz­li­che Edi­tor Style­she­ets für Block-Optio­nen und das Block-Inter­face, die im Front­end nicht benö­tigt werden.
  4. plugin.php — Das Plugin File. Ein­bin­den der obi­gen Datei­en mit den Action-Hooks enqueue_block_assets und enqueue_block_editor_assets in The­me und Editor.

JSX Pake­te installieren: 

npm install -g jsx

Das Plugin

Create Guten Block hat das Plugin-Ver­zeich­nis erstellt, und eine Men­ge Code erzeugt. Also schaue ich mir das mal an: 

wird fortgesetzt… 


Troubleshooting

Änderungen am Block erscheinen nicht im WordPress Editor

Ich hab ne neue Ver­si­on des Blocks bzw. hab was am Code geän­dert, aber die Ände­run­gen erschei­nen ein­fach nicht im WP-Edi­tor. Ich sehe immer nur die alte Version. 

  • Plugin mit npm run build kompiliert? 
  • Brow­ser-Cache gelöscht?

Weiterführende Links und Quellen

Tags:
War der Artikel hilfreich?
Nich so 0 2 von 2 fanden den Artikel hilfreich.
Ansichten: 237
Vorheriger Artikel: Favicon für die Webseite
Nächster Artikel: Node.js installieren testen und nutzen