{"id":72350,"date":"2025-01-20T09:16:12","date_gmt":"2025-01-20T08:16:12","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=72350&#038;preview=true&#038;preview_id=72350"},"modified":"2025-01-23T15:18:21","modified_gmt":"2025-01-23T14:18:21","slug":"gutenberg-plugin","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/","title":{"rendered":"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen"},"content":{"rendered":"<p>Im Laufe der Jahre haben wir Gutenberg aus vielen Blickwinkeln erkundet. Wir haben die <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Funktionen des Editors<\/a> unter die Lupe genommen, sie mit denen <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-vs-elementor\/\">anderer Page Builder<\/a> verglichen, <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">statische<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\">dynamische<\/a> benutzerdefinierte Bl\u00f6cke erstellt und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\">vieles mehr<\/a>.<\/p>\n<p>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\u00f6cke erstellen zu m\u00fcssen.<\/p>\n<p>Dank der Einf\u00fchrung von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-muster\/\">Blockmustern<\/a> und Entwickler-Tools wie der <a href=\"https:\/\/kinsta.com\/de\/blog\/block-bindings-api\/\">Block Bindings API<\/a> gibt es weniger Anwendungsf\u00e4lle f\u00fcr benutzerdefinierte Bl\u00f6cke. Du kannst jetzt komplexe Blockstrukturen erstellen, Metadaten in deine Inhalte einf\u00fcgen und einen gro\u00dfen Teil deines Workflows automatisieren, ohne die Oberfl\u00e4che des Editors zu verlassen. Kurz gesagt, WordPress erm\u00f6glicht es dir heute, komplexe Websites mit so wenigen Klicks wie nie zuvor zu erstellen.<\/p>\n<p>Das Hinzuf\u00fcgen 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\u00fcgen, um Funktionen hinzuzuf\u00fcgen, oder eine benutzerdefinierte Seitenleiste erstellen, um mehrere Meta-Felder zu verwalten.<\/p>\n<p>Los geht&#8217;s!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Wie man ein Block-Editor-Plugin erstellt, ohne einen eigenen Block zu erstellen<\/h2>\n<p>WordPress bietet ein praktisches <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kommandozeilen-Tool<\/a>, mit dem du eine lokale Node.js-Entwicklungsumgebung mit allen notwendigen Dateien und Abh\u00e4ngigkeiten installieren kannst, um einen eigenen Block zu erstellen. Gib einfach <code>npx @wordpress\/create-block<\/code> in das Kommandozeilentool ein, warte ein paar Sekunden und du bist fertig.<\/p>\n<p>Das Erstellen eines benutzerdefinierten Blocks ist jedoch nicht notwendig, wenn du nur eine Seitenleiste oder ein einfaches Einstellungsfeld hinzuf\u00fcgen m\u00f6chtest. In diesem Fall musst du ein Gutenberg-Plugin erstellen.<\/p>\n<p>WordPress bietet kein Dienstprogramm, das die Erstellung eines Plugins f\u00fcr 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\u00fchren. Das sind die Schritte, die du befolgen musst:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Download und Installation einer lokalen Entwicklungsumgebung<\/h3>\n<p><strong>Das Wichtigste zuerst:<\/strong> Obwohl du dein Gutenberg-Plugin in einer Remote-Umgebung entwickeln kannst, kann es f\u00fcr dich bequemer sein, eine WordPress-Entwicklungsseite lokal zu installieren. Du kannst jede Umgebung verwenden, die auf PHP und MySQL basiert. Unter den <a href=\"https:\/\/kinsta.com\/de\/blog\/mamp-alternativen\/\">vielen Alternativen<\/a>, die es da drau\u00dfen gibt, empfehlen wir <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/funktionen\/\">DevKinsta<\/a>. Es ist kostenlos, voll funktionsf\u00e4hig, einfach zu bedienen und 100 % kompatibel mit dem Kinsta-Hosting.<\/p>\n<p>Sobald du deine Entwicklungsseite eingerichtet hast, kannst du ein Gutenberg-Blockeditor-Plugin erstellen.<\/p>\n<h3>2. Download und Installation von Node.js und npm<\/h3>\n<p>Lade Node.js von <a href=\"https:\/\/nodejs.org\/\">nodejs.org<\/a> herunter und installiere es auf deinem Computer. Damit installierst du auch npm, den Node-Paketmanager.<\/p>\n<p>Starte danach dein Kommandozeilentool und f\u00fchre <code>node -v<\/code> und <code>npm -v<\/code> aus. Du solltest die installierten Versionen von Node.js und npm sehen.<\/p>\n<figure id=\"attachment_190001\" aria-describedby=\"caption-attachment-190001\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190001 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/node-v.png\" alt=\"Node- und npm-Versionen pr\u00fcfen\" width=\"1302\" height=\"308\"><figcaption id=\"caption-attachment-190001\" class=\"wp-caption-text\">Node- und npm-Versionen pr\u00fcfen<\/figcaption><\/figure>\n<h3>3. Erstelle den Ordner f\u00fcr dein Plugin<\/h3>\n<p>Erstelle einen neuen Ordner unter <code>wp-content\/plugins<\/code> und benenne ihn in <code>my-sidebar-plugin<\/code> oder etwas \u00c4hnliches um. Denke daran, dass dieser Name den Namen deines Plugins widerspiegeln sollte.<\/p>\n<p>\u00d6ffne das Terminal, navigiere zum Ordner des Plugins und initialisiere ein npm-Projekt mit dem folgenden Befehl:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Dadurch wird eine einfache <code>package.json<\/code> Datei erstellt.<\/p>\n<figure id=\"attachment_190003\" aria-describedby=\"caption-attachment-190003\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190003 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/npm-init-y.png\" alt=\"Erstelle eine grundlegende package.json-Datei\" width=\"1302\" height=\"886\"><figcaption id=\"caption-attachment-190003\" class=\"wp-caption-text\">Erstelle eine grundlegende package.json-Datei<\/figcaption><\/figure>\n<h3>4. Installiere die Abh\u00e4ngigkeiten<\/h3>\n<p>Gib in deinem Kommandozeilentool den folgenden Befehl ein:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<ul>\n<li><code>@wordpress\/plugins<\/code> Installiert das <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">Modul <code>plugins<\/code> f\u00fcr WordPress<\/a>.<\/li>\n<li><code>@wordpress\/scripts<\/code> installiert eine Sammlung von <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener noreferrer\">wiederverwendbaren Skripten<\/a> f\u00fcr die Entwicklung von WordPress.<\/li>\n<\/ul>\n<p>Deinem Projekt sollte ein neuer Ordner <code>node_modules<\/code> hinzugef\u00fcgt worden sein.<\/p>\n<p>\u00d6ffne nun dein <code>package.json<\/code> und aktualisiere das <code>scripts<\/code> wie folgt:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"my-sidebar-plugin\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.14.0\",\n\t\t\"@wordpress\/scripts\": \"^30.7.0\"\n\t}\n}<\/code><\/pre>\n<p>Jetzt kannst du den Ordner des Plugins \u00fcberpr\u00fcfen:<\/p>\n<figure id=\"attachment_190006\" aria-describedby=\"caption-attachment-190006\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190006 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/package-json.png\" alt=\"Das Projekt des Plugins in Visual Studio Code\" width=\"1862\" height=\"998\"><figcaption id=\"caption-attachment-190006\" class=\"wp-caption-text\">Das Projekt des Plugins in Visual Studio Code<\/figcaption><\/figure>\n<h3>5. Erstelle die Dateien f\u00fcr das Plugin<\/h3>\n<p>Erstelle im Verzeichnis deines Plugins eine neue Datei <code>.php<\/code> und gib ihr denselben Namen wie deinem Ordner. In unserem Beispiel hei\u00dft sie <code>my-sidebar-plugin.php<\/code>.<\/p>\n<p>\u00d6ffne die Datei und f\u00fcge den folgenden Code ein, um das Plugin auf dem Server zu registrieren:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: My Sidebar Plugin\n *\/\n\nfunction my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Als N\u00e4chstes erstellst du einen Ordner <code>src<\/code> im Verzeichnis deines Plugins. Erstelle darin eine neue Datei <code>index.js<\/code> mit folgendem Code:<\/p>\n<pre><code class=\"language-js\">import { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/edit-post';\n\nconst MyPluginSidebar = () =&gt; (\n\t&lt;PluginSidebar\n\t\tname=\"my-sidebar-plugin\"\n\t\ttitle=\"My Sidebar Plugin\"\n\t&gt;\n\t\t&lt;div&gt;\n\t\t\tHello my friends!\n\t\t&lt;\/div&gt;\n\t&lt;\/PluginSidebar&gt;\n);\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<h3>6. Kompiliere den Code<\/h3>\n<p>Jetzt fehlt nur noch der Build. Gehe zur\u00fcck zur Kommandozeile und f\u00fchre den folgenden Befehl aus:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Dadurch wird ein Ordner <code>build<\/code> mit den komprimierten Dateien des Projekts erstellt.<\/p>\n<figure id=\"attachment_190008\" aria-describedby=\"caption-attachment-190008\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190008 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/plugin-project-vsc.png\" alt=\"Der Projektordner des Plugins in VSC\" width=\"2120\" height=\"998\"><figcaption id=\"caption-attachment-190008\" class=\"wp-caption-text\">Der Projektordner des Plugins in VSC<\/figcaption><\/figure>\n<p>Wenn du damit fertig bist, navigiere zum <strong>Plugins-Bildschirm<\/strong> 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.<\/p>\n<figure id=\"attachment_190010\" aria-describedby=\"caption-attachment-190010\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190010 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/gutenberg-custom-sidebar.png\" alt=\"Eine benutzerdefinierte Seitenleiste im Beitragseditor\" width=\"1976\" height=\"552\"><figcaption id=\"caption-attachment-190010\" class=\"wp-caption-text\">Eine benutzerdefinierte Seitenleiste im Beitragseditor<\/figcaption><\/figure>\n<h3>7. Entwickeln und erstellen<\/h3>\n<p>Wir haben die Datei <code>index.js<\/code> in den Ordner <code>src<\/code> gelegt. Die Verwendung eines <code>src<\/code> Ordners ist eine g\u00e4ngige Konvention bei der Entwicklung von WordPress-Plugins und -Themes, die es anderen Entwicklern leichter macht, deinen Code zu verstehen.<\/p>\n<p>Wenn du deinen JS-Code in den Ordner <code>src<\/code> legst, kannst du den Befehl <code>npm start<\/code> oder <code>npm run start<\/code> verwenden, um eine Entwicklungsumgebung zu starten, die die Skripte \u00fcberwacht und den Code bei Bedarf automatisch neu kompiliert. Wenn du mit der Entwicklung fertig bist, kompilierst du mit dem Befehl <code>npm build<\/code> oder <code>npm run build<\/code> den JavaScript-Code in den Ordner <code>build<\/code>, der den f\u00fcr die Produktion optimierten Code enth\u00e4lt.<\/p>\n<p>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\u00fcgt, um benutzerdefinierte Felder zu verwalten.<\/p>\n<h2>So erstellst du eine zus\u00e4tzliche Seitenleiste f\u00fcr die Verwaltung von Post-Meta-Feldern<\/h2>\n<p>Unser Ziel ist es, eine benutzerdefinierte Seitenleiste zu erstellen, die ein Feld mit einem einzelnen Textfeld zum Hinzuf\u00fcgen und Bearbeiten eines benutzerdefinierten Metafeldes enth\u00e4lt.<\/p>\n<p>Bevor wir darauf eingehen, sollten wir erw\u00e4hnen, dass wir das gleiche Ergebnis auch mit einem benutzerdefinierten Metafeld erreichen k\u00f6nnen. Mit WordPress 6.7 <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-7\/#meta-boxes-in-the-post-editor\">haben die Metaboxen ein Upgrade erhalten<\/a> und sind jetzt vollst\u00e4ndig mit dem Block-Editor kompatibel. Du fragst dich vielleicht, warum du Metafelder \u00fcber eine benutzerdefinierte Seitenleiste und nicht \u00fcber eine Metabox verwalten solltest. Der Grund daf\u00fcr ist, dass du mit einer Seitenleiste die Vorteile der eingebauten Komponenten nutzen kannst. So kannst du benutzerfreundlichere Oberfl\u00e4chen mit leistungsstarken Steuerelementen erstellen, die auch den Nutzern vertraut sein sollten.<\/p>\n<p>Im Folgenden erf\u00e4hrst du, wie du eine benutzerdefinierte Seitenleiste erstellst, mit der du benutzerdefinierte Felder im Editor verwalten kannst.<\/p>\n<h3><code>my-sidebar-plugin.php<\/code><\/h3>\n<h4>Schritt 1: Post-Meta registrieren<\/h4>\n<p>Zuerst musst du das Meta-Feld registrieren. F\u00fcge den folgenden Code in die Hauptdatei des Plugins ein:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_meta() {\n\tregister_post_meta(\n\t\t'post',\n\t\t'meta_fields_book_title', \n\t\tarray(\n\t\t\t'show_in_rest' =&gt; true,\n\t\t\t'type' =&gt; 'string',\n\t\t\t'single' =&gt; true,\n\t\t\t'sanitize_callback' =&gt; 'sanitize_text_field',\n\t\t\t'label' =&gt; __( 'Book title', 'my-sidebar-plugin' ),\n\t\t\t'auth_callback' =&gt; function() { \n\t\t\t\treturn current_user_can( 'edit_posts' );\n\t\t\t}\n\t\t)\n\t);\n}\nadd_action( 'init', 'my_sidebar_plugin_register_meta' );<\/code><\/pre>\n<p>Die Funktion <code>register_post_meta<\/code> nimmt drei Argumente entgegen:<\/p>\n<ul>\n<li>Der Beitragstyp, f\u00fcr den ein Metaschl\u00fcssel registriert werden soll. Wenn du einen leeren String angibst, wird der Metaschl\u00fcssel f\u00fcr alle vorhandenen Beitragstypen registriert.<\/li>\n<li>Der zu registrierende Metaschl\u00fcssel. Beachte, dass wir keinen Unterstrich am Anfang des Metaschl\u00fcssels verwenden. Wenn du dem Metaschl\u00fcssel einen Unterstrich voranstellst, wird das benutzerdefinierte Feld ausgeblendet, so dass du es vielleicht in einer Metabox verwenden m\u00f6chtest. Das Ausblenden des benutzerdefinierten Feldes w\u00fcrde jedoch verhindern, dass das Meta-Feld \u00fcber die Block Bindings API im Inhalt des Beitrags verwendet wird.<\/li>\n<li>Ein Array mit Argumenten. Beachte, dass du <code>show_in_rest<\/code> auf <code>true<\/code> setzen musst. Dadurch wird das Metafelder der Rest-API zug\u00e4nglich gemacht und wir k\u00f6nnen das Metafelder an Blockattribute binden. Die anderen Attribute findest du in der <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">Funktionsreferenz<\/a>.<\/li>\n<\/ul>\n<h4>Schritt 2: Metafeld registrieren<\/h4>\n<p>Um die Abw\u00e4rtskompatibilit\u00e4t deines Plugins zu gew\u00e4hrleisten, musst du ein benutzerdefiniertes Metafeld registrieren, damit die Nutzer deine benutzerdefinierten Felder auch im klassischen Editor verwalten k\u00f6nnen. F\u00fcge den folgenden Code in die PHP-Datei deines Plugins ein:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register meta box\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n * \n *\/\nfunction my_sidebar_plugin_register_meta_box(){\n\tadd_meta_box(\n\t\t'book_meta_box', \/\/ Unique ID\n\t\t__( 'Book details' ), \/\/ Box title\n\t\t'my_sidebar_plugin_meta_box_callback', \/\/ Content callback\n\t\tarray( 'post' ), \/\/ Post types\n\t\t'advanced', \/\/ context\n\t\t'default', \/\/ priority\n\t\tarray('__back_compat_meta_box' =&gt; true) \/\/ hide the meta box in Gutenberg\n\t );\n}\nadd_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );<\/code><\/pre>\n<p>Jetzt musst du den Callback deklarieren, der das Formular aufbaut:<\/p>\n<pre><code class=\"language-php\">\/**\n * Build meta box form\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_nonce_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_meta_box_callback( $post ){\n\twp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );\n\t$title = get_post_meta( $post-&gt;ID, 'meta_fields_book_title', true );\n\t?&gt;\n\t&lt;div class=\"inside\"&gt;\n\t\t&lt;p&gt;&lt;strong&gt;&lt;?php echo __( 'Book title', 'my-sidebar-plugin' ); ?&gt;&lt;\/strong&gt;&lt;\/p&gt;\n\t\t&lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t&lt;\/div&gt;\n\t&lt;?php\n}<\/code><\/pre>\n<p>Als N\u00e4chstes schreibst du die Funktion, die deine Meta-Felder in der Datenbank speichert:<\/p>\n<pre><code class=\"language-php\">\/**\n * Save metadata\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_verify_nonce\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/current_user_can\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_text_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\n\tupdate_post_meta( $post_id, 'meta_fields_book_title', $title );\n}\nadd_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );<\/code><\/pre>\n<p>Wir werden nicht n\u00e4her auf diesen Code eingehen, da er den Rahmen dieses Artikels sprengen w\u00fcrde, aber du kannst alle Informationen finden, die du brauchst, indem du den Links in den Funktions\u00fcberschriften folgst.<\/p>\n<p>Zuletzt m\u00fcssen wir die <code>index.js<\/code> Datei unseres Plugins in die Warteschlange stellen:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Das war&#8217;s mit der PHP-Datei. Als N\u00e4chstes m\u00fcssen wir den JS-Code schreiben.<\/p>\n<h3><code>index.js<\/code><\/h3>\n<p>Dein <code>index.js<\/code> befindet sich im Ordner <code>src<\/code>, in dem du deine JS-Dateien w\u00e4hrend der Entwicklungsphase speicherst.<\/p>\n<p>\u00d6ffne deine <code>index.js<\/code> und f\u00fcge die folgenden <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\"><code>import<\/code> Deklarationen<\/a> hinzu:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/editor';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Du brauchst diese Ressourcen, um die Seitenleiste mit den erforderlichen Steuerelementen zu erstellen.<\/p>\n<p>Als N\u00e4chstes musst du die Komponente der Seitenleiste erstellen:<\/p>\n<pre><code class=\"language-js\">const MyPluginSidebar = () =&gt; {\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginSidebar\n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ticon=\"book\"\n\t\t\t\ttitle=\"My plugin sidebar\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/PluginSidebar&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>Die Funktion <code>registerPlugin<\/code> registriert das Plugin und rendert die Komponente namens <code>MyPluginSidebar<\/code>.<\/p>\n<p>Die Funktion <code>MyPluginSidebar<\/code> deklariert ein paar Konstanten und gibt den JSX-Code der Komponente zur\u00fcck.<\/p>\n<ul>\n<li><code>useSelect<\/code> ist ein benutzerdefinierter Hook zum Abrufen von Props aus registrierten Selektoren. Wir haben ihn benutzt, um den aktuellen Beitragstyp abzurufen. Siehe auch <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/03\/how-to-work-effectively-with-the-useselect-hook\/\" target=\"_blank\" rel=\"noopener noreferrer\">diesen Blog-Beitrag<\/a> im WordPress Developer Blog.<\/li>\n<li><code>useEntityProp<\/code> liefert ein Array von Metafeldern und eine Setter-Funktion, um neue Metawerte zu setzen. Siehe auch die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-core-data\/#useentityprop\" target=\"_blank\" rel=\"noopener noreferrer\">Online-Referenz<\/a>.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> ist ein Event-Handler, der den Wert des Meta-Feldes <code>bookTitle<\/code> speichert.<\/li>\n<\/ul>\n<p>Wir haben ein paar eingebaute Komponenten verwendet, um unsere Seitenleiste zu erstellen:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> Mit der Komponente &#8222;Sidebar&#8220; kannst du der Symbolleiste des Post- oder Site-Editors Elemente hinzuf\u00fcgen. (Siehe <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\" target=\"_blank\" rel=\"noopener noreferrer\">die Referenz der Komponente<\/a>.)<\/li>\n<li><code>PanelBody<\/code> erstellt einen zusammenklappbaren Container, der auf- oder zugeklappt werden kann. (Siehe <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">die Referenz der Komponente<\/a>.)<\/li>\n<li><code>PanelRow<\/code> ist ein allgemeiner Container f\u00fcr Zeilen innerhalb einer <code>PanelBody<\/code>. (Siehe die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">Referenz der Komponente<\/a>.)<\/li>\n<li><code>TextControl<\/code> ist ein einzeiliges Feld, das f\u00fcr die Eingabe von freiem Text verwendet werden kann. (Siehe die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/text-control\/\" target=\"_blank\" rel=\"noopener noreferrer\">Referenz der Komponente<\/a>.)<\/li>\n<\/ul>\n<p>F\u00fchre nun den Befehl <code>npm run build<\/code> 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.<\/p>\n<figure id=\"attachment_190019\" aria-describedby=\"caption-attachment-190019\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190019 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/plugin-sidebar.png\" alt=\"Eine benutzerdefinierte Seitenleiste mit einem Metafeld\" width=\"1976\" height=\"558\"><figcaption id=\"caption-attachment-190019\" class=\"wp-caption-text\">Eine benutzerdefinierte Seitenleiste mit einem Metafeld<\/figcaption><\/figure>\n<p>Was ist, wenn du keine neue Seitenleiste brauchst, sondern dein benutzerdefiniertes Feld in der integrierten Seitenleiste des Beitrags anzeigen m\u00f6chtest? Dann musst du nur <code>PluginSidebar<\/code> durch <code>PluginDocumentSettingPanel<\/code> ersetzen. Das ist deine neue <code>index.js<\/code> Datei:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\n\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\n\nconst MyPluginSidebar = () =&gt; {\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginDocumentSettingPanel \n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ttitle=\"Book details\" \n\t\t\t\tclassName=\"my-sidebar-plugin\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>Das folgende Bild zeigt das Ergebnis.<\/p>\n<figure id=\"attachment_190023\" aria-describedby=\"caption-attachment-190023\" style=\"width: 1914px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190023 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/default-sidebar-panel.png\" alt=\"Ein eigenes Einstellungsfeld in der Post Sidebar\" width=\"1914\" height=\"1418\"><figcaption id=\"caption-attachment-190023\" class=\"wp-caption-text\">Ein eigenes Einstellungsfeld in der Post Sidebar<\/figcaption><\/figure>\n<h2>Ein Anwendungsfall: eine Blockmuster\u00fcberschreibung, um deinen Arbeitsablauf zu automatisieren<\/h2>\n<p>Du kannst nun einen Wert f\u00fcr das benutzerdefinierte Feld hinzuf\u00fcgen, der \u00fcber die Block Bindings API f\u00fcr die Verwendung mit Blockattributen verf\u00fcgbar ist. Du kannst zum Beispiel einen Absatzblock zu deinem Inhalt hinzuf\u00fcgen und das benutzerdefinierte Feld an das Attribut <code>content<\/code> des Absatzes binden.<\/p>\n<figure id=\"attachment_190026\" aria-describedby=\"caption-attachment-190026\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190026 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/block-attributes.png\" alt=\"Bindung von Metafeldern an Blockattribute\" width=\"1912\" height=\"1420\"><figcaption id=\"caption-attachment-190026\" class=\"wp-caption-text\">Bindung von Metafeldern an Blockattribute<\/figcaption><\/figure>\n<p>Es steht dir frei, den Wert deines benutzerdefinierten Feldes zu \u00e4ndern, und diese \u00c4nderungen werden automatisch auf den Inhalt deines Absatzes angewendet.<\/p>\n<p>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.<\/p>\n<p>Um einen Anhaltspunkt zu haben, erstellst du ein Muster mit mindestens einer \u00dcberschrift oder einem Absatz. In diesem Beispiel erstellen wir ein Blockmuster mit einem Spaltenblock, einem Bild, einer \u00dcberschrift und ein paar Zeilenbl\u00f6cken, die jeweils zwei Abs\u00e4tze enthalten.<\/p>\n<figure id=\"attachment_190040\" aria-describedby=\"caption-attachment-190040\" style=\"width: 2116px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190040 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/building-a-pattern.png\" alt=\"Ein Columns-Block mit einem Bild, einer \u00dcberschrift und zwei Zeilen\" width=\"2116\" height=\"1076\"><figcaption id=\"caption-attachment-190040\" class=\"wp-caption-text\">Ein Columns-Block mit einem Bild, einer \u00dcberschrift und zwei Zeilen<\/figcaption><\/figure>\n<p>Wenn du mit deinem Layout zufrieden bist, w\u00e4hlst du die Umbruchelemente aus und erstellst ein synchronisiertes Muster.<\/p>\n<figure id=\"attachment_190035\" aria-describedby=\"caption-attachment-190035\" style=\"width: 1334px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190035 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/create-pattern.png\" alt=\"Muster erstellen\" width=\"1334\" height=\"1184\"><figcaption id=\"caption-attachment-190035\" class=\"wp-caption-text\">Muster erstellen<\/figcaption><\/figure>\n<p>F\u00fcge einen Namen und eine Kategorie f\u00fcr das Blockmuster hinzu und stelle sicher, dass du es synchronisierst.<\/p>\n<figure id=\"attachment_190041\" aria-describedby=\"caption-attachment-190041\" style=\"width: 1386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190041 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/add-new-pattern.png\" alt=\"Neues Muster hinzuf\u00fcgen\" width=\"1386\" height=\"994\"><figcaption id=\"caption-attachment-190041\" class=\"wp-caption-text\">Neues Muster hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>Wenn du das Muster im Post-Editor erstellt hast, w\u00e4hle es aus und klicke in der Symbolleiste des Blocks auf <strong>Original bearbeiten<\/strong>. Du kannst auch zum Abschnitt <strong>Muster<\/strong> im Seiteneditor navigieren und das Muster unter <strong>Meine Muster<\/strong> oder in der Musterkategorie finden, die du zuvor festgelegt hast.<\/p>\n<p>\u00d6ffne den Code-Editor und suche den Block, den du mit deinem benutzerdefinierten Feld verbinden willst. F\u00fcge im Blockbegrenzer den folgenden Code ein:<\/p>\n<pre><code class=\"language-json\">&lt;!-- wp:heading {\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"core\/post-meta\",\n\t\t\t\t\"args\":{\n\t\t\t\t\t\"key\":\"meta_fields_book_title\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n} --&gt;<\/code><\/pre>\n<figure id=\"attachment_190042\" aria-describedby=\"caption-attachment-190042\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190042 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/block-pattern-in-code-editor.png\" alt=\"Das Blockmuster im Code-Editor\" width=\"1594\" height=\"1258\"><figcaption id=\"caption-attachment-190042\" class=\"wp-caption-text\">Das Blockmuster im Code-Editor<\/figcaption><\/figure>\n<p>Speichere das Muster und erstelle einen neuen Beitrag. F\u00fcge das Muster zu deinem Inhalt hinzu und setze einen Wert f\u00fcr das benutzerdefinierte Feld. Du solltest sehen, dass dieser Wert automatisch auf dein Muster angewendet wird.<\/p>\n<figure id=\"attachment_190044\" aria-describedby=\"caption-attachment-190044\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190044 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/bound-blocks-in-a-synced-block-pattern.png\" alt=\"Eine gebundene \u00dcberschrift in einem synchronisierten Muster\" width=\"2120\" height=\"1226\"><figcaption id=\"caption-attachment-190044\" class=\"wp-caption-text\">Eine gebundene \u00dcberschrift in einem synchronisierten Muster<\/figcaption><\/figure>\n<p>Jetzt kannst du mit diesem Plugin herumspielen. Dank der benutzerdefinierten Felder und der Block Bindings API kannst du weitere Felder und Steuerelemente hinzuf\u00fcgen, um deine Layouts automatisch zu f\u00fcllen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die Entwicklung eines benutzerdefinierten Blocks kann eine Herausforderung sein. Aber ist es wirklich n\u00f6tig, einen Block zu erstellen, wenn du mit einem Blockmuster mehr erreichen kannst?<\/p>\n<p>Mit den Fortschritten bei den Blockmustern und der Einf\u00fchrung leistungsstarker Entwicklerfunktionen wie der Block Bindings API ist es nicht mehr n\u00f6tig, eigene Bl\u00f6cke zu erstellen, um anspruchsvolle und funktionale Websites zu bauen. Mit einem einfachen Plugin und einem Blockmuster kannst du einen gro\u00dfen Teil deines Workflows automatisieren.<\/p>\n<p>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\u00e4che dessen, was du mit den robusten Funktionen, die WordPress jetzt bietet, erreichen kannst.<\/p>\n<p>Hast du diese Funktionen bereits erkundet und dem WordPress-Editor weitere Funktionen hinzugef\u00fcgt? Wenn ja, kannst du deine Erfahrungen und Erkenntnisse gerne unten in den Kommentaren mitteilen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8230;<\/p>\n","protected":false},"author":36,"featured_media":72351,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[983,999],"class_list":["post-72350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-technische-tipps","topic-wordpress-entwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man ein Gutenberg-Plugin erstellt<\/title>\n<meta name=\"description\" content=\"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen\" \/>\n<meta property=\"og:description\" content=\"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-20T08:16:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-23T14:18:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"15\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen\",\"datePublished\":\"2025-01-20T08:16:12+00:00\",\"dateModified\":\"2025-01-23T14:18:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\"},\"wordCount\":2194,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\",\"name\":\"Wie man ein Gutenberg-Plugin erstellt\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"datePublished\":\"2025-01-20T08:16:12+00:00\",\"dateModified\":\"2025-01-23T14:18:21+00:00\",\"description\":\"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man ein Gutenberg-Plugin erstellt","description":"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen","og_description":"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.","og_url":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-01-20T08:16:12+00:00","article_modified_time":"2025-01-23T14:18:21+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen","datePublished":"2025-01-20T08:16:12+00:00","dateModified":"2025-01-23T14:18:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/"},"wordCount":2194,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/","url":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/","name":"Wie man ein Gutenberg-Plugin erstellt","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","datePublished":"2025-01-20T08:16:12+00:00","dateModified":"2025-01-23T14:18:21+00:00","description":"Erfahre, wie du komplexe Layouts einfacher erstellen kannst, indem du ein Gutenberg-Plugin erstellst, um die Funktionalit\u00e4t des Blockeditors zu verbessern.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Wie man ein Gutenberg-Plugin erstellt, um dem Block-Editor Funktionalit\u00e4t hinzuzuf\u00fcgen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=72350"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72350\/revisions"}],"predecessor-version":[{"id":72411,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72350\/revisions\/72411"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72350\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/72351"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=72350"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=72350"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=72350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}