Carsten Nichte
Docs

Einen eigenen Wordpress Gutenberg Block entwickeln

Zuletzt aktualisiert am 28. Februar 2024 2 Minuten

Ich brauche für meine Webseiten dringend einen eigenen Gutenberg Block. So soll er aussehen:

Slide 1

Wie schaut das aktuell aus?

Ich komm gerade nicht mit dem Dokumentieren hinterher, aber so schaut das aktuell aus:

Slide 1

Wie geht das?

Vielleicht lohnt es sich das mal an zu schauen:

Die Vorbereitungen

  1. Entwicklungsumgebung einrichten
  2. Gutenberg-Block Projekt aufsetzen

Die Gutenberg Block-Architektur

  1. Um einen Block im Editor einzubinden wird lediglich eine JavaScript-Datei eingebunden.

  2. Die Einbindung dieses Block-JavaScript erfolgt über die Methode wp_enqueue_script() über ein WordPress Plugin.

Gutenberg Block-Dateien

  1. block.js - Das Block JavaScript. Hier wird der Block mit der Funktion registerBlockType() erstellt und in JavaScript und React in Verbindung mit JSX entwickelt. Dazu gehört das Block-Interface im Editor, HTML-Markup fürs Frontend, die Block-Optionen, etc.
  2. block.css - Gemeinsame Block-Stylesheets für Editor und Frontend.
  3. block-editor.css - Zusätzliche Editor Stylesheets für Block-Optionen und das Block-Interface, die im Frontend nicht benötigt werden.
  4. plugin.php - Das Plugin File. Einbinden der obigen Dateien mit den Action-Hooks enqueue_block_assets und enqueue_block_editor_assets in Theme und Editor.

JSX Pakete installieren:

npm install -g jsx

Das Plugin

Create Guten Block hat das Plugin-Verzeichnis erstellt, und eine Menge Code erzeugt. Also schaue ich mir das mal an:

Slide 1

wird fortgesetzt…

Troubleshooting

Änderungen am Block erscheinen nicht im Wordpress Editor

Ich hab ne neue Version des Blocks bzw. hab was am Code geändert, aber die Änderungen erscheinen einfach nicht im WP-Editor. Ich sehe immer nur die alte Version.

  • Plugin mit npm run build kompiliert?
  • Browser-Cache gelöscht?
Davor
40 Zitate über Computer
Danach
Favicon für die Webseite