Wenn Sie neu im WordPress Block Editor (Gutenberg) sind, fragen Sie sich vielleicht, wie Sie mit der Erstellung Ihres eigenen Plugins beginnen können.

Glücklicherweise hat das WordPress-Entwicklungsteam ein praktisches npm Skript, mit dem Sie ein Block-Plugin erstellen können, das einen Startblock erstellt, damit Sie schnell loslegen können.

Standardmäßig ist die Art von WordPress-Plugin, die dadurch erstellt wird, ein „Block”, aber es gibt uns auch einen guten Ausgangspunkt für andere Arten von Gutenberg-Plugins.

Voraussetzungen

Node muss auf Ihrem Computer installiert sein, damit Sie den npmBefehl verwenden können (was für Node Package Manager steht).
WordPress-Installation
Code-Editor
Zugang zum Terminal

Erstellen Sie Ihr Plugin

Nachdem Sie den Knoten auf Ihrem Computer installiert haben, sollten Sie Zugriff auf den npmBefehl in Ihrem Terminal haben.

Öffnen Sie Ihr Terminal und vergewissern Sie sich, dass Sie cd(Changed Directory) in den Plugins-Ordner Ihrer WordPress-Installation (z. B. cd wp-content/plugins) haben.

Führen Sie dort den folgenden Befehl aus:


npm init @wordpress/block

Dadurch wird alles heruntergeladen, was das Skript benötigt, um den Build zu starten. Sobald es fertig ist, stellt Ihnen das Skript eine Reihe von Fragen, die zum Konfigurieren Ihres Plugins erforderlich sind.

Verwenden des Terminals zum Ausführen des Erstellungsskripts

Konfigurationsfragen

Das Skript stellt die folgenden Fragen, hier sind meine Beispielantworten:

Der zur Identifizierung verwendete Block-Slug (auch der Name des Plugins und des Ausgabeordners) — Ich möchte, dass mein Block aufgerufen Wholesome Pluginwird, also habe ich eingegeben wholesome-plugin.
Der interne Namensraum für den Blocknamen (etwas Einzigartiges für Ihre Produkte) – Da dies für alle meine Produkte eindeutig sein sollte, habe ich eingegeben wholesomecode, da dies mein Firmenname ist.
Der Anzeigetitel für Ihren Block – ich habe den Titel des Plugins eingegeben, Wholesome Plugin.
Die Kurzbeschreibung für Ihren Block (optional) – ich habe „ An example plugin to demonstrate the create-block-script” eingegeben.
Das Dashicon, um das Identifizieren Ihres Blocks zu erleichtern (optional) – Ich habe schnell die WordPress Dashicons-Ressource aufgerufenadmin-plugins, da sie ein Plugin-Symbol hat. Denken Sie daran, dashicon- aus dem Präfix dashicon wegzulassen, wenn Sie dies tun.
Der Kategoriename, der Benutzern hilft, Ihren Block zu durchsuchen und zu entdecken (Pfeiltasten verwenden) – ich habe design. Obwohl eine benutzerdefinierte Kategorie wahrscheinlich besser passen würde.
Der Name des Plugin-Autors (optional). Mehrere Autoren können mit Kommas aufgelistet werden – ich habe eingegeben wholesomecode.
Der Kurzname der Lizenz des Plugins (optional) – Ich habe die Eingabetaste gedrückt, um GPL v2.0 oder höher zu akzeptieren.
Ein Link zum vollständigen Text der Lizenz (optional) – Ich habe die Eingabetaste gedrückt, um die GPL v2.0-Lizenz-URL einzufügen.
Die aktuelle Versionsnummer des Plugins – ich habe die Eingabetaste gedrückt, um einzufügen 0.1.0.

Fragen zur Skriptkonfiguration

Das Skript wird dann zu Ende ausgeführt.

Was ist gerade passiert?

Ein paar Dinge passieren, während das Skript ausgeführt wird, diese sind:

Es erstellt den Ordner des Plugins,
Es generiert alle Plugin-Dateien (Einzelheiten dazu, was diese tun, finden Sie unter Erkunden des Plugins) .
Es installiert die Abhängigkeiten, die es benötigt, einschließlich des @wordpress/scriptsPakets (dies macht die schwere Arbeit beim Erstellen des Plugins).
Es kompiliert den Code
Es gibt eine Liste von Befehlen aus, die Sie verwenden können

Befehle erstellen

Wir werden diese im Abschnitt Erkunden des Plugins näher untersuchen .

Verwendung des Plugins

Bevor Sie das Plugin verwenden können, müssen Sie es aktivieren. Sie können dies tun, indem Sie Pluginsaus dem WordPress-Admin-Menü auswählen und dann activateunter dem Namen des Plugins auswählen.

Aktivieren Sie das Plugin

Jetzt müssen Sie einen Beitrag in WordPress bearbeiten und das Plugin mit dem Gutenberg-Editor einfügen.

Einfügen des Blocks in einen Pfosten

Beachten Sie, dass das Plugin standardmäßig nicht viel tut, es erstellt nur einen Block. Es bietet jedoch einen Rahmen, den Sie verwenden können, um Ihr eigenes Plugin zu erstellen.

Anzeigen des Blocks am Frontend

Standardmäßig sieht der Block am Frontend so aus. Beachten Sie, dass es ein etwas anderes Erscheinungsbild hat, dies ist beabsichtigt, damit Sie sich mit dem CSS auf der Vorderseite und dem Backend von WordPress vertraut machen können.

Der Block am Frontend

Erkundung des Plugins

Der ganze Zweck des Create Block Scripts besteht darin, dass Sie Ihr eigenes Plugin erstellen. Lassen Sie uns die Dateien, die es generiert hat, genauer untersuchen:

Generierte Dateien

wholesome-plugin— Dies ist der Stammordner des Plugins, er hat den gleichen Namen wie der, den ich in den Setup-Fragen für den ‘Slug’ eingegeben habe.

**/build**— Dies ist der Build-Ordner. Es enthält alle aus dem /srcOrdner generierten JavaScript- und PHP-Assets. Diese werden über die Hauptladedatei eingereiht wholesome-notes.php.

**/build/index.assets.php**— Diese PHP-Datei wird automatisch generiert, wenn der /srcOrdner kompiliert wird. Es enthält ein Array aller WordPress-Editor (Gutenberg)-JavaScript-Anständigkeiten, die von Ihrem Plugin verwendet werden. Es wird über die Hauptladedatei eingereiht wholesome-plugin.php.

**/build/index.css**— Dies ist die Editor-CSS-Datei und wird über die Haupt- wholesome-plugin.phpLoader-Datei in die Warteschlange gestellt.

**/build/index.js**— Dies ist die kompilierte JavaScript-Hauptdatei und wird über die Haupt- wholesome-plugin.phpLoader-Datei in die Warteschlange gestellt.

**/build/style-index.css**— Dies ist die Front-End-CSS-Datei und wird über die Haupt- wholesome-plugin.phpLoader-Datei in die Warteschlange gestellt.

**/build/index.js.map**— Diese Datei wird nur generiert, wenn Sie die Assets für den Entwicklungsmodus kompilieren (dh Sie führen sie aus npm startund nicht, npm buildwenn Sie Ihre Assets kompilieren). Es ist eine hilfreiche Datei für JavaScript-Debugger, um Dateinamen und Zeilennummern zu identifizieren, wenn Fehler auftreten.

**/node_modules**— Dies ist der Ordner, in dem alle JavaScript-Abhängigkeiten für Ihr Plugin installiert sind.
**/src**— Dies ist der Ordner, der alle unkompilierten Assets für Ihr Plugin enthält.
**/src/edit.js**— Dies ist die Bearbeitungsfunktion des Blocks und steuert, wie der Block im Blockeditor angezeigt wird, wenn er sich im Bearbeitungsmodus befindet.
**/src/editor.scss**— Dies ist das unkompilierte SCSS für den Editor, das wird in /build/index.css.
**/src/index.js**— Dies ist die unkompilierte JavaScript-Hauptdatei für Ihren WordPress-Editor (Gutenberg)-Block. Es registriert den Block und enthält Standardeinstellungen.
**/src/save.js**— Dies ist die Speicherfunktion des Blocks und steuert das Markup des Blocks, wenn er gespeichert wird.
**/src/style.scss**— Dies ist das unkompilierte SCSS für das Frontend, das in /build/style-index.css.
**/.editorconfig**— Diese Datei enthält nützliche Voreinstellungen für Ihre IDE (Integrated Development Environment) wie Visual Studio Code.
**/.gitignore**— Diese Datei weist Git an, bestimmte Dateien zu ignorieren, wenn Sie sich auf ein Git-Repository (wie GitHub) festlegen.
**/editor.css**— Die Stile in dieser Datei werden nur im Editor ausgegeben, sie werden über die Hauptladedatei eingereiht wholesome-notes.php.
**/block.json**— Diese Datei definiert das Plugin, damit es von der WordPress-Blockbibliothek erkannt werden kann. Wenn Sie Änderungen am Plugin vornehmen, stellen Sie sicher, dass diese Datei aktualisiert wird. In neueren Versionen des NPM-Skripts wird diese Datei verwendet, anstatt /src/index.jsIhren Block zu registrieren.
**/package.json**— Diese Datei enthält alle npm-Abhängigkeiten für das Plugin und die Befehle, die Sie ausführen können. Beachten Sie, dass das Plugin wp-scripts( @wordpress/scripts) als Basis verwendet, sodass die geladenen Abhängigkeiten zunächst für dieses Paket gelten.
**/readme.txt**— Diese Datei ist eine Readme-Datei des WordPress-Plugin-Repositorys, die erforderlich ist, wenn der Block im Plugin-Repository aufgeführt werden soll.
**/wholesome-plugin.php**— Dies ist die Hauptladedatei für das Plugin. Sein Name wurde über den ‘Slug’ festgelegt, den wir im anfänglichen Setup-Skript eingegeben haben. Es stellt alle JavaScript-Assets in die Warteschlange, die für das Plugin benötigt werden.

Erkunden der Build-Befehle

Bevor wir unsere Build-Befehle ausführen können, müssen wir sicherstellen, dass wir uns im Plugin-Ordner befinden. In diesem Beispiel würden wir cd wholesome-plugindas Terminal ausführen, um das Verzeichnis in unseren Plugin-Ordner zu ändern.

Wir können dann die folgenden Befehle ausführen:

**npm start**— Startet den Build für die Entwicklung. Wenn Sie eine Änderung am Plugin vornehmen, müssen Sie dies tun, damit die Änderungen angezeigt werden (wahrscheinlich müssen Sie auch Ihren Browser aktualisieren).
**npm run build**— Erstellt den Code für die Produktion. Tun Sie dies, wenn Sie eine Release-Version des Plugins erstellen.
**npm run format:js**— Formatiert die JavaScript-Dateien automatisch unter Verwendung von Best Practices.
**npm run lint:css**— Lints (sucht nach Fehlern in) CSS-Dateien.
**npm run lint:js**— Lints (sucht nach Fehlern in) JavaScript-Dateien.
**npm run packages-update**— Aktualisiert WordPress-Pakete auf die neueste Version.

Wir werden eine oder mehrere davon verwenden, wenn wir das Plugin modifizieren.

Modifizieren des Plugins

Beginnen wir damit, unseren Block bearbeitbar zu machen.

Attribute hinzufügen zu`/src/index.js`

Öffnen /src/index.jsSie in Ihrem Editor und fügen Sie Folgendes in die registerBlockTypeFunktion unter ein apiVersion:


attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Dadurch erhalten wir einen Ort, an dem wir die Daten in unserem Plugin speichern können, das blockTextüber die attributesEigenschaft (Prop) zugänglich ist. Beachten Sie, dass wir ihm standardmäßig den Originaltext gegeben haben, der vom Plugin-Skript erstellt wurde.

Fügen Sie RichText hinzu`/src/edit.js`

Öffnen /src/edit.jsSie in Ihrem Editor und ersetzen Sie den Import für useBlockPropsdurch Folgendes:


import { RichText, useBlockProps } from '@wordpress/block-editor';

Dadurch können wir die RichText-Komponente in unserer Edit-Render-Methode verwenden.

Ändern Sie dann die gesamte Edit-Funktion wie folgt:

Dadurch wird der Wert der RichTextKomponente auf den im Attribut gespeicherten Wert blockTextgesetzt, und die onChangeEigenschaft setzt das Attribut auf das, was in die Komponente blockTexteingegeben wurde .RichText

Geben Sie die Attribute aus in`/src/save.js`

Öffnen /src/save.jsSie in Ihrem Editor und ersetzen Sie die saveFunktion durch Folgendes:

Dies gibt einfach den Wert von blockTextin den Absatz aus.

Kompilieren des Plugins

Öffnen Sie das Terminal, vergewissern Sie sich, dass Sie sich im Stammverzeichnis Ihres Plugins befinden, und führen Sie den folgenden Befehl aus:

Das Skript wird kompiliert. Wenn Sie irgendwelche Fehler haben, sollte das Terminal Sie darüber informieren.

Erstellen des Plugins

Einfügen des Plugins

Stellen Sie sicher, dass Sie Ihren Beitrag aktualisiert haben. Die vorherige Version des Blocks ist möglicherweise jetzt defekt, das ist in Ordnung, löschen Sie ihn einfach und fügen Sie einen neuen ein.

Fügen Sie den Block über das Plus-Symbol oben links im Editor ein und klicken Sie nach dem Einfügen auf seinen Text. Du solltest. Jetzt können Sie den Text bearbeiten.

Einfügen des bearbeitbaren Blocks

Anzeigen des Plugins

Speichern Sie den Beitrag und zeigen Sie ihn im Frontend der Website an. Der von Ihnen geänderte Text sollte anstelle des ursprünglichen Textes angezeigt werden.

Bearbeitbarer Block im Frontend der Website

Wenn Sie möchten, dass Ihre Blöcke in einer benutzerdefinierten Blockkategorie angezeigt werden, fügen Sie einfach den folgenden Code zum Stammverzeichnis Ihres Plugins hinzu (in diesem Fall wholesome-plugin.php:

Dadurch wird eine benutzerdefinierte Blockkategorie in Ihrem Blockeinfüger registriert.

categoryDann müssen Sie nur noch das Argument der registerBlockTypeFunktion anpassen /src/index.js, um auf Ihre Blockkategorie zu verweisen, und neu kompilieren: