{"id":73735,"date":"2025-08-07T08:49:31","date_gmt":"2025-08-07T07:49:31","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=73735&#038;preview=true&#038;preview_id=73735"},"modified":"2025-08-12T07:55:23","modified_gmt":"2025-08-12T06:55:23","slug":"gutenberg-bloecke-mit-stilvariationen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/","title":{"rendered":"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt"},"content":{"rendered":"<p>Gutenberg hat sich zu einem leistungsstarken und stark anpassbaren Editor entwickelt. Neben den robusten <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Out-of-the-Box-Funktionen<\/a> k\u00f6nnen WordPress-Entwickler jetzt eine Vielzahl von APIs nutzen, um benutzerdefinierte Funktionen ganz einfach in ihre Websites zu integrieren. Diese Erweiterbarkeit erm\u00f6glicht einen bemerkenswerten Grad an ma\u00dfgeschneiderter Entwicklung, der es Entwicklern erm\u00f6glicht, hoch personalisierte und funktionsreiche Online-Erlebnisse zu schaffen.<\/p>\n<p>Dieser Artikel befasst sich mit zwei weniger bekannten, aber leistungsstarken WordPress-Entwicklungsfunktionen: <strong>Stilvariationen<\/strong> (auch bekannt als Blockstile) und <strong>Blockvariationen<\/strong>.<\/p>\n<p>Ihr Nutzen mag auf den ersten Blick unklar erscheinen, aber du wirst \u00fcberrascht sein, wie n\u00fctzlich sie sind und wie du sie mit wenig Zeitaufwand nahtlos in deinen Arbeitsablauf integrieren kannst.<\/p>\n<p>Anhand eines realen Projekts erf\u00e4hrst du, was sie sind und wie du sie einsetzen kannst. Du kannst dieses Projekt auf deiner WordPress-Seite umsetzen, indem du einfach den Code aus diesem Tutorial kopierst und einf\u00fcgst und eventuell Anpassungen hinzuf\u00fcgst.<\/p>\n<p>Bevor wir in das Projekt eintauchen, lass uns kurz die Voraussetzungen besprechen:<\/p>\n<ul>\n<li><strong>Eine lokale WordPress-Entwicklungsumgebung:<\/strong> Obwohl jede beliebige Umgebung ausreicht, empfehlen wir <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a>, die lokale Entwicklungsumgebung von Kinsta. Sie ist einfach zu bedienen und bietet viele Einstellungen und <a href=\"https:\/\/kinsta.com\/de\/blog\/adminer\/\">Werkzeuge<\/a>, um schnell eine lokale WordPress-Website zu starten und zu verwalten.<\/li>\n<li><strong>Node.js und npm:<\/strong> Diese sind unerl\u00e4sslich, da der Block-Editor auf React basiert und einen Build-Prozess erfordert.<\/li>\n<li><strong>Grundlegende Kenntnisse in der Frontend-Entwicklung:<\/strong> Grundlegende Kenntnisse in Node.js, JavaScript (mit React), PHP und CSS sind von Vorteil.<\/li>\n<\/ul>\n<p>Dieses Projekt ist zwar nicht \u00fcberm\u00e4\u00dfig komplex, aber du solltest darauf vorbereitet sein, etwas Code zu schreiben. Der <a href=\"https:\/\/github.com\/carlodaniele\/image-hacker\" target=\"_blank\" rel=\"noopener noreferrer\">vollst\u00e4ndige Code<\/a> ist auch auf GitHub verf\u00fcgbar.<\/p>\n<p>Los geht&#8217;s!<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Blockstile vs. Blockvariationen<\/h2>\n<p><strong>Blockstile<\/strong> und <strong>Blockvariationen<\/strong> sind zwei leistungsstarke WordPress-Funktionen f\u00fcr Entwickler. Obwohl ihre Namen ziemlich \u00e4hnlich klingen, unterscheiden sie sich in ihrem Zweck und ihrer Verwendung.<\/p>\n<p><strong>Blockstile<\/strong>, auch als Stilvariationen bekannt, sind vorgefertigte CSS-Stile, mit denen du das Aussehen eines Blocks mit einem einzigen Klick \u00e4ndern kannst. Nachdem du einen Blockstil registriert hast, erscheint in der Seitenleiste des Blocks eine Schaltfl\u00e4che, mit der du dem Block einen vorgefertigten Satz von Stilen zuweisen kannst. Du kannst die Stile ein- und ausschalten und eine Vorschau des Blocks im Editor in Echtzeit anzeigen.<\/p>\n<figure id=\"attachment_196255\" aria-describedby=\"caption-attachment-196255\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196255 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/image-block-default-style-variations.jpg\" alt=\"Der Kernblock Bild hat zwei Standardstilvarianten.\" width=\"1698\" height=\"1092\"><figcaption id=\"caption-attachment-196255\" class=\"wp-caption-text\">Der Kernblock Bild hat zwei Standardstilvarianten.<\/figcaption><\/figure>\n<p><strong>Stilvariationen ver\u00e4ndern nicht die Attribute des Blocks. Sie ver\u00e4ndern nur das Aussehen des Blocks, indem sie dem Wrapper-Element des Blocks eine CSS-Klasse zuweisen.<\/strong><\/p>\n<p>Blockvariationen sind ein m\u00e4chtigeres Werkzeug, weil du damit eine vorkonfigurierte Version eines Blocks mit Attributen und inneren Bl\u00f6cken erstellen kannst. Sie werden auch im Block-Inserter des Editors angezeigt. Im Wesentlichen erscheint eine Blockvariation f\u00fcr den Benutzer wie ein eigenst\u00e4ndiger Block, der v\u00f6llig unabh\u00e4ngig von dem Block ist, auf dem er aufbaut.<\/p>\n<p><strong>Blockvariationen erm\u00f6glichen es, das Aussehen, die Grundeinstellungen und die Struktur eines Blocks anzupassen.<\/strong><\/p>\n<p>Nutzen wir also diese Werkzeuge, um Gutenberg-Bl\u00f6cke auf die n\u00e4chste Stufe zu heben!<\/p>\n<h2>Ein animierter Polaroid-Effekt f\u00fcr einen Bild-Block<\/h2>\n<p>Beginnen wir nun mit unserem Projekt! Wir werden den Kern-Bilderblock mit einem Gutenberg-Plugin erweitern:<\/p>\n<ul>\n<li><strong>Eine Polaroid-Stilvariation zu implementieren:<\/strong> Mit einem einzigen Klick in der Einstellungsleiste des Blocks k\u00f6nnen die Nutzer\/innen einen charmanten Polaroid-Effekt auf ihre Bilder anwenden.<\/li>\n<li><strong>Hinzuf\u00fcgen einer Hover-Animation:<\/strong> Wir werden Bilder im Polaroid-Stil mit einer subtilen Hover-Animation verbessern.<\/li>\n<li><strong>Erstelle eine &#8222;Animierte Polaroid&#8220;-Blockvariante:<\/strong> Damit k\u00f6nnen Nutzer\/innen schnell vorkonfigurierte Polaroid-Bilder mit Schwebeeffekt direkt aus dem Block-Inserter einf\u00fcgen.<\/li>\n<\/ul>\n<p>Bist du bereit? Dann lass uns unser Plugin einrichten!<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<figure id=\"attachment_196838\" aria-describedby=\"caption-attachment-196838\" style=\"width: 1953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196838 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/front-end-animation.jpg\" alt=\"Ein Animationseffekt auf einem Bildblock\" width=\"1953\" height=\"1248\"><figcaption id=\"caption-attachment-196838\" class=\"wp-caption-text\">Ein Animationseffekt auf einem Bildblock<\/figcaption><\/figure>\n<h3>Einrichten der Umgebung<\/h3>\n<p>Bevor wir beginnen, m\u00fcssen wir eine WordPress-Entwicklungsumgebung mit Node.js einrichten. Wir gehen davon aus, dass du deine lokale WordPress-Entwicklungsumgebung und die neuesten Versionen von <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">Node.js<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> bereits installiert hast. Wenn du Hilfe brauchst, schau dir unsere Anleitung an, <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-plugin\/#how-to-create-a-block-editor-plugin-without-creating-a-custom-block\">wie du ein Gutenberg-Plugin erstellst, um den Block-Editor um neue Funktionen zu erweitern<\/a>.<\/p>\n<h4>Schritt 1 &#8211; Erstellen der grundlegenden Plugin-Struktur<\/h4>\n<p>F\u00fcr dieses Tutorial nennen wir unser Plugin <strong>Image Hacker<\/strong>.<\/p>\n<p>Navigiere zu deinem Verzeichnis <code>plugins<\/code> und erstelle einen neuen Ordner <code>image-hacker<\/code>. In diesem Ordner erstellst du eine neue Datei <code>image-hacker.php<\/code> (die Hauptdatei deines Plugins) und einen Unterordner <code>src<\/code>, in dem du die Funktionen des Plugins einrichten wirst.<\/p>\n<p>Hier ist die Grundstruktur deines Plugins:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u2514\u2500\u2500 \/src\/<\/code><\/pre>\n<h4>Schritt 2 &#8211; Erstelle den PHP-Code<\/h4>\n<p>Als N\u00e4chstes musst du sicherstellen, dass WordPress dein Plugin erkennt. Dazu f\u00fcgst du den folgenden Code in <code>image-hacker.php<\/code> ein:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Image Hacker\n * Description: Adds new features to the core Image block\n * Version:     1.0.0\n * Author:      Your Name\n * License:     GPL-2.0-or-later\n * License URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain: image-hacker\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly.\n}<\/code><\/pre>\n<h4>Schritt 3 &#8211; Initialisiere npm und installiere die Abh\u00e4ngigkeiten<\/h4>\n<p>\u00d6ffne dein bevorzugtes Kommandozeilentool und navigiere zum Verzeichnis deines Plugins. Dort f\u00fchrst du den folgenden Befehl aus:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Dieser Befehl initialisiert eine neue <code>package.json<\/code> Datei, die die Abh\u00e4ngigkeiten und Skripte deines Projekts enth\u00e4lt.<\/p>\n<p>Als N\u00e4chstes musst du WordPress-Skripte und Build-Tools wie webpack und Babel installieren:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<p>Dieser Befehl f\u00fcgt einen Ordner <code>node_modules<\/code> mit Node-Abh\u00e4ngigkeiten und eine Datei <code>package-lock.json<\/code> hinzu. Die folgende Abbildung zeigt die aktuelle Struktur deines Projekts in <a href=\"https:\/\/kinsta.com\/de\/blog\/vscode-erweiterungen\/\">Visual Studio Code<\/a>:<\/p>\n<figure id=\"attachment_196256\" aria-describedby=\"caption-attachment-196256\" style=\"width: 1880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196256 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/gutenberg-plugin-basic-structure.jpg\" alt=\"Ein Screenshot eines Gutenberg-Plugins in Visual Studio Code\" width=\"1880\" height=\"759\"><figcaption id=\"caption-attachment-196256\" class=\"wp-caption-text\">Ein Gutenberg-Plugin in Visual Studio Code<\/figcaption><\/figure>\n<p>Als N\u00e4chstes \u00f6ffnest du dein <code>package.json<\/code> und aktualisierst die Eigenschaft <code>scripts<\/code> wie folgt:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"image-hacker\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.25.0\",\n\t\t\"@wordpress\/scripts\": \"^30.18.0\"\n\t}\n}<\/code><\/pre>\n<p>Beachte, dass die Versionen von <code>devDependencies<\/code> von den oben genannten abweichen k\u00f6nnen und von den tats\u00e4chlich in deiner Umgebung installierten Versionen abh\u00e4ngen.<\/p>\n<h4>Schritt 4 &#8211; Erstelle die Quelldateien deines Plugins<\/h4>\n<p>Der n\u00e4chste Schritt besteht darin, die Quelldateien des Plugins zu erstellen. Navigiere zum Ordner <code>src<\/code> und f\u00fcge die folgenden Dateien hinzu:<\/p>\n<ul>\n<li><code>index.js<\/code><\/li>\n<li><code>style.scss<\/code><\/li>\n<li><code>editor.scss<\/code><\/li>\n<\/ul>\n<p>Die Struktur des Plugins sollte nun wie folgt aussehen:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 \/node-modules\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u251c\u2500\u2500 package.json\n\t\u251c\u2500\u2500 package-lock.json\n\t\u2514\u2500\u2500 \/src\/\n\t\t\u251c\u2500\u2500 index.js\n\t\t\u251c\u2500\u2500 style.scss\n\t\t\u2514\u2500\u2500 editor.scss<\/code><\/pre>\n<p>\u00d6ffne nun dein WordPress-Administrationspanel und navigiere zum Bildschirm <strong>Plugins<\/strong>. Suche das <strong>Image Hacker<\/strong> Plugin und aktiviere es.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Die Datei <code>editor.scss<\/code> ist die Datei, in der du Blockstile nur f\u00fcr den Editor deklarierst, w\u00e4hrend die Datei <code>style.scss<\/code> Blockstile f\u00fcr den Editor und das Frontend enth\u00e4lt. Die Datei <code>editor.scss<\/code> werden wir in diesem Projekt nicht verwenden.<\/p>\n<\/aside>\n\n<h4>Schritt 5 &#8211; Einf\u00fcgen von Assets in die Plugin-Datei<\/h4>\n<p>Als N\u00e4chstes musst du die Plugin-Assets in die Hauptdatei des Plugins einf\u00fcgen. F\u00fcge Folgendes zu <code>image-hacker.php<\/code> hinzu:<\/p>\n<pre><code class=\"language-php\">\/**\n * Enqueue block editor assets.\n *\/\nfunction image_hacker_enqueue_editor_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue the script with our modifications\n\twp_enqueue_script(\n\t\t'image-hacker-script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n\n\t\/\/ Enqueue the editor-only styles\n\twp_enqueue_style(\n\t\t'image-hacker-editor-style',\n\t\tplugins_url( 'build\/editor.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/editor.css' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );\n\n\/**\n * Enqueue frontend and editor assets.\n *\/\nfunction image_hacker_enqueue_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue styles for both frontend and editor\n\twp_enqueue_style(\n\t\t'image-hacker-style',\n\t\tplugins_url( 'build\/style-index.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/style-index.css' )\n\t);\n}\nadd_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );<\/code><\/pre>\n<p>Dieser Code bewirkt Folgendes:<\/p>\n<ul>\n<li>Der Aktionshaken <code>enqueue_block_editor_assets<\/code> reiht das Skript <code>index.js<\/code> und die Datei <code>editor.css<\/code> ein.<\/li>\n<li>Der <code>enqueue_block_assets<\/code> Aktionshaken reiht die <code>style.css<\/code> Datei ein.<\/li>\n<\/ul>\n<p>Beachte, dass dieser Code die Dateien <code>.js<\/code> und <code>.css<\/code> enth\u00e4lt, die sich im Ordner <code>\/build\/<\/code> deines Plugins befinden. Das bedeutet, dass du den Build-Befehl in deinem Kommandozeilentool ausf\u00fchren musst, damit er funktioniert:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Wenn du eine Datei namens <code>style.scss<\/code> in <code>index.js<\/code> importierst, hei\u00dft die kompilierte CSS-Datei nicht <code>style.css<\/code>, sondern <code>style-index.css<\/code>.<\/p>\n<h3>Blockstil registrieren<\/h3>\n<p>Damit hast du die Einrichtung deiner Entwicklungsumgebung abgeschlossen. Jetzt kannst du zum spannenden Teil des Projekts \u00fcbergehen und deine Blockstilvariation registrieren.<\/p>\n<p>Es gibt <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">mehrere M\u00f6glichkeiten, Blockstile zu registrieren<\/a>. Welche du w\u00e4hlst, h\u00e4ngt von deinen Zielen und pers\u00f6nlichen Vorlieben ab. Wir werden den JS-Ansatz verfolgen, wenn wir ein Gutenberg-Plugin erstellen. \u00d6ffne deine <code>\/src\/index.js<\/code> Datei und f\u00fcge den folgenden Code ein:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Import the function to register block styles.\nimport { registerBlockStyle } from '@wordpress\/blocks';\n\n\/\/ Import the function to run code only when the DOM is ready.\nimport domReady from '@wordpress\/dom-ready';\n\n\/\/ This line tells the build process to include and compile our SCSS file.\nimport '.\/style.scss';\n\n\/**\n * Use domReady to run code only when the DOM is ready.\n *\/\ndomReady(() =&gt; {\n\t\/\/ Register our new style variation for the core image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n});<\/code><\/pre>\n<p><code>registerBlockStyle<\/code> mit <code>domReady<\/code> stellt sicher, dass die Stilvariation nur registriert wird, wenn das DOM vollst\u00e4ndig geladen ist. Siehe auch die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-dom-ready\/\" target=\"_blank\" rel=\"noopener noreferrer\">offizielle<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation<\/a>.<\/p>\n<p>Wenn der Stil <code>Polaroid<\/code> ausgew\u00e4hlt wird, f\u00fcgt WordPress dem Block-Wrapper automatisch die Klasse <code>.is-style-polaroid<\/code> hinzu.<\/p>\n<p>Der n\u00e4chste Schritt ist die Bereitstellung des CSS f\u00fcr deine Stilvariation. \u00d6ffne deine <code>\/src\/style.scss<\/code> und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid {\n\tpadding: 15px 15px 70px 15px;\n\tbackground-color: white;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n\tmax-width: 360px;\n\ttransform: rotate(-3deg);\n\ttransition: transform 0.3s ease-in-out;\n\n\tfigure { \n\t\tmargin: 0 !important; \n\t}\n\t\n\timg { \n\t\tdisplay: block; \n\t\twidth: 100%; \n\t\theight: auto; \n\t}\n\t\n\tfigcaption {\n    \tposition: absolute; \n    \tbottom: 15px; \n    \tleft: 0; \n    \tright: 0;\n    \ttext-align: center; \n    \tfont-family: 'Permanent Marker', cursive;\n    \tcolor: #333; \n    \tfont-size: 18px;\n\t}\n}<\/code><\/pre>\n<p>Speichere deinen Code, f\u00fchre <code>npm run build<\/code> aus und gehe in dein WordPress-Dashboard. Erstelle einen neuen Beitrag oder eine neue Seite und f\u00fcge ein Bild hinzu. Klicke bei ausgew\u00e4hltem Bild auf das Label <strong>Stile<\/strong> in der Seitenleiste des Blocks und w\u00e4hle <strong>Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196692\" aria-describedby=\"caption-attachment-196692\" style=\"width: 1988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196692 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/style-variation.jpg\" alt=\"Eine neue Stilvariante f\u00fcr den Bildblock\" width=\"1988\" height=\"1186\"><figcaption id=\"caption-attachment-196692\" class=\"wp-caption-text\">Eine neue Stilvariante f\u00fcr den Bildblock<\/figcaption><\/figure>\n<p>F\u00fcge eine Bildunterschrift hinzu, speichere den Beitrag und sieh dir das Ergebnis im Frontend an. Du solltest ein Bild im Polaroid-Stil mit einer sch\u00f6nen kursiven Beschriftung sehen.<\/p>\n<figure id=\"attachment_196903\" aria-describedby=\"caption-attachment-196903\" style=\"width: 1952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196903 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid.jpg\" alt=\"Das Figurenelement mit der Klasse is_style_polaroid\" width=\"1952\" height=\"1296\"><figcaption id=\"caption-attachment-196903\" class=\"wp-caption-text\">Das Figurenelement mit der Klasse is_style_polaroid<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Aufgrund der hohen Spezifit\u00e4t der Selektoren k\u00f6nnen einige Eigenschaften (z. B. <code>max-width<\/code>) im Editor nicht angewendet werden. Wenn sie im Editor angewendet werden sollen, musst du die entsprechenden Stile in der Datei <code>editor.scss<\/code> hinzuf\u00fcgen.<\/p>\n<\/aside>\n\n<h3>Baue die Logik<\/h3>\n<p>Der n\u00e4chste Schritt besteht darin, die Logik f\u00fcr die Animation des Bildes zu erstellen. Wir werden eine einfache Animation erstellen, indem wir die CSS-Eigenschaft <code>transform<\/code> verwenden. Dazu f\u00fcgst du den folgenden Block in deine <code>src\/style.scss<\/code> ein:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid.has-image-animation:hover {\n\ttransform: rotate(0deg) scale(1.05);\n}<\/code><\/pre>\n<p>Dieser Code stellt sicher, dass der Hover-Effekt nur dann angewendet wird, wenn es sich bei dem Block um ein Polaroid-Bild handelt und die Klasse <code>has-image-animation<\/code> vom Toolbar-Toggle angewendet wurde.<\/p>\n<p>Jetzt brauchst du die Logik, um die CSS-Klasse zum Bildcontainer hinzuzuf\u00fcgen, der ein <code>figure<\/code> Element ist. Dazu brauchst du ein paar Filter und Callback-Funktionen.<\/p>\n<p>F\u00fcge zun\u00e4chst die folgende Zeile in deine <code>src\/index.js<\/code> Datei ein:<\/p>\n<pre><code class=\"language-javascript\">import { addFilter } from '@wordpress\/hooks';<\/code><\/pre>\n<h4>Schritt 1. F\u00fcge ein neues Attribut zum Image-Block hinzu<\/h4>\n<p>Du wirst <code>addFilter<\/code> verwenden, um den Image-Block zu manipulieren. Zuerst f\u00fcgst du ein neues Attribut <code>imageAnimation<\/code> zum Image-Block hinzu:<\/p>\n<pre><code class=\"language-javascript\">function addImageAnimationAttribute( settings, name ) {\n\tif ( name !== 'core\/image' ) {\n\t\treturn settings;\n\t}\n\tsettings.attributes = {\n\t\t...settings.attributes,\n\t\timageAnimation: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t};\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'image-hacker\/add-image-animation-attribute',\n\taddImageAnimationAttribute\n);<\/code><\/pre>\n<p>Die Callback-Funktion <code>addImageAnimationAttribute<\/code> nimmt zwei Argumente entgegen:<\/p>\n<ul>\n<li><code>settings<\/code> &#8211; Ein Array mit den aktuellen Blockattributen<\/li>\n<li><code>name<\/code> &#8211; Gib den Namen des Blocks an, dessen Attribute du \u00e4ndern m\u00f6chtest.<\/li>\n<\/ul>\n<p>Die Funktion gibt dann das aktualisierte Array der Attribute zur\u00fcck.<\/p>\n<h4>Schritt 2. Hinzuf\u00fcgen eines Umschaltreglers zum Bildblock<\/h4>\n<p>Als N\u00e4chstes musst du ein Steuerelement in die Symbolleiste des Bildblocks einf\u00fcgen, um die Animation zu aktivieren.<\/p>\n<p>Zuerst f\u00fcgst du die folgenden <code>import<\/code>s zur Datei <code>index.js<\/code> hinzu:<\/p>\n<pre><code class=\"language-javascript\">import { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment } from '@wordpress\/element';\nimport { BlockControls } from '@wordpress\/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';<\/code><\/pre>\n<p>F\u00fcge dann den folgenden Code am Ende der Datei ein:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');\n\naddFilter(\n\t'editor.BlockEdit',\n\t'image-hacker\/with-polaroid-controls',\n\twithPolaroidControls\n);<\/code><\/pre>\n<p>Das macht dieser Code:<\/p>\n<ul>\n<li>Die Funktion <code>createHigherOrderComponent<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#createhigherordercomponent\" target=\"_blank\" rel=\"noopener noreferrer\">erstellt eine Komponente h\u00f6herer Ordnung<\/a> (HOC), die <code>BlockEdit<\/code> umh\u00fcllt. ist die Hauptkomponente, die f\u00fcr die Anzeige von Bl\u00f6cken im Editor verantwortlich ist.<\/li>\n<li>Die HOC f\u00e4ngt die Komponente ab und pr\u00fcft, ob es sich um einen Bildblock handelt. So wird sichergestellt, dass alle deine \u00c4nderungen nur f\u00fcr den Image-Block gelten.<\/li>\n<li>Wir verwenden die Destrukturierungszuweisung, um die erforderlichen Eigenschaften und Attribute aus den Objekten <code>props<\/code> und <code>attributes<\/code> herauszuziehen.<\/li>\n<li>Wir verwenden <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/fundamentals\/block-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>BlockControls<\/code><\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-group\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarGroup<\/code><\/a>, und <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarButton<\/code><\/a> Komponenten, um der Symbolleiste des Blocks eine Schaltfl\u00e4che &#8222;<strong>Animation umschalten<\/strong>&#8220; hinzuzuf\u00fcgen.<\/li>\n<li><code>isActive<\/code> setzt den Standardzustand von <code>imageAnimation<\/code><\/li>\n<li><code>onClick<\/code> schaltet den Wert <code>imageAnimation<\/code> um.<\/li>\n<\/ul>\n<figure id=\"attachment_196750\" aria-describedby=\"caption-attachment-196750\" style=\"width: 1668px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196750 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/custom-block-toolbar-button.jpg\" alt=\"Der Block-Symbolleiste wurde eine eigene Schaltfl\u00e4che hinzugef\u00fcgt\" width=\"1668\" height=\"588\"><figcaption id=\"caption-attachment-196750\" class=\"wp-caption-text\">Der Block-Symbolleiste wurde eine eigene Schaltfl\u00e4che hinzugef\u00fcgt<\/figcaption><\/figure>\n<p>Jetzt hast du ein Attribut und eine Schaltfl\u00e4che. Wenn du jedoch auf die Schaltfl\u00e4che klickst, passiert nichts.<\/p>\n<h4>Schritt 3. Hinzuf\u00fcgen der CSS-Klasse zum Wrapper-Element<\/h4>\n<p>Der n\u00e4chste Schritt besteht darin, die Klasse <code>has-image-animation<\/code> auf das <code>figure<\/code> Element anzuwenden, das das Bild einh\u00fcllt. Dazu brauchst du einen Filter, mit dem du dem Bild im Frontend die CSS-Klasse zuweisen kannst.<\/p>\n<p>F\u00fcge den folgenden Code in die Datei <code>index.js<\/code> ein:<\/p>\n<pre><code class=\"language-javascript\">function addAnimationFrontendClass(extraProps, blockType, attributes) {\n\tif (blockType.name === 'core\/image' && attributes.imageAnimation) {\n\t\textraProps.className = `${extraProps.className || ''} has-image-animation`;\n\t}\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'image-hacker\/add-animation-frontend-class',\n\taddAnimationFrontendClass\n);<\/code><\/pre>\n<p>Dieser Code f\u00fcgt dem Element <code>figure<\/code> die CSS-Klasse <code>has-image-animation<\/code> hinzu, wenn das Attribut <code>imageAnimation<\/code> auf <code>true<\/code> gesetzt ist.<\/p>\n<p>Versuchen wir zu verstehen, was im Detail passiert.<\/p>\n<ul>\n<li><code>addFilter<\/code> Der Hook greift in die Prozesse des Editors ein, um Daten oder das Verhalten zu \u00e4ndern.<\/li>\n<li><code>blocks.getSaveContent.extraProps<\/code> ist der spezifische Hook, auf den wir abzielen. <code>extraProps<\/code> ist ein spezieller Hook, mit dem du dem Wrapper-Element zus\u00e4tzliche HTML-Attribute hinzuf\u00fcgen kannst.<\/li>\n<li><code>image-hacker\/add-animation-class<\/code> ist der eindeutige Name deines Filters.<\/li>\n<li><code>addAnimationFrontendClass<\/code> ist der Name der Callback-Funktion, die jedes Mal ausgef\u00fchrt wird, wenn der <code>blocks.getSaveContent.extraProps<\/code> -Hook ausgef\u00fchrt wird. Diese Funktion ben\u00f6tigt 3 Argumente:\n<ul>\n<li><code>extraProps<\/code>: Ein Objekt, das die Eigenschaften des Wrapper-Elements des Blocks enth\u00e4lt, wie z. B. <code>className<\/code>.<\/li>\n<li><code>blockType<\/code>: Ein Objekt mit den Details des Blocks, z. B. <code>name<\/code> (<code>core\/image<\/code>).<\/li>\n<li><code>attributes<\/code>: Ein Objekt mit den Attributen des Blocks<\/li>\n<\/ul>\n<\/li>\n<li>Die Logik der Funktion stellt sicher, dass der Code nur ausgef\u00fchrt wird, wenn <code>blockType.name === 'core\/image'<\/code> und <code>attributes.imageAnimation<\/code> <code>true<\/code> ist.<\/li>\n<li>Wenn beide Bedingungen erf\u00fcllt sind, gibt die Funktion ein neues <code>props<\/code> Objekt zur\u00fcck, bei dem <code>has-image-animation<\/code> an das bestehende Klassenobjekt angeh\u00e4ngt wird.<\/li>\n<\/ul>\n<p>Jetzt kannst du es selbst ausprobieren. F\u00fcge ein Bild zu deinem Inhalt hinzu, w\u00e4hle den Polaroid-Stil in der Block-Seitenleiste und klicke auf die Schaltfl\u00e4che <strong>Animation umschalten<\/strong> in der Block-Symbolleiste. Speichere deinen Beitrag und \u00fcberpr\u00fcfe das Ergebnis auf dem Frontend. Dein Bild sollte sich drehen, wenn du den Mauszeiger dar\u00fcber bewegst.<\/p>\n<figure id=\"attachment_196905\" aria-describedby=\"caption-attachment-196905\" style=\"width: 1954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196905 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid-has-image-animation.jpg\" alt=\"is_style_polaroid und has_image_animation CSS-Klassen zum Image-Block hinzugef\u00fcgt\" width=\"1954\" height=\"1184\"><figcaption id=\"caption-attachment-196905\" class=\"wp-caption-text\">is_style_polaroid und has_image_animation CSS-Klassen zum Image-Block hinzugef\u00fcgt<\/figcaption><\/figure>\n<h3>Blockvariationen registrieren<\/h3>\n<p>Blockvariationen sind vorkonfigurierte Versionen eines Blocks, mit einer Reihe von Attributen und verschachtelten Bl\u00f6cken. WordPress behandelt Blockvariationen als eigenst\u00e4ndige Bl\u00f6cke, macht sie im Block-Inserter verf\u00fcgbar und kennzeichnet sie mit einem eigenen Symbol.<\/p>\n<p>Du kannst eine Blockvariation verwenden, um eine neue Version des Bildblocks zu erstellen, die standardm\u00e4\u00dfig im Polaroid-Stil gestaltet ist.<\/p>\n<p>Der erste Schritt besteht darin, die Funktion <code>registerBlockVariation<\/code> in deine <code>\/src\/index.js<\/code> Datei zu importieren:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';<\/code><\/pre>\n<p>Dann f\u00fcgst du einen Aufruf der Funktion <code>registerBlockVariation<\/code> in <code>domReady()<\/code> ein, direkt unter <code>registerBlockStyle<\/code>:<\/p>\n<pre><code class=\"language-javascript\">domReady(() =&gt; {\n\t\/\/ Register a style variation for the image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n\n\t\/\/ Register a block variation of the image block\n\tregisterBlockVariation('core\/image', {\n\t\tname: 'animated-polaroid',\n\t\ttitle: 'Animated Polaroid',\n\t\ticon: 'image-filter',\n\t\tattributes: {\n\t\t\tclassName: 'is-style-polaroid',\n\t\t\timageAnimation: true,\n\t\t},\n\t\tscope: ['inserter'],\n\t});\n});<\/code><\/pre>\n<p>Die Funktion <code>registerBlockVariation<\/code> erstellt eine Variation f\u00fcr einen bestehenden Block. Sie nimmt zwei Argumente entgegen: den Namen des Blocks und ein Objekt, das die Variation definiert. (Siehe auch die <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/08\/an-introduction-to-block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">Einf\u00fchrung in Blockvariationen<\/a> und die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation der Blockvariationen-API<\/a>).<\/p>\n<p>Speichere deine Datei, f\u00fchre den Build aus, um deine \u00c4nderungen anzuwenden, und kehre dann zu deinem WordPress-Admin zur\u00fcck. Erstelle einen neuen Beitrag und suche im Blockinserter nach dem Block <strong>Animated Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196842\" aria-describedby=\"caption-attachment-196842\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196842 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/block-inserter.jpg\" alt=\"Eine Blockvariation im Block-Inserter\" width=\"1362\" height=\"876\"><figcaption id=\"caption-attachment-196842\" class=\"wp-caption-text\">Eine Blockvariation im Block-Inserter<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Aufgrund der Komplexit\u00e4t der Umgebung und der Besonderheit der Selektoren werden wir den Code, der die Animation erzeugt, nicht in den Block-Editor einf\u00fcgen. Aus diesem Grund wird die Animation im Editor nicht funktionieren.<\/p>\n<\/aside>\n\n<h3>Testen und Fehlersuche<\/h3>\n<p>Lass uns ein paar Tests machen. F\u00fcge ein oder mehrere Bilder zu einem neuen Beitrag hinzu. W\u00e4hle f\u00fcr jedes Bild den Polaroid-Stil, aktiviere die Animation und f\u00fcge Links hinzu. F\u00fchre auch Tests mit dem Galerie-Block durch.<\/p>\n<p>Alles scheint wie erwartet zu funktionieren. Wenn du jedoch einen Link mit einem Lightbox-Effekt zu einem Bild im Polaroid-Stil hinzuf\u00fcgst, wird kein sch\u00f6nes Ergebnis erzielt.<\/p>\n<p>Dieses seltsame Verhalten scheint auf ein Kompatibilit\u00e4tsproblem zwischen dem WordPress-Leuchtpult und CSS-\u00dcberg\u00e4ngen zur\u00fcckzuf\u00fchren zu sein.<\/p>\n<p>Um eine langwierige und komplizierte Fehlersuche zu vermeiden, solltest du die Option <strong>&#8222;Bei Klick vergr\u00f6\u00dfern&#8220;<\/strong> deaktivieren und eine Warnung hinzuf\u00fcgen, die die Nutzer\/innen darauf hinweist, dass der Leuchtkasten deaktiviert ist.<\/p>\n<p>Zuerst musst du einige zus\u00e4tzliche Ressourcen importieren. Nachfolgend findest du die vollst\u00e4ndige Liste der Ressourcen, die aus der Datei <code>\/src\/index.js<\/code> importiert wurden:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';\nimport domReady from '@wordpress\/dom-ready';\nimport { addFilter } from '@wordpress\/hooks';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment, useEffect } from '@wordpress\/element';\nimport { InspectorControls, BlockControls } from '@wordpress\/block-editor';\nimport { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport '.\/style.scss';<\/code><\/pre>\n<p>Wir haben die folgenden Importe hinzugef\u00fcgt:<\/p>\n<ul>\n<li><code>useEffect<\/code> from <code>@wordpress\/element<\/code>. (Siehe <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#useeffect\" target=\"_blank\" rel=\"noopener noreferrer\">Doku<\/a>)<\/li>\n<li><code>InspectorControls<\/code> von <code>@wordpress\/block-editor<\/code> (Siehe <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Doku<\/a>).<\/li>\n<li><code>PanelBody<\/code> und <code>Notice<\/code> von <code>@wordpress\/components<\/code> (Siehe <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">Doku<\/a>).<\/li>\n<li><code>useDispatch<\/code> von <code>@wordpress\/data<\/code>(siehe <a href=\"https:\/\/developer.wordpress.org\/news\/2022\/12\/application-state-managed-withdispatch-withselect-and-compose-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Entwickler Blog<\/a>)<\/li>\n<\/ul>\n<p>\u00c4ndere nun die Funktion <code>withPolaroidControls<\/code> wie folgt:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\tconst isPolaroid = className?.includes('is-style-polaroid');\n\n\t\tconst { createNotice } = useDispatch('core\/notices');\n\n\t\tuseEffect(() =&gt; {\n\t\t\tif (isPolaroid && lightbox?.enabled) {\n\t\t\t\t\/\/ Disable the lightbox to prevent the conflict.\n\t\t\t\tsetAttributes({ lightbox: { ...lightbox, enabled: false } });\n\n\t\t\t\t\/\/ Show the user a temporary 'snackbar' notice.\n\t\t\t\tcreateNotice(\n\t\t\t\t\t'warning', \/\/ The type of notice (info, success, warning, error)\n\t\t\t\t\t__('Lightbox disabled for Polaroid style.', 'image-hacker'),\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}, [isPolaroid, lightbox]);\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\n\t\t\t\t{isSelected && isPolaroid && (\n\t\t\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t\t\t&lt;PanelBody title={__('Polaroid Style', 'image-hacker')}&gt;\n\t\t\t\t\t\t\t&lt;Notice status=\"info\" isDismissible={false}&gt;\n\t\t\t\t\t\t\t\t{__(\n\t\t\t\t\t\t\t\t\t'The \"Expand on click\" (lightbox) feature is disabled for this style to prevent visual conflicts.',\n\t\t\t\t\t\t\t\t\t'image-hacker'\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t&lt;\/Notice&gt;\n\t\t\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t\t)}\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> ist ein React Hook, mit dem du &#8222;eine Komponente mit einem externen System synchronisieren kannst.&#8220; Der Code wird ausgef\u00fchrt, nachdem die Komponente gerendert wurde und jedes Mal, wenn sich ein Wert im Abh\u00e4ngigkeitsarray <code>[isPolaroid, lightbox]<\/code> \u00e4ndert. Die Pr\u00fcfung wird nur ausgef\u00fchrt, wenn der Nutzer den Polaroid-Stil anwendet oder entfernt oder den Leuchtkasten aktiviert oder deaktiviert (siehe <a href=\"https:\/\/react.dev\/reference\/react\/useEffect\" target=\"_blank\" rel=\"noopener noreferrer\">React-Dokumentation<\/a>).<\/li>\n<li>Die Bedingung <code>if (isPolaroid() && lightbox.enabled)<\/code> stellt sicher, dass der Code nur ausgef\u00fchrt wird, wenn das Bild den Polaroid-Stil hat und die Option Leuchtkasten aktiviert ist.<\/li>\n<li>Wenn die Bedingung <code>true<\/code> lautet, wird das Leuchtpult deaktiviert und ein vor\u00fcbergehender Warnhinweis erscheint. (Siehe auch <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/\" target=\"_blank\" rel=\"noopener noreferrer\">Datenreferenz f\u00fcr Warnhinweise<\/a>.)<\/li>\n<li>Die Bedingung <code>isSelected && isPolaroid<\/code> erzeugt ein neues Panel in der Symbolleiste des Bildblocks, um die Benutzer darauf hinzuweisen, dass der Leuchtkasten deaktiviert ist. Im Gegensatz zur Snackbar zeigt dieses Panel eine permanente Warnung an.<\/li>\n<\/ul>\n<figure id=\"attachment_196858\" aria-describedby=\"caption-attachment-196858\" style=\"width: 2184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196858 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/enlarge-on-click-disabled.jpg\" alt=\"Die Option Vergr\u00f6\u00dfern bei Klick ist deaktiviert.\" width=\"2184\" height=\"1406\"><figcaption id=\"caption-attachment-196858\" class=\"wp-caption-text\">Die Option Vergr\u00f6\u00dfern bei Klick ist deaktiviert.<\/figcaption><\/figure>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Tutorial haben wir einige der aufregendsten und leistungsst\u00e4rksten Entwicklerfunktionen des WordPress-Block-Editors anhand eines realen Projekts erkundet: Wir haben den Kernblock Bild um Funktionen erweitert, die nicht standardm\u00e4\u00dfig verf\u00fcgbar sind, und zwar um benutzerdefinierte Stile und Animationseffekte.<\/p>\n<p>Wir folgten einem progressiven Verbesserungsansatz und entwickelten eine Blockstil-Variation f\u00fcr den Bild-Block. Damit k\u00f6nnen Nutzer\/innen ihren Bildern ganz einfach einen klassischen Polaroid-Look verleihen.<\/p>\n<p>Als N\u00e4chstes f\u00fcgten wir der Symbolleiste des Bildblocks eine eigene Schaltfl\u00e4che hinzu, mit der die Nutzer\/innen einen fesselnden Schwebeeffekt erzeugen k\u00f6nnen.<\/p>\n<p>Zum Schluss haben wir eine Blockvariante erstellt, die standardm\u00e4\u00dfig mit dem Polaroid-Stil und den Animationseinstellungen vorkonfiguriert ist.<\/p>\n<p>Wir hoffen, dass du mit den Erkenntnissen und Techniken, die du in diesem Tutorial gewonnen hast, einige wirklich \u00fcberraschende Anpassungen f\u00fcr die Kernbl\u00f6cke von Gutenberg erstellen kannst!<\/p>\n<p>Viel Spa\u00df beim Programmieren!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg hat sich zu einem leistungsstarken und stark anpassbaren Editor entwickelt. Neben den robusten Out-of-the-Box-Funktionen k\u00f6nnen WordPress-Entwickler jetzt eine Vielzahl von APIs nutzen, um benutzerdefinierte Funktionen &#8230;<\/p>\n","protected":false},"author":36,"featured_media":73736,"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-73735","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 Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt<\/title>\n<meta name=\"description\" content=\"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\" \/>\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 mit Stilvariationen und Blockvariationen hackt\" \/>\n<meta property=\"og:description\" content=\"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\" \/>\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-08-07T07:49:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-12T06:55:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.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=\"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.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=\"18\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt\",\"datePublished\":\"2025-08-07T07:49:31+00:00\",\"dateModified\":\"2025-08-12T06:55:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\"},\"wordCount\":2621,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\",\"name\":\"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"datePublished\":\"2025-08-07T07:49:31+00:00\",\"dateModified\":\"2025-08-12T06:55:23+00:00\",\"description\":\"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#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 Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt","description":"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt","og_description":"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!","og_url":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-08-07T07:49:31+00:00","article_modified_time":"2025-08-12T06:55:23+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt","datePublished":"2025-08-07T07:49:31+00:00","dateModified":"2025-08-12T06:55:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/"},"wordCount":2621,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/","url":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/","name":"Wie man Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png","datePublished":"2025-08-07T07:49:31+00:00","dateModified":"2025-08-12T06:55:23+00:00","description":"Willst du lernen, wie du Gutenberg hacken und deinen Bl\u00f6cken coole Funktionen mit Stil und Blockvariationen hinzuf\u00fcgen kannst? Dann verpass dieses Tutorial nicht!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/08\/gutenberg-style-variations-and-block-variations.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-bloecke-mit-stilvariationen\/#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 Gutenberg-Bl\u00f6cke mit Stilvariationen und Blockvariationen hackt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/73735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=73735"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/73735\/revisions"}],"predecessor-version":[{"id":73753,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/73735\/revisions\/73753"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/translations\/pt"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73735\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/73736"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=73735"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=73735"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=73735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}