{"id":72947,"date":"2025-04-03T13:23:04","date_gmt":"2025-04-03T12:23:04","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=72947&#038;preview=true&#038;preview_id=72947"},"modified":"2025-04-16T12:00:54","modified_gmt":"2025-04-16T11:00:54","slug":"wp-core-blocks-erweitern","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/","title":{"rendered":"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert"},"content":{"rendered":"<p>2018 f\u00fchrte WordPress mit der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-0\/\">Version 5.0<\/a> den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg-Editor<\/a> ein, mit dem sich Seiten und Beitr\u00e4ge mithilfe von &#8222;Bl\u00f6cken&#8220; erstellen lassen. Anfangs waren diese Bl\u00f6cke recht einfach, aber im Laufe der Jahre <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-6\/#other-improvements-to-the-block-editor\">haben sie sich weiterentwickelt<\/a> und bieten nun mehr Flexibilit\u00e4t und ein besseres Bearbeitungserlebnis.<\/p>\n<p>Trotzdem gibt es F\u00e4lle, in denen ein Block nicht ganz das tut, was du brauchst. Vielleicht m\u00f6chtest du bestimmte Funktionen entfernen, neue hinzuf\u00fcgen, einen bestimmten Stil standardm\u00e4\u00dfig anwenden oder bestimmte Einstellungen leichter zug\u00e4nglich machen. In solchen F\u00e4llen scheint es eine Option zu sein, <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">einen eigenen Block von Grund auf neu zu erstellen<\/a>, aber &#8211; seien wir ehrlich &#8211; f\u00fcr kleine \u00c4nderungen ist das zu viel des Guten. W\u00e4re es nicht einfacher, wenn du einfach bereits vorhandene Bl\u00f6cke \u00e4ndern k\u00f6nntest?<\/p>\n<p>Genau hier kommt die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blocks API<\/a> ins Spiel. In diesem Artikel wird erkl\u00e4rt, wie du die WordPress-Bl\u00f6cke mithilfe der Blocks API erweitern kannst.<\/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>Die WordPress Blocks API verstehen<\/h2>\n<p>Die WordPress Blocks API ist die Grundlage des Block-Editors und erm\u00f6glicht es <a href=\"https:\/\/kinsta.com\/de\/blog\/arten-von-entwicklern\/\">Entwicklern<\/a>, Bl\u00f6cke zu erstellen, zu \u00e4ndern und zu erweitern. Die API bietet verschiedene M\u00f6glichkeiten, mit Bl\u00f6cken zu interagieren. Du kannst:<\/p>\n<ul>\n<li><strong>Blockeinstellungen \u00e4ndern<\/strong> &#8211; Blockattribute, Standardwerte und Verhaltensweisen \u00e4ndern.<\/li>\n<li><strong>Blockunterst\u00fctzung hinzuf\u00fcgen oder entfernen<\/strong> &#8211; Funktionen wie Typografie, Farben und Abst\u00e4nde aktivieren oder deaktivieren.<\/li>\n<li><strong>Benutzerdefinierte Steuerelemente einf\u00fcgen<\/strong> &#8211; F\u00fcge neue Optionen im Blockeinstellungsfenster hinzu.<\/li>\n<li><strong>Blockvariationen erstellen<\/strong> &#8211; Erstelle vorkonfigurierte Versionen von bestehenden Bl\u00f6cken, um die Erstellung von Inhalten zu beschleunigen.<\/li>\n<\/ul>\n<p>Jeder Block in WordPress, egal ob es sich um einen <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Absatz-<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bild-<\/a> oder <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Schaltfl\u00e4chenblock<\/a> handelt, wird durch eine Reihe von Attributen und Einstellungen definiert, die in der Datei <code>block.json<\/code> gespeichert sind. Diese Datei enth\u00e4lt <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\">Metadaten<\/a> \u00fcber den Block, darunter seinen Namen, seine Kategorie, seine Standardattribute und die unterst\u00fctzten Funktionen.<\/p>\n<p>In WordPress kannst du diese Werte entweder mit <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> \u00e4ndern, aber dieser Artikel erkl\u00e4rt, wie du <a href=\"https:\/\/learn.wordpress.org\/lesson\/filter-hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Filterhaken<\/a> in der Blocks-API verwendest. So wird sichergestellt, dass deine \u00c4nderungen auf dem Server registriert werden, ohne dass du zus\u00e4tzliche JavaScript-Dateien <a href=\"https:\/\/kinsta.com\/de\/blog\/wp-enqueue-scripts\/\">einbinden<\/a> musst.<\/p>\n<p>Wenn du zum Beispiel bestimmte Funktionen eines Blocks aktivieren oder deaktivieren m\u00f6chtest, verwendest du am besten den <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-hooks\/#hooks-vs-actions-vs-filters\">Filter<\/a> <code>register_block_type_args<\/code> in PHP. Mit dieser Methode kannst du die Blockeinstellungen dynamisch anpassen, ohne die Datei <code>block.json<\/code> direkt zu ver\u00e4ndern.<\/p>\n<h2>\u00c4ndern von Blockunterst\u00fctzungen<\/h2>\n<p>WordPress-Bl\u00f6cke werden mit vordefinierten Unterst\u00fctzungen geliefert, die die Optionen des Editors steuern. Bei einigen Bl\u00f6cken, wie z. B. dem <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bildblock<\/a> (<code>core\/image<\/code>), sind standardm\u00e4\u00dfig <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-3\/#enhanced-duotone-filter\">Duotone-Filter<\/a> aktiviert, die es den Nutzern erm\u00f6glichen, Farb\u00fcberlagerungen anzuwenden.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-duotone.png\" alt=\"WordPress-Image-Block mit Duotone-Filter\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">WordPress-Image-Block mit Duotone-Filter<\/figcaption><\/figure>\n<p>Der <a href=\"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Media &#038; Text-Block<\/a> (<code>core\/media-text<\/code>) unterst\u00fctzt jedoch von Haus aus keinen Duotone-Filter, obwohl er die M\u00f6glichkeit bietet, ein Bild einzuf\u00fcgen. Das bedeutet, dass du zwar einen Duotone-Filter auf einen eigenst\u00e4ndigen Bildblock anwenden kannst, dies aber nicht m\u00f6glich ist, wenn ein Bild in einen Media &#038; Text-Block eingef\u00fcgt wird.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/media-text-block.png\" alt=\"Medien- &#038; Textblock ohne Duotone-Unterst\u00fctzung\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Medien- &#038; Textblock ohne Duotone-Unterst\u00fctzung<\/figcaption><\/figure>\n<p>Da der Medien- &#038; Textblock ein Bild enthalten kann, ist es sinnvoll, die Duotone-Filter zu aktivieren. Dazu m\u00fcssen wir das Array <code>supports<\/code> \u00e4ndern und den richtigen CSS-Selektor angeben, damit der Filter richtig angewendet wird. Wir k\u00f6nnen ihn mit dem <code>register_block_type_args<\/code> Filter in PHP aktivieren.<\/p>\n<p>F\u00fcge den folgenden Code in die <code>functions.php<\/code> Datei deines Themes ein:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Wenn du diesen Code in die <code>functions.php<\/code> Datei deines Themes einf\u00fcgst, tust du das am besten in einem <strong>Child-Theme<\/strong>, damit deine \u00c4nderungen nicht verloren gehen, wenn das Theme aktualisiert wird.<\/p>\n<p>Wenn du ein <strong>Kinsta-Benutzer<\/strong> bist, empfehlen wir dir, die \u00c4nderungen in einer <strong>Staging-Umgebung<\/strong> zu testen, bevor du sie auf deine Live-Site \u00fcbertr\u00e4gst. So wird sichergestellt, dass alles korrekt funktioniert, ohne die Produktion zu beeintr\u00e4chtigen.<\/p>\n<\/aside>\n\n<pre><code class=\"language-php\">function enable_duotone_for_media_text_block($args, $block_type) {\n\t\n\t\/\/ Only modify the Media & Text block\n\tif ( 'core\/media-text' === $block_type ) {\n\t\t$args['supports'] ??= [];\n\t\t$args['supports']['filter'] ??= [];\n\t\t$args['supports']['filter']['duotone'] = true;\n\n\t\t$args['selectors'] ??= [];\n\t\t$args['selectors']['filter'] ??= [];\n\t\t$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';\n\t}\n\n\treturn $args;\n}\nadd_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);<\/code><\/pre>\n<p>Der obige Code aktiviert den Duotone-Filter innerhalb des Arrays <code>supports<\/code> und definiert den richtigen CSS-Selektor, um den Duotone-Effekt auf die Bilder im Media &#038; Text-Block anzuwenden. Die Funktion <code>add_filter()<\/code> verwendet <code>10<\/code> als Priorit\u00e4t (wenn der Filter l\u00e4uft) und <code>2<\/code>, um die Anzahl der \u00fcbergebenen Argumente festzulegen (<code>$args<\/code>, <code>$block_type<\/code>).<\/p>\n<p>Wenn du die Datei speicherst und neu l\u00e4dst, solltest du die <strong>Duotone-Steuerelemente<\/strong> im Bereich <strong>Filter<\/strong> sehen.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/duotone-added-media-text.png\" alt=\"Duotone-Filter f\u00fcr den Block \u201eMedien und Text\u201c aktiviert.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Duotone-Filter aktiviert<\/figcaption><\/figure>\n<p>Das Aktivieren des Duotone-Filters f\u00fcr den Media &#038; Text-Block mit <code>register_block_type_args<\/code> ist eine effektive Methode, um das Verhalten des Blocks dynamisch zu \u00e4ndern. WordPress bietet jedoch noch eine andere Methode, um die Blockeinstellungen zu \u00e4ndern: das <strong>\u00dcberschreiben der Block-Metadaten<\/strong> mit <code>block_type_metadata<\/code>.<\/p>\n<p>Mit beiden Methoden kannst du Bl\u00f6cke anpassen, aber sie funktionieren in unterschiedlichen Phasen des Blockregistrierungsprozesses.<\/p>\n<p>Nehmen wir zum Beispiel an, wir wollen den <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Absatz-Block<\/a> (<code>core\/paragraph<\/code>) so anpassen, dass er nur Randanpassungen unterst\u00fctzt und die Auff\u00fcllung deaktiviert. Eine M\u00f6glichkeit, dies zu tun, ist die Verwendung von <code>register_block_type_args<\/code>:<\/p>\n<pre><code class=\"language-php\">function modify_paragraph_spacing_args($args, $block_type) {\n    if ($block_type === 'core\/paragraph') {\n        $args['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);<\/code><\/pre>\n<p>Diese Methode funktioniert in den meisten F\u00e4llen gut, aber da sie den Block \u00e4ndert, nachdem er bereits registriert wurde, kann sie manchmal von anderen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-plugin\/\">Plugins<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/\">Themes<\/a> \u00fcberschrieben werden, die denselben Block sp\u00e4ter \u00e4ndern.<\/p>\n<p>Ein strukturierterer Ansatz w\u00e4re in diesem Fall, die Metadaten des Blocks direkt mit <code>block_type_metadata<\/code> zu \u00fcberschreiben:<\/p>\n<pre><code class=\"language-php\">function mytheme_modify_paragraph_spacing($metadata) {\n    if ($metadata['name'] === 'core\/paragraph') {\n        $metadata['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $metadata;\n}\nadd_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');<\/code><\/pre>\n<p>Keiner der beiden Ans\u00e4tze ist per se besser als der andere &#8211; es kommt nur darauf an, wann du den Block \u00e4ndern willst und wie dauerhaft die \u00c4nderung sein soll.<\/p>\n<h2>Registrierung von Blockstilen<\/h2>\n<p>Viele WordPress-Bl\u00f6cke werden mit vordefinierten Stilen geliefert, die du im Editor ausw\u00e4hlen kannst. Ein gutes Beispiel ist der <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bildblock<\/a> (<code>core\/image<\/code>), der standardm\u00e4\u00dfig einen <strong>abgerundeten<\/strong> Stil enth\u00e4lt. Die standardm\u00e4\u00dfig abgerundeten Ecken sind jedoch oft zu extrem, so dass das Bild eher wie ein Oval aussieht als ein ordentlich gestyltes Element.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-rounded.png\" alt=\"Standardm\u00e4\u00dfig abgerundeter Stil f\u00fcr den Bildblock.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Standardm\u00e4\u00dfig abgerundeter Stil<\/figcaption><\/figure>\n<p>Anstatt den Randradius f\u00fcr jedes Bild manuell einzustellen, ist es besser, den abgerundeten Stil so anzupassen, dass er einen raffinierteren Eckenradius anwendet &#8211; vielleicht mit einem subtilen <a href=\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\">Schatten<\/a> f\u00fcr einen modernen Look. Auf diese Weise k\u00f6nnen die Nutzer\/innen einfach auf eine Schaltfl\u00e4che klicken, um einen gut gestalteten Stil anzuwenden, ohne jedes Mal die Einstellungen manuell anpassen zu m\u00fcssen.<\/p>\n<p>Nehmen wir den Stil <strong>Abgerundet<\/strong> im Block Bild\u00a0und passen ihn so an, dass die Ecken leicht abgerundet statt \u00fcberm\u00e4\u00dfig gekr\u00fcmmt sind und ein dezenter Rahmenschatten f\u00fcr ein ausgefeilteres Aussehen hinzugef\u00fcgt wird.<\/p>\n<p>Da der Blockeditor das Registrieren und Aufheben der Registrierung von Blockstilen erlaubt, k\u00f6nnen wir den Standardstil <strong>Abgerundet<\/strong> entfernen und durch eine eigene Version ersetzen.<\/p>\n<p>So geht&#8217;s:<\/p>\n<pre><code class=\"language-php\">function modify_image_block_rounded_style() {\n    \/\/ Remove the default \"Rounded\" style\n    unregister_block_style( 'core\/image', 'rounded' );\n\n    \/\/ Register a new \"Rounded\" style with custom CSS\n    register_block_style(\n        'core\/image',\n        array(\n            'name'         =&gt; 'rounded',\n            'label'        =&gt; __( 'Rounded', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-image.is-style-rounded img {\n                    border-radius: 20px; \/* Adjust this value *\/\n                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Optional shadow *\/\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'modify_image_block_rounded_style' );<\/code><\/pre>\n<p>Der Code ersetzt den standardm\u00e4\u00dfigen, \u00fcberm\u00e4\u00dfig abgerundeten Stil durch eine verfeinerte Version, die <code>border-radius: 20px;<\/code> f\u00fcr weichere Ecken und <code>box-shadow<\/code> f\u00fcr eine subtile Erh\u00f6hung anwendet.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/adjust-rounded-img-block.png\" alt=\"Verfeinerter, abgerundeter Stil mit dezentem Schatten.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Verfeinerter abgerundeter Stil<\/figcaption><\/figure>\n<h3>Eine externe CSS-Datei anstelle von Inline-Styles verwenden<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/#2-inline-css-vs-external-css-vs-internal-css\">Inline-Stile<\/a> eignen sich zwar gut f\u00fcr einfache Stile, aber sie sind nicht ideal f\u00fcr die Wartbarkeit. Ein besserer Ansatz ist es, Stile in einer externen CSS-Datei zu definieren und sie stattdessen in die Warteschlange zu stellen.<\/p>\n<p>Dazu erstellst du eine neue CSS-Datei, z. B. <code>custom-block-styles.css<\/code>, und f\u00fcgst diese Datei hinzu:<\/p>\n<pre><code class=\"language-css\">\/* Custom Rounded Image Block Style *\/\n.wp-block-image.is-style-rounded img {\n    border-radius: 20px; \/* Adjusted rounded corners *\/\n    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n}<\/code><\/pre>\n<p>Als N\u00e4chstes reihst du die CSS-Datei in <code>functions.php<\/code> ein:<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_styles() {\n    wp_enqueue_style(\n        'custom-block-styles',\n        get_template_directory_uri() . '\/css\/custom-block-styles.css',\n        array(),\n        '1.0'\n    );\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');\nadd_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');<\/code><\/pre>\n<p>Anstatt den Inline-Stil zu verwenden, kannst du jetzt den Stil registrieren, ohne <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> direkt in PHP einzubetten:<\/p>\n<pre><code class=\"language-php\">register_block_style(\n    'core\/image',\n    array(\n        'name'  =&gt; 'rounded',\n        'label' =&gt; __( 'Rounded', 'your-text-domain' ),\n        'style_handle' =&gt; 'custom-block-styles'\n    )\n);<\/code><\/pre>\n<p>Auf diese Weise kannst du Stile \u00e4ndern, ohne PHP zu ben\u00f6tigen.<\/p>\n<h2>Registrierung von Blockvariationen<\/h2>\n<p>Mit <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blockvariationen<\/a> kannst du vordefinierte Versionen eines Blocks mit benutzerdefinierten Einstellungen erstellen, so dass es f\u00fcr die Nutzer einfacher ist, einheitliche Designs mit einem einzigen Klick anzuwenden. Anstatt die Einstellungen eines Blocks jedes Mal manuell zu \u00e4ndern, kannst du mit einer Variation einen Block einf\u00fcgen, auf den bereits die richtigen Attribute, Stile oder Konfigurationen angewendet wurden.<\/p>\n<p>Einige WordPress-Kernbl\u00f6cke funktionieren tats\u00e4chlich auf diese Weise. Der <a href=\"https:\/\/wordpress.org\/documentation\/article\/embed-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Embed-Block<\/a> ist kein einzelner Block, sondern eine Reihe von Varianten f\u00fcr verschiedene Plattformen wie <a href=\"https:\/\/wordpress.org\/documentation\/article\/youtube-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/Twitter-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> und <a href=\"https:\/\/wordpress.org\/documentation\/article\/Spotify-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a>. Der <a href=\"https:\/\/wordpress.org\/documentation\/article\/Row-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Row-Block<\/a> und der <a href=\"https:\/\/wordpress.org\/documentation\/article\/stack-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stack-Block<\/a> sind ebenfalls nur Variationen des <a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Group-Blocks<\/a>, jeweils mit unterschiedlichen Layout-Einstellungen.<\/p>\n<p>Mit diesem Ansatz bleiben die Dinge modular und WordPress kann ma\u00dfgeschneiderte Erlebnisse bieten, w\u00e4hrend es eine gemeinsame Grundstruktur verwendet.<\/p>\n<h3>Erstellen einer Variante des Zitat-Blocks f\u00fcr Zeugnisse<\/h3>\n<p>WordPress verf\u00fcgt zwar nicht \u00fcber einen eigenen Block f\u00fcr Zeugnisse, aber der <a href=\"https:\/\/wordpress.org\/documentation\/article\/quote-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Zitat-Block<\/a> (<code>core\/quote<\/code>) kann f\u00fcr diesen Zweck angepasst werden. Anstatt die Nutzer\/innen zu zwingen, manuell ein Bild hinzuzuf\u00fcgen, den Text auszurichten und alles zu formatieren, k\u00f6nnen wir eine Testimonial-Variante des Zitat-Blocks definieren.<\/p>\n<p>Diese Variante enth\u00e4lt automatisch einen Bildblock, einen Zitatblock und zwei Absatzbl\u00f6cke f\u00fcr den Namen der Person und das Unternehmen. So wird sichergestellt, dass jedes Zeugnis demselben strukturierten Format folgt, ohne dass zus\u00e4tzliche Anpassungen erforderlich sind.<\/p>\n<p>Um eine Blockvariation in WordPress zu registrieren, verwenden wir <code>registerBlockVariation()<\/code> in JavaScript. Da Blockvariationen auf der Client-Seite gehandhabt werden, m\u00fcssen wir eine JavaScript-Datei hinterlegen, die unsere benutzerdefinierte Zeugnisvariation registriert.<\/p>\n<p>Dazu erstellst du eine JavaScript-Datei (z. B. <code>custom-block-variations.js<\/code>), die die Testimonial-Variante des Quote-Blocks definiert. Du kannst diese Datei im <code>assets\/js\/<\/code> Verzeichnis deines Themes erstellen und den folgenden Code einf\u00fcgen:<\/p>\n<pre><code class=\"language-js\">wp.domReady(() =&gt; {\n    wp.blocks.registerBlockVariation(\n        'core\/quote',\n        {\n            name: 'testimonial',\n            title: 'Testimonial',\n            description: 'A variation of the Quote block for testimonials.',\n            category: 'text',\n            attributes: {\n                className: 'is-style-testimonial',\n            },\n            innerBlocks: [\n                ['core\/image', { align: 'center', width: 100, height: 100 }],\n                ['core\/quote'],\n                ['core\/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],\n                ['core\/paragraph', { placeholder: 'Company \/ Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]\n            ],\n            scope: ['inserter'],\n        }\n    );\n\n    \/\/ Inject inline styles for the editor preview\n    const style = document.createElement('style');\n    style.innerHTML = `\n        .wp-block-quote.is-style-testimonial {\n            background-color: #f9f9f9;\n            padding: 24px;\n            border: none !important;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.2em;\n            font-style: normal;\n            color: #333;\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .wp-block-quote.is-style-testimonial p {\n            margin-bottom: 12px;\n            font-size: 1.1em;\n        }\n\n        .wp-block-quote.is-style-testimonial cite {\n            font-weight: bold;\n            display: block;\n            margin-top: 10px;\n            color: #0073aa;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image {\n            display: flex;\n            justify-content: center;\n            margin: 0 auto 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image img {\n            width: 100px;\n            height: 100px;\n            object-fit: cover;\n            border-radius: 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-name {\n            font-weight: bold;\n            font-size: 1.2em;\n            margin-top: 12px;\n            color: #222;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-company {\n            font-size: 0.9em;\n            color: #555;\n        }\n    `;\n    document.head.appendChild(style);\n});<\/code><\/pre>\n<p>Im obigen Code definiert <code>registerBlockVariation()<\/code> die Testimonial-Variante des Zitat-Blocks und l\u00e4dt einen Bild-Block, einen Zitat-Block und zwei Absatz-Bl\u00f6cke f\u00fcr den Namen der Person und das Unternehmen vor. Der Bildblock wird f\u00fcr einheitliche Profilbilder auf 100&#215;100 Pixel zentriert, w\u00e4hrend der Zitatblock als Zeugnistext unver\u00e4ndert bleibt.<\/p>\n<p>F\u00fcr das Styling wird eine benutzerdefinierte Klasse (<code>is-style-testimonial<\/code>) angewendet, die dem Block einen hellen Hintergrund, einen dezenten Schatten und einen zentrierten Text verleiht. Der standardm\u00e4\u00dfige linke Rand wird entfernt, und das Bild beh\u00e4lt sein Seitenverh\u00e4ltnis mit leicht abgerundeten Ecken f\u00fcr ein ansprechendes Aussehen.<\/p>\n<p>Da die JavaScript-Datei im Block-Editor geladen werden muss, m\u00fcssen wir sie in die Warteschlange von <code>functions.php<\/code> einreihen.<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_variations() {\n    wp_enqueue_script(\n        'custom-block-variations',\n        get_template_directory_uri() . '\/assets\/js\/custom-block-variations.js',\n        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),\n        filemtime( get_template_directory() . '\/assets\/js\/custom-block-variations.js' ),\n        true\n    );\n}\nadd_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );<\/code><\/pre>\n<p>Dadurch wird sichergestellt, dass die Testimonial-Blockvariante im Blockeditor angezeigt wird.<\/p>\n<p>W\u00e4hrend der JavaScript-Code daf\u00fcr sorgt, dass der Block im Editor richtig aussieht, m\u00fcssen wir auch die Stile auf dem Frontend anwenden, damit die Testimonials bei der Ver\u00f6ffentlichung richtig angezeigt werden. F\u00fcge den folgenden Code zu <code>functions.php<\/code> hinzu:<\/p>\n<pre><code class=\"language-php\">function register_testimonial_block_style() {\n    register_block_style(\n        'core\/quote',\n        array(\n            'name'  =&gt; 'testimonial',\n            'label' =&gt; __( 'Testimonial', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-quote.is-style-testimonial {\n                    background-color: #f9f9f9;\n                    padding: 24px;\n                    border: none !important;\n                    border-radius: 8px;\n                    text-align: center;\n                    font-size: 1.2em;\n                    font-style: normal;\n                    color: #333;\n                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                }\n\n                .wp-block-quote.is-style-testimonial .wp-block-image img {\n                    width: 100px;\n                    height: 100px;\n                    object-fit: cover;\n                    border-radius: 12px;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-name {\n                    font-weight: bold;\n                    font-size: 1.2em;\n                    margin-top: 12px;\n                    color: #222;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-company {\n                    font-size: 0.9em;\n                    color: #555;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_testimonial_block_style' );<\/code><\/pre>\n<p>Wenn ein Nutzer nun einen Testimonial-Block einf\u00fcgt, enth\u00e4lt er bereits die Felder <strong>Bild<\/strong>, <strong>Zitat<\/strong>, <strong>Name<\/strong> und <strong>Unternehmen<\/strong>, die alle vorformatiert und korrekt gestaltet sind. Dadurch m\u00fcssen keine manuellen Anpassungen mehr vorgenommen werden und jedes Zeugnis hat die gleiche saubere und professionelle Struktur.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/testimonial-block.png\" alt=\"Testimonial-Blockvariation in WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Testimonial-Blockvariation<\/figcaption><\/figure>\n<p>Anstatt die Nutzer\/innen zu zwingen, Zeugnisse von Grund auf neu zu erstellen, bietet diese Blockvariante einen optimierten Arbeitsablauf, der die Inhaltserstellung verbessert und gleichzeitig die Konsistenz des Website-Designs bewahrt.<\/p>\n<h2>Erweiterter Anwendungsfall: Kombinieren der Supports und Styles APIs zur Erstellung von Buttons mit Markenzeichen<\/h2>\n<p>Jetzt, wo du wei\u00dft, was jede API kann und wie sie funktioniert, warum nicht noch einen Schritt weiter gehen? Anstatt die Supports-API oder die Styles-API einzeln zu verwenden, k\u00f6nnen wir sie zusammen nutzen, um ein einziges Problem zu l\u00f6sen: die Konsistenz des Designs zu wahren und gleichzeitig den Nutzern eine strukturierte M\u00f6glichkeit zu geben, die richtigen Stile anzuwenden.<\/p>\n<p>Betrachten wir ein Szenario aus der Praxis. Ein Unternehmen m\u00f6chte, dass alle Schaltfl\u00e4chen auf seiner Website strengen Markenrichtlinien folgen. Es m\u00f6chte nicht, dass die Nutzer\/innen wahllos Farben ausw\u00e4hlen, Polsterungen \u00e4ndern oder eine ausgefallene Typografie verwenden. Sie wollen jedoch Flexibilit\u00e4t &#8211; deshalb sollten die Nutzer\/innen zwischen zwei vorgegebenen Schaltfl\u00e4chenstilen w\u00e4hlen k\u00f6nnen:<\/p>\n<ol start=\"1\">\n<li><strong>Prim\u00e4rer Button<\/strong> &#8211; Der wichtigste Call-to-Action-Button mit festem Hintergrund und fettgedrucktem Design.<\/li>\n<li><strong>Sekund\u00e4rer Button<\/strong> &#8211; Ein dezenterer, umrandeter Button, der normalerweise f\u00fcr sekund\u00e4re Aktionen verwendet wird.<\/li>\n<\/ol>\n<p>Um dies zu erreichen, m\u00fcssen wir:<\/p>\n<ul>\n<li>Die Styles-API verwenden, um die beiden Button-Stile zu definieren.<\/li>\n<li>Die Supports-API verwenden, um unn\u00f6tige Einstellungen zu entfernen und sicherzustellen, dass die Nutzer das Branding nicht manuell \u00fcberschreiben, indem sie Farben, Abst\u00e4nde oder die Typografie \u00e4ndern.<\/li>\n<\/ul>\n<p>Durch die Kombination beider APIs erm\u00f6glichen wir strukturierte Auswahlm\u00f6glichkeiten und verhindern gleichzeitig, dass die Nutzer das Designsystem zerst\u00f6ren.<\/p>\n<h3>Schritt 1: Definiere benutzerdefinierte Schaltfl\u00e4chenstile<\/h3>\n<p>Beginne damit, den folgenden Code in die Datei <code>functions.php<\/code> einzuf\u00fcgen:<\/p>\n<pre><code class=\"language-php\">function register_custom_button_styles() {\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'primary-button',\n            'label' =&gt; __( 'Primary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-primary-button .wp-block-button__link {\n                    background-color: #4D4D4D;\n                    color: #ffffff;\n                    padding: 12px 24px;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);\n                }\n            ',\n        )\n    );\n\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'secondary-button',\n            'label' =&gt; __( 'Secondary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-secondary-button .wp-block-button__link {\n                    background-color: transparent;\n                    color: #4D4D4D;\n                    padding: 12px 24px;\n                    border: 1px solid #4D4D4D;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: none;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_custom_button_styles' );<\/code><\/pre>\n<p>Wenn du jetzt einen Button-Block einf\u00fcgst, siehst du den <strong>prim\u00e4ren Button<\/strong> und den <strong>sekund\u00e4ren Button<\/strong> als Auswahlm\u00f6glichkeit f\u00fcr den Stil.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/custom-button-styles.png\" alt=\"Benutzerdefinierte Schaltfl\u00e4chenstile: Prim\u00e4r und Sekund\u00e4r.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Benutzerdefinierte Schaltfl\u00e4chenstile<\/figcaption><\/figure>\n<p>Die prim\u00e4re Schaltfl\u00e4che hat einen einfarbigen dunkelgrauen Hintergrund, w\u00e4hrend die sekund\u00e4re Schaltfl\u00e4che einen transparenten Hintergrund mit einem Rahmen hat. Beide Schaltfl\u00e4chen haben eine einheitliche F\u00fcllung, einen einheitlichen Rahmenradius und eine einheitliche Schriftart, um ein professionelles Erscheinungsbild auf der gesamten Website zu gew\u00e4hrleisten.<\/p>\n<h3>Schritt 2: Einschr\u00e4nkung der Button-Anpassung<\/h3>\n<p>Auch wenn die Schaltfl\u00e4chenstile jetzt vordefiniert sind, k\u00f6nnen die Nutzer\/innen sie immer noch manuell in den Einstellungen des WordPress-Blockeditors \u00fcberschreiben. Wenn sie die Farben, die F\u00fcllung oder die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-typografie-theme-json\/\">Typografie<\/a> \u00e4ndern, entsprechen die Schaltfl\u00e4chen m\u00f6glicherweise nicht mehr den Markenrichtlinien.<\/p>\n<p>Mit der Supports-API k\u00f6nnen wir diese Anpassungsoptionen deaktivieren und so verhindern, dass die Nutzer\/innen unbeabsichtigte \u00c4nderungen vornehmen. F\u00fcge dies zu <code>functions.php<\/code> hinzu:<\/p>\n<pre><code class=\"language-php\">function restrict_button_customization($args, $block_type) {\n    if ($block_type === 'core\/button') {\n        \/\/ Disable specific color settings (text, background, link)\n        $args['supports']['color'] = [\n            'text'       =&gt; false, \n            'background' =&gt; false, \n            'link'       =&gt; false,  \n        ];\n\n        \/\/ Disable typography settings (font size, font weight, line height)\n        $args['supports']['typography'] = false;\n\n        \/\/ Disable spacing settings (padding, margin)\n        $args['supports']['spacing'] = false;\n\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'restrict_button_customization', 10, 2);<\/code><\/pre>\n<p>Mit dieser Funktion:<\/p>\n<ul>\n<li>Die Nutzer k\u00f6nnen die Farbe der Schaltfl\u00e4chen nicht \u00e4ndern, sodass alle Schaltfl\u00e4chen dem Farbschema der Marke entsprechen m\u00fcssen.<\/li>\n<li>Typografie-Steuerungen werden entfernt, damit die Textformatierung einheitlich bleibt.<\/li>\n<li>Die Einstellungen f\u00fcr die Abst\u00e4nde sind deaktiviert, so dass die Nutzer\/innen die Abst\u00e4nde und R\u00e4nder nicht mehr \u00e4ndern k\u00f6nnen.<\/li>\n<\/ul>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/new-primary-button.png\" alt=\"Gestaltete Prim\u00e4rschaltfl\u00e4che in WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Gestaltete Prim\u00e4rschaltfl\u00e4che<\/figcaption><\/figure>\n<p>Anstatt den Nutzern die M\u00f6glichkeit zu geben, eine wahllose Mischung von Schaltfl\u00e4chenstilen zu erstellen, k\u00f6nnen sie jetzt einfach zwischen einem prim\u00e4ren und einem sekund\u00e4ren Stil w\u00e4hlen, wodurch das Design professionell und strukturiert bleibt.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Wir haben nur an der Oberfl\u00e4che dessen gekratzt, was mit der Anpassung von WordPress-Bl\u00f6cken m\u00f6glich ist. WordPress bietet eine gro\u00dfe Sammlung von APIs, mit denen sich Bl\u00f6cke leicht erweitern und anpassen lassen. So k\u00f6nnen Entwickler den Editor individuell gestalten und gleichzeitig f\u00fcr ein strukturiertes und benutzerfreundliches Design sorgen.<\/p>\n<p>Wenn du die Blockanpassung wirklich beherrschen willst, gibt es noch so viel mehr zu entdecken. Sieh dir die offizielle <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Entwicklerdokumentation<\/a> an, besuche <a href=\"https:\/\/kinsta.com\/de\/blog\/wordcamp-leitfaden\/\">WordCamps und Meetups<\/a> und lerne weiter in gro\u00dfartigen Ressourcen wie dem <a href=\"https:\/\/kinsta.com\/de\/blog\/\">Kinsta-Blog<\/a>, in dem wir regelm\u00e4\u00dfig fortgeschrittene WordPress-Konzepte erl\u00e4utern.<\/p>\n<p>Mit einem soliden Hosting-Anbieter ist es nat\u00fcrlich m\u00fchelos, mit diesen \u00c4nderungen zu experimentieren. Egal, ob du neue Blockmodifikationen ausprobierst oder eine stark frequentierte Website verwaltest, zuverl\u00e4ssiges Hosting sorgt f\u00fcr reibungslose Leistung und einfache Skalierbarkeit. Wir bei Kinsta haben unsere Plattform so entwickelt, dass sie genau das kann. Tats\u00e4chlich wurden wir k\u00fcrzlich von G2 dank <a href=\"https:\/\/www.g2.com\/products\/kinsta\/reviews\">\u00fcber 930 Kundenbewertungen<\/a> als <a href=\"https:\/\/kinsta.com\/de\/blog\/g2-awards\/\">f\u00fchrend im Bereich WordPress Hosting<\/a> eingestuft.<\/p>\n<p>Das spricht f\u00fcr sich selbst: <a href=\"https:\/\/kinsta.com\/de\/preise\/\">Du kannst uns vertrauen, wenn es um dein WordPress-Erlebnis geht<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>2018 f\u00fchrte WordPress mit der Version 5.0 den Gutenberg-Editor ein, mit dem sich Seiten und Beitr\u00e4ge mithilfe von &#8222;Bl\u00f6cken&#8220; erstellen lassen. Anfangs waren diese Bl\u00f6cke recht &#8230;<\/p>\n","protected":false},"author":287,"featured_media":72948,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999],"class_list":["post-72947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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 WordPress-Core-Bl\u00f6cke mit der Blocks-API erweitert<\/title>\n<meta name=\"description\" content=\"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.\" \/>\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\/wp-core-blocks-erweitern\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert\" \/>\n<meta property=\"og:description\" content=\"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/\" \/>\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-04-03T12:23:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T11:00:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.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=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"16\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert\",\"datePublished\":\"2025-04-03T12:23:04+00:00\",\"dateModified\":\"2025-04-16T11:00:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/\"},\"wordCount\":2427,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/\",\"name\":\"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks-API erweitert\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"datePublished\":\"2025-04-03T12:23:04+00:00\",\"dateModified\":\"2025-04-16T11:00:54+00:00\",\"description\":\"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#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 WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks-API erweitert","description":"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.","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\/wp-core-blocks-erweitern\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert","og_description":"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.","og_url":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-04-03T12:23:04+00:00","article_modified_time":"2025-04-16T11:00:54+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"16\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert","datePublished":"2025-04-03T12:23:04+00:00","dateModified":"2025-04-16T11:00:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/"},"wordCount":2427,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/","url":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/","name":"Wie man WordPress-Core-Bl\u00f6cke mit der Blocks-API erweitert","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","datePublished":"2025-04-03T12:23:04+00:00","dateModified":"2025-04-16T11:00:54+00:00","description":"Erfahre, wie du WordPress-Core-Bl\u00f6cke mit der Blocks-API ganz einfach erweitern kannst, um Einstellungen, Stile und Funktionen anzupassen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wp-core-blocks-erweitern\/#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 WordPress-Core-Bl\u00f6cke mit der Blocks API erweitert"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72947","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=72947"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72947\/revisions"}],"predecessor-version":[{"id":73051,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72947\/revisions\/73051"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72947\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/72948"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=72947"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=72947"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=72947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}