{"id":71386,"date":"2024-10-01T15:26:34","date_gmt":"2024-10-01T14:26:34","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=71386&#038;preview=true&#038;preview_id=71386"},"modified":"2024-10-02T13:36:29","modified_gmt":"2024-10-02T12:36:29","slug":"theme-json-blocks-eigenschaft","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/","title":{"rendered":"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen"},"content":{"rendered":"<p>Die Einf\u00fchrung des <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-full-site-editing\/\">Full Site Editing (FSE)<\/a> in WordPress verdeutlicht die wachsende Bedeutung der Datei <code>theme.json<\/code>. Es gibt jetzt eine ganz neue Hierarchie und Struktur zu verstehen, zusammen mit den verschiedenen Eigenschaften, die dir helfen, deine Designs zu erstellen. Insbesondere die Eigenschaft <code>blocks<\/code> in <code>theme.json<\/code> ist wichtig, wenn du moderne, flexible WordPress-Themes mit einzigartigen Bl\u00f6cken erstellen willst.<\/p>\n<p>In diesem Leitfaden erkunden wir die Besonderheiten der Eigenschaft <code>blocks<\/code> in <code>theme.json<\/code>, damit du mit Bl\u00f6cken arbeiten, sie entwerfen und gestalten kannst, um dynamischere und anpassbare WordPress-Erlebnisse zu schaffen.<\/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 Eigenschaft blocks in theme.json verstehen<\/h2>\n<p>Bevor wir in die Feinheiten der Eigenschaft <code>blocks<\/code> eintauchen, wollen wir zun\u00e4chst ihre Rolle innerhalb von <code>theme.json<\/code> und der WordPress-Theme-Entwicklung verstehen.<\/p>\n<figure id=\"attachment_184921\" aria-describedby=\"caption-attachment-184921\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184921 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-file.png\" alt=\"Ein Code-Editor-Fenster, das einen Teil einer theme.json-Datei f\u00fcr ein WordPress-Theme anzeigt. Die JSON-Struktur definiert benutzerdefinierte Vorlagen f\u00fcr \u201eleere\u201c, \u201eblog-alternative\u201c und \u201e404\u201c-Seiten. Der Editor hat ein dunkles Design mit Syntaxhervorhebung und der Hintergrund zeigt eine neblige Waldlandschaft.\" width=\"1200\" height=\"970\"><figcaption id=\"caption-attachment-184921\" class=\"wp-caption-text\">Die Datei <strong>theme.json<\/strong> von Twenty Twenty-Three<\/figcaption><\/figure>\n<p>Zun\u00e4chst einmal ist <code>theme.json<\/code> die <a href=\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\">Konfigurationsdatei<\/a>, in der du globale Stile und Einstellungen f\u00fcr deine Themes festlegen kannst. In diesem &#8222;zentralen Knotenpunkt&#8220; kannst du verschiedene Aspekte des Aussehens und Verhaltens deines Themes steuern, darunter Typografie, Farben und Layout-Optionen. Sie kann aber noch mehr als nur kosmetische Anpassungen vornehmen.<\/p>\n<p>Mit der Eigenschaft <code>blocks<\/code> kannst du einzelne Blocktypen und nicht nur die gesamte Website steuern. Du kannst Standardstile, -einstellungen und -verhaltensweisen f\u00fcr bestimmte Bl\u00f6cke festlegen, was die Konsistenz deines Themes und die Flexibilit\u00e4t f\u00fcr Website-Betreiber gew\u00e4hrleistet.<\/p>\n<h3>Die Beziehung zwischen der Block-Eigenschaft und der vollst\u00e4ndigen Website-Bearbeitung<\/h3>\n<p>FSE ist ein eher visueller Ansatz f\u00fcr den Aufbau deiner Website mit Bl\u00f6cken als Kernst\u00fcck. Auf dem Frontend stehen dir die meisten Styling- und Anpassungsoptionen f\u00fcr deine gesamte Website zur Verf\u00fcgung:<\/p>\n<figure id=\"attachment_184916\" aria-describedby=\"caption-attachment-184916\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184916 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/full-site-editor.png\" alt=\"Der Hauptbildschirm des WordPress-Site-Editors zeigt eine blaue Startseite mit dem Titel \u201eEin Bekenntnis zu Innovation und Nachhaltigkeit\u201c. Die Seite enth\u00e4lt ein modernes Architekturbild und Anpassungsoptionen in einer schwarzen linken Seitenleiste.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184916\" class=\"wp-caption-text\">Die vollst\u00e4ndige Website-Bearbeitungsoberfl\u00e4che in WordPress<\/figcaption><\/figure>\n<p>Die Eigenschaft <code>blocks<\/code> ist aus mehreren Gr\u00fcnden ein wichtiger Teil der <code>theme.json<\/code> Datei:<\/p>\n<ul>\n<li>Sie bietet eine standardisierte M\u00f6glichkeit, Blockstile und Einstellungen zu definieren.<\/li>\n<li>Du kannst koh\u00e4rente Designsysteme auf einer programmatischen Basis erstellen.<\/li>\n<li>Du kannst das Erscheinungsbild von Bl\u00f6cken besser kontrollieren, ohne dass du benutzerdefiniertes <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">CSS<\/a> verwenden musst.<\/li>\n<li>Die Eigenschaft hilft dir, Blockmuster und Vorlagen zu erstellen.<\/li>\n<\/ul>\n<p>Entwickler k\u00f6nnen die Eigenschaft <code>blocks<\/code> nutzen, um Themes zu erstellen, die die vollst\u00e4ndige Bearbeitung der Website erm\u00f6glichen.<\/p>\n<h2>Wie die Eigenschaft Bl\u00f6cke strukturiert wird (und ihre Syntax)<\/h2>\n<p>Die Standardisierung, die die Eigenschaft <code>blocks<\/code> bietet, ist hilfreich, wenn es um Struktur und Syntax geht. Du wirst sie immer innerhalb des <code>settings<\/code> Objekts verschachteln:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"13px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"20px\"\n             }\n           ]\n\u2026<\/code><\/pre>\n<p>Das obige Beispiel definiert benutzerdefinierte Schriftgr\u00f6\u00dfen f\u00fcr einen Absatzblock. Die wichtigsten Komponenten lassen sich ganz einfach aufschl\u00fcsseln:<\/p>\n<ul>\n<li>Du verschachtelst die Eigenschaft <code>blocks<\/code> unter dem Objekt <code>settings<\/code>.<\/li>\n<li>Jeder Blocktyp hat einen Namespace und einen Namen (hier <code>core\/paragraph<\/code>).<\/li>\n<li>Dann legst du die Einstellungen des Blocks innerhalb des Objekts fest.<\/li>\n<\/ul>\n<p>Die Einstellungen umfassen das meiste, was f\u00fcr globale Stile verf\u00fcgbar ist. Dazu geh\u00f6ren zum Beispiel Typografie, Farbe, Abst\u00e4nde und viele andere.<\/p>\n<h3>Konfigurieren der globalen Blockeinstellungen<\/h3>\n<p>Schauen wir uns an, wie du globale Einstellungen definierst und wie sich dies auf die Eigenschaft <code>blocks<\/code> auswirkt. So schaffst du eine Grundlage f\u00fcr ein einheitliches Design in deinem Theme.<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"13px\"\n        },\n        {\n          \"name\": \"Medium\",\n          \"slug\": \"medium\",\n          \"size\": \"20px\"\n        }\n\u2026<\/code><\/pre>\n<p>In diesem Beispiel legen wir die globalen Schriftgr\u00f6\u00dfen fest, die f\u00fcr alle Bl\u00f6cke verf\u00fcgbar sind. Im WordPress-Site-Editor findest du diese Optionen im Bereich <strong>Typografie <\/strong>&gt;<strong> Elemente <\/strong>&gt;<strong> Text<\/strong>:<\/p>\n<figure id=\"attachment_184915\" aria-describedby=\"caption-attachment-184915\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184915 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elements-text.png\" alt=\"Der WordPress-Site-Editor zeigt die Optionen des Bedienfelds \u201eStile\u201c f\u00fcr Text an. Er zeigt Optionen zur Auswahl und Anpassung von Schriftart, Gr\u00f6\u00dfe, Darstellung, Zeilenh\u00f6he, Buchstabenabstand und Gro\u00df-\/Kleinschreibung an.\" width=\"1200\" height=\"883\"><figcaption id=\"caption-attachment-184915\" class=\"wp-caption-text\">Die meisten Typografie-Einstellungen in der <strong>theme.json<\/strong> sind auch im Site-Editor zug\u00e4nglich<\/figcaption><\/figure>\n<p>Jede Schriftgr\u00f6\u00dfe, die du auf <code>theme.json<\/code> definierst, entspricht einer der Gr\u00f6\u00dfenoptionen hier:<\/p>\n<figure id=\"attachment_184922\" aria-describedby=\"caption-attachment-184922\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184922 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-font-size.png\" alt=\"Nahaufnahme eines Code-Editors, der einen Teil einer WordPress-Datei \u201etheme.json\u201c anzeigt. Der sichtbare Code definiert Schriftgr\u00f6\u00dfen, einschlie\u00dflich \u201eSmall\u201c, \u201eMedium\u201c und \u201eLarge\u201c, mit ihren jeweiligen Gr\u00f6\u00dfen in Rem-Einheiten. Die Gr\u00f6\u00dfe \u201eLarge\u201c enth\u00e4lt eine Einstellung f\u00fcr flie\u00dfende Typografie. Der Editor verwendet ein dunkles Design mit Syntaxhervorhebung vor einem verschwommenen Waldhintergrund.\" width=\"1200\" height=\"729\"><figcaption id=\"caption-attachment-184922\" class=\"wp-caption-text\">Du legst die Voreinstellungen f\u00fcr die Schriftgr\u00f6\u00dfe in der Datei <strong>theme.json<\/strong> fest<\/figcaption><\/figure>\n<p>Nat\u00fcrlich gibt es noch viele andere M\u00f6glichkeiten, dein Theme anzupassen. Die Idee ist, ein globales Design zu erstellen, das in 80% der Anwendungsf\u00e4lle funktioniert.<\/p>\n<p>Mit der Eigenschaft <code>blocks<\/code> kannst du die grundlegenden Blockstile \u00fcberschreiben, um die letzten 20% abzudecken. Auf der Seite <strong>Stile<\/strong> im Seiteneditor kannst du auch die Designeinstellungen f\u00fcr jeden Block anpassen:<\/p>\n<figure id=\"attachment_184908\" aria-describedby=\"caption-attachment-184908\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184908 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-styles-editor.png\" alt=\"Eine Nahaufnahme der WordPress-Site-Editor-Oberfl\u00e4che, die Inhaltsblockoptionen wie Absatz, Bild, \u00dcberschrift und Galerie zeigt. Der Hauptinhaltsbereich zeigt die Startseite der Website an.\" width=\"1200\" height=\"838\"><figcaption id=\"caption-attachment-184908\" class=\"wp-caption-text\">Im Seiteneditor kannst du die Einstellungen f\u00fcr alle WordPress-Kernbl\u00f6cke bearbeiten<\/figcaption><\/figure>\n<p>Das ist f\u00fcr Endnutzer\/innen hervorragend, aber f\u00fcr Entwickler\/innen weniger wertvoll. Wir konzentrieren uns auf die Verwendung von <code>theme.json<\/code>, um mit der Eigenschaft <code>blocks<\/code> zu arbeiten.<\/p>\n<h2>Wie man einzelne Blocktypen anpasst<\/h2>\n<p>W\u00e4hrend globale Einstellungen wichtig sind, um die Konsistenz zu wahren, liegt die wahre St\u00e4rke in der Anpassungsf\u00e4higkeit der Eigenschaft <code>blocks<\/code>. Mit dieser granularen Einstellung kannst du das Aussehen und Verhalten bestimmter Bl\u00f6cke an das Design deines Themes anpassen, genau wie beim Site Editor<\/p>\n<p>Schauen wir uns ein Beispiel f\u00fcr die Anpassung des \u00dcberschriftenblocks f\u00fcr dein Theme an:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"20px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"30px\"\n            },\n            {\n              \"name\": \"Large\",\n              \"slug\": \"large\",\n              \"size\": \"40px\"\n            }\n            ],\n            \"fontWeight\": \"bold\"\n            },\n            \"color\": {\n              \"palette\": [\n                {\n                  \"name\": \"Heading Primary\",\n                  \"slug\": \"heading-primary\",\n                  \"color\": \"#333333\"\n                },\n                {\n                  \"name\": \"Heading Secondary\",\n                  \"slug\": \"heading-secondary\",\n                  \"color\": \"#666666\"\n                }\n              ]\n\u2026<\/code><\/pre>\n<p>Wie du siehst, spiegeln die Attribute wider, wie du globale \u00c4nderungen vornehmen w\u00fcrdest. Fassen wir zusammen, was wir hier tun:<\/p>\n<ul>\n<li>Wir legen bestimmte Schriftgr\u00f6\u00dfen f\u00fcr \u00dcberschriften fest und ordnen sie Gr\u00f6\u00dfenbezeichnungen zu.<\/li>\n<li>Die Schriftst\u00e4rke f\u00fcr alle \u00dcberschriften wird einfach fett sein.<\/li>\n<li>Diese \u00dcberschriften erhalten au\u00dferdem eine eigene Farbpalette.<\/li>\n<\/ul>\n<p>So wird sichergestellt, dass unsere \u00dcberschriften im gesamten Design einheitlich aussehen. Au\u00dferdem k\u00f6nnen wir diese Elemente kontrollieren, wenn wir nicht wissen, wie der Endnutzer sie anwenden wird, was einem einheitlichen Design zugute kommt.<\/p>\n<h3>Die richtige Kombination aus Namespace und Slug verwenden<\/h3>\n<p>Wenn du Blocktypen aufrufst, ist es wichtig, dass du die richtige Namespace- und Slug-Kombination verwendest. Sonst werden deine \u00c4nderungen nicht auf die Bl\u00f6cke angewendet, auf die du abzielen willst.<\/p>\n<p>Jeder Block hat einen Namespace und einen Slug. WordPress-Kernbl\u00f6cke haben in der Regel den Namespace <code>core<\/code>. Der Slug ist der Name des Blocks:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/image\": {\n\u2026<\/code><\/pre>\n<p>Wenn du den Slug eines Blocks wissen willst, kannst du in seiner spezifischen <code>block.json<\/code> Datei nachsehen. Du findest sie im Verzeichnis <code>wp-includes\/blocks<\/code>. Hier gibt es verschiedene Ordner, von denen jeder eine <code>block.json<\/code> Datei enth\u00e4lt. In jedem Ordner sollten der Namensraum und der Slug f\u00fcr den Block ganz oben in der Datei stehen:<\/p>\n<figure id=\"attachment_184910\" aria-describedby=\"caption-attachment-184910\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184910 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/code-directory.png\" alt=\"Ein Teil eines macOS-Finder-Fensters, das den Inhalt des Code-Verzeichnisses anzeigt. Au\u00dferdem ist ein Teil eines Code-Editors mit einer ge\u00f6ffneten block.json-Datei zu sehen. Der sichtbare Code definiert Eigenschaften f\u00fcr einen WordPress-Block namens \u201ecore\/code\u201c mit dem Titel \u201eCode\u201c und einer Beschreibung zur Anzeige von Code-Snippets.\" width=\"1200\" height=\"518\"><figcaption id=\"caption-attachment-184910\" class=\"wp-caption-text\">Die Datei <strong>block.json<\/strong> enth\u00e4lt die wichtigsten Metadaten f\u00fcr jeden einzelnen Block<\/figcaption><\/figure>\n<p>Wenn du diese Verzeichnisse durchsuchst, wirst du feststellen, dass das Verzeichnis <code>wp-includes<\/code> eine eigene Datei <code>theme.json<\/code> hat. Das mag verwirrend erscheinen, ist aber einfach zu erkl\u00e4ren.<\/p>\n<h2>Warum theme.json standardm\u00e4\u00dfig angepasste Block-Einstellungen enth\u00e4lt<\/h2>\n<p>Die WordPress-eigene Datei <code>theme.json<\/code> mag auf den ersten Blick seltsam erscheinen, weil es sich nicht um ein Theme handelt. Das ist jedoch kein Zufall. Der Hauptgrund ist die Abw\u00e4rtskompatibilit\u00e4t mit \u00e4lteren WordPress-Versionen.<\/p>\n<p>Der Button-Block legt zum Beispiel einen Rahmenradius fest:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/button\": {\n    \"border\": {\n      \"radius\": true\n     }\n  },\n\u2026<\/code><\/pre>\n<p>Andere Bl\u00f6cke haben \u00e4hnliche Einstellungen, um die Konsistenz zwischen verschiedenen WordPress-Versionen zu gew\u00e4hrleisten. Dies kann jedoch zu Problemen f\u00fchren, wenn du dir dessen nicht bewusst bist.<\/p>\n<p>Wenn du versuchst, globale Einstellungen zu definieren und dich fragst, warum diese \u00c4nderungen nicht f\u00fcr bestimmte Bl\u00f6cke gelten, k\u00f6nnte die Abw\u00e4rtskompatibilit\u00e4t die Antwort sein. Nat\u00fcrlich kannst du diese Einstellungen in deiner eigenen <code>theme.json<\/code> Datei problemlos au\u00dfer Kraft setzen.<\/p>\n<h2>Entwicklung von benutzerdefinierten Bl\u00f6cken mit theme.json<\/h2>\n<p>Die Datei <code>theme.json<\/code> ist ideal f\u00fcr die Anpassung bestehender Bl\u00f6cke, aber ihre M\u00f6glichkeiten reichen auch f\u00fcr die Entwicklung eigener Bl\u00f6cke. Du kannst <code>theme.json<\/code> nutzen, um Standardstile und -einstellungen f\u00fcr deine eigenen Bl\u00f6cke zu definieren. So kannst du eine nahtlose Integration in das Design deines Themes erreichen.<\/p>\n<p>Zuerst musst du jedoch <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">den Block selbst erstellen<\/a>. Das w\u00fcrde den Rahmen dieses Artikels sprengen, aber zusammenfassend lassen sich ein paar wichtige Facetten hier auflisten:<\/p>\n<ul>\n<li><strong>Das Ger\u00fcst f\u00fcr den Block.<\/strong> Dazu musst du eine lokale Entwicklungsumgebung einrichten und die Dateistruktur f\u00fcr den gesamten Block erstellen.<\/li>\n<li><strong>Aktualisieren der Datei <code>block.json<\/code>.<\/strong> Hier musst du die Identit\u00e4t des Blocks \u00e4ndern und <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">Unterst\u00fctzungen<\/a> hinzuf\u00fcgen. Letzteres sind M\u00f6glichkeiten, um die Unterst\u00fctzung f\u00fcr bestimmte WordPress-Funktionen zu deklarieren. So kannst du zum Beispiel die Ausrichtung anpassen, Ankerfelder implementieren, mit verschiedenen Typografieeinstellungen arbeiten und vieles mehr.<\/li>\n<li><strong>Passe die JavaScript-Dateien des Blocks an.<\/strong> Sowohl <code>index.js<\/code> als auch <code>edit.js<\/code> ben\u00f6tigen Code, um WordPress mitzuteilen, wie der Block funktioniert und damit er im Site-Editor angezeigt wird.<\/li>\n<\/ul>\n<p>M\u00f6glicherweise musst du auch <code>render.php<\/code> bearbeiten, statisches Rendering hinzuf\u00fcgen und eine ganze Reihe anderer Aufgaben erledigen. An dieser Stelle kannst du wie bei jedem anderen Block auch stilistische \u00c4nderungen an <code>theme.json<\/code> vornehmen. Schauen wir uns jetzt <code>block.json<\/code> genauer an.<\/p>\n<h3>Die Datei block.json<\/h3>\n<p>Diese Datei wird vom WordPress-Entwicklungsteam als &#8222;kanonischer&#8220; Weg bezeichnet, um Bl\u00f6cke sowohl auf der Server- als auch auf der Client-Seite zu registrieren. Die Metadaten, die du hier eintr\u00e4gst, informieren WordPress \u00fcber den Blocktyp und die dazugeh\u00f6rigen Dateien:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n  \"apiVersion\": 3,\n  \"name\": \"my-plugin\/notice\",\n  \"title\": \"Notice\",\n  \"category\": \"text\",\n  \"parent\": [ \"core\/group\" ],\n  \"icon\": \"star\",\n  \"description\": \"Shows warning, error or success notices...\",\n  \"keywords\": [ \"alert\", \"message\" ],\n  \"version\": \"1.0.3\",\n  \"textdomain\": \"my-plugin\",\n  \"attributes\": {\n    \"message\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \".message\"\n    }\n  },\n\u2026<\/code><\/pre>\n<p>Sie sind vergleichbar mit den Metadaten, die du am Anfang einer <a href=\"https:\/\/kinsta.com\/php\/\">PHP-Datei<\/a> f\u00fcr Themes und Plugins angeben w\u00fcrdest. Auch wenn die Datei ausschlie\u00dflich JSON-Daten verwendet, kannst du dennoch Code \u00fcber PHP, <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> und CSS austauschen:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"editorScript\": \"file:.\/index.js\",\n\"script\": \"file:.\/script.js\",\n\"viewScript\": [ \"file:.\/view.js\", \"example-shared-view-script\" ],\n\"editorStyle\": \"file:.\/index.css\",\n\"style\": [ \"file:.\/style.css\", \"example-shared-style\" ],\n\"viewStyle\": [ \"file:.\/view.css\", \"example-view-style\" ],\n\"render\": \"file:.\/render.php\"\n\u2026<\/code><\/pre>\n<p>Darauf kommen wir sp\u00e4ter im Abschnitt \u00fcber Variationen zur\u00fcck. Zum Abschluss dieses Abschnitts musst du wissen, wie du deinen benutzerdefinierten Block als Standard in WordPress festlegen kannst. Es gibt mehrere M\u00f6glichkeiten, dies zu erreichen. Der klassische Weg ist, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">einen benutzerdefinierten Beitragstyp zu registrieren<\/a> und die Bl\u00f6cke dort einzuf\u00fcgen. Es gibt aber auch noch ein paar andere Methoden.<\/p>\n<p>Du k\u00f6nntest zum Beispiel einen bestehenden Beitragstyp aktualisieren, um <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-beitrags-vorlagen\/#how-to-create-a-custom-wordpress-post-template\">eine Block-Vorlage hinzuzuf\u00fcgen<\/a>. Hier ist ein einfaches Beispiel:<\/p>\n<pre><code class=\"language-php\">\u2026\nfunction load_post_type_patterns() {\n    \/\/ Define an initial pattern for the 'HypnoToad' post type\n    $post_type_object = get_post_type_object( 'hypnoToad' );\n    $post_type_object-&gt;template = array(\n    array(\n        'core\/block',\n\u2026<\/code><\/pre>\n<p>Eine weitere M\u00f6glichkeit ist, den <code>default_content<\/code> Hook aufzurufen und den Block mit Markup zu definieren:<\/p>\n<pre><code class=\"language-php\">function toad_content( $content, $post ) {\n    if ( $post-&gt;post_type === 'hypnoToad' ) {\n        $content ='\n        &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column \u2192\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        \n\n\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;\/div&gt;\n        <!-- \/wp:columns -->';\n    }\n    return $content;\n}\nadd_filter( 'default_content', 'toad_content', 10, 2 );<\/code><\/pre>\n<p>Nat\u00fcrlich wirst du nicht nur JSON, <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a> und PHP verwenden. Du wirst auch andere Sprachen verwenden, um das Design und die Interaktivit\u00e4t zu verbessern. Die gute Nachricht ist, dass WordPress dir eine unkomplizierte M\u00f6glichkeit bietet, dies zu tun.<\/p>\n<h2>Benutzerdefinierte CSS-Eigenschaften f\u00fcr deine Bl\u00f6cke verwenden<\/h2>\n<p>Mit den vorhandenen Eigenschaften, Attributen und Objekten von <code>theme.json<\/code> kannst du viel erreichen, aber das deckt nicht jeden Anwendungsfall ab. Die Datei gibt dir die Eigenschaft <code>custom<\/code> an die Hand, mit der du relevante CSS-Eigenschaften erstellen kannst:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"toad\": \"hypno\"\n    }\n  }\n}<\/code><\/pre>\n<p>Hier gibst du ein Schl\u00fcssel-Wert-Paar an, das am Frontend zu einer CSS-Variablen wird:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--toad: hypno;\n}<\/code><\/pre>\n<p>Beachte, dass die Variable doppelte Bindestriche verwendet, um ihre Elemente zu trennen. In der Regel siehst du immer <code>--wp--custom--<\/code>, die dann den Schl\u00fcssel am Ende kennzeichnet. Manchmal definierst du Variablen und Eigenschaften mit Camel Case:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"hypnoToad\": \"active\"\n    }\n  }\n}<\/code><\/pre>\n<p>In diesem Fall verwendet WordPress Bindestriche, um die W\u00f6rter zu trennen:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--hypno-toad: active;\n}<\/code><\/pre>\n<p>Zwischen der Eigenschaft <code>custom<\/code> und <code>block.json<\/code> hast du alle M\u00f6glichkeiten, deine Bl\u00f6cke so zu gestalten, wie du es f\u00fcr richtig h\u00e4ltst, einschlie\u00dflich aller Variationen, die du einbauen m\u00f6chtest.<\/p>\n<h2>Ein kurzer Blick auf Block, Stil und Blockstilvariationen<\/h2>\n<p>Bevor wir uns der Gestaltung mit der Eigenschaft <code>blocks<\/code> zuwenden, werfen wir einen Blick auf die Variationen. Es gibt verschiedene Variationen f\u00fcr deine Designs, und die Namenskonventionen k\u00f6nnten dazu f\u00fchren, dass du den falschen Typ f\u00fcr deine Bed\u00fcrfnisse verwendest. Hier ist eine Aufschl\u00fcsselung der Unterschiede:<\/p>\n<ul>\n<li><strong>Blockvariationen.<\/strong> Wenn dein Block alternative Versionen hat (denk an einen Block, der viele benutzerdefinierte Links anzeigt, die vom Nutzer eingestellt wurden), ist dies eine Blockvariation. Der Social Media Block ist ein gutes Beispiel daf\u00fcr.<\/li>\n<li><strong>Stilvariationen.<\/strong> Dies sind alternative Versionen von <code>theme.json<\/code>, die auf deiner globalen Website funktionieren. Wir gehen hier nicht darauf ein, aber die meisten Block-Themes bieten sie f\u00fcr verschiedene Farbpaletten und Typografieeinstellungen an.<\/li>\n<li><strong>Block-Stilvariationen.<\/strong> Hier wird die Kernfunktionalit\u00e4t der Stilvariationen \u00fcbernommen und du kannst alternative Designs f\u00fcr einen Block erstellen.<\/li>\n<\/ul>\n<p>Du fragst dich vielleicht, ob du eine Blockvariation oder eine Blockstilvariation verwenden sollst; die Antwort ist ganz einfach. Wenn die \u00c4nderungen, die du vornehmen willst, innerhalb von <code>theme.json<\/code> oder mit CSS erfolgen k\u00f6nnen, erstelle eine Blockstilvariation. Alles andere erfordert eine Blockvariation.<\/p>\n<h3>Blockvariationen<\/h3>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blockvariationen<\/a> registrierst du mit JavaScript. Es ist eine gute Idee, eine Datei im Verzeichnis des Themes zu erstellen, aber sie kann \u00fcberall hingehen. Du brauchst nur eine Zeile, um eine Variation in deiner JavaScript-Datei zu registrieren:<\/p>\n<pre><code class=\"language-js\">const registerBlockVariation = ( blockName, variation )<\/code><\/pre>\n<p>F\u00fcr <code>blockName<\/code> musst du auch hier den Namespace angeben, wie bei der Eigenschaft <code>blocks<\/code>. Innerhalb des <code>variation<\/code> Objekts f\u00fcgst du den Namen, den Titel, die Beschreibung, ob die Variation standardm\u00e4\u00dfig aktiv ist und mehr hinzu. Um die Datei im Site Editor zu laden, rufst du einfach den <code>enqueue_block_editor_assets<\/code> Hook auf und <a href=\"https:\/\/kinsta.com\/de\/blog\/wp-enqueue-scripts\/\">reihst dein Skript darin ein<\/a>.<\/p>\n<h3>Blockstilvariationen<\/h3>\n<p>Bei den Blockstilvariationen hast du <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\" target=\"_blank\" rel=\"noopener noreferrer\">zwei M\u00f6glichkeiten<\/a>:<\/p>\n<ul>\n<li>Verwende die Funktion <code>register_block_style()<\/code> mit PHP.<\/li>\n<li>Erstelle eine <code>block-editor.js<\/code> JavaScript-Datei, verwende die <code>registerBlockStyle()<\/code> Funktion \u00e4hnlich wie bei Blockvariationen und reihe das Skript ein.<\/li>\n<\/ul>\n<p>Sobald du eine Blockstilvariation registriert hast, kannst du den Block mit der Eigenschaft <code>variations<\/code> ansteuern:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/button\": {\n      \"variations\": {\n        \"outline\": {\n          \"border\": {\n            \"color\": \"var:preset|color|black\",\n            \"radius\": \"0\",\n            \"style\": \"solid\",\n            \"width\": \"3px\"\n          },\n\u2026<\/code><\/pre>\n<p>Das bedeutet, dass du unter Umst\u00e4nden \u00fcberhaupt kein benutzerdefiniertes CSS ben\u00f6tigst &#8211; fast jeder Aspekt der Gestaltung eines Blocks ist \u00fcber die Eigenschaft <code>blocks<\/code> m\u00f6glich.<\/p>\n<h2>Die komplette Gestaltung eines Standardblocks mit der Eigenschaft blocks\u00a0<\/h2>\n<p>Um zu zeigen, wie die Eigenschaft <code>blocks<\/code> funktioniert, gehen wir ein Beispiel aus der Praxis durch. Unsere Website nutzt das Twenty Twenty-Four-Theme und verwendet die Standardstilvariante:<\/p>\n<figure id=\"attachment_184912\" aria-describedby=\"caption-attachment-184912\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184912 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/default-style-variation.png\" alt=\"Der WordPress-Site-Editor zeigt auf der rechten Seite eine Website-Startseite und auf der linken Seite das Men\u00fc \u201eStile\u201c. Es gibt mehrere Optionen zur Auswahl eines alternativen Farbschemas sowie Optionen zur Anpassung der Palette.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184912\" class=\"wp-caption-text\">Jedes Theme wird oft mit verschiedenen Stilvariationen ausgeliefert, die unterschiedliche Looks erzielen<\/figcaption><\/figure>\n<p>Bisher sieht das f\u00fcr uns ideal aus &#8211; obwohl die \u00dcberschriften und der Flie\u00dftext in der Farbe zu \u00e4hnlich erscheinen. Wir m\u00f6chten eine oder beide Farben \u00e4ndern, um sie voneinander zu unterscheiden. Als Endnutzer oder Website-Betreiber k\u00f6nnen wir dies in der Seitenleiste des Website-Editors \u00e4ndern. Wenn du zu <strong>Bl\u00f6cke <\/strong>&gt;<strong> \u00dcberschrift<\/strong> gehst, kannst du auf das Element Text klicken und die Farbe in etwas Passenderes \u00e4ndern:<\/p>\n<figure id=\"attachment_184920\" aria-describedby=\"caption-attachment-184920\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184920 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/styles-heading-editor.png\" alt=\"Die WordPress-Site-Editor-Oberfl\u00e4che zeigt eine Startseite einer Website. Der Hauptinhaltsbereich zeigt eine \u00dcberschrift, eine kurze Beschreibung und eine Schaltfl\u00e4che \u201e\u00dcber uns\u201c, die alle in Schwarz gehalten sind. Darunter befindet sich ein architektonisches Bild, das ein modernes Geb\u00e4ude mit schr\u00e4gen Holzlatten zeigt. In der rechten Seitenleiste werden die Stiloptionen angezeigt, mit einem Pop-up-Fenster zur Auswahl einer Textfarbe.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184920\" class=\"wp-caption-text\">Du kannst die Einstellungen der einzelnen Bl\u00f6cke ganz einfach im Seiteneditor \u00e4ndern<\/figcaption><\/figure>\n<p>Als Entwickler kannst du dies jedoch auch innerhalb von <code>theme.json<\/code> tun. <span style=\"margin: 0px;padding: 0px\">Wie bei jedem anderen Theme auch, ist es am besten, <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\" target=\"_blank\" rel=\"noopener noreferrer\">ein Child-Theme zu erstellen<\/a>, damit<\/span> alle \u00c4nderungen erhalten bleiben. Ein weiterer Vorteil ist, dass deine <code>theme.json<\/code> Datei sauberer aussehen wird.<\/p>\n<p>Wir werden ein Verzeichnis innerhalb von <code>wp-content\/themes\/<\/code> erstellen und es <code>twentytwentyfour-child<\/code> nennen. Hier f\u00fcgst du eine g\u00fcltige Datei <code>style.css<\/code> und eine leere Datei <code>theme.json<\/code> hinzu.<\/p>\n<figure id=\"attachment_184909\" aria-describedby=\"caption-attachment-184909\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184909 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/child-theme-directory.png\" alt=\"Ein macOS-Datei-Explorer-Fenster f\u00fcr das Twentytwentyfour-Child-Theme, das zwei Dateien anzeigt: style.css und theme.json, was auf eine Child-Theme-Einrichtung f\u00fcr die WordPress-Entwicklung hinweist.\" width=\"1200\" height=\"614\"><figcaption id=\"caption-attachment-184909\" class=\"wp-caption-text\">Jedes Child-Theme-Verzeichnis braucht eine <strong>style.css-Datei<\/strong> und eine <strong>theme.json-Datei<\/strong><\/figcaption><\/figure>\n<p>Von hier aus kannst du die JSON-Datei \u00f6ffnen und dich an die Arbeit machen.<\/p>\n<h3>Eine theme.json-Datei f\u00fcr das Child-Theme erstellen und auff\u00fcllen<\/h3>\n<p>Der Hauptunterschied zwischen der Erstellung eines Parent- und eines Child-Themes in Bezug auf <code>theme.json<\/code> ist die Struktur der Datei. Du musst das Schema nicht angeben und nicht unbedingt alles in das <code>settings<\/code> Objekt einf\u00fcgen. In unserem Fall m\u00fcssen wir die Eigenschaft <code>styles<\/code> verwenden:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"styles\": {\n    \"blocks\": {}\n  }\n}<\/code><\/pre>\n<p>Als N\u00e4chstes m\u00fcssen wir den Namespace und den Slug f\u00fcr den Heading Block finden. Der offizielle <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Core Blocks Reference Guide<\/a> listet alle diese Angaben auf und sagt uns sogar, welche Attribute und Eigenschaften der Block unterst\u00fctzt. Der Leitfaden sagt uns, dass wir die Werte <code>background<\/code>, <code>gradient<\/code>, <code>link<\/code> und <code>text<\/code> f\u00fcr die Eigenschaft <code>color<\/code> anpassen k\u00f6nnen.<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": {}\n  }\n}<\/code><\/pre>\n<p>Wenn die Struktur fertig ist, k\u00f6nnen wir uns \u00fcberlegen, wie wir den Text umgestalten k\u00f6nnen.<\/p>\n<h3>Ein Farbschema finden und die \u00c4nderungen anwenden<\/h3>\n<p>Jetzt brauchen wir eine Farbe, die unseren Bed\u00fcrfnissen entspricht. Die Standardvariante von Twenty Twenty-Four verf\u00fcgt \u00fcber eine hervorragende Farbpalette, und wenn wir sie in einem speziellen Kontrast-Checker \u00fcberpr\u00fcfen, bekommen wir einige Ideen:<\/p>\n<figure id=\"attachment_184918\" aria-describedby=\"caption-attachment-184918\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-contrast.png\" alt=\"Das Coolors-Tool zur \u00dcberpr\u00fcfung des Farbkontrasts zeigt verschiedene Farbkombinationen mit Textbeispielen\" width=\"1200\" height=\"820\"><figcaption id=\"caption-attachment-184918\" class=\"wp-caption-text\">Die \u00dcberpr\u00fcfung deines Farbschemas auf den richtigen, zug\u00e4nglichen Kontrast ist ein wichtiger Schritt bei der Gestaltung eines Themes<\/figcaption><\/figure>\n<p>Als N\u00e4chstes k\u00f6nnen wir die Farbauswahl f\u00fcr unseren Block zu <code>theme.json<\/code> hinzuf\u00fcgen. Da das \u00fcbergeordnete Twenty Twenty-Four-Theme benutzerdefinierte CSS-Eigenschaften verwendet, um Palettenstile zu definieren, k\u00f6nnen wir dies auch hier aufrufen:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n\u2026<\/code><\/pre>\n<p>Wenn du den Namen einer Palettenfarbe wissen willst, kannst du ihn im Site Editor \u00fcber den Farbw\u00e4hler finden:<\/p>\n<figure id=\"attachment_184919\" aria-describedby=\"caption-attachment-184919\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184919 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-editor-color.png\" alt=\"Eine Nahaufnahme der Farbauswahl-Oberfl\u00e4che von Text Elements. Sie zeigt eine Auswahl von Farbmustern mit hexadezimalen Farbcodes, wobei die Kontrastfarbe als prim\u00e4re Option eingestellt ist.\" width=\"1200\" height=\"492\"><figcaption id=\"caption-attachment-184919\" class=\"wp-caption-text\">Du kannst den Namen einer Farbe herausfinden, indem du sie in einer Farbpalette des Site Editors ansiehst<\/figcaption><\/figure>\n<p>Sobald du deine \u00c4nderungen gespeichert hast, aktualisiere deine Seite und du solltest das neue Farbschema sehen. Falls nicht, \u00fcberpr\u00fcfe, ob du die Eigenschaft <code>blocks<\/code> im richtigen Objekt verschachtelt hast, denn das ist ein h\u00e4ufiger Fehler.<\/p>\n<p>Wenn wir uns die Seite ansehen, ist der Text weniger kontrastreich und leichter zu lesen. Wir wollen aber immer noch eine gewisse Abgrenzung zwischen dem Absatzblock und den umgebenden \u00dcberschriften sehen. Die Standardpalette des Themes bietet einige andere, kr\u00e4ftige Farben. Wir werden die Farbe Accent \/ 3 f\u00fcr den \u00dcberschriftenblock ausprobieren:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--accent-3)\" }\n  },\n  \"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" }\n  }\n}<\/code><\/pre>\n<p>Nachdem du die \u00c4nderungen gespeichert und das Frontend aktualisiert hast, wirst du sehen, dass der \u00dcberschriftenblock nun deutlicher zu erkennen ist:<\/p>\n<figure id=\"attachment_184907\" aria-describedby=\"caption-attachment-184907\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184907 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/accent-color-heading.png\" alt=\"Der WordPress-Site-Editor zeigt eine Website-Startseite mit einem Header-Bild einer modernen architektonischen Struktur. Der Hauptinhalt zeigt den Text \u201eEin Bekenntnis zu Innovation und Nachhaltigkeit\u201c in orangeroter Farbe.\" width=\"1200\" height=\"677\"><figcaption id=\"caption-attachment-184907\" class=\"wp-caption-text\">Das Frontend \u00e4ndert den Heading Block basierend auf den Einstellungen in der <strong>theme.json<\/strong><\/figcaption><\/figure>\n<p>Das muss noch nicht das Ende deiner Bearbeitung sein. Du kannst sogar die Optionen des Site Editors unter <code>theme.json<\/code> anpassen.<\/p>\n<h3>Hinzuf\u00fcgen von Attributoptionen zu Bl\u00f6cken<\/h3>\n<p>Die Optionen f\u00fcr die Bl\u00f6cke im Site-Editor werden durch die Unterst\u00fctzung der einzelnen Bl\u00f6cke bestimmt. Beim Absatzblock zum Beispiel ist die Funktion der Initialen standardm\u00e4\u00dfig deaktiviert.<\/p>\n<figure id=\"attachment_184917\" aria-describedby=\"caption-attachment-184917\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184917 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/no-drop-caps-option.png\" alt=\"Der WordPress-Site-Editor zeigt eine Nahaufnahme der rechten Options-Seitenleiste. Das schwebende Typografie-Anpassungsfeld zeigt Optionen f\u00fcr Schriftart, Gr\u00f6\u00dfe, Aussehen, Zeilenh\u00f6he, Buchstabenabstand, Dekoration, Ausrichtung und Gro\u00df-\/Kleinschreibung an \u2013 aber keine Initialen.\" width=\"1200\" height=\"633\"><figcaption id=\"caption-attachment-184917\" class=\"wp-caption-text\">Im Site-Editor kannst du standardm\u00e4\u00dfig keine Initialisierungsfunktion ausw\u00e4hlen<\/figcaption><\/figure>\n<p>Wir k\u00f6nnen dies in der Datei <code>theme.json<\/code> und der Eigenschaft <code>blocks<\/code> wieder einschalten. Wenn wir uns das Referenzmaterial ansehen, k\u00f6nnen wir die Eigenschaft Typografie nutzen, um Initialisierungen zu aktivieren:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n  \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n  \"typography\": { \"dropCap\": true }\n\u2026<\/code><\/pre>\n<p>Sobald wir die \u00c4nderungen speichern und den Editor aktualisieren, steht dir die Option zum Aktivieren von Kapit\u00e4lchen wieder zur Verf\u00fcgung:<\/p>\n<figure id=\"attachment_184914\" aria-describedby=\"caption-attachment-184914\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184914 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/drop-cap.png\" alt=\"Die WordPress-Blockeditor-Oberfl\u00e4che zeigt einen Absatz mit Lorem Ipsum-Text mit einer gro\u00dfen Initiale. In der rechten Seitenleiste sind Optionen zur Anpassung der Typografie sichtbar, und das ge\u00f6ffnete Men\u00fc \u201eWeitere Elemente\u201c zeigt die aktivierte Option \u201eInitiale\u201c.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184914\" class=\"wp-caption-text\">Das Aktivieren der Drop Cap-Funktion im WordPress-Site-Editor dauert nur wenige Sekunden mit <strong>theme.json<\/strong><\/figcaption><\/figure>\n<p>Die Datei <code>theme.json<\/code> ist nicht nur eine Konfigurationsdatei f\u00fcr das Design. Sie kann auch dabei helfen, Funktionen zum Site-Editor hinzuzuf\u00fcgen oder zu entfernen.<\/p>\n<h2>Wie das Managed Hosting von Kinsta deine WordPress-Theme-Entwicklung unterst\u00fctzen kann<\/h2>\n<p>Die Feinheiten der Theme-Entwicklung und <code>theme.json<\/code> sind auf hochwertige L\u00f6sungen in der gesamten Entwicklungskette angewiesen, um das Potenzial f\u00fcr eine verbesserte Leistung auszusch\u00f6pfen.<\/p>\n<p>Eine lokale Entwicklungsumgebung ist von entscheidender Bedeutung, denn so kannst du WordPress-Websites auf deinem lokalen Rechner erstellen, verwalten und daran herumschrauben. <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a> kann dir dabei helfen.<\/p>\n<figure id=\"attachment_184913\" aria-describedby=\"caption-attachment-184913\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184913 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface.png\" alt=\"Das Dashboard f\u00fcr Website-Informationen in DevKinsta. Es zeigt technische Details wie die WordPress-Version, den Webserver und den Datenbanktyp an, zusammen mit Optionen zur Verwaltung der Website.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-184913\" class=\"wp-caption-text\">Die DevKinsta-Benutzeroberfl\u00e4che<\/figcaption><\/figure>\n<p>DevKinsta bietet viele Vorteile:<\/p>\n<ul>\n<li>Es l\u00e4uft auf Docker-Containern, was bedeutet, dass du deine Installation vom Rest deines Rechners isolierst. So kannst du deine <code>theme.json<\/code> Konfigurationen und benutzerdefinierten Bl\u00f6cke in aller Ruhe testen.<\/li>\n<li>Du kannst schnell \u00c4nderungen an deiner <code>theme.json<\/code> Datei vornehmen und die Ergebnisse sofort in deiner lokalen Umgebung sehen.<\/li>\n<li>Es ist ein Kinderspiel, mehrere lokale Websites zu erstellen, um dein Theme mit verschiedenen WordPress-Versionen und -Konfigurationen zu testen.<\/li>\n<\/ul>\n<p>Au\u00dferdem beanspruchst du keine Ressourcen deines Servers, bis du zufrieden bist und fertig bist. Die <a href=\"https:\/\/kinsta.com\/de\/blog\/kinstas-staging-umgebungen\/\">Staging-Umgebungen<\/a> von Kinsta sind ein idealer n\u00e4chster Schritt. Du kannst schnell eine Kopie deiner Produktionsseite erstellen und sie sogar auf deine lokale Umgebung herunterziehen, um weiter zu arbeiten.<\/p>\n<p>Dies ist eine gro\u00dfartige M\u00f6glichkeit, die Leistung deines Themes zu testen, vor allem, wenn du die Staging-Umgebung mit dem <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-ueberwachung\/apm-tool\/\">Application Performance Monitoring<\/a> (APM) von Kinsta kombinierst.<\/p>\n<p>Du kannst auch die Git-Integration von Kinsta f\u00fcr alle deine Umgebungen nutzen. So kannst du \u00c4nderungen in die Repos schieben und von dort aus bereitstellen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Das Verst\u00e4ndnis der <code>blocks<\/code> Eigenschaft in <code>theme.json<\/code> ist ein essentieller Schritt f\u00fcr alle Theme-Entwickler. Damit kannst du ein globales Design einzigartiger, koh\u00e4renter und relevanter machen. Die M\u00f6glichkeit, mit individuellen Core- und Custom-Block-Einstellungen zu arbeiten, hilft jedem Nutzer, die M\u00f6glichkeiten der vollst\u00e4ndigen Website-Bearbeitung zu nutzen. Au\u00dferdem bedeutet die Verf\u00fcgbarkeit dieser Optionen im Seiteneditor, dass die Endnutzer ihre eigenen \u00c4nderungen ohne Code vornehmen k\u00f6nnen, w\u00e4hrend du stellare Standardoptionen pr\u00e4sentierst.<\/p>\n<p>Hast du noch Fragen zur Verwendung der Eigenschaft <code>blocks<\/code> mit der Datei <code>theme.json<\/code>? Stelle deine Fragen einfach in den Kommentaren unten!<\/p>","protected":false},"excerpt":{"rendered":"<p>Die Einf\u00fchrung des Full Site Editing (FSE) in WordPress verdeutlicht die wachsende Bedeutung der Datei theme.json. Es gibt jetzt eine ganz neue Hierarchie und Struktur zu &#8230;<\/p>\n","protected":false},"author":199,"featured_media":71387,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1012],"class_list":["post-71386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-website-design"],"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>Wichtige Erkenntnisse zu den theme.json-Bl\u00f6cken f\u00fcr Entwickler<\/title>\n<meta name=\"description\" content=\"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.\" \/>\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\/theme-json-blocks-eigenschaft\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen\" \/>\n<meta property=\"og:description\" content=\"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\" \/>\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=\"2024-10-01T14:26:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T12:36:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\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\/theme-json-blocks-eigenschaft\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen\",\"datePublished\":\"2024-10-01T14:26:34+00:00\",\"dateModified\":\"2024-10-02T12:36:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\"},\"wordCount\":3196,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\",\"name\":\"Wichtige Erkenntnisse zu den theme.json-Bl\u00f6cken f\u00fcr Entwickler\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png\",\"datePublished\":\"2024-10-01T14:26:34+00:00\",\"dateModified\":\"2024-10-02T12:36:29+00:00\",\"description\":\"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#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\":\"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wichtige Erkenntnisse zu den theme.json-Bl\u00f6cken f\u00fcr Entwickler","description":"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.","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\/theme-json-blocks-eigenschaft\/","og_locale":"de_DE","og_type":"article","og_title":"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen","og_description":"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.","og_url":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-10-01T14:26:34+00:00","article_modified_time":"2024-10-02T12:36:29+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen","datePublished":"2024-10-01T14:26:34+00:00","dateModified":"2024-10-02T12:36:29+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/"},"wordCount":3196,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/","url":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/","name":"Wichtige Erkenntnisse zu den theme.json-Bl\u00f6cken f\u00fcr Entwickler","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png","datePublished":"2024-10-01T14:26:34+00:00","dateModified":"2024-10-02T12:36:29+00:00","description":"Erfahre, wie du die Eigenschaft \u201etheme.json blocks\u201c nutzen kannst, um von einem optimierten Ansatz f\u00fcr die Entwicklung von WordPress-Themes zu profitieren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/blocks-property-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/#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":"Was WordPress-Entwickler \u00fcber die Eigenschaft blocks in theme.json wissen m\u00fcssen"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/71386","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=71386"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/71386\/revisions"}],"predecessor-version":[{"id":71421,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/71386\/revisions\/71421"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/en"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/jp"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71386\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/71387"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=71386"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=71386"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=71386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}