Erstellen von benutzerdefinierten Gutenberg-Blöcken für WordPress

Das Erstellen benutzerdefinierter Gutenberg-Blöcke für WordPress muss nicht schwierig sein. Tatsächlich können Sie mit ein wenig Code Ihre eigenen benutzerdefinierten Blöcke erstellen, ohne ein Plugin verwenden zu müssen. Gutenberg ist ein neuer Editor für WordPress, mit dem Sie benutzerdefinierte Blöcke für Ihre Inhalte erstellen können. Blöcke sind die Bausteine ​​deiner Inhalte in Gutenberg. Sie können verwendet werden, um Text, Bilder, Videos und mehr hinzuzufügen. Um einen benutzerdefinierten Block zu erstellen, müssen Sie einen Texteditor wie WordPress Code Editor oder ein Plugin wie Block Lab verwenden. Sobald Sie einen Texteditor haben, können Sie eine neue Datei in Ihrem Design- oder Plugin-Verzeichnis erstellen. Als erstes müssen Sie einen Blocktyp erstellen. Ein Blocktyp ist eine Sammlung von Einstellungen, die definieren, wie sich Ihr Block verhält. Dazu müssen Sie die Funktion register_block_type verwenden. Sobald Sie einen Blocktyp haben, können Sie ihn bei WordPress registrieren. Diese Funktion benötigt zwei Argumente: den Namen Ihres Blocktyps und ein Objekt, das die Einstellungen für Ihren Block enthält. Nachdem Sie Ihren Blocktyp registriert haben, können Sie damit beginnen, Felder hinzuzufügen. Felder sind die Einstellungen, die steuern, wie Ihr Block aussieht und sich verhält. Um Ihrem Blocktyp ein Feld hinzuzufügen, müssen Sie die Funktion add_field verwenden. Sobald Sie alle gewünschten Felder zu Ihrem Blocktyp hinzugefügt haben, können Sie ihn bei WordPress registrieren. Und das ist es! Sie haben jetzt einen benutzerdefinierten Gutenberg-Block für WordPress erstellt.

Der Gutenberg-Blockeditor war eine der Verbesserungen an WordPress 5.0. Der Gutenberg-Editor unterteilt den Inhalt in Blöcke, die leicht neu angeordnete Abschnitte sind. Die meisten Entwickler wären nicht in der Lage, nativ gestaltete Blöcke zu erstellen, da ihnen React-Fähigkeiten fehlen. Die WordPress-Entwickler-Community hat darauf reagiert, indem sie Tools entwickelt hat, die die React/JavaScript-Anforderungen erfüllen können. Blöcke in Block Lab werden in drei Phasen erstellt: Hinzufügen innerhalb des Admin, Kopieren und Einfügen und anschließendes Exportieren. Eine API kann auch verwendet werden, um benutzerdefinierte Steuerelemente für Ihren Block zu erstellen. Dies ist vielleicht nicht viel zu sehen, aber es gibt Ihnen eine Vorstellung davon, was Sie mit einem benutzerdefinierten Gutenberg-Block tun können.

Um einen Block zu erstellen, müssen wir eine neue Datei namens block-notification-bar.php erstellen, die einen Titel (Notification Bar) und drei Felder enthält. Als Antwort auf diese Datei erscheint eine Benachrichtigung, die uns anweist, unsere benutzerdefinierte Blockvorlage in unserem Design zu platzieren. Stellen Sie vor dem Hochladen der Datei sicher, dass sie gespeichert und auf Ihren Webserver hochgeladen wurde. Ein benutzerdefinierter Block wurde jetzt für uns erstellt. Wichtig ist nur, dass Sie dieses Ziel erreichen. Wir haben viele Möglichkeiten, wenn wir das, was wir bereits geschaffen haben, erweitern möchten. Symbole, Schaltflächen und die Möglichkeit, auf einen anderen Beitrag oder eine andere Seite zu verlinken, sind nur einige der Funktionen, die hinzugefügt werden können. All diese Fähigkeiten können durch Block Lab sowie andere oben erwähnte Plugins erreicht werden.

WordPress-Plug-in für benutzerdefinierte Blöcke

Es gibt viele großartige benutzerdefinierte Block-Plugins für WordPress. Jedes Plugin bietet unterschiedliche Funktionen und Optionen. Einige Plugins für benutzerdefinierte Blöcke ermöglichen es Ihnen, benutzerdefinierte Blöcke für Ihre Beiträge und Seiten zu erstellen, während andere eine Reihe vorgefertigter Blöcke bereitstellen, die Sie verwenden können.

Sie können mit WordPress ganz einfach Beiträge und Seiten erstellen, indem Sie Inhalts- und Layoutelemente als Blöcke hinzufügen. WordPress bietet in seiner Standardkonfiguration eine große Auswahl an Blöcken. Möglicherweise möchten Sie jedoch einen benutzerdefinierten Block erstellen, um eine bestimmte Aufgabe zu erfüllen. Dieses Tutorial führt Sie durch die Schritte zum Erstellen eines völlig einzigartigen Blocks. Der erste Schritt besteht darin, drei Felder in Ihren Testimonial-Block einzufügen. Klicken Sie auf die Schaltfläche Feld hinzufügen, um mit dem Ausfüllen des ersten Felds zu beginnen. Der zweite Schritt besteht darin, eine Blockvorlage zu erstellen, die genau bestimmt, wie Daten angezeigt werden.

Der dritte Schritt besteht darin, das Blockausgabe-Markup zu formatieren, indem Sie auf die Registerkarte „CSS“ klicken. Durch manuelles Hochladen der Vorlagen können Sie Ihren eigenen benutzerdefinierten Block erstellen. In diesem Fall ist PHP der beste Weg, um mit Ihren benutzerdefinierten Blockfeldern zu interagieren. Laden Sie einfach die Editor-Vorlage mit der Upload-Methode in Ihr Design hoch. Zeigen Sie zunächst eine Vorschau Ihres benutzerdefinierten Blocks an. Bevor Sie Ihr HTML/CSS in der Vorschau anzeigen können, müssen Sie einige Testdaten bereitstellen. Erstellen Sie eine WordPress-Website, die speziell mit einem Gutenberg-Block erstellt wurde.

Um nach einem Block zu suchen, geben Sie seinen Namen oder Schlüsselwörter in das Feld ein, das erscheint, nachdem Sie auf die Schaltfläche Neuen Block hinzufügen geklickt haben. Sie können eine Vorschau des Blocks anzeigen, indem Sie Ihren Beitrag und Ihre Seite speichern und bearbeiten. Auf unserer Testseite können Sie sehen, wie der Testimonials-Block aussieht.

Erstellen Sie eine Gutenberg-Blockreaktion

Es gibt verschiedene Möglichkeiten, einen Gutenberg-Block in React zu erstellen. Die erste Möglichkeit besteht darin, das CLI-Tool create-guten-block zu verwenden. Dadurch wird ein neuer Gutenberg-Block für Sie aufgebaut. Um diese Methode zu verwenden, müssen Sie Node.js und npm auf Ihrem Computer installiert haben. Sobald Sie diese Abhängigkeiten installiert haben, können Sie einen neuen Gutenberg-Block erstellen, indem Sie den folgenden Befehl ausführen: create-guten-block my-block Dadurch wird ein neues Verzeichnis namens my-block mit allen erforderlichen Dateien für einen Gutenberg-Block erstellt. Die zweite Möglichkeit, einen Gutenberg-Block in React zu erstellen, ist die Verwendung des Pakets @wordpress/block-editor. Dieses Paket enthält eine Hilfsfunktion namens createBlock, die zum Erstellen von Gutenberg-Blöcken verwendet werden kann. Um diese Methode zu verwenden, müssen Sie das Paket @wordpress/block-editor in Ihrem Projekt installieren. Nachdem Sie das Paket installiert haben, können Sie einen neuen Gutenberg-Block erstellen, indem Sie den folgenden Code ausführen: import { createBlock } from '@wordpress/block-editor'; createBlock( 'my-block/my-block', { title: 'My Block', category: 'common', } ); Dadurch wird ein neuer Block namens my-block in der allgemeinen Kategorie erstellt. Die dritte Möglichkeit, einen Gutenberg-Block in React zu erstellen, ist die Verwendung der Funktion wp.blocks.createBlock . Diese Funktion ist Teil der WordPress-JavaScript-API und kann zum Erstellen von Gutenberg-Blöcken verwendet werden. Um diese Methode zu verwenden, müssen Sie das Paket wp-api-request in Ihr Projekt aufnehmen. Nachdem Sie das Paket installiert haben, können Sie einen neuen Gutenberg-Block erstellen, indem Sie den folgenden Code ausführen: import { wp } from 'wp'; wp.blocks.createBlock( 'my-block/my-block', { title: 'My Block', category: 'common', } ); Dadurch wird ein neuer Block namens my-block in der allgemeinen Kategorie erstellt.

In diesem Tutorial für den Gutenberg-Editor erfahren Sie, wie Sie benutzerdefinierte Blöcke erstellen. Sie verwenden ein von Ihnen erstelltes Plugin, um die Aufgabe zu erledigen. Obwohl eines der Standardthemen verfügbar ist, um einen benutzerdefinierten Gutenberg-Block zu erstellen, müssen wir zugeben, dass dies möglich ist. In diesem Tutorial gehen wir darauf ein, wie man mit Gutenberg einen neuen benutzerdefinierten Block erstellt. Darüber hinaus passen wir das Aussehen des Frontends und des Editors basierend auf den von uns bereitgestellten Designeinstellungen an. Wenn Sie nicht viel Zeit mit dem Erstellen von Blöcken verbringen möchten, können Sie einfach einen hinzufügen und ihn dann Ihren Anforderungen anpassen.

React ist in benutzerdefinierten Designs einfach zu verwenden

React ist eine hervorragende Bibliothek zum Erstellen von Benutzeroberflächen mit JavaScript. WordPress hat es verwendet, um den neuen Gutenberg-Editor sowie den Widget-Verwaltungsbildschirm und die jüngsten Aktualisierungen der Inhaltsbearbeitungsfunktionen der Website zu betreiben. Da React bereits in WordPress eingebettet ist, ist es einfach in benutzerdefinierten Themen zu verwenden.

Gutenberg erstellt benutzerdefinierten Schaltflächenblock

Gutenberg erstellt einen benutzerdefinierten Schaltflächenblock ist ein sehr nützliches Tool zum Erstellen benutzerdefinierter Schaltflächen für Ihre Website. Mit diesem Tool können Sie ganz einfach Schaltflächen erstellen, die sowohl auffällig als auch funktional sind. Dies ist eine großartige Möglichkeit, Ihrer Website eine persönliche Note zu verleihen und sie von den anderen abzuheben.

In diesem Tutorial erfahren Sie, wie Sie Ihren ersten einfachen Block in der beliebten App erstellen. Unsere WordPress @create-block App ist ein offizielles Tool, mit dem wir schnell Javascript/PHP/CSS-Code generieren können. Im interaktiven Modus können Sie Ihren Block in einer Reihe von Schritten konfigurieren. Wenn Sie gerade erst etwas über Gutenberg lernen, kann dies äußerst nützlich sein. Wenn Sie den Block bereits eingerüstet haben, können Sie jetzt über einen Code-Editor auf das neu erstellte Verzeichnis zugreifen. Die Block-Plug-in-Struktur folgt dem aktuellen Stand (zum Zeitpunkt des Schreibens dieses Tutorials). Wir werden die Details jeder Datei und ihre Verwendung in diesem Modul durchgehen.

Das Befehlszeilen-Flag ist eine gängige Methode zum Angeben von Optionen für Befehlszeilenprogramme. Bevor Sie die Flags verwenden, ersetzen Sie die Werte im Flags-Verzeichnis durch die Werte, die Sie verwenden möchten. Ein Stylesheet, das in die Warteschlange eingereiht oder im Editor angewendet wird. Die grundlegenden Details des Plugins werden ausführlich besprochen. WordPress zeigt standardmäßig Plugin-Informationen an. Um Git mitzuteilen, welche Dateien beim Erstellen eines versionierten Projekts ignoriert werden sollen, sollte die Datei Gitignore A. eingebunden werden. Das Repository enthält Informationen. Config ermöglicht es Entwicklern, einen konsistenten Codierungsstil über mehrere Projekte hinweg beizubehalten.

WordPress Gutenberg-Plugin-Entwicklung

Das WordPress Gutenberg-Plugin ist ein Open-Source-Projekt, das von einer Gemeinschaft von Freiwilligen entwickelt wird. Jeder kann zum Projekt beitragen und helfen, es besser zu machen. Das Plugin wird ständig aktualisiert und verbessert. Wenn Sie ein Entwickler sind, können Sie zum Projekt beitragen, indem Sie neue Funktionen entwickeln oder Fehler beheben.

Sie haben wahrscheinlich schon von Gutenberg (dem WordPress-Blockeditor) gehört, aber wie fangen Sie an, Ihr eigenes Plugin zu erstellen? Blöcke werden mit einem einfachen WordPress-Skript erstellt. Die Art von WordPress-Plugin, die hier erstellt wird, ist normalerweise ein Block, aber es bietet einen guten Ausgangspunkt für andere im Prozess. Das Create Block Script kann als Vorlage verwendet werden, um ein eigenes Plugin zu erstellen. Sie können den Block im Frontend von WordPress leicht sehen, aber er hat ein anderes Aussehen, damit Sie sich am Backend daran gewöhnen können. Diese Datei darf erst im Entwicklungsmodus generiert werden, nachdem die Assets kompiliert wurden. /node_modules – Dies ist der Ordner, in dem alle JavaScript-abhängigen Parameter Ihres Plugins gespeichert werden.

In dieser Datei finden Sie voreingestellte Dateien, die nützliche Visual Studio Code (VDC)-Umgebungen enthalten. Sie müssen sicherstellen, dass Sie sich im WordPress-Plugin-Ordner befinden, wenn Sie ein Plugin erstellen möchten. Als Ergebnis können Sie die Entwicklungs- und Produktionsstadien des Plugins einsehen. Öffnen Sie /src/save.js in Ihrem Editor, um die Speicherfunktion durch Folgendes zu ersetzen: BlockText kann auf diese Weise als Zeichenfolge ausgegeben werden. Der folgende Code muss zum Stammverzeichnis des Plugins hinzugefügt werden, um Ihre Blöcke in einer benutzerdefinierten Blockkategorie anzuzeigen. Die Funktion registerBlockType.js gibt eine Liste Ihrer Blockkategorien zurück, die dann mit der Funktion registerBlockType.js des Plugins neu kompiliert werden kann.

Der Gutenberg-Content-Editor

WordPress-Benutzer können Inhalte über die auf React aufbauende Single Page Application (SPA) erstellen, bearbeiten und löschen. Im Gegensatz zum traditionellen Inhaltseditor bietet dieser eine flüssigere und benutzerfreundlichere Oberfläche. Wenn Sie einen leistungsfähigeren Inhaltseditor wünschen, ist die Gutenberg-App nichts für Sie. Wer es etwas entspannter mag, kann sich auf Gutenberg verlassen.

Benutzerdefinierter WordPress-Block-Editor

Sie können diesen Block für jeden gewünschten Beitrag oder jede gewünschte Seite verwenden. Verwenden Sie auf dem Bildschirm „Neuen Block hinzufügen“ das Suchfeld, um nach Ihrem Block zu suchen, indem Sie seinen Namen oder Schlüsselwörter eingeben. Nachdem Sie den Block in den Inhaltsbereich eingefügt haben, sehen Sie die Blockfelder, die Sie für diesen benutzerdefinierten Block erstellt haben.

Dieses Tutorial führt Sie durch den Prozess der Erstellung einer voll funktionsfähigen, benutzerdefinierten Blockeditor-Instanz in WordPress. Dieser Editor wird vollständig innerhalb einer benutzerdefinierten WP-Admin-Seite namens Block Editor erstellt (auf die kreativste Weise). In unserem WordPress Plug-A-Thon erstellen wir einen Editor. Wir müssen jetzt etwas HTML in unsere benutzerdefinierte Seite generieren, indem wir die React-Komponente des Blockeditors verwenden. Als drittes Argument verwenden wir die Zeile Skriptabhängigkeiten ($script_asset['dependencies']). Dadurch wird sichergestellt, dass WordPress-bezogene Skripte nicht im erstellten Paket enthalten sind. Wir müssen auch unsere benutzerdefinierten CSS-Stile und die WordPress-Standardformatierungsbibliothek registrieren, um sie verwenden zu können.

Dadurch können wir JavaScript verwenden, um einen Blockeditor im HTML der Seite zu generieren. Die Magie passiert, wenn die Komponente dafür BlockEditor heißt. Es ist möglich, den Editor aus PHP zu rendern, ohne ein JS global zu erstellen. Das Layout des Editors basiert, wie Sie hier sehen, neben einigen spezialisierten Kontextanbietern auf Gerüsten. Block EditorProvider ist die wichtigste Komponente des WordPress-Blockeditor-Pakets. Wie wir bereits erklärt haben, bietet dies einen neuen Kontext für einen brandneuen Blockeditor im Kontext der Blockbearbeitung. Dazu abonniert es die bereitgestellte Registrierung (über das withRegistry-Provider-HOC), überwacht Blockänderungsereignisse, ermittelt, ob Blockänderungen bestehen bleiben, und ruft bei Bedarf den onChange-Eingabehandler auf.

Die faszinierendste Komponente ist die BlockList-Komponente, die dem Editor eine Liste von Blöcken hinzufügt. Es lohnt sich, diese Komponenten im Detail zu studieren, da sie zu den kompliziertesten und kompliziertesten gehören. Um mehr über unsere benutzerdefinierte EditorBlock-Komponente zu erfahren, lesen Sie bitte den folgenden Artikel. Slot/Fill wird implementiert, indem unsere Blockeditor-Komponente (siehe oben) verwendet wird, um eine Füllung (Sidebar. InspectorFill) darin anzuzeigen, die wir importieren und anschließend in die Implementierung rendern. Infolgedessen ermöglicht uns React, eine Inspektionskomponente in ihrem DOM zu belassen, während sie an einem separaten Ort (z. B. in der Seitenleiste) in das Markup gerendert wird. Blöcke sind auch in LocalStorage unter dem Schlüssel getdavesbeBlocks zu finden.

Diese Daten werden in das Blockgrammatikformat serialisiert, was bedeutet, dass sie in einer Zeichenfolge gespeichert werden können. GitHub hat den gesamten Code für den benutzerdefinierten funktionierenden Blockeditor kompiliert. Das Programm kann kostenlos heruntergeladen und selbst ausprobiert werden.