Im Laufe der Jahre haben wir Gutenberg aus vielen Blickwinkeln erkundet. Wir haben die Funktionen des Editors unter die Lupe genommen, sie mit denen anderer Page Builder verglichen, statische und dynamische benutzerdefinierte Blöcke erstellt und vieles mehr.
Mit den neuesten Versionen von WordPress gibt es neue Funktionen und Tools, mit denen du komplexe Layouts einfacher erstellen kannst, indem du die Funktionen des Block-Editors erweiterst, ohne eigene Blöcke erstellen zu müssen.
Dank der Einführung von Blockmustern und Entwickler-Tools wie der Block Bindings API gibt es weniger Anwendungsfälle für benutzerdefinierte Blöcke. Du kannst jetzt komplexe Blockstrukturen erstellen, Metadaten in deine Inhalte einfügen und einen großen Teil deines Workflows automatisieren, ohne die Oberfläche des Editors zu verlassen. Kurz gesagt, WordPress ermöglicht es dir heute, komplexe Websites mit so wenigen Klicks wie nie zuvor zu erstellen.
Das Hinzufügen von benutzerdefinierten Steuerelementen und Tools zum Editor kann dazu beitragen, den Prozess der Inhaltserstellung reibungsloser zu gestalten. Du kannst zum Beispiel ein Panel zur Post-Seitenleiste hinzufügen, um Funktionen hinzuzufügen, oder eine benutzerdefinierte Seitenleiste erstellen, um mehrere Meta-Felder zu verwalten.
Los geht’s!
Wie man ein Block-Editor-Plugin erstellt, ohne einen eigenen Block zu erstellen
WordPress bietet ein praktisches Kommandozeilen-Tool, mit dem du eine lokale Node.js-Entwicklungsumgebung mit allen notwendigen Dateien und Abhängigkeiten installieren kannst, um einen eigenen Block zu erstellen. Gib einfach npx @wordpress/create-block in das Kommandozeilentool ein, warte ein paar Sekunden und du bist fertig.
Das Erstellen eines benutzerdefinierten Blocks ist jedoch nicht notwendig, wenn du nur eine Seitenleiste oder ein einfaches Einstellungsfeld hinzufügen möchtest. In diesem Fall musst du ein Gutenberg-Plugin erstellen.
WordPress bietet kein Dienstprogramm, das die Erstellung eines Plugins für Gutenberg automatisiert, du musst es also manuell erstellen. Aber mach dir keine Sorgen. Der Prozess ist relativ einfach, und wir werden dich durch ihn führen. Das sind die Schritte, die du befolgen musst:
1. Download und Installation einer lokalen Entwicklungsumgebung
Das Wichtigste zuerst: Obwohl du dein Gutenberg-Plugin in einer Remote-Umgebung entwickeln kannst, kann es für dich bequemer sein, eine WordPress-Entwicklungsseite lokal zu installieren. Du kannst jede Umgebung verwenden, die auf PHP und MySQL basiert. Unter den vielen Alternativen, die es da draußen gibt, empfehlen wir DevKinsta. Es ist kostenlos, voll funktionsfähig, einfach zu bedienen und 100 % kompatibel mit dem Kinsta-Hosting.
Sobald du deine Entwicklungsseite eingerichtet hast, kannst du ein Gutenberg-Blockeditor-Plugin erstellen.
2. Download und Installation von Node.js und npm
Lade Node.js von nodejs.org herunter und installiere es auf deinem Computer. Damit installierst du auch npm, den Node-Paketmanager.
Starte danach dein Kommandozeilentool und führe node -v und npm -v aus. Du solltest die installierten Versionen von Node.js und npm sehen.
3. Erstelle den Ordner für dein Plugin
Erstelle einen neuen Ordner unter wp-content/plugins und benenne ihn in my-sidebar-plugin oder etwas Ähnliches um. Denke daran, dass dieser Name den Namen deines Plugins widerspiegeln sollte.
Öffne das Terminal, navigiere zum Ordner des Plugins und initialisiere ein npm-Projekt mit dem folgenden Befehl:
npm init -yDadurch wird eine einfache package.json Datei erstellt.
4. Installiere die Abhängigkeiten
Gib in deinem Kommandozeilentool den folgenden Befehl ein:
npm install @wordpress/plugins @wordpress/scripts --save-dev@wordpress/pluginsInstalliert das Modulpluginsfür WordPress.@wordpress/scriptsinstalliert eine Sammlung von wiederverwendbaren Skripten für die Entwicklung von WordPress.
Deinem Projekt sollte ein neuer Ordner node_modules hinzugefügt worden sein.
Öffne nun dein package.json und aktualisiere das scripts wie folgt:
{
"name": "my-sidebar-plugin",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@wordpress/plugins": "^7.14.0",
"@wordpress/scripts": "^30.7.0"
}
}Jetzt kannst du den Ordner des Plugins überprüfen:
5. Erstelle die Dateien für das Plugin
Erstelle im Verzeichnis deines Plugins eine neue Datei .php und gib ihr denselben Namen wie deinem Ordner. In unserem Beispiel heißt sie my-sidebar-plugin.php.
Öffne die Datei und füge den folgenden Code ein, um das Plugin auf dem Server zu registrieren:
<?php
/**
* Plugin Name: My Sidebar Plugin
*/
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );Als Nächstes erstellst du einen Ordner src im Verzeichnis deines Plugins. Erstelle darin eine neue Datei index.js mit folgendem Code:
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
const MyPluginSidebar = () => (
<PluginSidebar
name="my-sidebar-plugin"
title="My Sidebar Plugin"
>
<div>
Hello my friends!
</div>
</PluginSidebar>
);
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );6. Kompiliere den Code
Jetzt fehlt nur noch der Build. Gehe zurück zur Kommandozeile und führe den folgenden Befehl aus:
npm run buildDadurch wird ein Ordner build mit den komprimierten Dateien des Projekts erstellt.
Wenn du damit fertig bist, navigiere zum Plugins-Bildschirm in deinem WordPress-Dashboard und aktiviere das Plugin. Erstelle einen neuen Beitrag oder eine neue Seite und klicke auf das Plugin-Symbol in der oberen rechten Ecke, um deine benutzerdefinierte Seitenleiste anzuzeigen.
7. Entwickeln und erstellen
Wir haben die Datei index.js in den Ordner src gelegt. Die Verwendung eines src Ordners ist eine gängige Konvention bei der Entwicklung von WordPress-Plugins und -Themes, die es anderen Entwicklern leichter macht, deinen Code zu verstehen.
Wenn du deinen JS-Code in den Ordner src legst, kannst du den Befehl npm start oder npm run start verwenden, um eine Entwicklungsumgebung zu starten, die die Skripte überwacht und den Code bei Bedarf automatisch neu kompiliert. Wenn du mit der Entwicklung fertig bist, kompilierst du mit dem Befehl npm build oder npm run build den JavaScript-Code in den Ordner build, der den für die Produktion optimierten Code enthält.
Jetzt wollen wir das Gelernte in die Praxis umsetzen und das Plugin, das wir im vorherigen Abschnitt erstellt haben, so anpassen, dass es der Seitenleiste des Post-Editors ein neues Panel hinzufügt, um benutzerdefinierte Felder zu verwalten.
So erstellst du eine zusätzliche Seitenleiste für die Verwaltung von Post-Meta-Feldern
Unser Ziel ist es, eine benutzerdefinierte Seitenleiste zu erstellen, die ein Feld mit einem einzelnen Textfeld zum Hinzufügen und Bearbeiten eines benutzerdefinierten Metafeldes enthält.
Bevor wir darauf eingehen, sollten wir erwähnen, dass wir das gleiche Ergebnis auch mit einem benutzerdefinierten Metafeld erreichen können. Mit WordPress 6.7 haben die Metaboxen ein Upgrade erhalten und sind jetzt vollständig mit dem Block-Editor kompatibel. Du fragst dich vielleicht, warum du Metafelder über eine benutzerdefinierte Seitenleiste und nicht über eine Metabox verwalten solltest. Der Grund dafür ist, dass du mit einer Seitenleiste die Vorteile der eingebauten Komponenten nutzen kannst. So kannst du benutzerfreundlichere Oberflächen mit leistungsstarken Steuerelementen erstellen, die auch den Nutzern vertraut sein sollten.
Im Folgenden erfährst du, wie du eine benutzerdefinierte Seitenleiste erstellst, mit der du benutzerdefinierte Felder im Editor verwalten kannst.
my-sidebar-plugin.php
Schritt 1: Post-Meta registrieren
Zuerst musst du das Meta-Feld registrieren. Füge den folgenden Code in die Hauptdatei des Plugins ein:
function my_sidebar_plugin_register_meta() {
register_post_meta(
'post',
'meta_fields_book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Book title', 'my-sidebar-plugin' ),
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
)
);
}
add_action( 'init', 'my_sidebar_plugin_register_meta' );Die Funktion register_post_meta nimmt drei Argumente entgegen:
- Der Beitragstyp, für den ein Metaschlüssel registriert werden soll. Wenn du einen leeren String angibst, wird der Metaschlüssel für alle vorhandenen Beitragstypen registriert.
- Der zu registrierende Metaschlüssel. Beachte, dass wir keinen Unterstrich am Anfang des Metaschlüssels verwenden. Wenn du dem Metaschlüssel einen Unterstrich voranstellst, wird das benutzerdefinierte Feld ausgeblendet, so dass du es vielleicht in einer Metabox verwenden möchtest. Das Ausblenden des benutzerdefinierten Feldes würde jedoch verhindern, dass das Meta-Feld über die Block Bindings API im Inhalt des Beitrags verwendet wird.
- Ein Array mit Argumenten. Beachte, dass du
show_in_restauftruesetzen musst. Dadurch wird das Metafelder der Rest-API zugänglich gemacht und wir können das Metafelder an Blockattribute binden. Die anderen Attribute findest du in der Funktionsreferenz.
Schritt 2: Metafeld registrieren
Um die Abwärtskompatibilität deines Plugins zu gewährleisten, musst du ein benutzerdefiniertes Metafeld registrieren, damit die Nutzer deine benutzerdefinierten Felder auch im klassischen Editor verwalten können. Füge den folgenden Code in die PHP-Datei deines Plugins ein:
/**
* Register meta box
*
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*
*/
function my_sidebar_plugin_register_meta_box(){
add_meta_box(
'book_meta_box', // Unique ID
__( 'Book details' ), // Box title
'my_sidebar_plugin_meta_box_callback', // Content callback
array( 'post' ), // Post types
'advanced', // context
'default', // priority
array('__back_compat_meta_box' => true) // hide the meta box in Gutenberg
);
}
add_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );Jetzt musst du den Callback deklarieren, der das Formular aufbaut:
/**
* Build meta box form
*
* @link https://developer.wordpress.org/reference/functions/wp_nonce_field/
* @link https://developer.wordpress.org/reference/functions/get_post_meta/
*
*/
function my_sidebar_plugin_meta_box_callback( $post ){
wp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );
$title = get_post_meta( $post->ID, 'meta_fields_book_title', true );
?>
<div class="inside">
<p><strong><?php echo __( 'Book title', 'my-sidebar-plugin' ); ?></strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
</div>
<?php
}Als Nächstes schreibst du die Funktion, die deine Meta-Felder in der Datenbank speichert:
/**
* Save metadata
*
* @link https://developer.wordpress.org/reference/functions/wp_verify_nonce/
* @link https://developer.wordpress.org/reference/functions/current_user_can/
* @link https://developer.wordpress.org/reference/functions/sanitize_text_field/
* @link https://developer.wordpress.org/reference/functions/update_post_meta/
*
*/
function my_sidebar_plugin_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )
return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
if ( ! isset( $_POST['meta_fields_book_title'] ) )
return;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
update_post_meta( $post_id, 'meta_fields_book_title', $title );
}
add_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );Wir werden nicht näher auf diesen Code eingehen, da er den Rahmen dieses Artikels sprengen würde, aber du kannst alle Informationen finden, die du brauchst, indem du den Links in den Funktionsüberschriften folgst.
Zuletzt müssen wir die index.js Datei unseres Plugins in die Warteschlange stellen:
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );Das war’s mit der PHP-Datei. Als Nächstes müssen wir den JS-Code schreiben.
index.js
Dein index.js befindet sich im Ordner src, in dem du deine JS-Dateien während der Entwicklungsphase speicherst.
Öffne deine index.js und füge die folgenden import Deklarationen hinzu:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';Du brauchst diese Ressourcen, um die Seitenleiste mit den erforderlichen Steuerelementen zu erstellen.
Als Nächstes musst du die Komponente der Seitenleiste erstellen:
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginSidebar
name="my-sidebar-plugin"
icon="book"
title="My plugin sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );Die Funktion registerPlugin registriert das Plugin und rendert die Komponente namens MyPluginSidebar.
Die Funktion MyPluginSidebar deklariert ein paar Konstanten und gibt den JSX-Code der Komponente zurück.
useSelectist ein benutzerdefinierter Hook zum Abrufen von Props aus registrierten Selektoren. Wir haben ihn benutzt, um den aktuellen Beitragstyp abzurufen. Siehe auch diesen Blog-Beitrag im WordPress Developer Blog.useEntityPropliefert ein Array von Metafeldern und eine Setter-Funktion, um neue Metawerte zu setzen. Siehe auch die Online-Referenz.updateBookTitleMetaValueist ein Event-Handler, der den Wert des Meta-FeldesbookTitlespeichert.
Wir haben ein paar eingebaute Komponenten verwendet, um unsere Seitenleiste zu erstellen:
PluginSidebarMit der Komponente „Sidebar“ kannst du der Symbolleiste des Post- oder Site-Editors Elemente hinzufügen. (Siehe die Referenz der Komponente.)PanelBodyerstellt einen zusammenklappbaren Container, der auf- oder zugeklappt werden kann. (Siehe die Referenz der Komponente.)PanelRowist ein allgemeiner Container für Zeilen innerhalb einerPanelBody. (Siehe die Referenz der Komponente.)TextControlist ein einzeiliges Feld, das für die Eingabe von freiem Text verwendet werden kann. (Siehe die Referenz der Komponente.)
Führe nun den Befehl npm run build aus, aktiviere das Plugin und erstelle einen neuen Beitrag. In der oberen Seitenleiste sollte ein neues Buchsymbol erscheinen. Wenn du auf dieses Symbol klickst, wird deine Plugin-Seitenleiste angezeigt.
Was ist, wenn du keine neue Seitenleiste brauchst, sondern dein benutzerdefiniertes Feld in der integrierten Seitenleiste des Beitrags anzeigen möchtest? Dann musst du nur PluginSidebar durch PluginDocumentSettingPanel ersetzen. Das ist deine neue index.js Datei:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginDocumentSettingPanel
name="my-sidebar-plugin"
title="Book details"
className="my-sidebar-plugin"
>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );Das folgende Bild zeigt das Ergebnis.
Ein Anwendungsfall: eine Blockmusterüberschreibung, um deinen Arbeitsablauf zu automatisieren
Du kannst nun einen Wert für das benutzerdefinierte Feld hinzufügen, der über die Block Bindings API für die Verwendung mit Blockattributen verfügbar ist. Du kannst zum Beispiel einen Absatzblock zu deinem Inhalt hinzufügen und das benutzerdefinierte Feld an das Attribut content des Absatzes binden.
Es steht dir frei, den Wert deines benutzerdefinierten Feldes zu ändern, und diese Änderungen werden automatisch auf den Inhalt deines Absatzes angewendet.
Wenn du dich fragst, ob du mit benutzerdefinierten Feldern und Block Bindings noch mehr machen kannst, lautet die Antwort: Ja! Mit den Blockmustern und der Block Bindings API kannst du den gesamten Prozess der Inhaltserstellung automatisieren.
Um einen Anhaltspunkt zu haben, erstellst du ein Muster mit mindestens einer Überschrift oder einem Absatz. In diesem Beispiel erstellen wir ein Blockmuster mit einem Spaltenblock, einem Bild, einer Überschrift und ein paar Zeilenblöcken, die jeweils zwei Absätze enthalten.
Wenn du mit deinem Layout zufrieden bist, wählst du die Umbruchelemente aus und erstellst ein synchronisiertes Muster.
Füge einen Namen und eine Kategorie für das Blockmuster hinzu und stelle sicher, dass du es synchronisierst.
Wenn du das Muster im Post-Editor erstellt hast, wähle es aus und klicke in der Symbolleiste des Blocks auf Original bearbeiten. Du kannst auch zum Abschnitt Muster im Seiteneditor navigieren und das Muster unter Meine Muster oder in der Musterkategorie finden, die du zuvor festgelegt hast.
Öffne den Code-Editor und suche den Block, den du mit deinem benutzerdefinierten Feld verbinden willst. Füge im Blockbegrenzer den folgenden Code ein:
<!-- wp:heading {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"meta_fields_book_title"
}
}
}
}
} -->
Speichere das Muster und erstelle einen neuen Beitrag. Füge das Muster zu deinem Inhalt hinzu und setze einen Wert für das benutzerdefinierte Feld. Du solltest sehen, dass dieser Wert automatisch auf dein Muster angewendet wird.
Jetzt kannst du mit diesem Plugin herumspielen. Dank der benutzerdefinierten Felder und der Block Bindings API kannst du weitere Felder und Steuerelemente hinzufügen, um deine Layouts automatisch zu füllen.
Zusammenfassung
Die Entwicklung eines benutzerdefinierten Blocks kann eine Herausforderung sein. Aber ist es wirklich nötig, einen Block zu erstellen, wenn du mit einem Blockmuster mehr erreichen kannst?
Mit den Fortschritten bei den Blockmustern und der Einführung leistungsstarker Entwicklerfunktionen wie der Block Bindings API ist es nicht mehr nötig, eigene Blöcke zu erstellen, um anspruchsvolle und funktionale Websites zu bauen. Mit einem einfachen Plugin und einem Blockmuster kannst du einen großen Teil deines Workflows automatisieren.
In diesem Tutorial wurde gezeigt, wie man den WordPress-Beitragseditor mithilfe eines Plugins um neue Funktionen erweitert. Was wir in diesem Beitrag behandelt haben, kratzt jedoch nur an der Oberfläche dessen, was du mit den robusten Funktionen, die WordPress jetzt bietet, erreichen kannst.
Hast du diese Funktionen bereits erkundet und dem WordPress-Editor weitere Funktionen hinzugefügt? Wenn ja, kannst du deine Erfahrungen und Erkenntnisse gerne unten in den Kommentaren mitteilen.
Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.
Schreibe einen Kommentar