So erstellen Sie einen benutzerdefinierten Gutenberg-Block mit Hilfe von React.JS

Last Updated on 11/10/2021 by MTE Leben

In diesem Tutorial erfahren Sie, wie Sie brandneue benutzerdefinierte Blöcke für den Gutenberg-Editor erstellen. Sie tun dies mit Hilfe eines speziellen Plugins, das Sie selbst erstellen werden.

Erstellung des Plugins

Wir müssen zugeben, dass Sie einen benutzerdefinierten Gutenberg-Block mit einem der Standardthemen oder Ihrem zuvor heruntergeladenen Thema erstellen können. In unserem Beispiel erstellen wir jedoch ein benutzerdefiniertes Plugin, um damit zu arbeiten.

1. Als ersten Schritt müssen Sie in den Ordner „wp-content“ > Ordner „plugins“ gehen.

2. Erstellen Sie hier einen neuen Ordner und benennen Sie ihn so, wie Sie Ihr Plugin benennen möchten. In diesem Tutorial lautet der Name des Ordners „custom-gutenberg-blocks“.

3. Öffnen Sie danach den neu erstellten Ordner und erstellen Sie hier eine Datei „custom.php“. Öffnen Sie es und schreiben Sie den folgenden Code auf. Es hilft, das neue Plugin zu registrieren und das JavaScript zu laden.

4. Erstellen Sie im selben Ordner eine Datei „custom.js“. Sie müssen es so aufrufen, wie Sie es in der Funktion festgelegt haben. Hier können Sie Ihren eigenen JavaScript-Code schreiben.

Erstellen eines neuen Blocks in JS im Gutenberg-Editor

In diesem Teil unseres Tutorials zeigen wir Ihnen, wie Sie eine JavaScript-Datei erstellen und registrieren, um die Funktionsweise Ihres Blocks zu definieren. Wir werden auch festlegen, wie es im Gutenberg-Editor und im Frontend aussehen soll.

• Um einen benutzerdefinierten Gutenberg-Block zu erstellen, verwenden wir den „registerBlockType“ Methode in Ihrer Datei. Danach müssen Sie die Attribute in den Klammern notieren.

Der erste Parameter ist Ihr Namespace und ein Blockname. Als zweiten Parameter müssen Sie ein Array von allem angeben, das tatsächlich ein Objekt sein wird.

Die Struktur eines benutzerdefinierten Gutenberg-Blocks ist ziemlich einfach. Wir beginnen mit der Definition einiger eingebauter Attribute, die durch die Beschreibungen, Titelsymbole und Kategorientypen dargestellt werden.
• Danach einige benutzerdefinierte Attribute müssen definiert werden. Es kann ein bestimmter Textbereich oder ein Hintergrundbild sein.
• Dann müssen wir einige benutzerdefinierte Funktionen und die integrierten Funktionen angeben.

Definieren von integrierten Attributen Beginnen wir mit dem Bau unseres ersten benutzerdefinierten Gutenberg-Blocks! Zuerst werden wir alle eingebauten Attribute aufschreiben.

• Das einfachste ist das „Titel“-Attribut. Sie können es nach Belieben spezifizieren. Geben Sie auch eine „Beschreibung“ an.
• Danach definieren Sie ein „Symbol“. Sie können Bindestrich-Icons von WordPress verwenden, die in den WP-Administrationsbereich integriert sind. Auf der anderen Seite kopieren Sie ein SVG-Bild.
• Das letzte ist die „Kategorie“. Es ist notwendig, um unseren benutzerdefinierten Block im WP-Administrationsbereich aufzulisten.

Setzen Sie die benutzerdefinierten Attribute und integrierten Funktionen

Jetzt erstellen wir ein benutzerdefiniertes „Attribute“-Objekt, das alle unsere benutzerdefinierten Attribute verfolgt. Lassen Sie uns seinen Typ angeben. Wir werden es als “String” definieren.

Lassen Sie den Block für benutzerdefinierte Funktionen leer, da wir noch keine benutzerdefinierten Funktionen haben.

Als nächsten Schritt werden wir die eingebauten Funktionen des registerBlockType definieren. Es gibt eigentlich nur zwei davon: Bearbeiten und Speichern. Sie sind jedoch etwas kompliziert, also lassen wir es vorerst leer.

Anhängen der Funktionen „Bearbeiten“ und „Speichern“

• Zunächst fügen wir eine neue Funktion innerhalb der „Bearbeiten“-Funktion hinzu und benennen sie wie wir wollen. In unserem Fall ist es „somename“.
• Fügen Sie das „Event“ hinzu und verwenden Sie props.setAttributes, um eine Verbindung mit dem Inhalt herzustellen und darauf abzuzielen, wenn er geändert wird von der Benutzer, der Text eingibt.

• Der nächste Schritt besteht darin, zu bestimmen, welche Methode zurückgeben wird (was im Gutenberg-Editor angezeigt wird). Dazu verwenden wir JSX, um Code mit React zu erstellen. Sie können die Babel-Ressource verwenden, um Ihren Code zu erstellen.
• Wir fügen einen hinzu und fügen darin einen Titel hinzu, den wir für das Widget verwenden möchten, und ein Eingabefeld mit Texttyp.
• Verbinden Sie es mit props.attributes.content und verwenden Sie onChange, um die zu verwendende Funktion zu definieren. Dann schließe den Tag.
• Jetzt solltest du den rechts generierten Code kopieren und direkt neben dem „return“ einfügen.

Nach Abschluss der Arbeit sieht Ihre Datei „custom.js“ so aus:

Herzliche Glückwünsche! Das ist alles, was Sie für das Backend benötigen. Jetzt können Sie überprüfen, wie Ihr neuer benutzerdefinierter Gutenberg-Block aussehen wird. Wenn Sie jedoch nicht viel Zeit mit der Erstellung eines Blocks verbringen möchten, können Sie einfach einen hinzufügen und ihn dann nach Ihren Bedürfnissen anpassen. Verwenden Sie ein spezielles Blockbuilder-Plugin, zum Beispiel ZeGuten, um einen Block hinzuzufügen und ihn mit relevantem Inhalt zu füllen.

Wir hoffen, Ihnen hat unser einfaches Tutorial zum Erstellen eines neuen benutzerdefinierten Gutenberg-Blocks gefallen. Abonnieren Sie unseren Newsletter für weitere nützliche Tutorials und Anleitungen.