{"id":81510,"date":"2020-08-06T09:01:48","date_gmt":"2020-08-06T07:01:48","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=81510"},"modified":"2020-08-06T09:07:20","modified_gmt":"2020-08-06T07:07:20","slug":"wordpress-bloecke-gutenberg","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/","title":{"rendered":"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen"},"content":{"rendered":"\n<p>Eine wesentliche Neuerung des Gutenberg-Editors von WordPress ist die flexible Block-Struktur der Beitr\u00e4ge. Mithilfe eines Plugins kannst Du solche Bl\u00f6cke relativ einfach selbst entwerfen und ganz eigene Content-Elemente gestalten.<\/p>\n\n\n\n<p>Zwar enth\u00e4lt Gutenberg bereits viele Standard-Bl\u00f6cke und zahlreiche Plugins bieten Sammlungen mit weiteren, vorgefertigten Bl\u00f6cken an. Doch oft will einfach nichts davon so richtig zu den eigenen Anforderungen passen. Wenn Du bisher schon eigene Shortcodes in WordPress verwendest, kannst Du \u00fcbrigens auch diese ganz elegant in Bl\u00f6cke umwandeln. Damit musst Du dann k\u00fcnftig keine Shortcodes mehr in Deine Beitr\u00e4ge einf\u00fcgen, sondern kannst die n\u00f6tigen Parameter in &nbsp;Deinen selbst entworfenen Block bequem per Eingabeformular<a> <\/a>eingeben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content-Bl\u00f6cke f\u00fcr Gutenberg mit dem Plugin \u201eLazy Blocks\u201c<\/h2>\n\n\n\n<p>Es gibt mehrere Plugins, mit denen Du eigene Bl\u00f6cke erstellen kannst. F\u00fcr diesen Workshop arbeiten wir mit \u201e<a href=\"https:\/\/wordpress.org\/plugins\/lazy-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00f6ffnet in neuem Tab)\">Lazy Blocks<\/a>\u201c. Wir erkl\u00e4ren Dir die Funktionsweise des Plugins und zeigen anhand eines Beispiels, wie Du einen eigenen Block erstellst. Die grundlegenden Abl\u00e4ufe kannst Du dann \u00e4quivalent f\u00fcr jede beliebige Block-Idee anwenden.<\/p>\n\n\n\n<p>Als Voraussetzung f\u00fcr das Erstellen eigener Gutenberg-Bl\u00f6cke\nsolltest Du zumindest ein Grundverst\u00e4ndnis f\u00fcr HTML und CSS mitbringen. F\u00fcr\nkomplexere Bl\u00f6cke sind Kenntnisse in PHP-Programmierung n\u00fctzlich. Aber\ninsgesamt ist das Vorgehen relativ einfach.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Funktionsweise von Lazy Blocks<\/h2>\n\n\n\n<p>Einen neuen Block legst Du an, indem Du im WordPress-Men\u00fc\nunter <em>Lazy Blocks<\/em> auf <em>Erstellen<\/em> klickst. Hier siehst Du drei\nBereiche:<\/p>\n\n\n\n<ul><li><strong>Controls:<\/strong>\nHier legst Du Formular-Felder an, die Du bei der sp\u00e4teren Nutzung im Editor mit\njeweils individuellem Inhalt ausf\u00fcllst \u2013 also beispielsweise Text, Bilder oder\nauch Checkboxen oder \u00c4hnliches.<\/li><li><strong>Code:<\/strong>\nHier erstellst Du wahlweise HTML- oder PHP-Code, der die Inhalte aus den\nControls verarbeitet und darstellt \u2013 also beispielsweise das Bild je nach\ngesetzter Checkbox links- oder rechtsb\u00fcndig anordnet und Text herum flie\u00dfen\nl\u00e4sst. Hier ist nat\u00fcrlich auch umfangreiche Programmierung zur Verarbeitung der\nin den Controls eingegebenen Daten m\u00f6glich.<\/li><li><strong>Block\/Control:<\/strong>\nIn der rechten Spalte definierst Du grundlegende Einstellungen zu Deinem Block\nwie Name und Beschreibung beziehungsweise die Optionen f\u00fcr das jeweils aktive\nControl.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Beispiel-Block: abgesetztes Zitat und Autorenzeile<\/h2>\n\n\n\n<p>Um die Funktionsweise des Plugins zu erkunden, erstellen wir\neinen Gutenberg-Blog in einfachem HTML, der ein Zitat in Anf\u00fchrungszeichen\nfarbig und in gr\u00f6\u00dferer Schrift rechts in den Flie\u00dftext einklinkt und klein\ndarunter angibt, von wem das Zitat stammt.<\/p>\n\n\n\n<p>In einem zweiten Schritt \u00e4ndern wir den Block mithilfe von ein paar Zeilen PHP insoweit ab, als die Nennung des Zitatgebers dann optional ist \u2013 also auch entfallen kann, beispielsweise in einem l\u00e4ngeren Interview, wenn ohnehin klar ist, von wem das Zitat stammt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"229\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/00-eigener-gutenberg-block-ergebnis.jpg\" alt=\"\" class=\"wp-image-81515\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/00-eigener-gutenberg-block-ergebnis.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/00-eigener-gutenberg-block-ergebnis-160x50.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Neuen Block konfigurieren<\/h2>\n\n\n\n<p>Zun\u00e4chst gibst Du Deinem Block rechts im Feld <em>Title<\/em> einen beliebigen Namen. Dabei musst Du lediglich darauf achten, keinen bereits vom Plugin reservierten Namen zu benutzen, um Konflikte zu vermeiden \u2013 <a href=\"https:\/\/lazyblocks.com\/documentation\/blocks-controls\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"siehe Dokumentation (\u00f6ffnet in neuem Tab)\">siehe Dokumentation<\/a>.<\/p>\n\n\n\n<p>Wenn Du m\u00f6chtest, w\u00e4hlst Du ein passendes <em>Icon<\/em> aus, das sp\u00e4ter beim Einf\u00fcgen des\nBlocks im Editor angezeigt wird. Unter <em>Category<\/em>\nlegst Du fest, wo in der Liste der Bl\u00f6cke im Editor Dein neuer Block erscheinen\nsoll. Der \u00dcbersichtlichkeit halber bietet sich die Kategorie <em>Lazy Blocks<\/em> an. Eine Beschreibung im\nFeld <em>Description<\/em> ist optional.<\/p>\n\n\n\n<p>Unter <em>Supports<\/em>\nkannst Du zahlreiche weiterf\u00fchrende Optionen w\u00e4hlen, deren Beschreibung hier\naber den Rahmen sprengen w\u00fcrde. So kannst Du beispielsweise die\nStandardabst\u00e4nde an den Blockr\u00e4ndern ver\u00e4ndern, den Block abh\u00e4ngig von der\nBildschirmgr\u00f6\u00dfe des Users ein- und ausblenden und noch einiges mehr.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dateneingabe f\u00fcr den Block: Controls anlegen<\/h2>\n\n\n\n<p>Die Controls sind nichts anders als Eingabefelder f\u00fcr den\nBlock, die Du sp\u00e4ter beim Erstellen Deines Beitrags variabel mit Inhalten f\u00fcllst.\nIn unserem Beispiel ben\u00f6tigen wir zwei Controls: eines f\u00fcr den Zitat-Text und\neines f\u00fcr den Namen des Zitatgebers.<\/p>\n\n\n\n<p>Zum Anlegen eines neuen Controls klickst Du auf das <em>Plus-<\/em>Zeichen. In der rechten Spalte\nnimmst Du nun die Einstellungen f\u00fcr dieses neue Control vor.<\/p>\n\n\n\n<ul><li><strong>Label:<\/strong>\ndie Bezeichnung des Controls \u2013 im Beispiel nennen wir es <em>MeinZitat.<\/em><\/li><li><strong>Name:<\/strong>\ndie Variable, mit der Du den eingegebenen Inhalt im Code verarbeiten kannst;\nLazy Blocks f\u00fcllt dieses Feld automatisch aus, hier: <em>meinzitat<\/em>.<\/li><li><strong>Type:<\/strong>\nIn unserem Beispiel ben\u00f6tigen wir den Typ <em>Text<\/em>.\nHier stehen Dir aber zahlreiche M\u00f6glichkeiten zur Verf\u00fcgung, von URL und\nE-Mail-Adresse \u00fcber Bilder, Auswahlboxen und Farbw\u00e4hler bis hin zu\neingebetteten anderen Bl\u00f6cken. Je nach Typ erscheinen darunter nach der Auswahl\njeweils passende Optionen.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"519\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/10-control-type.jpg\" alt=\"\" class=\"wp-image-81520\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/10-control-type.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/10-control-type-154x110.jpg 154w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<ul><li><strong>Text-Optionen:<\/strong>\nBei den angezeigten, weitgehend selbst erkl\u00e4renden Optionen beh\u00e4ltst Du f\u00fcr\nunser Beispiel die Standardeinstellungen bei und setzt lediglich den Haken bei <em>Required<\/em>. Das stellt sicher, dass Du die\nEingabe sp\u00e4ter nicht vergisst.<\/li><li><strong>Hide if\nblock is not selected:<\/strong> W\u00e4hle diese Option, damit die Optik im Editor\n\u00fcbersichtlich bleibt. So wird das Control sp\u00e4ter im Editor nur dann angezeigt,\nwenn der Block gerade aktiv zur Bearbeitung ausgew\u00e4hlt ist.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"416\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/15a-controls-sichtbar.jpg\" alt=\"\" class=\"wp-image-81525\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/15a-controls-sichtbar.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/15a-controls-sichtbar-160x91.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption>Standardm\u00e4\u00dfig werden die Controls immer angezeigt.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"282\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/15b-controls-unsichtbar.jpg\" alt=\"\" class=\"wp-image-81530\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/15b-controls-unsichtbar.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/15b-controls-unsichtbar-160x62.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption>Die Option <em>Hide if block is not selecte<\/em>d blendet die Eingabefelder aus, wenn der Block nicht zur Bearbeitung ausgew\u00e4hlt ist.<\/figcaption><\/figure>\n\n\n\n<p>F\u00fcr das zweite Control f\u00fcr den Zitatgeber verf\u00e4hrst Du nach dem gleichen Prinzip. F\u00fcr das Beispiel nennen wir das Label <em>Zitatgeber<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"347\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/20-controls-fertig.jpg\" alt=\"\" class=\"wp-image-81535\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/20-controls-fertig.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/20-controls-fertig-160x76.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Daten verarbeiten und anzeigen<\/h2>\n\n\n\n<p>Damit Dein Block im Frontend angezeigt werden kann,\ndefinierst Du nun den <em>Code<\/em>, der die Daten\nverarbeitet und anzeigt, die \u00fcber die Controls eingegebenen werden.<\/p>\n\n\n\n<p>Der Einfachheit halber setzen wir im Bereich <em>Code<\/em> die Option <em>Single output code for Frontend and Editor<\/em> auf <em>Yes<\/em>. Das Plugin erlaubt aber auch eine unterschiedliche Anzeige des\nBlocks im Editor und im Frontend, wenn Du Dir den Aufwand machen m\u00f6chtest,\nhierf\u00fcr unterschiedlichen Code zu schreiben. Das kann zum Beispiel f\u00fcr die\nVorschau sinnvoll sein, wenn Du CSS-Klassen aus dem Frontend <em>(style.css)<\/em> verwendest, die im Backend\nnicht geladen werden.<\/p>\n\n\n\n<p>Als <em>Output Method<\/em>\nw\u00e4hlst Du <em>HTML + Handlebars<\/em>. Sp\u00e4ter\nwerden wir das auf <em>PHP<\/em> \u00e4ndern, um\netwas Programmlogik hinzuzuf\u00fcgen. Aber vorerst gen\u00fcgt einfaches HTML.<\/p>\n\n\n\n<p>Im gro\u00dfen Eingabefeld im Bereich <em>Code<\/em> f\u00fcgst Du nun den HTML-Code f\u00fcr die Darstellung der Inhalte ein\n\u2013 also den Code, der n\u00f6tig ist, um das Zitat sowie den Zitatgeber in der\ngew\u00fcnschten Formatierung im Frontend anzuzeigen. Auf die HTML-Details soll hier\nnicht weiter eingegangen werden, denn die sind ja lediglich ein beliebiges\nBeispiel.<\/p>\n\n\n\n<p>Entscheidend ist die Einbindung der variablen Inhalte aus\nden Controls. Diese Inhalte bindest Du mithilfe von Platzhaltern ein, n\u00e4mlich\nmit dem jeweiligen <em>Name<\/em> des Controls,\numschlossen von doppelten, geschwungenen Klammern, in unserem Beispiel also:<\/p>\n\n\n\n<ul><li>{{meinzitat}}<\/li><li>{{zitatgeber}}<\/li><\/ul>\n\n\n\n<p>Der HTML-Code f\u00fcr unser Beispiel lautet: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div style=\"color: #df0098; float: right; margin: 18px 0 18px 20px; \n              width: 35%; text-align: right;  font-style:italic;\">\n    &lt;span style=\"font-size:18px; font-weight:600;\">\u00ab{{meinzitat}}\u00bb&lt;\/span>\n    &lt;br \/>\n    &lt;span style=\"font-size:0.9em; font-weight:300; color: #750250;\">{{zitatgeber}}&lt;\/span>\n &lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"423\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/30-code.jpg\" alt=\"\" class=\"wp-image-81540\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/30-code.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/30-code-160x93.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p>Klicke rechts oben auf <em>Ver\u00f6ffentlichen<\/em>\nund schon kannst Du Deinen neuen Gutenberg-Block wie jeden anderen Block in\nWordpress verwenden.<\/p>\n\n\n\n<p>Hinweis: Der Einfachheit halber haben wir die CSS-Formatierungen f\u00fcr das Zitat im HTML direkt eingebunden. Das hat den Vorteil, dass die Vorschau optisch gleich angezeigt wird. Aber nat\u00fcrlich kannst Du die CSS-Anweisungen auch \u00fcber CSS-Klassen und IDs in der <em>style.css<\/em> Deines <a href=\"https:\/\/strato.de\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"(Child-)Themes (\u00f6ffnet in neuem Tab)\">(Child-)Themes<\/a> einbinden. Oder Du definierst \u2013 wie zuvor schon einmal kurz angesprochen \u2013 separaten Code f\u00fcrs Backend, indem Du die Formatierungen einf\u00fcgst, die im Frontend bereits \u00fcber die <em>style.css<\/em> definiert sind. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deinen neuen Gutenberg-Block verwenden<\/h2>\n\n\n\n<p>In der Block-Auswahl findest Du Deinen neuen Content-Block\nin der zuvor gew\u00e4hlten Kategorie <em>Lazy\nBlocks<\/em>.<\/p>\n\n\n\n<p>F\u00fcge einen neuen Block in Deinen Beitrag ein \u2026<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"221\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/40-block-einfuegen.jpg\" alt=\"\" class=\"wp-image-81545\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/40-block-einfuegen.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/40-block-einfuegen-160x49.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p>\u2026 f\u00fclle die <em>Control-Felder<\/em> aus \u2026<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"414\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/40-block-befuellen.jpg\" alt=\"\" class=\"wp-image-81550\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/40-block-befuellen.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/40-block-befuellen-160x91.jpg 160w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p>\u2026 und schon w\u00e4hrend Du schreibst, siehst Du eine Vorschau.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Programmier-Logik: Block mit PHP<\/h2>\n\n\n\n<p>Nach dem gleichen Prinzip funktionieren Gutenberg-Bl\u00f6cke,\nbei denen Du PHP-Code statt HTML zur Ausgabe im Frontend nutzt. Dazu sind vier\n\u00c4nderungen in Deinem eben angelegten Block n\u00f6tig:<\/p>\n\n\n\n<ul><li>Stelle die <em>Output\nMethod<\/em> auf <em>PHP<\/em> um.<\/li><li>Ersetze den HTML-Code im <em>Code<\/em>-Feld durch <em>PHP<\/em>.<\/li><li>Binde die Inhalte der Controls als Array-Element\nund nicht mit doppelt geschwungenen Klammern in den Code ein, also <em>$attributes[&#8218;meinzitat&#8216;] <\/em>und <em>$attributes[&#8218;zitatgeber&#8216;] <\/em>statt <em>{{meinzitat}}<\/em> und <em>{{zitatgeber}}.<\/em><\/li><li>Entferne das H\u00e4kchen vor <em>Required<\/em> im Control <em>Zitatgeber<\/em>,\ndamit dieses Feld bei der Eingabe nur noch optional ist.<\/li><\/ul>\n\n\n\n<p> Die Logik des PHP-Codes pr\u00fcft, ob das jetzt optionale Feld <em>Zitatgeber<\/em> ausgef\u00fcllt ist, und zeigt den zugeh\u00f6rigen HTML-Code nicht an, wenn das Feld leer ist. Auch hier soll auf die Details des PHP-Codes nicht n\u00e4her eingegangen werden, da es sich nur um ein beliebiges Beispiel handelt. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"563\" src=\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2020\/06\/60-php-code.jpg\" alt=\"\" class=\"wp-image-81555\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/60-php-code.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/60-php-code-142x110.jpg 142w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p>Der PHP-Code f\u00fcr das Beispiel sieht dann so aus:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n$zitat = $attributes['meinzitat'];\n$zitatgeber = $attributes['zitatgeber'];\n\nif( $zitatgeber ) { \n$zitatgeber = '&lt;br \/>&lt;span style=\"font-size:0.9em; font-weight:300; color: #750250;\">' . $zitatgeber . '&lt;\/span>';\n}\n$zitat = '&lt;div style=\"color: #df0098; float: right; margin: 18px 0 18px 20px; width: 35%; text-align: right;  font-style:italic;\">&lt;span style=\"font-size:18px; font-weight:600;\">\u00ab' . $zitat . '\u00bb&lt;\/span>' . $zitatgeber . '&lt;\/div>';\necho $zitat;\n?><\/code><\/pre>\n\n\n\n<p>Wie schon erw\u00e4hnt, dient dieser Code nur als sehr einfaches\nBeispiel f\u00fcr die Funktionsweise des Plugins. Deiner Fantasie sind in Bezug auf die\nFunktionalit\u00e4t Deines Gutenberg-Blocks \u2013 ausreichend PHP-Kenntnisse vorausgesetzt\n\u2013 keine Grenzen gesetzt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Shortcode in Gutenberg-Block umwandeln<\/h2>\n\n\n\n<p> Ein spannender Anwendungsfall f\u00fcr eigene Gutenberg-Bl\u00f6cke ist dann gegeben, wenn Du bisher mit eigenen Shortcodes gearbeitet hast. Es lohnt sich n\u00e4mlich, all diejenigen Shortcodes in Gutenberg-Bl\u00f6cke umzuwandeln, bei denen Du bisher per Shortcode Parameter \u00fcbergeben hast, also beispielsweise: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[meinshortcode text=\"beispieltext\" bildurl=\"https:\/\/bloggertricks.de\/beispielbild.jpg\"]<\/code><\/pre>\n\n\n\n<p>Denn wandelst Du das zugeh\u00f6rige PHP aus der <em>functions.php<\/em> mit Lazy Blocks in einen eigenen Gutenberg-Block um, musst Du Dir die Syntax des Shortcodes beziehungsweise die notwendigen Parameter nicht mehr merken. Wie wir gesehen haben, gibst Du mit den Controls entsprechende Eingabefelder vor. So wird das Einf\u00fcgen dieser Elemente \u00fcber den selbst erstellten Block wesentlich komfortabler.<\/p>\n\n\n\n<p>Den alten Shortcode-Code in der <em>functions.php<\/em> solltest Du aber dennoch bestehen lassen, damit die in fr\u00fcheren Beitr\u00e4gen eingebunden Shortcodes weiterhin funktionieren. Alternativ kannst Du nat\u00fcrlich all diese Shortcodes in den Beitr\u00e4gen manuell durch Deinen neuen Block ersetzen und danach den zugeh\u00f6rigen Shortcode-Eintrag in der <em>functions.php<\/em> l\u00f6schen. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mithilfe eines Plugins kannst Du Bl\u00f6cke in WordPress selbst entwerfen und ganz eigene Content-Elemente gestalten.<\/p>\n","protected":false},"author":20,"featured_media":83425,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[490],"tags":[240,170,205,149,55],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen<\/title>\n<meta name=\"description\" content=\"Eigene Gutenberg-Bl\u00f6cke f\u00fcr den neuen Wordpress-Editor erstellen: Der Workshop zeigt an einem Beispiel, wie das ziemlich einfach geht.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen\" \/>\n<meta property=\"og:description\" content=\"Eigene Gutenberg-Bl\u00f6cke f\u00fcr den neuen Wordpress-Editor erstellen: Der Workshop zeigt an einem Beispiel, wie das ziemlich einfach geht.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-06T07:01:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-06T07:07:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/STRATO-Gutenberg-Bloecke-728x410.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"xxxxxxxx\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"xxxxxxxx\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/\",\"name\":\"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2020-08-06T07:01:48+00:00\",\"dateModified\":\"2020-08-06T07:07:20+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1\"},\"description\":\"Eigene Gutenberg-Bl\u00f6cke f\u00fcr den neuen Wordpress-Editor erstellen: Der Workshop zeigt an einem Beispiel, wie das ziemlich einfach geht.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1\",\"name\":\"xxxxxxxx\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g\",\"caption\":\"xxxxxxxx\"},\"description\":\"Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen","description":"Eigene Gutenberg-Bl\u00f6cke f\u00fcr den neuen Wordpress-Editor erstellen: Der Workshop zeigt an einem Beispiel, wie das ziemlich einfach geht.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen","og_description":"Eigene Gutenberg-Bl\u00f6cke f\u00fcr den neuen Wordpress-Editor erstellen: Der Workshop zeigt an einem Beispiel, wie das ziemlich einfach geht.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2020-08-06T07:01:48+00:00","article_modified_time":"2020-08-06T07:07:20+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2020\/06\/STRATO-Gutenberg-Bloecke-728x410.jpg","type":"image\/jpeg"}],"author":"xxxxxxxx","twitter_card":"summary_large_image","twitter_creator":"@STRATO_AG","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"xxxxxxxx","Gesch\u00e4tzte Lesezeit":"9 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/","name":"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2020-08-06T07:01:48+00:00","dateModified":"2020-08-06T07:07:20+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1"},"description":"Eigene Gutenberg-Bl\u00f6cke f\u00fcr den neuen Wordpress-Editor erstellen: Der Workshop zeigt an einem Beispiel, wie das ziemlich einfach geht.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress: Eigene Bl\u00f6cke f\u00fcr den Gutenberg-Editor erstellen"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1","name":"xxxxxxxx","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g","caption":"xxxxxxxx"},"description":"Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/81510"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=81510"}],"version-history":[{"count":9,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/81510\/revisions"}],"predecessor-version":[{"id":83905,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/81510\/revisions\/83905"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/83425"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=81510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=81510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=81510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}