{"id":75863,"date":"2026-04-06T08:19:33","date_gmt":"2026-04-06T07:19:33","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=75863&#038;preview=true&#038;preview_id=75863"},"modified":"2026-04-07T08:20:08","modified_gmt":"2026-04-07T07:20:08","slug":"php-only-gutenberg-bloecke","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/","title":{"rendered":"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt"},"content":{"rendered":"<p>Jahrelang erforderte die Entwicklung von Gutenberg-Bl\u00f6cken ein tiefgreifendes Verst\u00e4ndnis von Technologien wie React und Node.js sowie komplexe Build-Schritte und JavaScript-Tools.<\/p>\n<p>Die WordPress-Entwicklung entwickelt sich jedoch weiter, und du kannst Gutenberg-Bl\u00f6cke jetzt komplett in PHP erstellen und verwalten.<\/p>\n<p>Das ist besonders f\u00fcr Entwickler\/innen von Vorteil, die React und serverseitige JavaScript (JS)-Entwicklung vermeiden wollen. Es senkt die Lernkurve, rationalisiert die Erfahrung der Entwickler und erm\u00f6glicht eine h\u00f6here Leistung, da unn\u00f6tiger Front-End-Skript-Overhead entf\u00e4llt.<\/p>\n<p>In den folgenden Abschnitten erf\u00e4hrst du, wie du die Vorteile dieser neuen Funktionen nutzen kannst, um reine PHP-Bl\u00f6cke in Gutenberg zu erstellen. Dabei lernst du, wie du schlankere, schnellere und leichter zu wartende WordPress-Websites erstellen kannst.<\/p>\n<p>Ziemlich aufregend, oder? Dann fangen wir an.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Bitte beachte, dass sich die PHP-Bl\u00f6cke in diesem Artikel noch in der Experimentierphase befinden und noch ge\u00e4ndert werden k\u00f6nnen. <strong>Verwende diese Funktion nicht in der Produktion!<\/strong><\/p>\n<\/aside>\n<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Was sind PHP-only-Bl\u00f6cke und warum sind sie wichtig?<\/h2>\n<p>Die Erstellung eines Gutenberg-Blocks erforderte bisher fortgeschrittene serverseitige JavaScript- und React-Programmierkenntnisse. Das war ein Hindernis f\u00fcr die Einf\u00fchrung des Block-Editors bei langj\u00e4hrigen WordPress-Entwicklern, die nicht \u00fcber die n\u00f6tigen <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-react-js\/\">React-<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-node-js\/\">Node.js-Kenntnisse<\/a> verf\u00fcgen.<\/p>\n<p>Das \u00e4ndert sich jetzt. Ab <a href=\"https:\/\/make.wordpress.org\/core\/2025\/10\/08\/whats-new-in-gutenberg-21-8-08-october\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 21.8<\/a> kannst du Gutenberg-Bl\u00f6cke ganz einfach mit <a href=\"https:\/\/kinqsta.com\/de\/blog\/php-benchmarks\/\">PHP<\/a> registrieren. Damit entf\u00e4llt die komplizierte Einrichtung einer Node.js-Umgebung f\u00fcr diejenigen, die nicht mit serverseitigem JavaScript arbeiten.<\/p>\n<p>Mit der reinen PHP-Blockregistrierung kannst du Bl\u00f6cke sowohl im Editor als auch im Frontend mit demselben PHP-Code registrieren und anzeigen. Das ermutigt Websites, die hybride Themes oder traditionelle PHP-Funktionen und <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-shortcodes\/\">Shortcodes<\/a> verwenden, den Block-Editor zu \u00fcbernehmen und weiterzuentwickeln.<\/p>\n<p>Wenn du mehr dar\u00fcber erfahren m\u00f6chtest, findest du hier die wichtigsten GitHub-PRs, die sich mit PHP-only-Bl\u00f6cken besch\u00e4ftigen.<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/71794\" target=\"_blank\" rel=\"noopener noreferrer\">Registrierung von reinen PHP-Bl\u00f6cken zulassen<\/a>: Dieser PR f\u00fchrt die automatische serverseitige Registrierung von Bl\u00f6cken ein und benennt die <code>auto_ssr<\/code>-Unterst\u00fctzung in <code>auto_register<\/code> um.<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73556\" target=\"_blank\" rel=\"noopener noreferrer\">Nur-PHP-Bl\u00f6cke: Alle Metadaten der PHP-Registrierung werden an den Client weitergegeben<\/a>: Bei reinen PHP-Bl\u00f6cken mit <code>auto_register<\/code>-Unterst\u00fctzung werden jetzt alle Metadaten aus der PHP-Registrierung an den Client weitergegeben.<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74102\">Nur-PHP-Bl\u00f6cke: Inspektor-Steuerelemente aus Attributen generieren<\/a>: Mit diesem PR wird die automatische Generierung der Benutzeroberfl\u00e4che (Inspector Controls) auf der Grundlage der auf dem Server deklarierten Attribute eingef\u00fchrt.<\/li>\n<\/ul>\n<h2>Wie du deinen ersten reinen PHP-Block in Gutenberg erstellst<\/h2>\n<p>Wenn ein Block nur auf der Serverseite registriert wird &#8211; ohne JS-Dateien &#8211; und das neue Flag <code>auto_register<\/code> support auf <code>true<\/code> gesetzt ist, verwendet der Editor automatisch die Komponente <code>ServerSideRender<\/code>, um den Block auf der Clientseite zu registrieren und die Blockvorschau anzuzeigen. Der Inhalt des Blocks wird jetzt sowohl im Editor als auch im Frontend direkt aus dem PHP-Code generiert.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Die in diesem Artikel gezeigten Beispiele funktionieren nur, wenn du <a href=\"https:\/\/make.wordpress.org\/core\/2025\/12\/17\/gutenberg-22-3-december-17\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 22.3<\/a>+ auf deiner Entwicklungswebsite installiert hast.<\/p>\n<\/aside>\n\n<p>Zur Veranschaulichung ist hier ein einfaches PHP-Beispiel, das einen Block mit der reinen PHP-Methode registriert.<\/p>\n<pre><code class=\"language-php\">\/**\n * Render callback (frontend and editor)\n *\/\nfunction my_php_only_block_render( $attributes ) {\n\treturn '&lt;div&gt;\n\t\t&lt;h3&gt;\ud83d\ude80 PHP-only Block&lt;\/h3&gt;\n\t\t&lt;p&gt;This block was created with only PHP!&lt;\/p&gt;\n\t&lt;\/div&gt;';\n}\n\n\/**\n * Register the block on the 'init' hook.\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'my-plugin\/php-only-test-block', array(\n\t\t'title'           =&gt; 'My PHP-only Block',\n\t\t'icon'            =&gt; 'welcome-learn-more',\n\t\t'category'        =&gt; 'text',\n\t\t'render_callback' =&gt; 'my_php_only_block_render',\n\t\t'supports'        =&gt; array(\n\t\t\t\/\/ Automatically registers the block in the Editor JS (previously auto_ssr)\n\t\t\t'auto_register' =&gt; true, \n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Du kannst diesen Code ausprobieren, indem du ihn kopierst und in die Hauptdatei eines benutzerdefinierten Plugins einf\u00fcgst. Nachdem du das Plugin aktiviert hast, solltest du den &#8222;My PHP-Only Block&#8220; im Block-Inserter sehen.<\/p>\n<figure id=\"attachment_206054\" aria-describedby=\"caption-attachment-206054\" style=\"width: 1644px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206054 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/basic-php-only-block.png\" alt=\"Ein einfacher PHP-only-Block im Block-Editor\" width=\"1644\" height=\"656\"><figcaption id=\"caption-attachment-206054\" class=\"wp-caption-text\">Ein einfacher PHP-only-Block im Block-Editor<\/figcaption><\/figure>\n<p>Die <a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/#register-the-block-on-the-server\">Funktion <code>register_block_type<\/code><\/a> registriert einen Blocktyp auf dem Server. Sie enth\u00e4lt jetzt <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73556\" target=\"_blank\" rel=\"noopener noreferrer\">die neue <code>auto_register-Unterst\u00fctzung<\/code><\/a>, die Gutenberg anweist, Metadaten aus der PHP-Registrierung zu \u00fcbergeben.<\/p>\n<p>Die Funktion nimmt zwei Argumente entgegen:<\/p>\n<ul>\n<li>Den Namen des Blocktyps, einschlie\u00dflich des Namensraums. In diesem Beispiel lautet der Blockname <code>my-plugin\/php-only-test-block<\/code>.<\/li>\n<li>Ein Array mit Argumenten f\u00fcr den Blocktyp. Im obigen Code legen wir <code>title<\/code>, <code>icon<\/code>, <code>category<\/code>, <code>render_callback<\/code>, und <code>supports<\/code>\u00a0fest. F\u00fcr PHP-only-Blocktypen muss das Array <code>supports<\/code> den Wert <code>\"auto_register\" =&gt; true<\/code> enthalten.<\/li>\n<\/ul>\n<p>PHP-Bl\u00f6cke vereinfachen nicht nur die Erstellung von benutzerdefinierten Blocktypen und ihre Integration in hybride Themes, sondern k\u00f6nnen auch als Wrapper f\u00fcr \u00e4ltere PHP-Funktionen und Shortcodes verwendet werden. Dar\u00fcber hinaus er\u00f6ffnet die Verwendung von reinen PHP-Bl\u00f6cken neue M\u00f6glichkeiten f\u00fcr benutzerdefinierte Integrationen und serverseitige Funktionen.<\/p>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/71792\">H\u00e9ctor Priethor<\/a> meint dazu,<\/p>\n<blockquote><p>Ein reines PHP-Registrierungsmodell w\u00fcrde die Mindestanforderungen f\u00fcr die Entwicklung von Bl\u00f6cken vereinfachen, sie einem breiteren Entwicklerpublikum zug\u00e4nglich machen und dazu beitragen, dass das Block-\u00d6kosystem \u00fcber die fortgeschrittene JavaScript-Nutzung hinaus w\u00e4chst.<\/p><\/blockquote>\n<h2>Verwendung von Attributen zur Erstellung der Blockeinstellungen<\/h2>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74102\" target=\"_blank\" rel=\"noopener noreferrer\">PR 74102<\/a> erm\u00f6glicht die automatische Generierung von Inspektor-Steuerelementen aus Block-Attributdefinitionen. So k\u00f6nnen Nutzer\/innen das Aussehen und die Funktionalit\u00e4t von reinen PHP-Bl\u00f6cken wie bei jedem Gutenberg-Block, der \u00fcber JavaScript registriert wurde, konfigurieren.<\/p>\n<p>Bisher musstest du manuell eine <code>edit.js<\/code>-Datei in React erstellen und verschiedene Einstellungselemente mit React-Komponenten definieren.<\/p>\n<p>Jetzt liest Gutenberg die Attributdefinitionen und erzeugt automatisch die entsprechenden Eingabefelder im WordPress-Editor.<\/p>\n<p>Das System ordnet die im <code>attributes<\/code>-Array definierten Datentypen den <code>DataForm<\/code>-Felddefinitionen zu.<\/p>\n<ul>\n<li><code>type' =&gt; 'string'<\/code> erzeugt ein Textfeld.<\/li>\n<li><code>'type' =&gt; 'number'<\/code> erzeugt ein Zahlenfeld.<\/li>\n<li><code>'type' =&gt; 'integer'<\/code> erzeugt ein Ganzzahlfeld.<\/li>\n<li><code>'type' =&gt; 'boolean'<\/code> erzeugt ein Ankreuzfeld.<\/li>\n<li><code>'type' =&gt; 'string'<\/code> mit <code>'enum' =&gt; array()<\/code> erzeugt ein Auswahlfeld.<\/li>\n<\/ul>\n<p>Du wirst feststellen, dass du nur wenige Steuerelemente verwenden kannst. Wenn du bestimmte Steuerelemente wie <code>RichText<\/code>, <code>RangeControl<\/code> oder <code>ToggleControl<\/code> ben\u00f6tigst, musst du dich trotzdem f\u00fcr den JS\/React-Ansatz entscheiden.<\/p>\n<p>Dieser Zusatz hat jedoch erhebliche Vorteile. Die Einstiegsh\u00fcrden werden weiter gesenkt, und du musst dich nicht mit React, Webpack oder NPM auseinandersetzen, um benutzerdefinierte Bl\u00f6cke mit einfachen editierbaren Optionen zu erstellen.<\/p>\n<p>Im folgenden Beispiel erweitern wir den im vorherigen Abschnitt gezeigten Beispielblock, indem wir einige Attribute hinzuf\u00fcgen.<\/p>\n<pre><code class=\"language-php\">\/**\n * 1. Define the block's HTML output.\n *\/\nfunction my_php_only_block_render( $attributes ) {\n\t\/\/ Extract attributes\n\t$title   = esc_html( $attributes['blockTitle'] );\n\t$count   = intval( $attributes['itemCount'] );\n\t$enabled = $attributes['isEnabled']; \/\/ Boolean from the ToggleControl\n\t$size    = esc_attr( $attributes['displaySize'] );\n\t\n\t\/\/ Start building the output\n\t$output = sprintf( '&lt;div class=\"my-php-block\" style=\"font-size: %s; border: 1px solid #ccc; padding: 15px;\"&gt;', \n\t\t$size === 'large' ? '20px' : ($size === 'small' ? '12px' : '16px') \n\t);\n\t\n\t$output .= sprintf( '&lt;h3&gt;\ud83d\ude80 %s&lt;\/h3&gt;', $title );\n\t\n\t\/\/ If the toggle is ON, show the list. If OFF, show a fallback message.\n\tif ( $enabled ) {\n\t\t$output .= '&lt;ul&gt;';\n\t\tfor ( $i = 1; $i &lt;= $count; $i++ ) {\n\t\t\t$output .= sprintf( '&lt;li&gt;Item %d&lt;\/li&gt;', $i );\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t} else {\n\t\t$output .= '&lt;p&gt;&lt;em&gt;The list is currently disabled.&lt;\/em&gt;&lt;\/p&gt;';\n\t}\n\t\n\t$output .= '&lt;\/div&gt;';\n\treturn $output;\n}\n\n\/**\n * 2. Register the block on 'init'.\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'my-plugin\/php-only-test-block', array(\n\t\t'title'           =&gt; 'My PHP-only Block',\n\t\t'icon'            =&gt; 'welcome-learn-more',\n\t\t'category'        =&gt; 'text',\n\t\t'render_callback' =&gt; 'my_php_only_block_render',\n\n\t\t\/\/ Attributes used to generate the Inspector UI\n\t\t'attributes'      =&gt; array(\n\t\t\t'blockTitle'  =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'default' =&gt; 'PHP-only Block',\n\t\t\t),\n\t\t\t'itemCount'   =&gt; array(\n\t\t\t\t'type'    =&gt; 'integer',\n\t\t\t\t'default' =&gt; 3,\n\t\t\t),\n\t\t\t'isEnabled'   =&gt; array(\n\t\t\t\t'type'    =&gt; 'boolean',\n\t\t\t\t'default' =&gt; true,\n\t\t\t),\n\t\t\t'displaySize' =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'enum'    =&gt; array( 'small', 'medium', 'large' ),\n\t\t\t\t'default' =&gt; 'medium',\n\t\t\t),\n\t\t),\n\n\t\t'supports'        =&gt; array(\n\t\t\t'auto_register' =&gt; true, \n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Ein kurzer Blick auf diesen Code zeigt, wie einfach es ist, einen benutzerdefinierten Block mit all seinen Konfigurationseinstellungen mithilfe der neuen API zu registrieren. Attribute werden jetzt nicht nur verwendet, um vom Benutzer eingegebene Daten zu speichern, sondern auch, um das UI-Schema zu definieren. Der obige Code macht Folgendes:<\/p>\n<ul>\n<li>Die Funktion <code>register_block_type<\/code> registriert den Blocktyp <code>my-plugin\/php-only-test-block<\/code>.<\/li>\n<li>Das zweite Argument, das der Funktion \u00fcbergeben wird, ist ein Array mit den folgenden Elementen: <code>title<\/code>, <code>icon<\/code>, <code>category<\/code>, <code>render_callback<\/code>, <code>attributes<\/code> und <code>supports<\/code>.<\/li>\n<li>Das Array <code>attributes<\/code> enth\u00e4lt die Attribute des Blocks. Im obigen Beispiel enth\u00e4lt das Array die Elemente <code>blockTitle<\/code>, <code>itemCount<\/code>, <code>isEnabled<\/code> und <code>displaySize<\/code>.<\/li>\n<li><code>auto_register' =&gt; true<\/code> aktiviert die serverseitige automatische Registrierung.<\/li>\n<\/ul>\n<p>So funktioniert die Callback-Funktion <code>my_php_only_block_render<\/code>:<\/p>\n<ul>\n<li>Zuerst extrahiert die Funktion die Attributwerte aus dem Array <code>$attributes<\/code> und ordnet sie den Variablen <code>$title<\/code>, <code>$count<\/code>, <code>$enabled<\/code> und <code>$size<\/code> zu.<\/li>\n<li>Dann generiert sie den Inhalt des Blocks.<\/li>\n<\/ul>\n<p>Hier ist das Ergebnis auf dem Bildschirm zu sehen:<\/p>\n<figure id=\"attachment_206110\" aria-describedby=\"caption-attachment-206110\" style=\"width: 2074px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206110 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-block-settings.png\" alt=\"Ein PHP-only-Block mit Blockeinstellungen\" width=\"2074\" height=\"1102\"><figcaption id=\"caption-attachment-206110\" class=\"wp-caption-text\">Ein PHP-only-Block mit Blockeinstellungen<\/figcaption><\/figure>\n<h2>Ein praktisches Beispiel f\u00fcr einen reinen PHP-Block<\/h2>\n<p>Auch wenn es viele Szenarien gibt, in denen JavaScript immer noch erforderlich ist, kannst du mit reinen PHP-Bl\u00f6cken schon viel erreichen, vor allem wenn du sie mit Block-Props verwendest.<\/p>\n<p>Im folgenden Beispiel verwenden wir die <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Funktion <code>get_block_wrapper_attributes()<\/code><\/a>, die eine Reihe von Attributen f\u00fcr den aktuell gerenderten Block generiert. Der Block erh\u00e4lt automatisch die vom Benutzer eingestellten Farben, Rahmen und Schatten und wendet die entsprechenden Stile auf den Hauptcontainer an. Auf diese Weise kann der Block \u00fcber die nativen Tools von Gutenberg angepasst werden, genau wie ein React-basierter Block.<\/p>\n<p>Um zu sehen, wie das funktioniert, erstelle einen Ordner <code>smart-pricing-widget<\/code> auf deinem Computer. In diesem Ordner erstellst du eine <code>style.css-Datei<\/code> mit dem folgenden CSS-Code:<\/p>\n<pre><code class=\"language-css\">\/* style.css *\/\n.pricing-card {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\ttext-align: center;\n\tbox-sizing: border-box;\n}\n\n.pricing-card h3 {\n\tmargin: 0;\n\tfont-size: 1.5rem;\n}\n\n.pricing-card .price-value {\n\tfont-size: 3.5rem;\n\tfont-weight: 800;\n\tmargin: 15px 0;\n}\n\n.pricing-card ul {\n\tlist-style: none;\n\tpadding: 25px 0;\n\tmargin: 20px 0;\n\tbreite: 100%;\n\tborder-top: 1px solid rgba(128,128,128,0.3);\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.pricing-card li {\n\tanzeige: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 10px;\n}\n\n.pricing-card .cta-button {\n\tmargin-top: auto;\n\tpadding: 15px 25px;\n\tborder-radius: 8px;\n\ttext-decoration: none;\n\tfont-weight: bold;\n\t\u00fcbergang: Deckkraft 0,2s;\n}\n\n.pricing-card .cta-button:hover {\n\tdeckkraft: 0,8;\n}\n\n\/* Themenvariationen *\/\n.pricing-card.theme-light { background-color: #ffffff; color: #000000; }\n.pricing-card.theme-light .cta-button { background-color: #21759b; Farbe: #ffffff; }\n\n.pricing-card.theme-dark { background-color: #1a1a1a; color: #ffffff; }\n.pricing-card.theme-dark .cta-button { background-color: #ffffff; color: #1a1a1a; }\n\n.pricing-card.theme-blue { background-color: #21759b; color: #ffffff; }\n.pricing-card.theme-blue .cta-button { background-color: #000000; color: #ffffff; }\n\n\/* Utility Classes *\/\n.pricing-card .is-full-width {\n\tbreite: 100%;\n\tanzeige: block;\n\talign-self: stretch;\n}<\/code><\/pre>\n<p>Wir werden diesen Code nicht weiter kommentieren, da es sich um ein einfaches Stylesheet f\u00fcr deinen Widget-Block handelt.<\/p>\n<p>Erstelle nun die Hauptdatei f\u00fcr dein Plugin, nenne sie <code>smart-pricing-widget.php<\/code> und f\u00fcge den folgenden Code ein:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Smart Pricing Widget\n * Plugin URI:  https:\/\/example.com\/\n * Description: PHP-only Pricing Table block\n * Version:     1.2.0\n * Author:      Your Name\n * Text Domain: smart-pricing-widget\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) exit;\n\n\/**\n * Render callback\n *\/\nfunction render_smart_pricing_block( $attributes ) {\n\t$plan_name = esc_html( $attributes['planName'] );\n\t$price     = intval( $attributes['price'] );\n\t$theme     = $attributes['blockTheme'];\n\t$btn_text  = esc_html( $attributes['buttonText'] );\n\t$btn_size  = $attributes['buttonSize'];\n\n\t$features_raw = $attributes['featuresList'];\n\t$features_array = array_filter( array_map( 'trim', explode( ',', $features_raw ) ) );\n\n\t$wrapper_attributes = wp_kses_data( get_block_wrapper_attributes( array(\n\t\t'class' =&gt; \"pricing-card theme-{$theme}\",\n\t) ) );\n\n\t$output = sprintf( '&lt;div %s&gt;', $wrapper_attributes );\n\t$output .= sprintf( '&lt;h3&gt;%s&lt;\/h3&gt;', $plan_name );\n\t$output .= sprintf( '&lt;div class=\"price-value\"&gt;\u20ac%d&lt;\/div&gt;', $price );\n\n\tif ( ! empty( $features_array ) ) {\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $features_array as $feature ) {\n\t\t\t$is_checked = strpos( $feature, '+' ) === 0;\n\t\t\t$clean_text = esc_html( ltrim( $feature, '+- ' ) );\n\t\t\t$icon       = $is_checked ? '\u2705' : '\u274c';\n\t\t\t$style      = $is_checked ? '' : 'style=\"opacity: 0.6;\"';\n\t\t\t\n\t\t\t$output .= sprintf( '&lt;li %s&gt;&lt;span&gt;%s&lt;\/span&gt; %s&lt;\/li&gt;', $style, $icon, $clean_text );\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\n\t$btn_class = 'cta-button' . ( $btn_size === 'full' ? ' is-full-width' : '' );\n\t$output .= sprintf( '&lt;a href=\"#\" class=\"%s\"&gt;%s&lt;\/a&gt;', esc_attr( $btn_class ), $btn_text );\n\t$output .= '&lt;\/div&gt;';\n\n\treturn $output;\n}\n\n\/**\n * Register Assets and Block\n *\/\nadd_action( 'init', function() {\n\t\/\/ 1. Register the CSS file\n\twp_register_style(\n\t\t'smart-pricing-style',\n\t\tplugins_url( 'style.css', __FILE__ ),\n\t\tarray(),\n\t\t'1.2.0'\n\t);\n\n\t\/\/ 2. Register the Block\n\tregister_block_type( 'tutorial\/smart-pricing', array(\n\t\t'api_version'     =&gt; 3,\n\t\t'title'           =&gt; 'Pricing Card',\n\t\t'icon'            =&gt; 'cart',\n\t\t'category'        =&gt; 'widgets',\n\t\t'render_callback' =&gt; 'render_smart_pricing_block',\n\t\t\/\/ Link the registered style handle here\n\t\t'style'           =&gt; 'smart-pricing-style',\n\t\t'attributes'      =&gt; array(\n\t\t\t'planName'     =&gt; array( 'type' =&gt; 'string', 'default' =&gt; 'Professional' ),\n\t\t\t'price'        =&gt; array( 'type' =&gt; 'integer', 'default' =&gt; 49 ),\n\t\t\t'buttonText'   =&gt; array( 'type' =&gt; 'string', 'default' =&gt; 'Choose Plan' ),\n\t\t\t'buttonSize'   =&gt; array( 'type' =&gt; 'string', 'enum' =&gt; array( 'auto', 'full' ), 'default' =&gt; 'auto' ),\n\t\t\t'blockTheme'   =&gt; array( 'type' =&gt; 'string', 'enum' =&gt; array( 'light', 'dark', 'blue' ), 'default' =&gt; 'light' ),\n\t\t\t'featuresList' =&gt; array( 'type' =&gt; 'string', 'default' =&gt; \"+ Support, + Updates, - Domain\" ),\n\t\t),\n\t\t'supports'        =&gt; array(\n\t\t\t'auto_register' =&gt; true,\n\t\t\t'color'         =&gt; array( 'background' =&gt; true, 'text' =&gt; true ),\n\t\t\t'spacing'       =&gt; array( 'margin' =&gt; true, 'padding' =&gt; true ),\n\t\t\t'typography'    =&gt; array( 'fontSize' =&gt; true ),\n\t\t\t'shadow'        =&gt; true,\n\t\t\t'__experimentalBorder' =&gt; array( 'color' =&gt; true, 'radius' =&gt; true, 'style' =&gt; true, 'width' =&gt; true ),\n\t\t\t'border'        =&gt; array( 'color' =&gt; true, 'radius' =&gt; true, 'style' =&gt; true, 'width' =&gt; true ),\n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Dieses Skript enth\u00e4lt zwei Funktionen. Die Funktion <code>register_block_type()<\/code> ist der Motor deines Plugins. Hier sind ihre wichtigsten Elemente:<\/p>\n<ul>\n<li>Das erste Argument ist der Blockbezeichner, einschlie\u00dflich des Namensraums (<code>tutorial\/smart-pricing<\/code>).<\/li>\n<li>Das zweite Argument ist ein Array von Argumenten. Im obigen Code haben wir die API-Version, den Titel, das Symbol, die Kategorie, den Render-Callback, den Stil, die Attribute und die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">Unterst\u00fctzung<\/a> festgelegt.<\/li>\n<li>Die Attribute im Array erzeugen die Steuerelemente, die die Nutzer verwenden, um Inhalte hinzuzuf\u00fcgen und den Block zu konfigurieren. Das Element <code>type<\/code> gibt die Art des Steuerelements an, das dem Blockinspektor hinzugef\u00fcgt werden soll. In diesem Beispiel sind dies Textfelder (<code>'type' =&gt; 'string'<\/code>), eine Ganzzahl (<code>'type' =&gt; 'integer'<\/code>) und einige Dropdown-Men\u00fcs (<code>'type' =&gt; 'string', 'enum' =&gt; array()<\/code>).<\/li>\n<li>Die Array-Elemente <code>supports<\/code> f\u00fcgen Funktionen hinzu, mit denen der Blockstil angepasst werden kann. Wie bereits erw\u00e4hnt, ist die einzige Unterst\u00fctzung, die in einem reinen PHP-Block ben\u00f6tigt wird, <code>auto_register<\/code>, das die automatische Erstellung der Benutzeroberfl\u00e4che f\u00fcr benutzerdefinierte Attribute erm\u00f6glicht. Zu den anderen oben angegebenen Unterst\u00fctzungen geh\u00f6ren Farbe, Abstand, Typografie, Schatten und Rahmen.<\/li>\n<\/ul>\n<p>Die Callback-Funktion <code>render_smart_pricing_block()<\/code> erzeugt das HTML des Blocks. Hier ist eine detaillierte Beschreibung, was diese Funktion macht:<\/p>\n<ul>\n<li>Sie extrahiert und bereinigt die Blockattribute und f\u00fcgt dann den CSS-Code hinzu, der das Erscheinungsbild des Blocks im Frontend und im Editor erzeugt.<\/li>\n<li>Die Merkmale, die in dem Block angezeigt werden sollen (<code>$attributes['featuresList'];<\/code>), werden separat behandelt. Derzeit ist es nicht m\u00f6glich, erweiterte Steuerelemente in die Seitenleiste der Blockeinstellungen einzuf\u00fcgen. Um eine Liste zu erstellen, z. B. eine Liste von Merkmalen, kannst du nur ein einfaches Textfeld verwenden. In diesem Beispiel musst du die Produktmerkmale manuell eingeben, getrennt durch Kommas.<\/li>\n<li>Die Variable <code>$wrapper_attributes<\/code> ist ein Container f\u00fcr die Wrapper-Attribute, die von der <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">Funktion <code>get_block_wrapper_attributes<\/code><\/a> bereitgestellt werden. Diese Funktion f\u00fcgt nicht nur die im Code angegebenen Klassen hinzu (<code>pricing-card theme-{$theme}<\/code>), sondern ruft automatisch alle Stilanpassungen ab, die der Benutzer im Blockinspektor einstellt, einschlie\u00dflich Farben, Rahmen, Polsterung, Rand, Schatten, Typografie und die Standardblockklassen (<code>wp-block-tutorial-smart-pricing<\/code>).<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_kses_data\/\"><code>wp_kses_data<\/code><\/a> stellt sicher, dass der String keine b\u00f6sartigen Tags oder Skripte (XSS) enth\u00e4lt.<\/li>\n<li>Der Rest des Codes erzeugt den Blockinhalt.<\/li>\n<\/ul>\n<p>Aktiviere das Plugin und erstelle einen neuen Beitrag oder eine neue Seite. \u00d6ffne den Block-Inserter und scrolle nach unten zum Abschnitt Widgets. Hier solltest du deinen &#8222;Pricing Card&#8220;-Block sehen, der durch ein Einkaufswagen-Symbol gekennzeichnet ist.<\/p>\n<figure id=\"attachment_206128\" aria-describedby=\"caption-attachment-206128\" style=\"width: 2034px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206128 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-block-example.png\" alt=\"Ein PHP-only-Block im Block-Editor\" width=\"2034\" height=\"1322\"><figcaption id=\"caption-attachment-206128\" class=\"wp-caption-text\">Ein PHP-only-Block im Block-Editor<\/figcaption><\/figure>\n<p>Das Bild oben zeigt den Block mit dem Standardtheme Light.<\/p>\n<p>Auf dem Bild unten siehst du die dunkle Version des Blocks und die Einstellungen, die du in deinem Plugin angegeben hast.<\/p>\n<figure id=\"attachment_206129\" aria-describedby=\"caption-attachment-206129\" style=\"width: 2188px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206129 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-dark-theme-block-settings.png\" alt=\"Der PHP-only-Block mit Blockeinstellungen\" width=\"2188\" height=\"1652\"><figcaption id=\"caption-attachment-206129\" class=\"wp-caption-text\">Der PHP-only-Block mit Blockeinstellungen<\/figcaption><\/figure>\n<p>Das folgende Bild zeigt die Stilkontrollen, die du mit den Blockunterst\u00fctzungen hinzugef\u00fcgt hast.<\/p>\n<figure id=\"attachment_206130\" aria-describedby=\"caption-attachment-206130\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206130 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-customized-dark-theme.png\" alt=\"Das dunkle Theme des PHP-only-Blocks mit benutzerdefinierten Farben\" width=\"2104\" height=\"1310\"><figcaption id=\"caption-attachment-206130\" class=\"wp-caption-text\">Das dunkle Theme des PHP-only-Blocks mit benutzerdefinierten Farben<\/figcaption><\/figure>\n<p>Es ist auch erw\u00e4hnenswert, dass Stile, die von Unterst\u00fctzern hinzugef\u00fcgt werden, die Stile des Blockthemas au\u00dfer Kraft setzen. Dadurch kann das Erscheinungsbild des Blocks besser angepasst werden, wie das folgende Bild zeigt:<\/p>\n<figure id=\"attachment_206131\" aria-describedby=\"caption-attachment-206131\" style=\"width: 2406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206131 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/customized-php-only-blocks.png\" alt=\"Eine Preistabelle f\u00fcr 3 Leistungsstufen mit drei Instanzen deines PHP-only-Blocks\" width=\"2406\" height=\"1362\"><figcaption id=\"caption-attachment-206131\" class=\"wp-caption-text\">Eine Preistabelle f\u00fcr 3 Leistungsstufen mit drei Instanzen deines PHP-only-Blocks<\/figcaption><\/figure>\n<h2>Legacy-Shortcodes in Gutenberg-Bl\u00f6cke mit reinem PHP umwandeln<\/h2>\n<p>Eine der direktesten Verwendungen von PHP-Bl\u00f6cken ist die Verwendung als Shortcode-Wrapper. Mit Gutenberg kannst du zwar immer noch Shortcodes in deinen Inhalten verwenden, aber du musst deinen Shortcode manuell in einen Shortcode-Block einf\u00fcgen, was nicht gerade ein angenehmes Erlebnis ist.<\/p>\n<p>Angenommen, du hast den folgenden Shortcode:<\/p>\n<pre><code class=\"language-php\">function my_custom_alert_shortcode( $atts ) {\n\t$options = shortcode_atts( array(\n\t\t'type'    =&gt; 'info',\n\t\t'message' =&gt; 'Default alert message',\n\t), $atts );\n\n\t$styles = array(\n\t\t'info'    =&gt; 'background: #d1ecf1; color: #0c5460; border-color: #bee5eb;',\n\t\t'warning' =&gt; 'background: #fff3cd; color: #856404; border-color: #ffeeba;',\n\t\t'error'   =&gt; 'background: #f8d7da; color: #721c24; border-color: #f5c6cb;'\n\t);\n\n\t$style = $styles[ $options['type'] ] ?? $styles['info'];\n\n\treturn sprintf(\n\t\t'&lt;div class=\"sc-alert-box\" style=\"%s padding: 20px; border: 1px solid; border-radius: 6px; margin: 10px 0;\"&gt;\n\t\t\t&lt;strong style=\"text-transform: uppercase;\"&gt;%s:&lt;\/strong&gt; %s\n\t\t&lt;\/div&gt;',\n\t\tesc_attr( $style ),\n\t\tesc_html( $options['type'] ),\n\t\tesc_html( $options['message'] )\n\t);\n}\nadd_shortcode( 'sc_alert', 'my_custom_alert_shortcode' );<\/code><\/pre>\n<p>Dieser Code erzeugt eine einfache Box, die du mit dem folgenden Shortcode in deinen Inhalt einf\u00fcgen kannst:<\/p>\n<pre><code class=\"language-text\">[sc_alert type=\"alert\" message=\"Hallo\"]<\/code><\/pre>\n<p>In Gutenberg verwendest du einen Shortcode-Block, um das Feld in deinen Inhalt einzuf\u00fcgen, wie in der folgenden Abbildung zu sehen ist:<\/p>\n<figure id=\"attachment_206137\" aria-describedby=\"caption-attachment-206137\" style=\"width: 1304px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206137\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/shortcode-block.png\" alt=\"A Shortcode block\" width=\"1304\" height=\"272\"><figcaption id=\"caption-attachment-206137\" class=\"wp-caption-text\">Ein Shortcode-Block<\/figcaption><\/figure>\n<p>Mit reinen PHP-Bl\u00f6cken \u00e4ndert sich das Szenario komplett. Jetzt kannst du deinen Shortcode in einen reinen PHP-Block in Gutenberg einbinden und ihn \u00fcber die UI-Steuerung konfigurieren. Hier ist der Code, den du zu deinem Plugin hinzuf\u00fcgen musst:<\/p>\n<pre><code class=\"language-php\">\/**\n * Rendering callback\n *\/\nfunction render_shortcode_alert_wrapper_block( $attributes ) {\n\n\t$type    = esc_attr( $attributes['alertType'] );\n\t$message = esc_attr( $attributes['alertMessage'] );\n\n\t$shortcode_string = sprintf( '[sc_alert type=\"%s\" message=\"%s\"]', $type, $message );\n\n\t$wrapper_attributes = wp_kses_data( get_block_wrapper_attributes( array(\n\t\t'class' =&gt; 'wp-block-shortcode-alert-wrapper',\n\t) ) );\n\n\treturn sprintf(\n\t\t'&lt;div %s&gt;%s&lt;\/div&gt;',\n\t\t$wrapper_attributes,\n\t\tdo_shortcode( $shortcode_string )\n\t);\n}\n\n\/**\n * Register the block type on the server\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'tutorial\/alert-wrapper', array(\n\t\t'api_version'     =&gt; 3,\n\t\t'title'           =&gt; 'Alert (Shortcode wrapper)',\n\t\t'icon'            =&gt; 'feedback',\n\t\t'category'        =&gt; 'widgets',\n\t\t'render_callback' =&gt; 'render_shortcode_alert_wrapper_block',\n\t\t\n\t\t'attributes'      =&gt; array(\n\t\t\t'alertType' =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'enum'    =&gt; array( 'info', 'warning', 'error' ),\n\t\t\t\t'default' =&gt; 'info',\n\t\t\t),\n\t\t\t'alertMessage' =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'default' =&gt; 'Type your alert message here...',\n\t\t\t),\n\t\t),\n\n\t\t'supports'        =&gt; array(\n\t\t\t'auto_register' =&gt; true,\n\t\t\t'spacing'       =&gt; array( 'margin' =&gt; true, 'padding' =&gt; true ),\n\t\t\t'typography'    =&gt; array( 'fontSize' =&gt; true ),\n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Der obige Code \u00e4hnelt dem Code im vorherigen Abschnitt. Was sich hier \u00e4ndert, ist der Rendering-Callback.<\/p>\n<ul>\n<li><code>$shortcode_string<\/code> speichert den Shortcode-String (<code>[sc_alert type=\"%s\" message=\"%s\"]<\/code>).<\/li>\n<li>Die Funktion gibt den HTML-Code des Block-Containers und den enthaltenen Shortcode zur\u00fcck (<code class=\"language-php\">do_shortcode( $shortcode_string )<\/code>).<\/li>\n<\/ul>\n<p>\u00d6ffne nun den Block-Inserter und suche unter den Widgets nach dem Block &#8222;Shortcode-Wrapper&#8220;. F\u00fcge ihn in deinen Inhalt ein und konfiguriere ihn in der Blockeinstellungsleiste. Der Block wird sowohl im Editor als auch im Frontend identisch aussehen.<\/p>\n<figure id=\"attachment_206135\" aria-describedby=\"caption-attachment-206135\" style=\"width: 2298px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206135 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-shortcode-example.png\" alt=\"Ein Beispiel f\u00fcr einen Shortcode, der in einen PHP-only-Block eingeschlossen ist\" width=\"2298\" height=\"912\"><figcaption id=\"caption-attachment-206135\" class=\"wp-caption-text\">Ein Beispiel f\u00fcr einen Shortcode, der in einen PHP-only-Block eingeschlossen ist<\/figcaption><\/figure>\n<h2>Wie ver\u00e4ndert sich die WordPress-Entwicklung mit reinen PHP-Bl\u00f6cken?<\/h2>\n<p>Zurzeit befinden sich reine PHP-Bl\u00f6cke in einer experimentellen Phase und haben noch begrenzte M\u00f6glichkeiten. Gutenberg bietet leistungsf\u00e4higere Funktionen wie <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-block-muster\/\">Blockmuster<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\">Blockvariationen<\/a>, die alle Bearbeitungsfunktionen von nativen Gutenberg-Bl\u00f6cken und benutzerdefinierten, in JavaScript erstellten Bl\u00f6cken bieten. Dennoch gibt es Szenarien, in denen PHP-Bl\u00f6cke erhebliche M\u00f6glichkeiten bieten.<\/p>\n<p>Erstens d\u00fcrften reine PHP-Bl\u00f6cke die Verbreitung des Blockeditors f\u00f6rdern, insbesondere bei WordPress-Entwicklern, die weniger auf die serverseitige JavaScript-Entwicklung ausgerichtet sind.<\/p>\n<p>Au\u00dferdem sind sie ideale Wrapper f\u00fcr benutzerdefinierte Funktionen und Shortcodes, wie das Beispiel in diesem Artikel zeigt. Au\u00dferdem erm\u00f6glichen sie eine einfache Integration mit externen Diensten.<\/p>\n<p>Und wir k\u00f6nnen auch mit zuk\u00fcnftigen Verbesserungen und Funktionserweiterungen, mehr Konfigurationskontrollen und Integrationen mit bestehenden Gutenberg-Tools rechnen.<\/p>\n<p>Eines ist sicher: Mit den reinen PHP-Bl\u00f6cken ist das Erstellen von Gutenberg-Bl\u00f6cken viel einfacher geworden.<\/p>\n<p>Wenn WordPress-Entwicklung dein Job ist, bietet dir Kinsta die <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-agentur-tech-stack\/\">n\u00f6tigen Entwickler-Tools<\/a>, damit du dich auf die WordPress-Entwicklung konzentrieren kannst und dich nicht mit komplexen Konfigurationen und m\u00fchsamen Wartungsaufgaben herumschlagen musst: <a href=\"https:\/\/kinqsta.com\/de\/blog\/remote-wordpress-entwicklung-kinsta-ssh\/\">SSH<\/a>, <a href=\"https:\/\/kinqsta.com\/de\/blog\/sftp-ssh-funktionen\/\">SFTP<\/a>, <a href=\"https:\/\/kinqsta.com\/de\/blog\/ci-cd-pipeline-github-aktionen-erstellen\/\">Git-Integration<\/a>, <a href=\"https:\/\/kinqsta.com\/de\/blog\/kinsta-automatic-updates\/\">automatische Updates<\/a>, <a href=\"https:\/\/kinqsta.com\/de\/wordpress-hosting\/staging\/\">Staging mit einem Klick<\/a>, ein integriertes <a href=\"https:\/\/kinqsta.com\/de\/devkinsta\/funktionen\/\">lokales Entwicklungstool<\/a> und vieles mehr. Probiere es mit <a href=\"https:\/\/kinqsta.com\/de\/erster-monat-kostenlos\/\">deinem ersten Gratismonat<\/a> gleich aus.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jahrelang erforderte die Entwicklung von Gutenberg-Bl\u00f6cken ein tiefgreifendes Verst\u00e4ndnis von Technologien wie React und Node.js sowie komplexe Build-Schritte und JavaScript-Tools. Die WordPress-Entwicklung entwickelt sich jedoch weiter, &#8230;<\/p>\n","protected":false},"author":36,"featured_media":75864,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[970,999],"class_list":["post-75863","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-php-funktion","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>So erstellst du PHP-only-Gutenberg-Bl\u00f6cke<\/title>\n<meta name=\"description\" content=\"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt\" \/>\n<meta property=\"og:description\" content=\"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\" \/>\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=\"2026-04-06T07:19:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-07T07:20:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.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=\"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.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=\"17\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt\",\"datePublished\":\"2026-04-06T07:19:33+00:00\",\"dateModified\":\"2026-04-07T07:20:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\"},\"wordCount\":2112,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\",\"name\":\"So erstellst du PHP-only-Gutenberg-Bl\u00f6cke\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"datePublished\":\"2026-04-06T07:19:33+00:00\",\"dateModified\":\"2026-04-07T07:20:08+00:00\",\"description\":\"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"So erstellst du PHP-only-Gutenberg-Bl\u00f6cke","description":"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.","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:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt","og_description":"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.","og_url":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2026-04-06T07:19:33+00:00","article_modified_time":"2026-04-07T07:20:08+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"17\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt","datePublished":"2026-04-06T07:19:33+00:00","dateModified":"2026-04-07T07:20:08+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/"},"wordCount":2112,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/","url":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/","name":"So erstellst du PHP-only-Gutenberg-Bl\u00f6cke","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","datePublished":"2026-04-06T07:19:33+00:00","dateModified":"2026-04-07T07:20:08+00:00","description":"Vergiss JS, React und komplizierte Build-Schritte. Lerne, wie man Gutenberg-Bl\u00f6cke mit reinem PHP erstellt, und stell benutzerdefinierte Bl\u00f6cke in wenigen Minuten in WordPress bereit.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/php-only-gutenberg-bloecke\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinqsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Wie man Gutenberg-Bl\u00f6cke nur mit PHP erstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/75863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=75863"}],"version-history":[{"count":7,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/75863\/revisions"}],"predecessor-version":[{"id":75897,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/75863\/revisions\/75897"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/it"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/jp"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/translations\/nl"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75863\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/75864"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=75863"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=75863"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=75863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}