Ein Überblick über das WordPress Create Block Script

Das Team des offiziellen WordPress-Editors (Gutenberg) hat ein nettes kleines Skript bereitgestellt, mit dem Sie ein Block-Plugin mit ihrem npm-Skript erstellen können.@wordpress/create-block

Dieser Artikel gibt einen Überblick über das WordPress Create Block Script, zusammen mit Details dessen, was es ausgibt.

HINWEIS: Dieser Artikel bezieht sich auf eine ältere Version des Create Block Scripts

Obwohl die Theorie immer noch angewendet werden kann, sind einige der Informationen in diesem Artikel möglicherweise nicht mehr mit dem neuesten Erstellungsblockskript kompatibel. Sie können unseren aktualisierten Leitfaden zum Erstellen von Blockskripten hier einsehen.

Ausführen des Create-Block-Skripts

Die offizielle Dokumentation gibt Ihnen einige verschiedene Parameter, die Sie an den npm init @wordpress/blockBefehl übergeben können.

Für mein Setup habe ich es im interaktiven Modus ausgeführt, indem ich die Parameter weggelassen habe. Ich habe den folgenden Befehl in mein Terminal eingegeben (während er cdin meinem wp-content/pluginsOrdner ist):

npm init @wordpress/block

Das Skript hat mir ein paar Fragen gestellt, um mir beim Aufbau meines Blocks zu helfen.

Da ich einen Starterblock für eine Plugin-Idee erstellen wollte, die ich habe (‚Wholesome Notes‘), habe ich die Fragen wie folgt beantwortet:

• Der zur Identifizierung verwendete Block-Slug (auch der Name des Plugins und des Ausgabeordners): Ich möchte, dass mein Block aufgerufen Wholesome Noteswird, also habe ich eingegeben wholesome-notes.

• 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 wholesome-code, da dies mein Firmenname ist. Im Nachhinein wäre dies besser mit wcoder kurzgeschlossen wcltd.

• Der Anzeigetitel für Ihren Block: Ich habe den Titel des Plugins eingegeben, Wholesome Notes.

• Ein Überblick über das WordPress Create Block Script Ich war mir nicht 100 % sicher, was ich hier schreiben wollte, also habe ich einfach einen Text eingegeben, den ich später ändern möchte.

• Das Dashicon, um es einfacher zu machen, Ihren Block zu identifizieren (optional): Ich habe schnell die WordPress Dashicons-Ressource aufgerufenadmin-comments, da sie ein Notizstilsymbol hat.

• Der Kategoriename, der Benutzern hilft, Ihren Block zu durchsuchen und zu entdecken (Pfeiltasten verwenden): Ich habe gewählt layout, obwohl dieser Blocktyp ehrlich gesagt wahrscheinlich eine eigene Kategorie benötigen würde. Das ist etwas, das ich zu einem späteren Zeitpunkt ändern kann.

Betriebnpm init @wordpress/block

Das Skript fuhr dann fort und installierte alle benötigten Abhängigkeiten über npm (an diesem Punkt installiert es nur das wp-scriptsnpm-Paket als Abhängigkeit).

Überprüfung der Ausgabe

Mit den obigen Befehlen gibt Ihnen das WordPress Create Block Script die folgende Ausgabe:

• gesunde Notizen
  • bauen
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • Quelle
    • index.js
  • .editorconfig
  • .gitignorieren
  • Editor.css
  • Paket.json
  • style.css
  • gesunde-notizen.php

@wordpress /block-Ausgabe

Im Folgenden finden Sie eine Aufschlüsselung dieser Dateien und Ordner.

wholesome-notes

Dies ist der Stammordner des Plugins, er hat den gleichen Namen wie der, den ich für den ’slug‘ in den Setup-Fragen 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-notes.php.

/build/index.js

Dies ist die kompilierte JavaScript-Hauptdatei und wird über die Hauptladedatei in die Warteschlange eingereiht wholesome-notes.php.

/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 run 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/index.js

Dies ist die unkompilierte JavaScript-Hauptdatei für Ihren WordPress-Editor (Gutenberg)-Block. Es enthält zunächst die gesamte Logik für den Block.

/.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.

/package.json

Diese Datei enthält alle npm-Abhängigkeiten für das Plug-in 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.

/style.css

Die Stile in dieser Datei werden im Editor ausgegeben und am Frontend der Site werden sie über die Hauptladerdatei in die Warteschlange gestellt wholesome-notes.php.

/wholesome-notes.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.

Erkundung des Plugins

Nachdem Sie Ihr Plugin erstellt haben, wenn Sie es aktivieren und in den Editor einfügen, sieht es wie die folgenden Screenshots aus (Frontend und Backend).

Blockskript erstellen – Standard-Frontend

Blockskript erstellen – Standard-Backend

Wie Sie sehen können, liefert uns der Block einige grundlegende Ausgaben, die wir leicht ändern können, um unseren eigenen Block zu implementieren.

CSS blockieren

Wie Sie auf den Screenshots sehen können, editor.cssimplementiert der Beispielcode in einen roten Rahmen im Editor, während die Beispielstile in styles.csssowohl auf das Front- als auch auf das Backend angewendet werden.

JavaScript blockieren

Der Einstiegspunkt zum Anpassen des neu erstellten Blocks ist die /src/index.jsDatei.

Diese Datei enthält zahlreiche Inline-Dokumentationen, die erklären, warum bestimmte Funktionen importiert werden, z. B. registerBlockTypefür die Registrierung des Blocks und __für die Unterstützung der i18n-Textübersetzung.

Block index.js Inline-Kommentare erstellen

Es gibt Ihnen auch einige sehr einfache Ausgaben für die Funktionen editund save, die an die Blockregistrierung übergeben werden.

Hinweis: In späteren Versionen des Skripts wurden diese in eigene Dateien extrahiert und als Module in diese Datei eingefügt.

Block index.js erstellen Bearbeiten und speichern

Den Block bauen

Gemäß der npm-Dokumentation zum Erstellen von Blöcken können Sie mehrere Befehle in Ihrem Terminal (aus dem Stammordner Ihres Plugins) verwenden, um beispielsweise die Codequalität zu überprüfen oder Pakete zu aktualisieren.

Die wichtigsten Befehle, die Sie zum Erstellen des Blocks benötigen, sind das npm startKompilieren Ihres Plugins für die Entwicklung und npm run builddas Kompilieren der endgültigen Version.

wp-scripts(aus dem @wordpress/scriptsnpm-Paket) ist die Hauptabhängigkeit für Ihr Plugin. Diese Abhängigkeit abstrahiert alle Tools für Ihren Block, sodass Sie sich nur auf das Erstellen des JavaScripts konzentrieren können.

Hinter den Kulissen wp-scriptsverwendet webpack, um alle Ihre Assets in die /build/index.jsDatei zu kompilieren.

wp-scriptsSie können mehr darüber im Blockeditor- Handbuch lesen und Sie können mehr über das Webpack-Build-Setup im Abschnitt „JavaScript-Build-Setup“ des Handbuchs erfahren.

Erweiterung des Create Block Webpack-Setups

Die Codebasis für Ihren Block kann sich über mehrere Dateien erstrecken oder sogar eine Reihe von Unterblöcken haben oder komplexe Stile enthalten. In Zeiten wie diesen möchten Sie vielleicht das in wp-scripts.

Weitere Informationen finden Sie in meinem Artikel zum Erweitern der wp-scriptsWebpack-Konfiguration oder im Block-Editor-Handbuch im Abschnitt „Package Scripts“.