{"id":53066,"date":"2022-08-08T07:57:03","date_gmt":"2022-08-08T06:57:03","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=53066&#038;preview=true&#038;preview_id=53066"},"modified":"2024-02-02T16:35:36","modified_gmt":"2024-02-02T15:35:36","slug":"dynamische-bloecke","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/","title":{"rendered":"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt"},"content":{"rendered":"<p>Bist du immer noch verwirrt von <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a>? Oder geh\u00f6rst du zu denjenigen, die fest an das Potenzial des Blockeditors glauben und herausfinden wollen, wie weit sie ihre Kreativit\u00e4t mit dem Blockeditor treiben k\u00f6nnen?<\/p>\n<p>Egal, zu welcher Kategorie du geh\u00f6rst, Gutenberg ist da und dieser Beitrag gibt dir einen detaillierten \u00dcberblick dar\u00fcber, was hinter den Kulissen des WordPress-Blockeditors vor sich geht. Aber das ist noch nicht alles!<\/p>\n<p>Nach <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">unserem letzten Tutorial<\/a>, in dem wir eine allgemeine Einf\u00fchrung in die Entwicklung von Gutenberg-Bl\u00f6cken gegeben haben, geht dieser Artikel \u00fcber die Grundlagen hinaus und stellt fortgeschrittenere Blocktypen vor. Diese Bl\u00f6cke werden als dynamische Bl\u00f6cke bezeichnet.<\/p>\n<p>Heute erf\u00e4hrst du, was dynamische Bl\u00f6cke sind, wie sie funktionieren und was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.<\/p>\n<p>Was sind also dynamische Bl\u00f6cke in Gutenberg und was sind die wichtigsten Unterschiede zwischen <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">statischen<\/a> und dynamischen Bl\u00f6cken?<\/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>Was sind dynamische Bl\u00f6cke? Ein Beispiel<\/h2>\n<p>W\u00e4hrend bei statischen Bl\u00f6cken der Inhalt manuell vom Nutzer hinzugef\u00fcgt wird, w\u00e4hrend er einen Beitrag oder eine Seite bearbeitet, wird der Inhalt bei dynamischen Bl\u00f6cken beim Laden der Seite geladen und verarbeitet. Bei dynamischen Bl\u00f6cken wird der Inhalt des Blocks aus der Datenbank geholt und so angezeigt, wie er ist oder wie er sich aus einer beliebigen Datenmanipulation ergibt.<\/p>\n<p>Lass uns das anhand eines Beispiels erkl\u00e4ren. Angenommen, du m\u00f6chtest eine Gruppe von verschachtelten Bl\u00f6cken erstellen, die Details zum Autor des Beitrags und eine Auswahl der letzten Beitr\u00e4ge desselben Autors anzeigen.<\/p>\n<figure id=\"attachment_119966\" aria-describedby=\"caption-attachment-119966\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119966 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/from-the-author.jpg\" alt=\"Ein Gruppenblock mit Beitragsautor und neuesten Beitr\u00e4gen\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119966\" class=\"wp-caption-text\">Ein Gruppenblock mit Beitragsautor und neuesten Beitr\u00e4gen<\/figcaption><\/figure>\n<p>Als Gutenberg-Nutzer kannst du die folgenden Bl\u00f6cke verwenden:<\/p>\n<ul>\n<li>Der <strong>\u00dcberschrift-Kernblock<\/strong><\/li>\n<li>Der <strong>Beitragsautor-Kernblock<\/strong><\/li>\n<li>Der <strong>Neueste Beitr\u00e4ge-Kernblock<\/strong><\/li>\n<\/ul>\n<p>Du k\u00f6nntest auch eine Gruppe erstellen, die diese Bl\u00f6cke enth\u00e4lt, und die Gruppe zu wiederverwendbaren Bl\u00f6cken f\u00fcr die zuk\u00fcnftige Verwendung hinzuf\u00fcgen.<\/p>\n<figure id=\"attachment_119967\" aria-describedby=\"caption-attachment-119967\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119967 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-to-reusable-blocks.jpg\" alt=\"Hinzuf\u00fcgen eines Gruppenblocks zu wiederverwendbaren Bl\u00f6cken\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119967\" class=\"wp-caption-text\">Hinzuf\u00fcgen eines Gruppenblocks zu wiederverwendbaren Bl\u00f6cken<\/figcaption><\/figure>\n<p>Das ist doch ganz einfach, oder? Du kannst einen dynamischen Block erstellen und ihn im Handumdrehen zu deinen Beitr\u00e4gen und Seiten hinzuf\u00fcgen.<\/p>\n<p>Seit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a> bietet der <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Block-Editor<\/a> mehr als 90 verschiedene Bl\u00f6cke, und die Chancen stehen gut, dass du den richtigen Block f\u00fcr dich findest. Und wenn du noch mehr brauchst, kannst du im WordPress-Plugin-Verzeichnis nach <a href=\"https:\/\/wordpress.org\/plugins\/search\/gutenberg\/\">weiteren Bl\u00f6cken<\/a> suchen, die es kostenlos gibt.<\/p>\n<p>Aber was ist, wenn du ein WordPress-Entwickler bist &#8211; oder eine Karriere als <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwicklergehalt\/\">WordPress-Entwickler<\/a> planst? Vielleicht hast du ganz spezielle Bed\u00fcrfnisse und kannst den Block, den du suchst, nicht finden, oder du m\u00f6chtest einfach neue berufliche F\u00e4higkeiten erwerben. In solchen Situationen m\u00f6chtest du vielleicht lernen, wie du deine dynamischen Bl\u00f6cke erstellst.<\/p>\n\n<h2>Dynamische Bl\u00f6cke in Gutenberg aus der Sicht eines Entwicklers<\/h2>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">Dynamische Bl\u00f6cke<\/a> haben zwei Hauptanwendungsf\u00e4lle.<\/p>\n<p>Der erste Anwendungsfall ist, wenn du den Inhalt eines Blocks aktualisieren musst, obwohl die Seite, die den Block enth\u00e4lt, noch nicht aktualisiert wurde. Das ist z. B. der Fall, wenn der Block eine Liste der neuesten Beitr\u00e4ge oder Kommentare enth\u00e4lt und generell immer dann, wenn der Inhalt des Blocks dynamisch mit Hilfe von Daten aus der Datenbank erstellt wird.<\/p>\n<figure id=\"attachment_119976\" aria-describedby=\"caption-attachment-119976\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119976 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/query-loop-block.jpg\" alt=\"Hinzuf\u00fcgen eines Query Loop Blocks\" width=\"1996\" height=\"1176\"><figcaption id=\"caption-attachment-119976\" class=\"wp-caption-text\">Hinzuf\u00fcgen eines Query Loop Blocks<\/figcaption><\/figure>\n<p>Der zweite Anwendungsfall ist, wenn eine Aktualisierung des Blockcodes sofort auf dem Frontend angezeigt werden soll. Wenn du einen dynamischen Block anstelle eines statischen Blocks verwendest, werden die \u00c4nderungen sofort auf alle Vorkommen des Blocks angewendet.<\/p>\n<p>Wenn du dagegen den HTML-Code eines statischen Blocks \u00e4nderst, wird dem Nutzer ein <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">Ung\u00fcltigkeitsdialog<\/a> angezeigt, bis alle Instanzen der vorherigen Version des Blocks entfernt und durch die neue Version ersetzt wurden oder du die alte Version als veraltet markierst (siehe auch <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-deprecation\/\">Veraltete Version<\/a> und <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">Blockvalidierung, Veraltete Version und Migrationserfahrung<\/a>).<\/p>\n<figure id=\"attachment_120364\" aria-describedby=\"caption-attachment-120364\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120364 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/this-block-contains-unexpected-or-invalid-content.jpg\" alt=\"Unerwarteter oder ung\u00fcltiger Inhalt.\" width=\"1350\" height=\"378\"><figcaption id=\"caption-attachment-120364\" class=\"wp-caption-text\">Unerwarteter oder ung\u00fcltiger Inhalt.<\/figcaption><\/figure>\n<p>Bevor du mit der Erstellung von dynamischen Bl\u00f6cken beginnen kannst, musst du jedoch einige Konzepte verstehen.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Anwendungsstatus und Datenspeicher<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#what-is-a-gutenberg-block\">Gutenberg ist eine React SPA-Anwendung<\/a>, und alles in Gutenberg ist eine React-Komponente. Beitragstitel, \u00dcberschriften, Abs\u00e4tze, Bilder und alle HTML-Inhaltsbl\u00f6cke im Editor sind React-Komponenten, ebenso wie die Steuerelemente f\u00fcr die Seitenleiste und die Blocksymbolleiste.<\/p>\n<p>In unserem letzten Artikel haben wir nur Eigenschaften verwendet, um Daten zu speichern. In diesem Artikel gehen wir einen Schritt weiter und f\u00fchren das Konzept des <strong>Zustands<\/strong> ein.<\/p>\n<p>Vereinfacht gesagt, ist das <code>state<\/code> Objekt <a href=\"https:\/\/www.w3schools.com\/react\/react_state.asp\">ein einfaches JavaScript-Objekt<\/a>, das Informationen \u00fcber eine Komponente enth\u00e4lt. Die <code>state<\/code> der Komponente kann sich im Laufe der Zeit \u00e4ndern, und jedes Mal, wenn sie sich \u00e4ndert, wird die Komponente neu dargestellt.<\/p>\n<p>\u00c4hnlich wie das <code>state<\/code> Objekt sind auch die Properties einfache JavaScript-Objekte, die Informationen \u00fcber die Komponente enthalten. Es gibt jedoch <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html#what-is-the-difference-between-state-and-props\">einen entscheidenden Unterschied<\/a> zwischen props und <code>state<\/code>:<\/p>\n<blockquote><p><code>props<\/code>\u00a0werden an die Komponente weitergegeben (\u00e4hnlich wie Funktionsparameter), w\u00e4hrend <code>state<\/code> innerhalb der Komponente verwaltet wird (\u00e4hnlich wie Variablen, die in einer Funktion deklariert werden).<\/p><\/blockquote>\n<p>Du kannst dir den Status als eine Momentaufnahme von Daten zu einem bestimmten Zeitpunkt vorstellen, die eine Anwendung speichert, um das Verhalten einer Komponente zu steuern. Wenn zum Beispiel die Seitenleiste f\u00fcr die Einstellungen des Blockeditors ge\u00f6ffnet ist, wird eine Information irgendwo im <code>state<\/code> Objekt gespeichert.<\/p>\n<p>Wenn die Informationen innerhalb einer einzelnen Komponente geteilt werden, nennen wir sie <strong>lokalen Zustand<\/strong>. Wenn die Informationen von mehreren Komponenten innerhalb einer Anwendung gemeinsam genutzt werden, nennen wir sie <strong>Anwendungsstatus<\/strong>.<\/p>\n<p>Der Anwendungsstatus ist eng mit dem Konzept des Speichers verbunden. In den <a href=\"https:\/\/redux.js.org\/api\/store\">Redux-Dokumenten<\/a> hei\u00dft es:<\/p>\n<blockquote><p>Ein Store enth\u00e4lt den gesamten <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">Zustandsbaum<\/a> deiner Anwendung. Die einzige M\u00f6glichkeit, den Zustand darin zu \u00e4ndern, besteht darin, eine <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action\">Aktion<\/a> darauf auszuf\u00fchren.<\/p><\/blockquote>\n<p>Redux speichert also den Zustand einer Anwendung in einem einzigen unver\u00e4nderlichen Objektbaum (einem Store). Der Objektbaum kann nur ge\u00e4ndert werden, indem ein neues Objekt mit Hilfe von <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#designing-actions\">Actions<\/a> und <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#writing-reducers\">Reducern<\/a> erstellt wird.<\/p>\n<p>In WordPress werden die Stores durch das <strong>WordPress-Datenmodul<\/strong> verwaltet.<\/p>\n<h3>Modularit\u00e4t, Pakete und Datenspeicher in Gutenberg<\/h3>\n<p>Das Gutenberg-Repository basiert von Grund auf auf mehreren <strong>wiederverwendbaren und unabh\u00e4ngigen Modulen<\/strong>, die zusammen die Bearbeitungsoberfl\u00e4che bilden. Diese Module werden auch <strong>Pakete<\/strong> genannt.<\/p>\n<p>In der offiziellen Dokumentation werden zwei verschiedene <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#types-of-packages\">Arten von Paketen<\/a> aufgef\u00fchrt:<\/p>\n<ul>\n<li><strong>Produktionspakete<\/strong> bilden den Produktionscode, der im Browser ausgef\u00fchrt wird. In WordPress gibt es zwei Arten von Produktionspaketen:\n<ul>\n<li><strong>Pakete mit Stylesheets<\/strong> stellen Stylesheets bereit, damit sie richtig funktionieren.<\/li>\n<li><strong>Pakete<\/strong> <strong>mit Datenspeichern<\/strong> definieren Datenspeicher, um ihren Status zu verwalten. <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">Pakete mit Datenspeichern<\/a> k\u00f6nnen von Plugins und Themes von Drittanbietern verwendet werden, um Daten abzurufen und zu manipulieren.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Entwicklungspakete<\/strong> werden im Entwicklungsmodus verwendet. Diese Pakete enthalten Werkzeuge zum Linting, Testen, Bauen usw.<\/li>\n<\/ul>\n<p>Hier sind wir vor allem an <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">Paketen mit Datenspeichern<\/a> interessiert, die zum Abrufen und Verarbeiten von Daten verwendet werden.<\/p>\n<h3>Der WordPress-Datenspeicher<\/h3>\n<p>Das WordPress-Datenmodul baut auf <a href=\"https:\/\/redux.js.org\/\">Redux<\/a> auf und teilt die <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">drei Redux-Kernprinzipien<\/a>, allerdings mit <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md#comparison-with-redux\">einigen wichtigen Unterschieden<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">Redux<\/a> ist ein Zustandsmanager f\u00fcr JavaScript-Anwendungen. Die Funktionsweise von Redux l\u00e4sst sich in <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">drei Grundprinzipien<\/a> zusammenfassen:<\/p>\n<ul>\n<li><strong>Single source of truth<\/strong>: Der <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">globale Status<\/a> deiner Anwendung wird in einem Objektbaum in einem einzigen Store gespeichert.<\/li>\n<li><strong>Der<\/strong> <strong>Zustand ist schreibgesch\u00fctzt<\/strong>: Die einzige M\u00f6glichkeit, den Zustand zu \u00e4ndern, ist das Emittieren einer Aktion, eines Objekts, das beschreibt, was passiert ist.<\/li>\n<li><strong>\u00c4nderungen werden mit reinen Funktionen vorgenommen<\/strong>: Um festzulegen, wie der Zustandsbaum durch Aktionen umgewandelt wird, schreibst du reine Reducer.<\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Die offizielle Dokumentation enth\u00e4lt die <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md\">folgende Definition<\/a>:<\/p>\n<blockquote><p>Das Datenmodul von WordPress dient als Drehscheibe f\u00fcr die Verwaltung des Anwendungsstatus sowohl f\u00fcr Plugins als auch f\u00fcr WordPress selbst und bietet Werkzeuge zur Verwaltung von Daten innerhalb und zwischen verschiedenen Modulen. Es ist als modulares Muster f\u00fcr die Organisation und den Austausch von Daten konzipiert: einfach genug, um die Anforderungen eines kleinen Plugins zu erf\u00fcllen, und skalierbar, um die Anforderungen einer komplexen Single-Page-Anwendung zu erf\u00fcllen.<\/p><\/blockquote>\n<p>Gutenberg registriert standardm\u00e4\u00dfig <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/\">mehrere Datenspeicher<\/a> im Anwendungsstatus. Jeder dieser Speicher hat einen bestimmten Namen und Zweck:<\/p>\n<ul>\n<li><code>core<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/core-data\">WordPress Kerndaten<\/a><\/li>\n<li><code>core\/annotations<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/annotations\">Annotationen<\/a><\/li>\n<li><code>core\/blocks<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/blocks\">Blocktypen Daten<\/a><\/li>\n<li><code>core\/block-editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-editor\">Die Daten des Blockeditors<\/a><\/li>\n<li><code>core\/editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/editor\">Die Daten des Post-Editors<\/a><\/li>\n<li><code>core\/edit-post<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/edit-post\">Die UI-Daten des Editors<\/a><\/li>\n<li><code>core\/notices<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/notices\">Notizen Daten<\/a><\/li>\n<li><code>core\/nux<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/nux\">Die NUX (New User Experience) Daten<\/a><\/li>\n<li><code>core\/viewport<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/viewport\">Die Daten des Ansichtsfensters<\/a><\/li>\n<\/ul>\n<p>\u00dcber diese Stores kannst du auf eine ganze Reihe von Daten zugreifen:<\/p>\n<ol>\n<li><strong>Daten, die sich auf den aktuellen Beitrag beziehen<\/strong>, z. B. Beitragstitel, Auszug, Kategorien und Tags, Bl\u00f6cke usw.<\/li>\n<li><strong>Daten, die sich auf die<\/strong> <strong>Benutzeroberfl\u00e4che<\/strong> <strong>beziehen<\/strong>, z. B. ob ein Toggle ein- oder ausgeschaltet ist.<\/li>\n<li><strong>Daten, die sich auf die<\/strong> <strong>gesamte WordPress-Installation beziehen<\/strong>, z. B. registrierte Taxonomien, Beitragstypen, Blogtitel, Autoren usw.<\/li>\n<\/ol>\n<p>Diese Stores befinden sich im globalen <code>wp<\/code> Objekt. Um auf den Status eines Stores zuzugreifen, verwendest du die Funktion <code>select<\/code>.<\/p>\n<p>Um zu sehen, wie sie funktioniert, erstelle einen neuen Beitrag oder eine neue Seite und rufe <a href=\"https:\/\/kinsta.com\/de\/blog\/element-untersuchen\/\">den Inspektor deines Browsers auf<\/a>. Suche die Konsole und gib die folgende Codezeile ein:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\")<\/code><\/pre>\n<p>Das Ergebnis ist ein Objekt mit einer Liste von Funktionen, die du verwenden kannst, um Daten aus dem <code>core<\/code> Datenspeicher abzurufen. Diese Funktionen werden <strong>Selektoren<\/strong> genannt und dienen als Schnittstellen f\u00fcr den Zugriff auf Statuswerte.<\/p>\n<figure id=\"attachment_120245\" aria-describedby=\"caption-attachment-120245\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120245 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core.jpg\" alt=\"Das Core WordPress Data Store Objekt\" width=\"1306\" height=\"1332\"><figcaption id=\"caption-attachment-120245\" class=\"wp-caption-text\">Das Core WordPress Data Store Objekt<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Das <code>selectors<\/code> Objekt enth\u00e4lt eine Reihe von Funktionen f\u00fcr den Zugriff auf und die Ableitung von Statuswerten. Ein Selektor ist eine Funktion, die den Status und optionale Argumente annimmt und einen Wert aus dem Status zur\u00fcckgibt. <em>Der Aufruf von Selektoren ist der wichtigste Mechanismus, um Daten aus deinem Status abzurufen<\/em>. Sie dienen als n\u00fctzliche Abstraktion gegen\u00fcber den Rohdaten, die in der Regel anf\u00e4lliger f\u00fcr \u00c4nderungen sind und als <a href=\"https:\/\/redux.js.org\/usage\/structuring-reducers\/normalizing-state-shape#designing-a-normalized-state\">normalisiertes Objekt<\/a> nicht so leicht verwendet werden k\u00f6nnen. (Quelle: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16\/packages\/data\/README.md#selectors\">Github<\/a>)<\/p>\n<\/aside>\n\n<p>Der WordPress-Datenspeicher enth\u00e4lt Informationen \u00fcber WordPress im Allgemeinen und die Selektoren sind der Weg, wie du diese Informationen erh\u00e4ltst. Zum Beispiel liefert <code>getCurrentUser()<\/code> Informationen \u00fcber den aktuellen Benutzer:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getCurrentUser()<\/code><\/pre>\n<figure id=\"attachment_120246\" aria-describedby=\"caption-attachment-120246\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120246 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core-getcurrentuser.jpg\" alt=\"Untersuchen der getCurrentUser Antwort\" width=\"1306\" height=\"1058\"><figcaption id=\"caption-attachment-120246\" class=\"wp-caption-text\">Untersuchen der getCurrentUser Antwort<\/figcaption><\/figure>\n<p>Ein weiterer Selektor, den du verwenden kannst, um Benutzerdetails aus dem Datenspeicher abzurufen, ist <code>getUsers()<\/code><a id=\"getusers\"><\/a> :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()<\/code><\/pre>\n<p>Das folgende Bild zeigt das Antwortobjekt:<\/p>\n<figure id=\"attachment_120247\" aria-describedby=\"caption-attachment-120247\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120247 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getusers.jpg\" alt=\"Untersuchen der getCurrentUser Antwort\" width=\"1306\" height=\"990\"><figcaption id=\"caption-attachment-120247\" class=\"wp-caption-text\">Untersuchen der getUsers Antwort<\/figcaption><\/figure>\n<p>Um Details f\u00fcr einen einzelnen Benutzer zu erhalten, kannst du einfach die folgende Zeile eingeben:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()[0]<\/code><\/pre>\n<p>Mit demselben Selektor kannst du auch Benutzer mit der Rolle <code>author<\/code> abrufen:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core' ).getUsers({ who: 'authors' })<\/code><\/pre>\n<p>Du kannst auch registrierte Taxonomien abrufen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getTaxonomies()<\/code><\/pre>\n<figure id=\"attachment_120248\" aria-describedby=\"caption-attachment-120248\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120248 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-gettaxonomies.jpg\" alt=\"Untersuchen der getTaxonomies Antwort.\" width=\"1306\" height=\"790\"><figcaption id=\"caption-attachment-120248\" class=\"wp-caption-text\">Untersuchen der getTaxonomies Antwort.<\/figcaption><\/figure>\n<p>Eine Liste der registrierten Beitragstypen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPostTypes()<\/code><\/pre>\n<p>Oder eine Liste der Plugins:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPlugins()<\/code><\/pre>\n<p>Versuchen wir nun, auf einen anderen Datenspeicher zuzugreifen. Dazu verwendest du immer noch die Funktion <code>select<\/code>, gibst aber einen anderen Namespace an. Versuchen wir das Folgende:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\")<\/code><\/pre>\n<p>Jetzt erh\u00e4ltst du das folgende Antwortobjekt.<\/p>\n<figure id=\"attachment_120249\" aria-describedby=\"caption-attachment-120249\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120249 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post.jpg\" alt=\"Zugriff auf die UI-Daten des Editors\" width=\"1306\" height=\"1310\"><figcaption id=\"caption-attachment-120249\" class=\"wp-caption-text\">Zugriff auf die UI-Daten des Editors<\/figcaption><\/figure>\n<p>Wenn du wissen willst, ob die Seitenleiste f\u00fcr die Einstellungen ge\u00f6ffnet ist oder nicht, verwendest du den Selektor <code>isEditorSidebarOpened<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\").isEditorSidebarOpened()<\/code><\/pre>\n<p>Diese Funktion gibt <code>true<\/code> zur\u00fcck, wenn die Seitenleiste ge\u00f6ffnet ist:<\/p>\n<figure id=\"attachment_120957\" aria-describedby=\"caption-attachment-120957\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120957 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post-iseditorsidebaropened-2.jpg\" alt=\"Die Seitenleiste ist ge\u00f6ffnet.\" width=\"1718\" height=\"1052\"><figcaption id=\"caption-attachment-120957\" class=\"wp-caption-text\">Die Seitenleiste ist ge\u00f6ffnet.<\/figcaption><\/figure>\n<h2>Wie man auf Postdaten zugreift<\/h2>\n<p>Du solltest jetzt ein grundlegendes Verst\u00e4ndnis daf\u00fcr haben, wie du auf Daten zugreifen kannst. Jetzt sehen wir uns einen bestimmten Selektor genauer an, die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">Funktion<code>getEntityRecords<\/code><\/a>, die den Zugriff auf die Beitragsdaten erm\u00f6glicht.<\/p>\n<p>Klicke im Blockeditor mit der rechten Maustaste und w\u00e4hle <strong>Inspizieren<\/strong>. Kopiere auf der Registerkarte Konsole die folgende Zeile und f\u00fcge sie ein:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post')<\/code><\/pre>\n<p>Dies sendet eine Anfrage an die Rest-API und gibt ein Array von Datens\u00e4tzen zur\u00fcck, die den zuletzt ver\u00f6ffentlichten Blogbeitr\u00e4gen entsprechen.<\/p>\n<figure id=\"attachment_120303\" aria-describedby=\"caption-attachment-120303\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120303 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getentityrecords.jpg\" alt=\"getEntityRecords gibt eine Liste der Beitr\u00e4ge zur\u00fcck.\" width=\"1698\" height=\"330\"><figcaption id=\"caption-attachment-120303\" class=\"wp-caption-text\">getEntityRecords gibt eine Liste der Beitr\u00e4ge zur\u00fcck.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Beachte, dass beim ersten Mal, wenn du die Anfrage an die Rest API sendest, die Antwort <code>null<\/code> lautet, bis die Anfrage abgeschlossen ist. Wenn du also <code>null<\/code> bekommst, mach dir keine Sorgen und versuche es noch einmal.<\/p>\n<\/aside>\n\n<p><code>getEntityRecords<\/code> nimmt <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">drei Parameter<\/a> entgegen:<\/p>\n<ul>\n<li><code>kind<\/code> <em>string<\/em>: Art der Entit\u00e4t (z. B. <code>postType<\/code>).<\/li>\n<li><code>name<\/code> <em>string<\/em>: Name der Entit\u00e4t (z. B. <code>post<\/code>).<\/li>\n<li><code>query<\/code> <em>?Objekt<\/em>: Optionale Begriffsabfrage (z. B. <code>{author: 0}<\/code>).<\/li>\n<\/ul>\n<p>Du kannst spezifischere Anfragen erstellen, indem du ein <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/posts\/#arguments\">Objekt mit Argumenten<\/a> verwendest.<\/p>\n<p>Du kannst zum Beispiel festlegen, dass die Antwort nur Beitr\u00e4ge einer bestimmten Kategorie enthalten soll:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {categories: 3})<\/code><\/pre>\n<p>Du kannst auch nur Artikel von einem bestimmten Autor anfordern:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2})<\/code><\/pre>\n<p>Wenn du auf einen der von <code>getEntityRecords<\/code> zur\u00fcckgegebenen Datens\u00e4tze klickst, erh\u00e4ltst du eine Liste der Eigenschaften des ausgew\u00e4hlten Datensatzes:<\/p>\n<figure id=\"attachment_120305\" aria-describedby=\"caption-attachment-120305\" style=\"width: 1846px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120305 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords.jpg\" alt=\"Eine beispielhafte API-Anfrage mit getEntityRecords.\" width=\"1846\" height=\"746\"><figcaption id=\"caption-attachment-120305\" class=\"wp-caption-text\">Eine beispielhafte API-Anfrage mit getEntityRecords.<\/figcaption><\/figure>\n<p>Wenn du m\u00f6chtest, dass die Antwort auch das Bild enth\u00e4lt, musst du ein zus\u00e4tzliches Argument zu deiner vorherigen Anfrage hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2, _embed: true})<\/code><\/pre>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Details zum Featured Image in der getEntityRecords-Antwort.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Details zum Featured Image in der getEntityRecords-Antwort.<\/figcaption><\/figure>\n<p>Jetzt solltest du besser verstehen, wie du auf den WordPress-Datenspeicher zugreifen und Beitragsdetails abrufen kannst. Einen genaueren Blick auf den <code>getEntityRecords<\/code> Selektor wirfst du unter <a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Datenabfrage in Gutenberg mit getEntityRecords<\/a>.<\/p>\n<h2>Wie man einen dynamischen Block erstellt: Ein Beispielprojekt<\/h2>\n<p>Nach unserer langen theoretischen Einf\u00fchrung k\u00f6nnen wir nun zur Praxis \u00fcbergehen und einen dynamischen Block mit den Werkzeugen erstellen, die wir in unserem vorherigen Tutorial zur Blockentwicklung vorgestellt haben.<\/p>\n<p>In diesem Artikel haben wir besprochen:<\/p>\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#setting-up-your-wordpress-development-environment\">Wie man eine WordPress-Entwicklungsumgebung einrichtet<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#a-walkthrough-of-the-starter-block-scaffolding\">Was ist ein Block Scaffolding<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#the-project-building-your-first-gutenberg-block\">Wie man einen statischen Gutenberg-Block erstellt<\/a><\/li>\n<\/ol>\n<p>Deshalb werden wir in diesem Artikel nicht n\u00e4her auf diese Themen eingehen. Du kannst aber gerne in unserem vorherigen Leitfaden nachschlagen, wenn du zus\u00e4tzliche Informationen ben\u00f6tigst oder einfach nur auffrischen m\u00f6chtest.<\/p>\n<h3>Eine JavaScript-Entwicklungsumgebung einrichten<\/h3>\n<p>Beginnen wir damit, eine JavaScript-Entwicklungsumgebung einzurichten.<\/p>\n<h4>Node.js installieren oder aktualisieren<\/h4>\n<p><a href=\"https:\/\/nodejs.org\/en\/download\/\">Installiere oder aktualisiere<\/a> zun\u00e4chst Node.js. Starte danach dein Kommandozeilentool und f\u00fchre den folgenden Befehl aus:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Du solltest deine Node-Version sehen.<\/p>\n<h4>Richte deine Entwicklungsumgebung ein<\/h4>\n<p>Als n\u00e4chstes brauchst du eine Entwicklungsumgebung f\u00fcr WordPress. F\u00fcr unsere Beispiele haben wir <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a> verwendet, unser kostenloses WordPress-Entwicklungstool, mit dem du im Handumdrehen eine lokale WordPress-Website erstellen kannst.<\/p>\n<figure id=\"attachment_120268\" aria-describedby=\"caption-attachment-120268\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120268 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta-create-custom-site.jpg\" alt=\"Erstellen einer eigenen Website in DevKinsta\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120268\" class=\"wp-caption-text\">Erstellen einer eigenen Website in DevKinsta<\/figcaption><\/figure>\n<p>Es steht dir aber immer noch frei, eine beliebige <a href=\"https:\/\/kinsta.com\/de\/ebooks\/wordpress\/wordpress-lokale-entwicklung\/\">lokale WordPress-Entwicklungsumgebung<\/a> wie MAMP oder XAMPP oder sogar die offizielle <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">wp-env-L\u00f6sung<\/a> zu w\u00e4hlen.<\/p>\n<p>Wenn du DevKinsta verwendest, klicke auf <strong>Neue WordPress-Seite<\/strong> oder auf <strong>Benutzerdefinierte Seite<\/strong>, f\u00fclle die Formularfelder aus und klicke auf <strong>Seite erstellen<\/strong>.<\/p>\n<p>Der Installationsprozess dauert ein oder zwei Minuten. Wenn er abgeschlossen ist, starte deine lokale WordPress-Entwicklungswebsite.<\/p>\n<figure id=\"attachment_120269\" aria-describedby=\"caption-attachment-120269\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120269 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta.jpg\" alt=\"Seiten Info Bildschirm in DevKinsta.\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120269\" class=\"wp-caption-text\">Seiten Info Bildschirm in DevKinsta.<\/figcaption><\/figure>\n<h4>Richte dein Block-Plugin ein<\/h4>\n<p>Was du jetzt brauchst, ist ein Block-Plugin f\u00fcr den Anfang. Damit du dir die m\u00fchsame manuelle Konfiguration ersparen kannst, hat das <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">WordPress-Entwicklerteam<\/a> das <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\">Tool @wordpress\/create-block<\/a> ver\u00f6ffentlicht, <em>das offizielle Null-Konfigurations-Tool zur Erstellung von Gutenberg-Bl\u00f6cken<\/em> ist.<\/p>\n<p>In unserem <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#dev-environment\">vorherigen Artikel<\/a> haben wir <code>@wordpress\/create-block<\/code> ausf\u00fchrlich behandelt, so dass wir hier gleich mit der Einrichtung beginnen k\u00f6nnen.<\/p>\n<p>Navigiere in deinem Kommandozeilentool zum Ordner <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105130 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"Neues Terminal im Ordner in Mac OS.\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">Neues Terminal im Ordner in Mac OS.<\/figcaption><\/figure>\n<p>Wenn du dort bist, f\u00fchre den folgenden Befehl aus:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Jetzt kannst du das Paket <code>@wordpress\/create-block<\/code> installieren:<\/p>\n<figure id=\"attachment_120270\" aria-describedby=\"caption-attachment-120270\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120270 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-wordpress-create-block.jpg\" alt=\"Installation des Pakets @wordpress\/create-block.\" width=\"1432\" height=\"296\"><figcaption id=\"caption-attachment-120270\" class=\"wp-caption-text\">Installation des Pakets @wordpress\/create-block.<\/figcaption><\/figure>\n<p>Zur Best\u00e4tigung gibst du <code>y<\/code> ein und dr\u00fcckst die Eingabetaste.<\/p>\n<p>Dadurch werden die PHP-, SCSS- und JS-Dateien des Plugins im <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#set-up-the-plugin\">interaktiven Modus<\/a> generiert.<\/p>\n<p>Nachfolgend findest du die Angaben, die wir in unserem Beispiel verwenden werden. Du kannst diese Angaben nach Belieben \u00e4ndern:<br \/>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><\/p>\n<ul>\n<li>Block-Slug, der zur Identifizierung verwendet wird (auch der Name des Plugins und des Ausgabeordners): <strong>author-plugin<\/strong><\/li>\n<li>Der interne Namespace f\u00fcr den Blocknamen (etwas Eindeutiges f\u00fcr deine Produkte): <strong>author-box<\/strong><\/li>\n<li>Der Anzeigetitel f\u00fcr deinen Block: <strong>author-box<\/strong><\/li>\n<li>Die Kurzbeschreibung f\u00fcr deinen Block (optional): <strong>An example block for Kinsta readers<\/strong><\/li>\n<li>Das Dashicon zur leichteren Identifizierung deines Blocks (optional): <strong>businessperson<\/strong><\/li>\n<li>Der Name der Kategorie, damit die Nutzer deinen Block leichter finden: <strong>widgets<\/strong><\/li>\n<li>Der Name des Plugin-Autors (optional). Mehrere Autoren k\u00f6nnen mit Kommata aufgef\u00fchrt werden: <strong>your name<\/strong><\/li>\n<li>Die Kurzbezeichnung der Lizenz des Plugins (optional): <strong>&#8211;<\/strong><\/li>\n<li>Ein Link zum vollst\u00e4ndigen Text der Lizenz (optional): <strong>&#8211;<\/strong><\/li>\n<li>Die aktuelle Versionsnummer des Plugins: <strong>0.1.0<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n<br \/>\nSobald du die Eingabetaste gedr\u00fcckt hast, wird das Plugin heruntergeladen und konfiguriert.<\/p>\n<figure id=\"attachment_120271\" aria-describedby=\"caption-attachment-120271\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120271 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-the-block-plugin.jpg\" alt=\"Installation des Block-Plugins.\" width=\"1424\" height=\"878\"><figcaption id=\"caption-attachment-120271\" class=\"wp-caption-text\">Installation des Block-Plugins.<\/figcaption><\/figure>\n<p>Dieser Vorgang kann ein paar Minuten dauern. Wenn er abgeschlossen ist, solltest du den folgenden Bildschirm sehen:<\/p>\n<figure id=\"attachment_120272\" aria-describedby=\"caption-attachment-120272\" style=\"width: 1428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120272 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-bootstrapped.jpg\" alt=\"Block bootstrapped im Plugin-Ordner.\" width=\"1428\" height=\"1026\"><figcaption id=\"caption-attachment-120272\" class=\"wp-caption-text\">Block bootstrapped im Plugin-Ordner.<\/figcaption><\/figure>\n<p>Du siehst eine Liste mit den Befehlen, die du im Plugin-Verzeichnis ausf\u00fchren kannst:<\/p>\n<ul>\n<li><code>$ npm start<\/code> &#8211; Starte den Build f\u00fcr die Entwicklung.<\/li>\n<li><code>$ npm run build<\/code> &#8211; Baue den Code f\u00fcr die Produktion.<\/li>\n<li><code>$ npm run format<\/code> &#8211; Formatiere Dateien.<\/li>\n<li><code>$ npm run lint:css<\/code> &#8211; Lint CSS-Dateien.<\/li>\n<li><code>$ npm run lint:js<\/code> &#8211; Lint JavaScript-Dateien.<\/li>\n<li><code>$ npm run packages-update<\/code> &#8211; Aktualisiere die WordPress-Pakete auf die neueste Version.<\/li>\n<\/ul>\n<p>Okay, wechsle jetzt mit dem folgenden Befehl in das Plugin-Verzeichnis:<\/p>\n<pre><code class=\"language-bash\">cd author-plugin<\/code><\/pre>\n<p>Und starte deinen Entwicklungs-Build:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Als N\u00e4chstes navigierst du zum Bildschirm Plugins in deinem WordPress-Dashboard und aktivierst das Plugin <strong>Author box<\/strong>:<\/p>\n<figure id=\"attachment_120273\" aria-describedby=\"caption-attachment-120273\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120273 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/plugins-screen.jpg\" alt=\"Das Block-Plugin wird im Plugins-Bildschirm aufgef\u00fchrt.\" width=\"2104\" height=\"1268\"><figcaption id=\"caption-attachment-120273\" class=\"wp-caption-text\">Das Block-Plugin wird im Plugins-Bildschirm aufgef\u00fchrt.<\/figcaption><\/figure>\n<p>Jetzt kannst du \u00fcberpr\u00fcfen, ob das Plugin richtig funktioniert. Erstelle einen neuen Beitrag und beginne mit der Eingabe von <code>\/<\/code>, um den Quick-Inserter zu starten:<\/p>\n<figure id=\"attachment_120958\" aria-describedby=\"caption-attachment-120958\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120958 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/quick-inserter-2.jpg\" alt=\"Das Blockelement im Quick Inserter.\" width=\"1402\" height=\"804\"><figcaption id=\"caption-attachment-120958\" class=\"wp-caption-text\">Das Blockelement im Quick Inserter.<\/figcaption><\/figure>\n<p>Du findest den <strong>Autorenkasten-Block<\/strong> auch im Block-Inserter, unter der Kategorie <strong>Widgets<\/strong>. W\u00e4hle den Block aus, um ihn zum Editor-Canvas hinzuzuf\u00fcgen:<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"Der WordPress Block Inserter\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">Der WordPress Block Inserter<\/figcaption><\/figure>\n<p>Das war&#8217;s. Jetzt speicherst du den Beitrag und siehst dir die Seite in der Vorschau an, um zu pr\u00fcfen, ob der Block richtig angezeigt wird.<\/p>\n<h4>Das Block-Ger\u00fcst<\/h4>\n<p>Wir haben <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#a-walkthrough-of-the-starter-block-scaffolding\">das Blockger\u00fcst in unserem vorherigen Beitrag behandelt<\/a>. Deshalb geben wir hier nur einen kurzen \u00dcberblick \u00fcber die Dateien, die wir f\u00fcr unsere Beispiele \u00e4ndern werden.<\/p>\n<p><strong>Der Root-Ordner<\/strong><br \/>\nIm Root-Ordner findest du die Haupt-PHP-Datei und mehrere Unterordner.<\/p>\n<p><strong>author-plugin.php<\/strong><br \/>\nDas Paket <code>@wordpress\/create-block<\/code> enth\u00e4lt standardm\u00e4\u00dfig die folgende <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#plugin-file\">PHP-Datei<\/a>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Plugin Name:       Author box\n * Description:       An example block for Kinsta readers\n * Requires at least: 5.8\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Carlo\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       author-plugin\n *\n * @package           author-box\n *\/\n\n\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/\nfunction author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build' );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>In der \u00dcberschrift siehst du die Angaben, die wir bei der Einrichtung gemacht haben.<\/p>\n<p>Bei statischen Bl\u00f6cken wirst du die meiste Zeit an den JavaScript-Dateien arbeiten, die sich im Ordner <em>src<\/em> befinden. Bei dynamischen Bl\u00f6cken schreibst du PHP-Code, um den Inhalt des Blocks auf dem Frontend anzuzeigen.<\/p>\n<p><strong>Der <em>src-Ordner<\/em><\/strong><br \/>\nDer Ordner <em>src<\/em> ist dein Entwicklungsordner. Hier findest du die folgenden Dateien:<\/p>\n<ul>\n<li><em>block.json<\/em><\/li>\n<li><em>index.js<\/em><\/li>\n<li><em>edit.js<\/em><\/li>\n<li><em>save.js<\/em><\/li>\n<li><em>editor.scss<\/em><\/li>\n<li><em>style.scss<\/em><\/li>\n<\/ul>\n<p><strong>block.json<\/strong><br \/>\nDie <em>block.json<\/em> ist deine Metadaten-Datei. <code>@wordpress\/create-block<\/code> erzeugt die folgende <strong>block.json-Datei<\/strong>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"author-box\/author-plugin\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Author box\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"businessperson\",\n\t\"description\": \"An example block for Kinsta readers\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"author-plugin\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<p>Einen genaueren Blick auf die <em>block.json-Datei<\/em> im Allgemeinen wirfst du in <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#block-json\">unserem vorherigen Blogbeitrag<\/a>.<\/p>\n<p><strong>index.js<\/strong><br \/>\nIn der Datei <em>index.js<\/em> registrierst du den Blocktyp auf dem Client:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\n\nregisterBlockType('author-box\/author-plugin', {\n\tedit: Edit,\n\tsave,\n});<\/code><\/pre>\n<p><strong>edit.js<\/strong><br \/>\nIn der Datei <em>edit.js<\/em> baust du die Oberfl\u00e4che des Blocks auf, die im Editor angezeigt wird:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('Author box \u2013 hello from the editor!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>save.js<\/strong><br \/>\nDie Datei <em>save.js<\/em> enth\u00e4lt das Skript, das den Inhalt des Blocks erstellt, der in der Datenbank gespeichert wird. Wir werden diese Datei in diesem Lernprogramm nicht verwenden:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__('Author box \u2013 hello from the saved content!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h2>Erstellen des Blocks zum Rendern im Editor<\/h2>\n<p>\u00d6ffne dein Projekt in <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/#visual-studio-code\">Visual Studio Code<\/a> oder einem anderen <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">Code-Editor<\/a> deiner Wahl.<\/p>\n<p>Wenn du Visual Studio Code verwendest, gehe auf <strong>Terminal -&gt; Neues Terminal<\/strong>. Dadurch wird ein Terminalfenster im Stammordner deines Projekts ge\u00f6ffnet.<\/p>\n<p>Gib im Terminal (oder in deinem bevorzugten Kommandozeilenprogramm) den folgenden Befehl ein:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Du f\u00fchrst die Node-Umgebung jetzt im Entwicklungsmodus aus.<\/p>\n<figure id=\"attachment_120337\" aria-describedby=\"caption-attachment-120337\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120337 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/the-project-in-visual-studio-code.jpg\" alt=\"Das Block-Plugin-Projekt in Visual Studio Code.\" width=\"2378\" height=\"1628\"><figcaption id=\"caption-attachment-120337\" class=\"wp-caption-text\">Das Block-Plugin-Projekt in Visual Studio Code.<\/figcaption><\/figure>\n<p>Von hier an gehst du auf zwei verschiedenen Wegen vor. Um den Block im Editor darzustellen, arbeitest du in der Datei <em>edit.js<\/em>. Um den Block auf dem Frontend darzustellen, musst du PHP-Code in die Hauptdatei des Plugins schreiben.<\/p>\n<p>Jetzt kremple deine \u00c4rmel hoch, denn die Programmierung beginnt:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"10\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In diesem Artikel stellen wir nur Codeschnipsel zur Verf\u00fcgung. Den vollst\u00e4ndigen Code <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">findest du auf Gist<\/a>.<\/p>\n<\/aside>\n\n<h3>Den Block auf dem Server registrieren<\/h3>\n<p>Zuerst musst du den Block auf dem Server registrieren und den PHP-Code schreiben, um die Daten aus der Datenbank abzurufen.<\/p>\n<p>In der Datei <em>author-plugin.php<\/em> musst du ein zweites Argument an die <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#plugin-file\">Funktion<code>register_block_type<\/code><\/a> \u00fcbergeben:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build', array(\n\t\t'render_callback' =&gt; 'author_box_author_plugin_render_author_content'\n\t) );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>Das zweite Argument ist ein Array von Argumenten f\u00fcr die Registrierung eines Blocktyps (die <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_block_type\/__construct\/\">vollst\u00e4ndige Liste der verf\u00fcgbaren Argumente findest du hier<\/a>). Im obigen Code haben wir nur <code>render_callback<\/code> angegeben, das die Callback-Funktion bestimmt, die den Block auf dem Bildschirm rendert.<\/p>\n<p>Als N\u00e4chstes wirst du die Funktion deklarieren:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content() {\n\treturn 'Hello World!';\n}<\/code><\/pre>\n<p>Speichere die Datei, erstelle einen neuen Beitrag oder eine neue Seite und f\u00fcge den <strong>Author Box-Block<\/strong> in die Arbeitsfl\u00e4che des Editors ein.<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"Der WordPress Block Inserter.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">Der WordPress Block Inserter.<\/figcaption><\/figure>\n<p>Der Block-Editor zeigt immer noch den Starter-Block an, da wir die Datei <em>edit.js<\/em> noch nicht ge\u00e4ndert haben.<\/p>\n<p>Aber wenn du dir den Beitrag im Frontend ansiehst, siehst du, dass der urspr\u00fcngliche Blockinhalt jetzt durch den String &#8222;Hello World&#8220; ersetzt wurde.<\/p>\n<p>Da der im Frontend angezeigte HTML-Code von der PHP-Datei generiert wird, muss die Funktion <code>save<\/code> nichts mehr zur\u00fcckgeben. Gehen wir also direkt in die Datei <em>save.js<\/em> und \u00e4ndern den Code wie unten gezeigt:<\/p>\n<pre><code class=\"language-js\">export default function save() {\n\treturn null;\n}<\/code><\/pre>\n<h3>Blockattribute definieren<\/h3>\n<p>Jetzt brauchst du einen Ort, an dem du die Benutzereinstellungen speichern kannst. Zum Beispiel die Anzahl der Beitr\u00e4ge, die aus der Datenbank abgerufen werden sollen, ob ein bestimmtes Feld angezeigt werden soll oder nicht, usw. Dazu definierst du eine Reihe von <code>attributes<\/code> in der Datei <em>block.json<\/em>.<\/p>\n<p>Du k\u00f6nntest dem Nutzer zum Beispiel die M\u00f6glichkeit geben, die Anzahl der Beitr\u00e4ge zu bestimmen, die in den Block aufgenommen werden sollen, die Option, ein Bild, ein Datum oder einen Auszug anzuzeigen und\/oder das Profilbild des Autors auszublenden\/anzuzeigen.<\/p>\n<p>Hier ist die vollst\u00e4ndige Liste der Attribute, die wir f\u00fcr die Erstellung unseres Beispielblocks verwenden werden:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"numberOfItems\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 3\n\t\t},\n\t\t\"columns\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 1\n\t\t},\n\t\t\"displayDate\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayExcerpt\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayThumbnail\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayAuthorInfo\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"showAvatar\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}, \n\t\t\"avatarSize\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 48\n\t\t},\n\t\t\"showBio\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Erstellen des Blocks, der im Editor angezeigt werden soll<\/h3>\n<p>Der Selektor <code>getEntityRecords<\/code> ist im Paket <code>@wordpress\/data<\/code> enthalten. Um ihn zu verwenden, musst du den <code>useSelect<\/code> Hook aus diesem Paket in deine <code>edit.js<\/code> Datei importieren:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>useSelect<\/code> ist ein benutzerdefinierter React-Hook zum Abrufen von Werten aus registrierten Selektoren, der auf dem <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\"><code>useCallback<\/code> React-Hook<\/a> basiert.<\/p>\n<\/aside>\n\n<p>Als N\u00e4chstes f\u00fcgst du den folgenden Code in die Funktion <code>Edit()<\/code> ein:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect( ( select ) =&gt; {\n\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t'per_page': 3\n\t});\n});<\/code><\/pre>\n<p>Im obigen Code haben wir die Anzahl der Beitr\u00e4ge fest programmiert. Du m\u00f6chtest den Nutzern aber vielleicht die M\u00f6glichkeit geben, eine andere Anzahl von Beitr\u00e4gen festzulegen. Daf\u00fcr kannst du ein Attribut verwenden.<\/p>\n<p>In deiner <em>block.json<\/em> solltest du ein <code>numberOfItems<\/code> Attribut definiert haben. Du kannst es in deiner <code>Edit<\/code> Funktion verwenden, wie unten gezeigt:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect( ( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems\n\t\t});\n\t});\n\n\tconsole.log( posts );\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Du wirst die Beitr\u00e4ge noch nicht auf dem Bildschirm sehen, aber f\u00fchre eine <code>console.log<\/code> aus und sieh dir an, was in der Konsole deines Browserinspektors passiert:<\/p>\n<figure id=\"attachment_120340\" aria-describedby=\"caption-attachment-120340\" style=\"width: 1714px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120340 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/console-log.jpg\" alt=\"Das Ergebnis in der Konsole deines Browsers.\" width=\"1714\" height=\"906\"><figcaption id=\"caption-attachment-120340\" class=\"wp-caption-text\">Das Ergebnis in der Konsole deines Browsers.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"><code>useSelect<\/code> kann zwei Argumente annehmen<\/a>: einen Inline-Callback und ein Array mit Abh\u00e4ngigkeiten. Beide geben eine <a href=\"https:\/\/en.wikipedia.org\/wiki\/Memoization\">memoisierte<\/a> Version des Callbacks zur\u00fcck, die sich nur \u00e4ndert, wenn sich eine der Abh\u00e4ngigkeiten \u00e4ndert.<\/p>\n<p>Wenn du also bei jeder \u00c4nderung des Attributs <code>numberOfItems<\/code> einen neuen Beitrag abrufen willst, musst du die Funktion <code>Edit<\/code> wie folgt \u00e4ndern:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t}, \n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Als N\u00e4chstes musst du <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">die Liste der Beitr\u00e4ge rendern<\/a>. Dazu kannst du die integrierte <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">JavaScript-Methode <code>map<\/code><\/a> verwenden:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\t\n\treturn (\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{ posts && posts.map( ( post ) =&gt; {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t\t\t{ \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Sie pr\u00fcft zun\u00e4chst, ob du mindestens einen Beitrag im Array hast, und f\u00fchrt dann die Schleife aus.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Die Methode <code>map()<\/code> erstellt ein neues Array, das mit den Ergebnissen des Aufrufs einer angegebenen Funktion f\u00fcr jedes Element im aufrufenden Array gef\u00fcllt wird &#8211; Quelle: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">MDN Web Docs<\/a><\/p>\n<\/aside>\n\n<p>Da wir die Methode <code>map<\/code> mit einer React-Komponente verwenden, benutzen wir auch ein <code>key<\/code> -Attribut, um die Post-ID dem aktuellen Listenelement zuzuweisen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ein &#8222;Schl\u00fcssel&#8220; ist ein spezielles String-Attribut, das du bei der Erstellung von Listen mit Elementen angeben musst &#8211; Quelle: <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">Listen und Schl\u00fcssel<\/a> in den React Docs.<\/p>\n<\/aside>\n\n<p><code>post.link<\/code> und <code>post.title.rendered<\/code> geben die URL bzw. den Titel des Beitrags wieder.<\/p>\n<p>Die Abbildung unten zeigt die vollst\u00e4ndige Liste der Eigenschaften des <code>post<\/code> Objekts.<\/p>\n<figure id=\"attachment_120341\" aria-describedby=\"caption-attachment-120341\" style=\"width: 2290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/js-loop-1.jpg\" alt=\"Das Post-Objekt.\" width=\"2290\" height=\"1270\"><figcaption id=\"caption-attachment-120341\" class=\"wp-caption-text\">Das Post-Objekt.<\/figcaption><\/figure>\n<p>Der obige Code ist nur ein grundlegendes Beispiel f\u00fcr die Verwendung von <code>getEntityRecords<\/code>. Jetzt ist es an der Zeit, unser Wissen in die Praxis umzusetzen.<\/p>\n<p>Nehmen wir an, du m\u00f6chtest verhindern, dass dein Block HTML-Tags wiedergibt, die der Benutzer dem Beitragstitel hinzugef\u00fcgt hat. WordPress bietet daf\u00fcr eine <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#rawhtml\"><code>RawHTML<\/code> Komponente<\/a>.<\/p>\n<p>Zuerst importierst du die Komponente aus dem <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\">Paket @wordpress\/element<\/a>:<\/p>\n<pre><code class=\"language-js\">import { RawHTML } from '@wordpress\/element';<\/code><\/pre>\n<p>Als N\u00e4chstes verpackst du den Beitragstitel in ein <code>RawHTML<\/code> Element:<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...useBlockProps() }&gt;\n\t&lt;ul&gt;\n\t\t{ posts && posts.map((post) =&gt; {\n\t\t\treturn (\n\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t{ post.title.rendered ? (\n\t\t\t\t\t\t\t\t&lt;RawHTML&gt;\n\t\t\t\t\t\t\t\t\t{ post.title.rendered }\n\t\t\t\t\t\t\t\t&lt;\/RawHTML&gt;\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t&lt;\/li&gt;\n\t\t\t)\n\t\t})}\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Und das war&#8217;s. F\u00fcge nun einen HTML-Tag zu deinem Beitragstitel hinzu und speichere den Beitrag. Teste dann deinen Code mit und ohne <code>RawHTML<\/code> und sieh, wie sich der Inhalt deines Blocks auf dem Bildschirm ver\u00e4ndert.<\/p>\n<h3>Hinzuf\u00fcgen des Datums<\/h3>\n<p>WordPress bietet eine Reihe von JavaScript-Funktionen zur Verwaltung und Formatierung von Datumsangaben. Um diese Funktionen zu nutzen, musst du sie zun\u00e4chst aus dem <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-date\/\">Paket<code>@wordpress\/date<\/code><\/a> in deine <em>edit.js-Datei<\/em> importieren:<\/p>\n<pre><code class=\"language-js\">import { dateI18n, format, __experimentalGetSettings } from '@wordpress\/date';<\/code><\/pre>\n<ul>\n<li><code>dateI18n<\/code>: Formatiere ein Datum und \u00fcbersetze es in das Gebietsschema der Website.<\/li>\n<li><code>format<\/code>: Formatiere ein Datum.<\/li>\n<li><code>__experimentalGetSettings<\/code>: Zeigt das Datum in dem Format an, das in den allgemeinen Einstellungen von WordPress festgelegt wurde.<\/li>\n<\/ul>\n<p>Diese Funktionen sind nicht dokumentiert, aber du findest n\u00fctzliche Beispiele im Quellcode verschiedener Bl\u00f6cke. Siehe zum Beispiel die Dateien <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/latest-posts\/edit.js\">latest-posts<\/a> und <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-date\/edit.js\">post-date<\/a> <em>edit.js<\/em>.<\/p>\n<p>F\u00fcge nun das Attribut <code>displayDate<\/code> hinzu:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate } = attributes;<\/code><\/pre>\n<p>F\u00fcge dann den folgenden Code in das Element <code>&lt;li&gt;<\/code> ein:<\/p>\n<pre><code class=\"language-jsx\">{ \n\tdisplayDate && (\n\t\t&lt;time\n\t\t\tclassName='wp-block-author-box-author-plugin__post-date'\n\t\t\tdateTime={ format( 'c', post.date_gmt ) }\n\t\t&gt;\n\t\t\t{ dateI18n(\n\t\t\t\t__experimentalGetSettings().formats.date, \n\t\t\t\tpost.date_gmt\n\t\t\t)}\n\t\t&lt;\/time&gt;\n\t) \n}<\/code><\/pre>\n<p>Was passiert hier?<\/p>\n<ul>\n<li>Wenn <code>displayDate<\/code> <code>true<\/code> ist, wird das Datum mit einem <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/time\"><code>time<\/code> Element<\/a> angezeigt.<\/li>\n<li>Das Attribut <code>dateTime<\/code> gibt die Uhrzeit und\/oder das Datum des Elements in einem der <a href=\"https:\/\/wordpress.org\/support\/article\/formatting-date-and-time\/\">zul\u00e4ssigen Formate<\/a> an.<\/li>\n<li><code>dateI18n<\/code> ruft das Datum im lokalisierten Format ab. Diese Funktion funktioniert \u00e4hnlich wie die <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/date_i18n\/\">PHP <code>date_i18n<\/code> WordPress-Funktion<\/a>.<\/li>\n<\/ul>\n<h3>Den Auszug hinzuf\u00fcgen<\/h3>\n<p>Jetzt sollte es einfach sein, den Auszug des Beitrags hinzuzuf\u00fcgen. Sieh dir zun\u00e4chst die Eigenschaft <code>excerpt<\/code> im Inspektor des Browsers an. Du wirst sehen, dass der eigentliche Inhalt in <code>excerpt.rendered<\/code> gespeichert ist.<\/p>\n<figure id=\"attachment_120343\" aria-describedby=\"caption-attachment-120343\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/inspecting-post-excerpt.jpg\" alt=\"Inspektion des Beitragsauszugs in Chrome DevTools.\" width=\"1640\" height=\"868\"><figcaption id=\"caption-attachment-120343\" class=\"wp-caption-text\">Inspektion des Beitragsauszugs in Chrome DevTools.<\/figcaption><\/figure>\n<p>Als N\u00e4chstes f\u00fcgst du das Attribut <code>displayExcerpt<\/code> zum Objekt <code>attributes<\/code> hinzu:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate, displayExcerpt } = attributes;<\/code><\/pre>\n<p>F\u00fcge dann den folgenden Code vor dem <code>&lt;\/li&gt;<\/code> schlie\u00dfenden Tag in die <code>Edit<\/code> Funktion ein:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Falls du dich mit JavaScript nicht auskennst, haben wir hier und oben die <strong>Kurzschlussauswertung<\/strong> verwendet, bei der, wenn alle Bedingungen wahr sind, der Wert des letzten Operanden zur\u00fcckgegeben wird (lies mehr in <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Inline If mit logischem &#038;&#038; Operator<\/a> und <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND\">logischem AND (&#038;&#038;)<\/a>).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In JavaScript wird <code>true &amp;&amp; expression<\/code> immer zu <code>expression<\/code> und <code>false &amp;&amp; expression<\/code> immer zu <code>false<\/code> ausgewertet.<\/p>\n<p>Wenn die Bedingung <code>true<\/code> lautet, wird das Element direkt nach <code>&amp;&amp;<\/code> in der Ausgabe erscheinen. Wenn es <code>false<\/code> ist, wird es von React ignoriert und \u00fcbersprungen. Quelle: <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Conditional Rendering<\/a> in den React Docs<\/p>\n<\/aside>\n\n<p>Zum Schluss kannst du deinen Code noch einmal testen. \u00c4ndere den Wert des Attributs in der Datei <em>block.json<\/em> und schau, was im Editor passiert.<\/p>\n<h3>F\u00fcge das Featured Image hinzu<\/h3>\n<p>Jetzt musst du den Code hinzuf\u00fcgen, mit dem die Featured Images gerendert werden. Beginne damit, das Attribut <code>displayThumbnail<\/code> zu <code>attributes<\/code> hinzuzuf\u00fcgen:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tdisplayDate, \n\tdisplayExcerpt, \n\tdisplayThumbnail \n} = attributes;<\/code><\/pre>\n<p>Jetzt musst du herausfinden, wo das Featured Image gespeichert ist. Wie wir bereits erw\u00e4hnt haben, musst du ein neues Argument <code>_embed<\/code> zu deiner Abfrage hinzuf\u00fcgen, um das Featured Image zu erhalten. Geh zur\u00fcck zu deinem Code und \u00e4ndere die Abfrageargumente wie folgt:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Hier haben wir einfach <code>'_embed': true<\/code> zu dem Array der Argumente hinzugef\u00fcgt. Dadurch erh\u00e4ltst du ein <code>post<\/code> Objekt, das die Eigenschaft <code>_embedded<\/code> enth\u00e4lt, die dir die Bilddetails liefert, die du f\u00fcr die Anzeige der vorgestellten Bilder ben\u00f6tigst.<\/p>\n<p>Jetzt solltest du wissen, wo du <a href=\"#accessing-post-data-using-the-wordpress-rest-api\">die Bilddetails findest<\/a>.<\/p>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Details zum Featured Image in der getEntityRecords-Antwort.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Details zum Featured Image in der getEntityRecords-Antwort.<\/figcaption><\/figure>\n<p>Du musst nur den Code hinzuf\u00fcgen, der das Bild auf dem Bildschirm anzeigt:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayThumbnail && \n\tpost._embedded && \n\tpost._embedded['wp:featuredmedia'] &&\n\tpost._embedded['wp:featuredmedia'][0] &&\n\t&lt;img \n\tclassName='wp-block-author-box-author-plugin__post-thumbnail'\n\t\tsrc={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }\n\t\talt={ post._embedded['wp:featuredmedia'][0].alt_text }\n\t\/&gt;\n}<\/code><\/pre>\n<p>Speichere die Datei, wechsle in den Block-Editor und \u00fcberpr\u00fcfe, ob das Bild korrekt angezeigt wird, wenn das Attribut <code>displayThumbnail<\/code> auf <code>true<\/code> gesetzt ist.<\/p>\n<figure id=\"attachment_120354\" aria-describedby=\"caption-attachment-120354\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt.jpg\" alt=\"Eine Liste von Beitr\u00e4gen mit Bild, Datum und Auszug.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120354\" class=\"wp-caption-text\">Eine Liste von Beitr\u00e4gen mit Bild, Datum und Auszug.<\/figcaption><\/figure>\n<h3>Sidebar-Steuerelemente hinzuf\u00fcgen<\/h3>\n<p>Bis jetzt haben wir die Standardwerte der Attribute in der <em>block.json<\/em> verwendet. Aus <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#define-attributes\">unserem vorherigen Artikel<\/a> wissen wir jedoch, dass wir Event-Handler definieren k\u00f6nnen, um den Benutzern die M\u00f6glichkeit zu geben, jedem Attribut eigene Werte zuzuweisen.<\/p>\n<p>Dazu f\u00fcgst du eine Reihe von Steuerelementen in die <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#settings-sidebar\">Seitenleiste der Blockeinstellungen<\/a> ein. In <em>edit.js<\/em> importierst du die folgenden Komponenten aus den entsprechenden Paketen:<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps,\n\tInspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n\tPanelBody,\n\tPanelRow,\n\tQueryControls,\n\tToggleControl,\n\tRangeControl\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code>InspectorControls<\/code>: Enth\u00e4lt Einstellungen f\u00fcr die Seitenleiste, die den gesamten Block betreffen (siehe auf <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">GitHub<\/a>)<\/li>\n<li><code>PanelBody<\/code>: F\u00fcgt der Einstellungen-Seitenleiste einen zusammenklappbaren Container hinzu (siehe aif <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">GitHub<\/a>)<\/li>\n<li><code>PanelRow<\/code>: Erzeugt einen generischen Container f\u00fcr die Steuerelemente der Seitenleiste (siehe auf <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\">GitHub<\/a>)<\/li>\n<li><code>QueryControls<\/code>: Stellt Steuerelemente f\u00fcr Einstellungen zur Verf\u00fcgung, um eine Abfrage zu erstellen (siehe auf <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/query-controls\">GitHub<\/a>)<\/li>\n<li><code>ToggleControl<\/code>: Bietet einen Toggle-Button, mit dem Nutzer eine bestimmte Option aktivieren\/deaktivieren k\u00f6nnen (siehe auf <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\">GitHub<\/a>)<\/li>\n<li><code>RangeControl<\/code>: Wird verwendet, um eine Auswahl aus einer Reihe von inkrementellen Werten zu treffen (siehe auf <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/range-control\">GitHub<\/a>)<\/li>\n<\/ul>\n<p>Als N\u00e4chstes musst du die Funktion <code>Edit<\/code> aktualisieren, um die jetzt verf\u00fcgbaren Steuerelemente zu verwenden. \u00c4ndere zun\u00e4chst die Funktion <code>Edit<\/code> wie folgt:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\n\tconst { \n\t\tnumberOfItems, \n\t\tcolumns, \n\t\tdisplayExcerpt, \n\t\tdisplayDate, \n\t\tdisplayThumbnail\n\t} = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems,\n\t\t\t\t'_embed': true\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\t...\n}<\/code><\/pre>\n<p>Beachte die Eigenschaft <code>setAttributes<\/code>, die an die Funktion <code>Edit<\/code> \u00fcbergeben wird.<\/p>\n<p>Jetzt kannst du die entsprechenden Elemente zu deinem JSX-Code hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Content Settings', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;QueryControls \n\t\t\t\t\t\tnumberOfItems={ numberOfItems }\n\t\t\t\t\t\tonNumberOfItemsChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { numberOfItems: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminItems={ 1 }\n\t\t\t\t\t\tmaxItems={ 10 }\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;RangeControl\n\t\t\t\t\t\tlabel={ __( 'Number of Columns', 'author-plugin' ) }\n\t\t\t\t\t\tvalue={ columns }\n\t\t\t\t\t\tonChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { columns: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 4 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Featured Image', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayThumbnail }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayThumbnail: ! displayThumbnail } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Date', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayDate }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayDate: ! displayDate } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Excerpt', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayExcerpt }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayExcerpt: ! displayExcerpt } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PanelBody&gt;\n\t\t&lt;\/InspectorControls&gt;\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t...\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Wow, das ist ganz sch\u00f6n viel Code, oder? Aber es ist ziemlich einfach zu verstehen.<\/p>\n<p>Die Elementattribute, die deine Aufmerksamkeit am meisten verdienen, sind <code>onNumberOfItemsChange<\/code> in <code>QueryControls<\/code> und <code>onChange<\/code> in <code>RangeControl<\/code> und <code>ToggleControl<\/code>. Diese Attribute legen die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">Ereignishandler<\/a> fest, mit denen der Benutzer das Aussehen und\/oder das Verhalten eines Blocks anpassen kann.<\/p>\n<p>Du wirst au\u00dferdem feststellen, dass wir die Tags <code>&lt;&gt;<\/code> und <code>&lt;\/&gt;<\/code> verwendet haben, die die kurze Syntax f\u00fcr die Deklaration von <a href=\"https:\/\/reactjs.org\/docs\/fragments.html#short-syntax\">React-Fragmenten<\/a> sind.<\/p>\n<p>Speichere jetzt deine Datei, gehe in den Editor und aktualisiere die Seite:<\/p>\n<figure id=\"attachment_120367\" aria-describedby=\"caption-attachment-120367\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120367 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-box-content-settings.jpg\" alt=\"Blockeinstellungen.\" width=\"1862\" height=\"1022\"><figcaption id=\"caption-attachment-120367\" class=\"wp-caption-text\">Blockeinstellungen.<\/figcaption><\/figure>\n<p>Ist alles da? Dann lass uns weitermachen und die Details des Beitragsautors hinzuf\u00fcgen.<\/p>\n<h3>Den Autor des Beitrags finden<\/h3>\n<p>Wie bereits erw\u00e4hnt, zeigt unser Block eine Liste von Artikeln an, die von demselben Autor wie der aktuelle Beitrag geschrieben wurden.<\/p>\n<p>Um die ID des Verfassers des Beitrags zu erhalten, importierst du den <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-editor\/#getcurrentpostattribute\"><code>getCurrentPostAttribute<\/code> Selektor<\/a> aus dem <code>core\/editor<\/code> Datenspeicher:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core\/editor' ).getCurrentPostAttribute( 'author' )<\/code><\/pre>\n<p><code>getCurrentPostAttribute<\/code> gibt einen Attributwert f\u00fcr den gespeicherten Beitrag zur\u00fcck.<\/p>\n<p>Sobald du die Autoren-ID hast, kannst du die Abfrage wie folgt \u00e4ndern:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\t\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Mit diesem Code erh\u00e4ltst du eine Liste der <code>n<\/code> Artikel des selben Autors wie der aktuelle Beitrag.<\/p>\n<p>Jetzt, wo du die Autoren-ID hast, kannst du sie auch verwenden, um weitere Daten aus der Datenbank abzurufen.<\/p>\n<h3>Autorendetails anzeigen<\/h3>\n<p>Da wir keine Dokumentation zur Verf\u00fcgung haben, haben wir den Code aus dem <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-author\/edit.js\">Hauptblock Post Author<\/a> als Referenz verwendet.<\/p>\n<p>Um die Autorendetails anzuzeigen, musst du zun\u00e4chst eine neue Abh\u00e4ngigkeit importieren:<\/p>\n<pre><code class=\"language-js\">import { forEach } from 'lodash';<\/code><\/pre>\n<p>Dann aktualisierst du in der Funktion <code>Edit<\/code> das Objekt <code>attributes<\/code> wie folgt:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tcolumns, \n\tdisplayExcerpt, \n\tdisplayDate, \n\tdisplayThumbnail, \n\tdisplayAuthorInfo, \n\tshowAvatar, \n\tavatarSize, \n\tshowBio \n} = attributes;<\/code><\/pre>\n<p>Anschlie\u00dfend bearbeitest du den Code aus dem vorherigen Abschnitt, um die Autorendaten abzurufen:<\/p>\n<pre><code class=\"language-js\">const { authorDetails, posts } = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\n\t\tconst authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;\n\t\n\t\tconst posts = select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\n\t\treturn { \n\t\t\tauthorDetails: authorDetails,\n\t\t\tposts: posts\n\t\t};\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Beachte, dass wir den <a href=\"#getusers\"><code>getUser<\/code> Selektor<\/a> verwendet haben, um die Autorendetails zu erhalten.<\/p>\n<p>Als N\u00e4chstes m\u00f6chtest du vielleicht den Avatar des Autors abrufen. Der folgende Code erstellt ein Array mit den URLs und Gr\u00f6\u00dfen der Avatare:<\/p>\n<pre><code class=\"language-js\">const avatarSizes = [];\nif ( authorDetails ) {\n\tforEach( authorDetails.avatar_urls, ( url, size ) =&gt; {\n\t\tavatarSizes.push( {\n\t\t\tvalue: size,\n\t\t\tlabel: `${ size } x ${ size }`,\n\t\t} );\n\t} );\n}<\/code><\/pre>\n<p>Dann f\u00fcgst du die Seitenleisten und Steuerelemente hinzu, damit die Benutzer den Autorenbereich im Block anpassen k\u00f6nnen:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Author Info', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Author Info', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayAuthorInfo }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayAuthorInfo: ! displayAuthorInfo } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t{ displayAuthorInfo && (\n\t\t\t\t\t&lt;&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show avatar' ) }\n\t\t\t\t\t\t\t\tchecked={ showAvatar }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showAvatar: ! showAvatar } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t\t\t&lt;SelectControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Avatar size' ) }\n\t\t\t\t\t\t\t\t\tvalue={ avatarSize }\n\t\t\t\t\t\t\t\t\toptions={ avatarSizes }\n\t\t\t\t\t\t\t\t\tonChange={ ( size ) =&gt; {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tavatarSize: Number( size ),\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show Bio', 'author-plugin' ) }\n\t\t\t\t\t\t\t\tchecked={ showBio }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showBio: ! showBio } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;\/&gt;\n\t\t\t\t) }\n\t\t\t&lt;\/PanelBody&gt;\n\t\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\t\t...\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Das Bild unten zeigt die aktualisierte Einstellungs-Seitenleiste:<\/p>\n<figure id=\"attachment_120379\" aria-describedby=\"caption-attachment-120379\" style=\"width: 1908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120379 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-settings-panel.jpg\" alt=\"Die Autoreninfo-Einstellungsleiste.\" width=\"1908\" height=\"960\"><figcaption id=\"caption-attachment-120379\" class=\"wp-caption-text\">Die Autoreninfo-Einstellungsleiste.<\/figcaption><\/figure>\n<p>Schlie\u00dflich kannst du den Abschnitt f\u00fcr den Autor zu deinem Block hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t{ displayAuthorInfo  && authorDetails && (\n\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__author\"&gt;\n\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__avatar\"&gt;\n\t\t\t\t\t\t\t&lt;img\n\t\t\t\t\t\t\t\twidth={ avatarSize }\n\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\tauthorDetails.avatar_urls[\n\t\t\t\t\t\t\t\t\t\tavatarSize\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\talt={ authorDetails.name }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t) }\n\t\t\t\t\t&lt;div className='wp-block-author-box-author-plugin__author-content'&gt;\n\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__name'&gt;\n\t\t\t\t\t\t\t{ authorDetails.name }\n\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t{ showBio &&\n\t\t\t\t\t\t\t\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\n\t\t\t\t\t\t\tauthorDetails?.description &&\n\t\t\t\t\t\t\tauthorDetails.description.length &gt; 0 && (\n\t\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__description'&gt;{ authorDetails.description }&lt;\/p&gt;\n\t\t\t\t\t\t) }\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t)}\n\t\t\t&lt;ul&gt;\n\t\t\t...\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Das folgende Bild zeigt, wie er auf dem Bildschirm dargestellt wird.<\/p>\n<figure id=\"attachment_120380\" aria-describedby=\"caption-attachment-120380\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120380 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings.jpg\" alt=\"Abschnitt Autorendetails und Info-Einstellungen.\" width=\"1912\" height=\"844\"><figcaption id=\"caption-attachment-120380\" class=\"wp-caption-text\">Abschnitt Autorendetails und Info-Einstellungen.<\/figcaption><\/figure>\n<p>Speichere nun deine <em>edit.js<\/em> Datei und f\u00fchre deine Tests durch. Dein Block sollte je nach Blockeinstellungen unterschiedliche Elemente enthalten.<\/p>\n<figure id=\"attachment_120384\" aria-describedby=\"caption-attachment-120384\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120384 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings-no-bio-2.jpg\" alt=\"Autorendetails zeigen nicht die Biografie des Autors an.\" width=\"1912\" height=\"484\"><figcaption id=\"caption-attachment-120384\" class=\"wp-caption-text\">Autorendetails zeigen nicht die Biografie des Autors an.<\/figcaption><\/figure>\n<p>Eine letzte Sache fehlt noch: die Anzahl der Spalten f\u00fcr die Anzeige der Artikel.<\/p>\n<h3>\u00c4ndere die Anzahl der Kolumnen<\/h3>\n<p>Um dem Benutzer die M\u00f6glichkeit zu geben, Artikelvorschauen in Spalten anzuzeigen, haben wir das Attribut <code>columns<\/code> in der Datei <em>block.json<\/em> definiert. Au\u00dferdem haben wir ein <code>columns<\/code> -Attribut in das Skript eingef\u00fcgt und ein Einstellungselement erstellt, mit dem die Benutzer die Anzahl der Spalten \u00e4ndern k\u00f6nnen.<\/p>\n<p>Im JSX-Code oben hast du sicher bemerkt, dass wir mehreren Elementen CSS-Klassen hinzugef\u00fcgt haben:<\/p>\n<p>Klassen, die den Elementen im Abschnitt Autor zugewiesen wurden:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__author<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__avatar<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__author-content<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__name<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__description<\/code><\/li>\n<\/ul>\n<p>Klassen, die den Elementen im Abschnitt &#8222;Inhalt&#8220; zugewiesen wurden:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__post-items<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-thumbnail<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-title<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-date<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-excerpt<\/code><\/li>\n<\/ul>\n<p>Eine Klasse fehlt noch. Der Name dieser Klasse wird dynamisch generiert, um die Anzahl der vom Benutzer festgelegten Spalten widerzuspiegeln.<\/p>\n<p>Gehe zur\u00fcck zur Datei <code>Edit.js<\/code> und \u00e4ndere das Element <code>ul<\/code> wie folgt:<\/p>\n<pre><code class=\"language-jsx\">&lt;ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }&gt;\n\t...\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Wir haben eine neue Klasse <code>columns-${ columns }<\/code> hinzugef\u00fcgt, die der Syntax f\u00fcr <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">Vorlagenliterale<\/a> entspricht, um einen Ausdruck in einen String einzuf\u00fcgen. Auf diese Weise h\u00e4ngt das Attribut, das an das Element <code>ul<\/code> angeh\u00e4ngt wird, von den Benutzereinstellungen ab (z. B. <code>columns-1<\/code>, <code>columns-2<\/code>, usw.).<\/p>\n<p>\u00d6ffne nun die Datei <code>style.scss<\/code> und ersetze den bestehenden Code durch den folgenden:<\/p>\n<pre><code class=\"language-css\">.wp-block-author-box-author-plugin {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: .6em;\n\tul.wp-block-author-box-author-plugin__post-items {\n\t\tpadding: 0;\n\t\tlist-style-type: none;\n\t\tdisplay: grid;\n\t\tgap: .5em;\n\t\t@for $i from 2 through 4 {\n\t\t\t&.columns-#{ $i } {\n\t\t\t\tgrid-template-columns: repeat(#{ $i }, 1fr);\n\t\t\t}\n\t\t}\n\t\tli {\n\t\t\tlist-style: none;\n\t\t\timg.wp-block-author-box-author-plugin__post-thumbnail {\n\t\t\t\theight: auto;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n.wp-block-author-box-author-plugin__author {\n\tdisplay: flex;\n    flex-wrap: wrap;\n}\n\n.wp-block-author-box-author-plugin__avatar {\n\tmargin-right: 1em;\n}\n\n.wp-block-author-box-author-plugin__author-content {\n\tflex-basis: 0;\n    flex-grow: 1;\n}<\/code><\/pre>\n<p>Wir werden nicht tiefer in den Code eindringen, da dies den Rahmen dieses Artikels sprengen w\u00fcrde. Aber wenn du tiefer einsteigen m\u00f6chtest, kannst du die folgenden Ressourcen nutzen:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">CSS-Gitter-Layout<\/a><\/li>\n<li><a href=\"https:\/\/learncssgrid.com\/\">CSS Grid lernen<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/at-rules\/control\/for\">Die @for-Regel in Sass<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/style-rules#nesting\">Verschachtelung in Sass<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_120388\" aria-describedby=\"caption-attachment-120388\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120388 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-block-editor-view.jpg\" alt=\"Der Autorenblock im Editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120388\" class=\"wp-caption-text\">Der Autorenblock im Editor.<\/figcaption><\/figure>\n<p>Das war&#8217;s mit dem Rendering des Blocks im Editor.<\/p>\n<h2>Den Block zum Rendern auf der Seite erstellen<\/h2>\n<p>Jetzt, da der Code f\u00fcr die Darstellung des Blocks im Editor fertig ist, k\u00f6nnen wir den Block f\u00fcr die Darstellung im Frontend erstellen.<\/p>\n<p>Wie wir bereits erw\u00e4hnt haben, ist bei dynamischen Bl\u00f6cken die Plugin-Datei daf\u00fcr verantwortlich, den HTML-Code zu erzeugen, der im Frontend gerendert wird.<\/p>\n<p>\u00d6ffne also die Hauptdatei deines Plugins (in unserem Beispiel <em>author-plugin.php<\/em>).<\/p>\n<p>Als Erstes musst du die Blockattribute f\u00fcr die WordPress-PHP-Funktion verf\u00fcgbar machen. \u00c4ndere die Funktionsdefinition in deiner PHP-Datei wie folgt:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t...\n}<\/code><\/pre>\n<p>Jetzt kannst du die WordPress-Funktionen verwenden, um Daten abzurufen und zu manipulieren. Du kannst zum Beispiel <code>get_posts<\/code> verwenden, um die neuesten Blogbeitr\u00e4ge abzurufen (mehr dazu in unserem ausf\u00fchrlichen Artikel \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-get_posts\/\">Funktion<code>get_posts<\/code><\/a>):<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems'],\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t$output .= '&lt;li&gt;&lt;a href=\"' . esc_url( get_permalink( $p-&gt;ID ) ) . '\"&gt;' \n\t\t\t. $p-&gt;post_title . '&lt;\/a&gt;&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Die obige Funktion ruft die neuesten <code>numberOfItems<\/code> Blogbeitr\u00e4ge aus deiner WordPress-Datenbank ab (standardm\u00e4\u00dfig ist <code>post_type<\/code> auf <code>post<\/code> eingestellt) und gibt ein Array von <code>$post<\/code> Objekten zur\u00fcck. Dann durchl\u00e4uft sie das Array, um die Listenelemente zu erstellen.<\/p>\n<p>Wenn du dir die HTML-Ausgabe ansiehst, wirst du feststellen, dass es sich um eine einfache Liste von Beitr\u00e4gen handelt, wie in der folgenden Abbildung zu sehen ist:<\/p>\n<figure id=\"attachment_120521\" aria-describedby=\"caption-attachment-120521\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120521 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts.jpg\" alt=\"Eine einfache Liste von Beitr\u00e4gen.\" width=\"1866\" height=\"732\"><figcaption id=\"caption-attachment-120521\" class=\"wp-caption-text\">Eine einfache Liste von Beitr\u00e4gen.<\/figcaption><\/figure>\n<p>In unserem vorherigen Artikel haben wir erw\u00e4hnt, dass du den <code>useBlockProps<\/code> React-Hook verwenden wirst, um das <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/#import-components\">Wrapper-Element<\/a> des Blocks in deinem JSX-Code zu markieren. Das Gleiche musst du in deiner PHP-Funktion tun.<\/p>\n<p>WordPress stellt daf\u00fcr die <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">Funktion<code>get_block_wrapper_attributes<\/code><\/a> zur Verf\u00fcgung.<\/p>\n<p>\u00c4ndere also deinen PHP-Code wie folgt:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\t$output .= '&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;';\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Jetzt wurde dem Container-Element eine <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\"><code>wp-block-author-box-author-plugin<\/code> Klasse<\/a> zugewiesen und der Block hat eine andere Hintergrundfarbe.<\/p>\n<p>Dann erh\u00e4lt die Funktion <code>get_posts<\/code> die Daten von <code>WP_Posts<\/code> und der Zyklus <code>foreach<\/code> baut die Listenelemente auf (siehe auch <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-get_posts\/#display\">Wie man die von get_posts zur\u00fcckgegebenen Daten anzeigt<\/a>).<\/p>\n<figure id=\"attachment_120520\" aria-describedby=\"caption-attachment-120520\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120520 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-2.jpg\" alt=\"Eine Liste von Beitr\u00e4gen, denen eine CSS-Klasse zugewiesen wurde.\" width=\"1866\" height=\"650\"><figcaption id=\"caption-attachment-120520\" class=\"wp-caption-text\">Eine Liste von Beitr\u00e4gen, denen eine CSS-Klasse zugewiesen wurde.<\/figcaption><\/figure>\n<h3>Featured Image, Datum und Auszug hinzuf\u00fcgen<\/h3>\n<p>Als N\u00e4chstes musst du Beitragsvorschaubilder, Datum und Ausz\u00fcge hinzuf\u00fcgen. \u00c4ndere deinen PHP-Code in derselben Datei wie folgt:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-\"&gt;';\n\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\t\t\t$thumbnail = has_post_thumbnail( $p-&gt;ID ) ? get_the_post_thumbnail( $p-&gt;ID, 'medium' ) : '';\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\tif( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){\n\t\t\t\t$output .= $thumbnail;\n\t\t\t}\n\t\t\t$output .= '&lt;h5&gt;&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;&lt;\/h5&gt;';\n\t\t\tif( $attr['displayDate'] ){\n\t\t\t\t$output .= '&lt;time datetime=\"' . esc_attr( get_the_date( 'c', $p ) ) . '\"&gt;' . esc_html( get_the_date( '', $p ) ) . '&lt;\/time&gt;';\n\t\t\t}\n\t\t\tif( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){\n\t\t\t\t$output .= '&lt;p&gt;' . get_the_excerpt( $p ) . '&lt;\/p&gt;';\n\t\t\t}\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Die Schleife <code>foreach<\/code> durchl\u00e4uft das Array <code>$my_posts<\/code>. Bei jeder Iteration werden mehrere Bedingungen gepr\u00fcft, die die Attributwerte \u00fcberpr\u00fcfen und die Ausgabe entsprechend aufbauen.<\/p>\n<p>Sieh dir jetzt die Ausgabe auf dem Bildschirm an:<\/p>\n<figure id=\"attachment_120649\" aria-describedby=\"caption-attachment-120649\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120649 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt-1.jpg\" alt=\"Eine Liste von Beitr\u00e4gen mit Bildern, Datum und Ausz\u00fcgen.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120649\" class=\"wp-caption-text\">Eine Liste von Beitr\u00e4gen mit Bildern, Datum und Ausz\u00fcgen.<\/figcaption><\/figure>\n<p>Jetzt kannst du deine Tests durchf\u00fchren. \u00c4ndere die Einstellungen f\u00fcr Datum, Auszug und Vorschaubilder und pr\u00fcfe, wie sich der Inhalt des Blocks im Frontend ver\u00e4ndert.<\/p>\n<h3>Beitr\u00e4ge in Spalten anzeigen<\/h3>\n<p>In unserem JavaScript-Code haben wir eine <code>columns-${ columns }<\/code> Klasse verwendet, um die Beitragsvorschauen in Spalten anzuzeigen. Jetzt m\u00fcssen wir das Gleiche in PHP machen.<\/p>\n<p>Dazu musst du einfach diese beiden Codezeilen einf\u00fcgen:<\/p>\n<pre><code class=\"language-php\">$num_cols = $attr['columns'] &gt; 1 ? strval( $attr['columns'] ) : '1';\n\n$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '\"&gt;';<\/code><\/pre>\n<p>Dadurch wird eine <code>columns-n<\/code> Klasse an das <code>ul<\/code> Element angeh\u00e4ngt, das die Beitragsvorschauen enth\u00e4lt. Jetzt sollte die Anzahl der Spalten, die auf der Seite angezeigt werden, mit der Anzahl der Spalten \u00fcbereinstimmen, die in den Blockeinstellungen festgelegt wurde.<\/p>\n<h3>Erstelle die Autorenbox<\/h3>\n<p>Zuletzt musst du die Box mit den Angaben zum Autor erstellen, einschlie\u00dflich Avatar, Name und Beschreibung.<\/p>\n<p>In der Callback-Funktion musst du eine Reihe von Bedingungen hinzuf\u00fcgen, um den aktuellen Wert der einzelnen Attribute zu \u00fcberpr\u00fcfen:<\/p>\n<pre><code class=\"language-php\">if( $attr['displayAuthorInfo'] ){\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author\"&gt;';\n\t\n\tif( $attr['showAvatar'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__avatar\"&gt;' \n\t\t\t. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author-content\"&gt;';\n\t\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__name\"&gt;' \n\t\t. get_the_author_meta( 'display_name' ) \n\t\t. '&lt;\/div&gt;';\n\n\tif( $attr['showBio'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__description\"&gt;' \n\t\t\t. get_the_author_meta( 'description' ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;\/div&gt;';\n\t$output .= '&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>Der Code ist ganz einfach. Er pr\u00fcft den aktuellen Wert jedes Attributs und wenn er <code>true<\/code> ist, erzeugt er den erforderlichen HTML-Code.<\/p>\n<p>Speichere nun deine PHP-Datei und vergleiche den Block im Editor mit dem gleichen Block im Frontend.<\/p>\n<figure id=\"attachment_120952\" aria-describedby=\"caption-attachment-120952\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/full-block.jpg\" alt=\"Unser benutzerdefinierter Block im Block-Editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120952\" class=\"wp-caption-text\">Unser benutzerdefinierter Block im Block-Editor.<\/figcaption><\/figure>\n<p>Den vollst\u00e4ndigen Code des Beispielblocks findest du in <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">dieser \u00f6ffentlichen Gist<\/a>.<\/p>\n\n<h2>Empfohlene Ressourcen f\u00fcr die Entwicklung dynamischer Bl\u00f6cke<\/h2>\n<p>Wenn du beim Lesen dieses Artikels hellh\u00f6rig geworden bist und dir bewusst geworden ist, dass du dich mit der Erstellung von Gutenberg-Bl\u00f6cken beruflich weiterentwickeln kannst, raten wir dir, die Technologien, die hinter der Blockentwicklung stehen, weiter zu erforschen und dir neue Kenntnisse anzueignen.<\/p>\n<p>Auch wenn es immer noch keine verl\u00e4ssliche offizielle Dokumentation gibt, so gibt es doch hervorragende kostenlose und kostenpflichtige Ressourcen, die wir beim Schreiben dieses Artikels konsultiert haben. Unter den vielen verf\u00fcgbaren Ressourcen empfehlen wir die folgenden:<\/p>\n<p><strong>Offizielle Ressourcen<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md\">Daten<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/core-data\/README.md\">Kerndaten<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">Dynamische Bl\u00f6cke erstellen<\/a><\/li>\n<li><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-gutenberg-block-development\/\">Einf\u00fchrung in die Gutenberg-Block-Entwicklung<\/a><\/li>\n<li><a href=\"https:\/\/www.meetup.com\/en-US\/wordpress-social-learning\/\">WordPress Soziales Lernen<\/a> bei MeetUp<\/li>\n<\/ul>\n<p><strong>Empfohlene Tutorials von WordPress Core-Mitarbeitern<br \/>\n<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Abfrage von Daten in Gutenberg mit getEntityRecords<\/a> von Ryan Welcher (@ryanwelcher)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">Ein praktischer \u00dcberblick \u00fcber die @wordpress\/data API<\/a> von Darren Ethier (@nerrad)<\/li>\n<\/ul>\n<p><strong>JavaScript, React und Redux Ressourcen<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Tutorials#javascript_tutorials\">JavaScript-Tutorials<\/a> von MDN<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">Erste Schritte mit React<\/a> (offiziell)<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/essentials\/part-1-overview-concepts\">Redux-Tutorial<\/a> (offiziell)<\/li>\n<\/ul>\n<p><strong>Verwandte Ressourcen von Kinsta<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/fehlern-in-javascript\/\">Der ultimative Leitfaden f\u00fcr den Umgang mit Fehlern in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-node-js\/\">Was ist Node.js und warum du es benutzen solltest<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">Wie du Node.js und npm unter Windows, macOS und Linux installierst<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/node-debug\/\">Wie man Node.js-Code mit verschiedenen Tools debuggt<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/node-js-vs-php\/\">Node.js gegen PHP: Ein Vergleich von Kopf bis Fu\u00df<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/node-js-apps\/\">Die 10 beliebtesten Arten von Node.js-Apps im Jahr 2022<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/angular-vs-react\/\">Angular vs. React: Ein detaillierter Seite-an-Seite-Vergleich<\/a><\/li>\n<\/ul>\n<h2>Zusammenfassung<\/h2>\n<p>Wir haben das Ende dieser (zweiten) langen Reise durch die Gutenberg-Blockentwicklung erreicht.<\/p>\n<p>In diesem Artikel haben wir einige fortgeschrittene Themen behandelt, z. B. Application State und Redux-Stores. Hoffentlich hast du jetzt ein besseres Verst\u00e4ndnis f\u00fcr die Blockentwicklung im Allgemeinen.<\/p>\n<p>Node.js-, Webpack-, <a href=\"https:\/\/kinsta.com\/de\/blog\/transpilierung-php\/#what-is-transpiling\">Babel-<\/a>, React- und Redux-Kenntnisse sind unerl\u00e4sslich, wenn es darum geht, fortgeschrittene Gutenberg-Bl\u00f6cke zu entwickeln, aber du musst kein React-Ninja sein, um loszulegen. Die Entwicklung von Gutenberg-Bl\u00f6cken zu lernen, muss nicht unbedingt kompliziert sein. Du musst nur die richtige Motivation mitbringen und den richtigen Lernweg einschlagen.<\/p>\n<p>Wir hoffen, dass dieser Artikel &#8211; und <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">der vorherige<\/a> &#8211; dir den richtigen Weg zeigt, damit du mit der Gutenberg-Entwicklung sofort loslegen kannst.<\/p>\n<p><em>Jetzt liegt es an dir! Hast du schon dynamische Bl\u00f6cke erstellt? Hast du irgendwelche Beispiele, die du mit uns teilen m\u00f6chtest? Und was waren die gr\u00f6\u00dften H\u00fcrden, die du \u00fcberwinden musstest? Schreib uns unten einen Kommentar.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bist du immer noch verwirrt von Gutenberg? Oder geh\u00f6rst du zu denjenigen, die fest an das Potenzial des Blockeditors glauben und herausfinden wollen, wie weit sie &#8230;<\/p>\n","protected":false},"author":36,"featured_media":53457,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[501,420,52],"topic":[999],"class_list":["post-53066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-development","tag-gutenberg","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 dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt<\/title>\n<meta name=\"description\" content=\"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.\" \/>\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\/dynamische-bloecke\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt\" \/>\n<meta property=\"og:description\" content=\"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-08T06:57:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-02T15:35:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg\" \/>\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=\"41\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt\",\"datePublished\":\"2022-08-08T06:57:03+00:00\",\"dateModified\":\"2024-02-02T15:35:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\"},\"wordCount\":6474,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg\",\"keywords\":[\"Block Editor\",\"development\",\"Gutenberg\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\",\"name\":\"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg\",\"datePublished\":\"2022-08-08T06:57:03+00:00\",\"dateModified\":\"2024-02-02T15:35:36+00:00\",\"description\":\"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#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 dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt\"}]},{\"@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 dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt","description":"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.","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\/dynamische-bloecke\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt","og_description":"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.","og_url":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-08-08T06:57:03+00:00","article_modified_time":"2024-02-02T15:35:36+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"41\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt","datePublished":"2022-08-08T06:57:03+00:00","dateModified":"2024-02-02T15:35:36+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/"},"wordCount":6474,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg","keywords":["Block Editor","development","Gutenberg"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/","url":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/","name":"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg","datePublished":"2022-08-08T06:57:03+00:00","dateModified":"2024-02-02T15:35:36+00:00","description":"Warte nicht l\u00e4nger darauf, ein Blockentwickler zu werden. In diesem Leitfaden erf\u00e4hrst du alles, was du wissen musst, um dynamische Bl\u00f6cke von Grund auf zu erstellen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/dynamische-bloecke.jpeg","width":1460,"height":730,"caption":"Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#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 dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt"}]},{"@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\/53066","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=53066"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/53066\/revisions"}],"predecessor-version":[{"id":68670,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/53066\/revisions\/68670"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53066\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/53457"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=53066"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=53066"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=53066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}