Ein Gutenberg-Tutorial für Anfänger: Erstellen Sie Ihr erstes Block-Plugin

Gutenberg Tutorial für Anfänger


Wenn Sie im Jahr 2020 etwas für WordPress entwickeln möchten, ist es einfach keine Option, Gutenberg zu ignorieren. Plugins und Themes müssen alle gut mit Gutenberg zusammenarbeiten und eine Benutzererfahrung bieten, die für alles, was ein Benutzer im WordPress-Dashboard sehen kann, konsistent ist. Und zumal Gutenberg jetzt ein wesentlicher Bestandteil von WordPress ist – einfach als Blockeditor bezeichnet.

Der Einstieg in Gutenberg ist jedoch nicht so einfach. Während Sie vor ein paar Jahren ein hochwertiges WordPress-Plugin nur mit Notepad schreiben konnten, ist der Prozess jetzt viel schwieriger geworden.

Gutenberg verwendet Technologien wie die WordPress REST API, JavaScript und React. Für die Zusammenarbeit mit Gutenberg waren daher neue Anforderungen an Plugins und Themes erforderlich.

Die gute Nachricht ist, dass wir heute über all das sprechen werden! Dieser Beitrag dient als Gutenberg-Tutorial für Anfänger, die zum ersten Mal ein Plugin für Gutenberg erstellen möchten.

Wir konzentrieren uns hauptsächlich auf die verschiedenen Aspekte beim Erstellen eines Plugins für Gutenberg – das Einrichten der Entwicklungsumgebung, das Erstellen eines grundlegenden Plugins und einige Nuancen der Arbeit mit Blöcken.

1. Richten Sie Ihre Gutenberg-Entwicklungsumgebung ein

Um mit der Gutenberg-Entwicklung zu beginnen, benötigen Sie einige Grundkenntnisse in JavaScript und React. Hier ist ein Tutorial zu JavaScript für einen WordPress-Entwickler. Für zusätzliche Pakete in Gutenberg muss möglicherweise ein NodeJS-Paketmanager (npm) verwendet werden.

Sie können die neueste stabile Version von NodeJS unter Windows oder MacOS mithilfe der Installationsprogramme installieren auf der offiziellen Seite. Wenn Sie einen Linux-Server haben, können Sie entweder den Quellcode kompilieren oder den entsprechenden Paketmanager verwenden (wie apt und yum). Wenn Sie beispielsweise Ubuntu verwenden, führen Sie die folgenden Befehle auf dem Terminal aus.

sudo apt update
sudo apt install nodejs npm

Nach erfolgreicher Installation können Sie den folgenden Befehl ausführen, um die Version von NodeJS zu überprüfen.

nodejs –version

Nachdem Sie diese Kästchen angekreuzt haben, ist es eine gute Idee, Ihre Test-WordPress-Website mit einer Instanz des aktuellen Gutenberg-Plugins (dem Standalone-Plugin) oder sogar der Entwicklungsversion davon einzurichten von GitHub.

⚠️ Hinweis; Während Gutenberg jetzt in WordPress integriert ist, ist diese Version nicht die neueste. Die Entwicklung auf Gutenberg erfolgt immer noch ziemlich separat und alles, was neu ist, wird zuerst in das eigenständige Gutenberg-Plugin aufgenommen. Die eigentliche Gutenberg-Version im Kern hat seit ihrer Aufnahme in WordPress 5.0 noch kein größeres Update erhalten. Sie möchten immer an der neuesten Version von Gutenberg arbeiten, da Sie dadurch eine bessere Chance haben, Ihre Arbeit zukunftssicher zu machen und sicherzustellen, dass Ihre Kreation mit allem übereinstimmt, was später in den WordPress-Kern kommt.

Wenn Sie beabsichtigen, zum Kern-Gutenberg-Plugin beizutragen, verfügt das Repository über Folgendes beitragende Richtlinien Informationen zum Einrichten Ihrer lokalen Umgebung und zum Einrichten von Änderungen zur Überprüfung.

�� Wenn Sie Ihre vorhandenen Plugins an Gutenberg anpassen möchten, finden Sie hier ein detailliertes Tutorial, wie Sie dies erreichen können: Teil 1 und Teil 2.

Um mit einem Vorlagen-Plugin-Verzeichnis zu beginnen, das bereits für die Zusammenarbeit mit Gutenberg bereit ist, können Sie die Verwendung in Betracht ziehen das Gutenberg Boilerplate Plugin. Eine solche Lösung hilft Ihnen bei der grundlegenden Dateistruktur, sodass Sie sich auf den Inhalt des Plugins konzentrieren können. Laden Sie das Plugin herunter und installieren Sie es, um das Boilerplate zu verwenden von hier (zip). Durch das Installieren und Aktivieren des Boilerplate-Plugins werden die Beispielblöcke aktiviert, die wir in diesem Tutorial untersuchen werden. Sie finden den Code für jeden Block in seinem jeweiligen Verzeichnis im Plugin-Speicherort der Boilerplate.

2. Erstkonfiguration

Um Sie daran zu erinnern, führt Gutenberg das Konzept der Blöcke ein, die den Standardbereich des TinyMCE-Editors ersetzen. In einigen Fällen können Blöcke auch Shortcodes und andere zusätzliche Inhaltselemente ersetzen, die Plugins zum Hinzufügen von WordPress-Inhalten auf verschiedene Arten verwenden.

Wenn Sie daran interessiert sind, für Gutenberg zu erstellen, besteht der häufigste Ansatz darin, ein Plugin zu erstellen, das neue Blöcke erstellt und dem Benutzer zur Verfügung stellt. Genau das werden wir in diesem Gutenberg-Tutorial tun.

In den folgenden Abschnitten wird der Prozess von Anfang bis Ende beschrieben.

Das spezifische Plugin, das wir erstellen werden, druckt eine Nachricht mit einem bestimmten Hintergrund aus, der anpassbar ist. Nur ein Beispiel, aber Sie können die hier vorgestellten Prinzipien auf Ihr eigenes, komplexeres Plugin anwenden.

Die Grundlagen zum Erstellen eines solchen Plugins sollten bekannt sein. Sie erstellen zunächst ein neues Verzeichnis im Plugins-Verzeichnis von WordPress. Darin werden vier Dateien abgelegt:

  • index.php – Diese Datei enthält Metadaten zum neuen Gutenberg-Block.
  • block.js – Diese JavaScript-Datei registriert den benutzerdefinierten Gutenberg-Block.
  • editor.css – Diese Datei enthält Stile für den Editor.
  • style.css – Diese Datei enthält die Stile für das Frontend des Blocks.

Die ersten beiden Dateien in der Liste kümmern sich um die Registrierung des Blocks, und die nächsten beiden Dateien definieren die visuellen Stile der Elemente des Blocks.

3. Registrieren des Blocks

In diesem Schritt der Registrierung eines Blocks für Gutenberg werden wir im Großen und Ganzen zwei Dinge behandeln:

  • Registrieren von Metadaten des Plugins bei der PHP-Engine von WordPress,
  • Registrieren des Blocks mit dem React-Framework, auf dem Gutenberg ausgeführt wird.

Die Datei index.php enthält die Enqueue-Assets des Blocks und des Editors.

  • Registrieren Sie zunächst die benutzerdefinierten Funktionen über add_action.
  • Definieren Sie dann die Funktionen, die den Pfad der JavaScript- und CSS-Dateien für den Block und den Editor auflisten, mithilfe der Funktionen wp_enqueue_style und wp_enqueue_script.

Lassen Sie uns dies durch den folgenden PHP-Code zusammenfassen:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

Funktion gb_block_01_basic_editor_assets () {
// Skripte.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url (‘block.js’, __FILE__),
Array (‘wp-Blöcke’, ‘wp-i18n’, ‘wp-Element’),
Dateizeit (plugin_dir_path (__FILE__). ‘block.js’)
);

// Stile.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
Array (‘wp-edit-blocks’),
Dateizeit (plugin_dir_path (__FILE__). ‘editor.css’)
);
}}

Dies definiert die Ressourcen für den Basiseditor. Für den Block wird nur die CSS-Datei benötigt, die über die Funktion wp_enqueue_style definiert wird.

Die Datei block.js beschreibt die Eigenschaften des Blocks im Gutenberg-Editor. Wir definieren die folgenden Attribute und Eigenschaften:

  • title – Der Titel des Blocks
  • Symbol – Ein Symbol, das für den Block angezeigt werden soll. Sie können ein beliebiges Symbol auswählen diese Sammlung von Dashicons
  • Kategorie – Die Gruppe, zu der der Block gehört. Beispiele für Gruppen von Blöcken sind "verbreitet," "Formatierung," "einbetten."
  • edit – Eine JavaScript-Funktion, die ein DOM-Element zurückgibt. Wir verwenden die Funktion wp.element.createElement, um ein benutzerdefiniertes Absatz-DOM-Element p mit benutzerdefiniertem Text zu erstellen. Gutenberg ruft diese Eigenschaft auf, wenn ein Benutzer im Editor auf den Block klickt.

(function () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
Titel: __ (‘GB Basic’, ‘GB’),
Symbol: ‘Schild-Alt’,
Kategorie: ‘gemeinsam’,

edit: Funktion (Requisiten) {
return wp.element.createElement (
‘p’,
{className: props.className},
‘Hallo Welt! – aus dem Editor (01 Basic Block). ‘
);
}},

});
}) ();

Ebenso können Sie eine Speichereigenschaft erstellen, die aufgerufen wird, wenn der Block im Frontend ausgewählt wird.

Im obigen Code haben wir den Klassennamen des p-Elements mit props.className definiert, wodurch ein Klassenname erstellt wird, der mit wp-block beginnt, gefolgt vom Namen des Blocks. Im nächsten Abschnitt dieses Gutenberg-Tutorials definieren wir die Stile dieser Klasse.

4. Anpassen des Blocks

Wie im vorherigen Abschnitt erläutert, besteht der nächste Schritt in diesem Lernprogramm darin, die Eigenschaften der Blockelemente zu definieren. Definieren wir eine Hintergrundfarbe, eine Textfarbe und einen Rand.

.wp-block-gb-basic-01 {
Farbe: # 000;
Hintergrund: Mistyrose;
Rand: 0,2 rem durchgehend rot;
}}

Anstelle der CSS-Dateien können Sie auch SCSS-Dateien hinzufügen und diese mit Node kompilieren. Weiter ist hier ein Tutorial zum Styling von Gutenberg-Elementen von CSS Tricks.

Ergebnisse Ihres ersten Gutenberg-Tutorials

Wir sind endlich bereit, den von uns erstellten Block zu testen. Wenn das Gutenberg-Plugin aktiviert ist, gehen Sie zu + Symbol und prüfen Sie, ob der neue Block dort angezeigt wird.

neuer Gutenberg Block

Wenn Sie als Nächstes auf den Block klicken, werden Sie feststellen, dass die Nachricht von oben mit einer Hintergrundfarbe und einem Rand aus der CSS-Datei angezeigt wird:

Block in Aktion

Fazit

Wir sind am Ende Ihres ersten Gutenberg-Tutorials angelangt. Ich hoffe das war hilfreich. Zugegeben, was wir hier erstellt haben, ist nicht sehr komplex, aber es sollte Ihnen eine Vorstellung von den grundlegenden Strukturen bei der Arbeit mit Gutenberg geben und wie Sie Ihr nächstes Plugin planen können.

Zunächst haben wir die Schritte zum Einrichten der Gutenberg-Entwicklungsumgebung besprochen. Als nächstes haben wir ein Boilerplate-Plugin eingeführt, um bei der weiteren Entwicklung zu helfen. Dann verlagerte sich der Fokus der Diskussion auf verschiedene Schritte beim Registrieren und Gestalten eines neuen Blocks.

Ich hoffe, dass dieses Gutenberg-Tutorial Ihnen bei der Erstellung Ihres ersten Gutenberg-Plugins geholfen hat!

Wenn Sie Fragen haben, feuern Sie in den Kommentaren unten ab.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map