{"id":20280,"date":"2018-08-10T06:00:45","date_gmt":"2018-08-10T06:00:45","guid":{"rendered":"https:\/\/kinsta.com\/?p=11648"},"modified":"2023-08-24T11:28:38","modified_gmt":"2023-08-24T10:28:38","slug":"gutenberg-wordpress-editor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/","title":{"rendered":"Das Neueste aus dem Gutenberg WordPress Editor (2026)"},"content":{"rendered":"<p>Als der WordPress Block-Editor, oder Gutenberg, im <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-0\/\">Dezember 2018 vorgestellt<\/a> wurde, wussten wir nicht, was wir erwarten w\u00fcrden. Sicher, wir hatten genug Zeit, um mit der Beta-Version herumzuspielen, aber wir konnten nicht vorhersagen, wie reibungslos der tats\u00e4chliche Start verlaufen w\u00fcrde oder wie eifrig Nutzer und Entwickler den neuen Editor annehmen w\u00fcrden.<\/p>\n<p>In den mehr als zwei Jahren, seit wir diesen Beitrag ver\u00f6ffentlicht haben, hat der Gutenberg-Editor ein enormes Wachstum erlebt. Er hat sich von einem Minimum Viable Product (MVP) zu einem ausgereiften Projekt entwickelt, das dem Ziel, eine einheitliche <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#full-site-editing-features-in-wordpress-58\">Full Site Editing<\/a> Experience f\u00fcr WordPress zu schaffen, immer n\u00e4her kommt.<\/p>\n<p>Um diesen Ver\u00e4nderungen Rechnung zu tragen, haben wir uns den Gutenberg-Editor noch einmal angeschaut, um dir sein neues Gesicht vorzustellen und dir zu zeigen, wohin es demn\u00e4chst gehen wird.<\/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 ist der Gutenberg-Blockeditor?<\/h2>\n<p>Gutenberg, auch bekannt als der &#8222;WordPress-Block-Editor&#8220; oder einfach der &#8222;WordPress-Editor&#8220;, ist der WordPress-Inhaltseditor, der mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-0\/\">WordPress 5.0<\/a> eingef\u00fchrt wurde, das am 6. Dezember 2018 ver\u00f6ffentlicht wurde.<\/p>\n<p>Falls du diesen Begriff noch nicht geh\u00f6rt hast, es ist der Standard-Editor, den alle deine Webseiten verwenden, sofern du ihn nicht ausdr\u00fccklich deaktiviert hast. Er sieht in etwa so aus:<\/p>\n<figure id=\"attachment_100519\" aria-describedby=\"caption-attachment-100519\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100519 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-editor-interface-1024x880.png\" alt=\"Der Gutenberg WordPress Editor.\" width=\"1024\" height=\"880\"><figcaption id=\"caption-attachment-100519\" class=\"wp-caption-text\">Der Gutenberg WordPress Editor.<\/figcaption><\/figure>\n<p>Der gro\u00dfe Unterschied zwischen dem Gutenberg WordPress-Editor und dem vorherigen WordPress-Editor (jetzt &#8222;klassischer Editor&#8220; oder &#8222;TinyMCE-Editor&#8220; genannt) ist ein neuer blockbasierter Ansatz zur Erstellung von Inhalten.<\/p>\n<p>Mit Gutenberg ist jedes Element deines Inhalts ein Block, was eine einfache Manipulation von Inhalten erm\u00f6glicht. Jeder Absatz ist ein Block, jedes Bild ist ein Block, jeder Button ist ein Block &#8211; du verstehst es!<\/p>\n<p>Entwickler von Drittanbietern k\u00f6nnen auch eigene Bl\u00f6cke erstellen, was dazu beitr\u00e4gt, die Abh\u00e4ngigkeit von WordPress von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-shortcodes\/\">Shortcodes<\/a> zu beenden. Sagen wir, du m\u00f6chtest ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-kontaktformular-plugins\/\">Kontaktformular einbetten<\/a>. Anstatt wie fr\u00fcher einen Shortcode (z.B. `[your-form-shortcode]`) hinzuzuf\u00fcgen, kannst du jetzt einfach den Block deines Plugins einf\u00fcgen.<\/p>\n<p>Dar\u00fcber hinaus kannst du Bl\u00f6cke auch nutzen, um komplexere Layouts zu erstellen, wie z.B. ein mehrspaltiges Design oder die Gruppierung von Bl\u00f6cken, um einen zusammenh\u00e4ngenden Abschnitt zu erstellen.<\/p>\n<p>Wenn wir dir zeigen, wie du den Block-Editor verwendest, wirst du eine bessere Vorstellung davon bekommen, wie du Bl\u00f6cke nutzen kannst, um deine Inhalte zu verbessern.<\/p>\n\n<h3>Gutenberg ist nicht nur ein Content Editor<\/h3>\n<p>Eine wichtige Sache, die man verstehen muss, ist, dass das Gutenberg Projekt mehr als nur ein Content Editor sein will.<\/p>\n<p>Im Juli 2021 ist Gutenberg immer noch nur ein Content Editor (zum gr\u00f6\u00dften Teil). Aber das langfristige Ziel f\u00fcr Gutenberg ist es, es zu etwas zu entwickeln, das <strong>Full Site Editing<\/strong> genannt wird.<\/p>\n<p>Die Idee des Full Site Editing ist, dass du 100% deiner Webseite mit dem Gutenberg-Editor gestalten kannst. Anstatt auf die Header-Optionen deines <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">WordPress-Themes<\/a> beschr\u00e4nkt zu sein, wirst du Gutenberg nutzen k\u00f6nnen, um individuelle Header mit dem Block-Editor zu gestalten.<\/p>\n<p>Diese Art von Funktionalit\u00e4t ist noch nicht verf\u00fcgbar, aber sie ist auf dem Weg und wir haben einige &#8222;Proof of Concept&#8220;-Projekte, die wir dir am Ende dieses Beitrags vorstellen werden.<\/p>\n<h2>Vor- und Nachteile von Gutenberg im Vergleich zu beliebten Alternativen<\/h2>\n<p>Jetzt, wo wir den WordPress-Blockeditor seit \u00fcber zwei Jahren nutzen k\u00f6nnen, haben wir eine gute Vorstellung von einigen Vor- und Nachteilen von Gutenberg im Vergleich zu anderen L\u00f6sungen.<\/p>\n<p>Es gibt zwei Hauptalternativen, die du f\u00fcr die <a href=\"https:\/\/kinsta.com\/de\/blog\/evergreen-content-erstellen\/\">Erstellung von Inhalten<\/a> auf WordPress hast:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/blog\/wordpress-tinymce-editor\/\">WordPress TinyMCE Editor<\/a>: Dies ist der klassische Editor, den WordPress vor WordPress 5.0 verwendet hat.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Page Builder Plugins<\/a>: Das sind Plugins von Drittanbietern, die WordPress ein visuelles Design per Drag-and-Drop hinzuf\u00fcgen.<\/li>\n<\/ul>\n<p>Im Allgemeinen bietet der klassische TinyMCE-Editor eine eher abgespeckte, Word-Prozessor-\u00e4hnliche Erfahrung, w\u00e4hrend Page Builder eine viel flexiblere visuelle, Drag-and-Drop-Design-Erfahrung bieten.<\/p>\n<p>Wenn wir alle drei Editoren nach ihrer Design-Flexibilit\u00e4t ordnen w\u00fcrden, w\u00fcrde es ungef\u00e4hr so aussehen:<\/p>\n<p><strong>Classic TinyMCE Editor (am wenigsten flexibel) &lt; Gutenberg &lt; Page Builder (am flexibelsten)<\/strong><\/p>\n<p>Lass uns nun \u00fcber einige Vor- und Nachteile des Gutenberg-Blockeditors vs. Alternativen sprechen.<\/p>\n<h3>Gutenberg vs. Klassischer Editor: Vorteile und Nachteile<\/h3>\n<p>Lasst uns zun\u00e4chst Gutenberg vs. den klassischen TinyMCE Editor vergleichen.<\/p>\n<p><strong>Vorteile<\/strong>:<\/p>\n<ul>\n<li>Gutenberg bietet einen mehr visuellen Design-Hintergrund<\/li>\n<li>Du musst keine Shortcodes verwenden, um Inhalte einzubetten &#8211; du bekommst ein einheitliches Blocksystem<\/li>\n<\/ul>\n<p><strong>Nachteile: <\/strong><\/p>\n<ul>\n<li>Manche Leute finden das Schreiben in Gutenberg etwas unhandlich, weil jeder Absatz ein eigener Block ist. Bei langen Beitr\u00e4gen kann es schwierig sein, den Text zu bearbeiten. Vielleicht schreibst du lieber in einem anderen Editor und f\u00fcgst den Text in Gutenberg ein, wenn du fertig bist.<\/li>\n<li>Auch wenn sich die Performance von Gutenberg deutlich verbessert hat, kann es bei gro\u00dfen Beitr\u00e4gen immer noch zu Verz\u00f6gerungen kommen, was beim klassischen Editor weniger wahrscheinlich ist.<\/li>\n<\/ul>\n<p>Wenn du denkst, dass der klassische TinyMCE-Editor besser zu deinen Bed\u00fcrfnissen passt, kannst du den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor-deaktivieren\/\">Gutenberg-Editor ganz deaktivieren<\/a>.<\/p>\n<h3>Gutenberg vs Page Builders: Vorteile und Nachteile<\/h3>\n<p>Werfen wir nun einen Blick darauf, wie Gutenberg im Vergleich zu Page Builder Plugins von Drittanbietern abschneidet.<\/p>\n<p><strong>Vorteile:<\/strong><\/p>\n<ul>\n<li>Gutenberg ist ein Core-Feature, was bedeutet, dass du dir keine Gedanken \u00fcber Kompatibilit\u00e4tsprobleme machen musst.<\/li>\n<li>Da es ein Core-Feature ist, k\u00f6nnen alle Entwickler Gutenberg Support in ihre Plugins einbauen, was die Kompatibilit\u00e4t verbessert.<\/li>\n<li>Gutenberg gibt sauberen, schlanken Code aus. Alles in allem wird ein mit Gutenberg erstelltes Design in der Regel schneller geladen als das gleiche Design, das mit einem Page Builder erstellt wurde.<\/li>\n<\/ul>\n<p><strong>Nachteile: <\/strong><\/p>\n<ul>\n<li>Gutenberg bietet keine richtige visuelle Bearbeitung wie ein Page Builder. Es ist zug\u00e4nglicher als der klassische Editor, aber immer noch nicht 100% nahtlos wie ein Page Builder.<\/li>\n<li>Page Builder bieten dir immer noch flexiblere Design- und Layout-Optionen.<\/li>\n<li>Die meisten Page Builder bieten eine viel fl\u00fcssigere und flexiblere Drag-and-Drop-Bewegung.<\/li>\n<\/ul>\n<h3><strong>Gedanken zum Vergleich<\/strong><\/h3>\n<p>F\u00fcr die Mehrheit der Nutzer trifft Gutenberg den Sweet Spot in Bezug auf die Flexibilit\u00e4t.<\/p>\n<p>Die meisten Leute brauchen nicht die Flexibilit\u00e4t eines <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Page Builders<\/a> f\u00fcr ihre Inhalte, insbesondere f\u00fcr Blogbeitr\u00e4ge. Aber gleichzeitig ist es sch\u00f6n, schnell ein mehrspaltiges Design einzurichten oder einen Button einzuf\u00fcgen, was der klassische Editor nicht so einfach macht.<\/p>\n<p>Mit diesem Gedanken im Hinterkopf wollen wir uns nun damit besch\u00e4ftigen, wie du Gutenberg nutzen kannst.<\/p>\n<h2>Wie du den Gutenberg WordPress Block Editor verwendest<\/h2>\n<p>Nachdem du nun ein wenig \u00fcber den Gutenberg-Block-Editor Bescheid wei\u00dft, wollen wir uns ansehen, wie du es nutzen kannst, um Inhalte zu erstellen.<\/p>\n<p>Wir beginnen mit einem einf\u00fchrenden Blick auf das Interface und entwickeln nach und nach fortgeschrittenere M\u00f6glichkeiten, den Editor zu nutzen und deine Arbeitsabl\u00e4ufe zu verbessern.<\/p>\n<h3>Das Interface des Gutenberg Block Editors<\/h3>\n<p>Wenn du den Editor \u00f6ffnest, blendet er die Sidebar des WordPress Dashboards aus und bietet dir ein bildschirmf\u00fcllendes Erlebnis:<\/p>\n<figure id=\"attachment_100519\" aria-describedby=\"caption-attachment-100519\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100519 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-editor-interface-1024x880.png\" alt=\"Das Gutenberg WordPress Block Editor Interface.\" width=\"1024\" height=\"880\"><figcaption id=\"caption-attachment-100519\" class=\"wp-caption-text\">Das Gutenberg WordPress Block Editor Interface.<\/figcaption><\/figure>\n<p>Der Editor besteht aus drei Hauptteilen:<\/p>\n<ul>\n<li><strong>Inhalt<\/strong>: Dein Inhalt nimmt den gr\u00f6\u00dften Teil des Bildschirms ein. Du siehst eine visuelle Vorschau, wie es auf der Vorderseite deiner Webseite aussehen wird. Es ist nicht 100% genau, aber du solltest eine ziemlich gute Vorstellung vom endg\u00fcltigen Design haben.<\/li>\n<li><strong>Obere Symbolleiste<\/strong>: Die Werkzeugleiste oben hilft dir, neue Bl\u00f6cke einzuf\u00fcgen, r\u00fcckg\u00e4ngig zu machen\/zur\u00fcckzunehmen und auf andere wichtige Einstellungen zuzugreifen<\/li>\n<li><strong>Sidebar<\/strong>: Die Sidebar enth\u00e4lt zwei Tabs. Im Reiter <strong>Beitrag<\/strong> kannst du die Einstellungen auf Beitragsebene konfigurieren, wie z.B. Kategorien, Tags, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-featured-image-wird-nicht-richtig-angezeigt\/\">Featured Image<\/a>, etc. Die Registerkarte <strong>Block<\/strong> zeigt die Einstellungen f\u00fcr den Block, den du ausgew\u00e4hlt hast &#8211; mehr dazu sp\u00e4ter.<\/li>\n<\/ul>\n<p>Um ein intensiveres Schreiberlebnis zu schaffen, kannst du die Sidebar ausblenden, indem du auf das &#8222;Zahnrad&#8220;-Symbol in der oberen rechten Ecke klickst. Um die Sidebar wieder einzublenden, musst du nur erneut auf das &#8222;Zahnrad&#8220;-Symbol klicken:<\/p>\n<p>\u00a0<\/p>\n<figure id=\"attachment_100496\" aria-describedby=\"caption-attachment-100496\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100496 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/hide-sidebar-1024x665.png\" alt=\"Mit einem Klick auf das \"Zahnrad\"-Symbol kannst du die Sidebar ein-\/ausblenden.\" width=\"1024\" height=\"665\"><figcaption id=\"caption-attachment-100496\" class=\"wp-caption-text\">Mit einem Klick auf das &#8222;Zahnrad&#8220;-Symbol kannst du die Sidebar ein-\/ausblenden.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Dein Editor kann etwas anders aussehen, weil Theme-Entwickler die M\u00f6glichkeit haben, ihre Stile zum Editor hinzuzuf\u00fcgen, um ein visuelles Erlebnis zu schaffen. Abh\u00e4ngig von deinem Theme siehst du vielleicht <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fonts\/\">andere Schriftarten<\/a> oder Farben.<\/p>\n<\/aside>\n\n<p>Hier siehst du zum Beispiel, wie das Editor-Interface aussieht, wenn du <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\">das neue Twenty Twenty-One Standard-Theme<\/a> verwendest:<\/p>\n<figure id=\"attachment_100518\" aria-describedby=\"caption-attachment-100518\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100518 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/basic-tutorial-3-interface-themed-1024x686.png\" alt=\"Ein Beispiel, wie das Twenty Twenty-One Theme seine Stile auf den Block-Editor anwendet.\" width=\"1024\" height=\"686\"><figcaption id=\"caption-attachment-100518\" class=\"wp-caption-text\">Ein Beispiel, wie das Twenty Twenty-One Theme seine Stile auf den Block-Editor anwendet.<\/figcaption><\/figure>\n<h3>Bl\u00f6cke hinzuf\u00fcgen<\/h3>\n<p>Um normalen Absatztext zu deinem Beitrag hinzuzuf\u00fcgen, kannst du einfach klicken und tippen. Jedes Mal, wenn du die Eingabetaste dr\u00fcckst, wird der Editor automatisch einen neuen Absatzblock erstellen.<\/p>\n<p>F\u00fcr andere Arten von Inhalten musst du einen neuen Block einf\u00fcgen. Du wirst Bl\u00f6cke f\u00fcr Bilder, Buttons, <a href=\"https:\/\/kinsta.com\/de\/blog\/einbettung-youtube-video-wordpress\/\">Videoeinbettungen<\/a>, etc. verwenden.<\/p>\n<p>Um einen neuen Block hinzuzuf\u00fcgen, kannst du auf eines der &#8222;Plus&#8220;-Symbole im Interface klicken. Es ist das Hauptsymbol f\u00fcr das Einf\u00fcgen von Bl\u00f6cken in der oberen linken Ecke, aber du wirst auch andere Symbole im Interface sehen, die ein kleineres Interface f\u00fcr das Einf\u00fcgen von Bl\u00f6cken \u00f6ffnen:<\/p>\n<figure id=\"attachment_100497\" aria-describedby=\"caption-attachment-100497\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100497 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-block-options-1024x785.png\" alt=\"Mit den \"Plus\"-Symbolen kannst du einen neuen Block einf\u00fcgen.\" width=\"1024\" height=\"785\"><figcaption id=\"caption-attachment-100497\" class=\"wp-caption-text\">Mit den &#8222;Plus&#8220;-Symbolen kannst du einen neuen Block einf\u00fcgen.<\/figcaption><\/figure>\n<p>Um zu beginnen, positioniere deinen Mauszeiger dort, wo du den neuen Block einf\u00fcgen m\u00f6chtest. Um zum Beispiel einen neuen Block unterhalb des Buttons einzuf\u00fcgen, k\u00f6nntest du unter den Button klicken und dann auf das + Symbol.<\/p>\n<p>Du solltest ein Seitenpanel sehen, das alle verf\u00fcgbaren Bl\u00f6cke anzeigt, unterteilt in verschiedene Kategorien. Du kannst entweder nach einem bestimmten Block suchen oder einfach eine Option aus der Liste ausw\u00e4hlen. Wenn du mit dem Mauszeiger \u00fcber einen Block f\u00e4hrst, siehst du eine Beschreibung, was er macht und eine Vorschau.<\/p>\n<p>Um den Block einzuf\u00fcgen, musst du ihn nur anklicken. Um zum Beispiel ein normales <a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\">Bild<\/a> einzuf\u00fcgen, klickst du einfach auf den Bildblock:<\/p>\n<figure id=\"attachment_100503\" aria-describedby=\"caption-attachment-100503\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100503 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/main-block-inserter-1024x849.png\" alt=\"Klicke auf den Blocktyp, den du einf\u00fcgen m\u00f6chtest.\" width=\"1024\" height=\"849\"><figcaption id=\"caption-attachment-100503\" class=\"wp-caption-text\">Klicke auf den Blocktyp, den du einf\u00fcgen m\u00f6chtest.<\/figcaption><\/figure>\n<p>Du kannst dann den Aufforderungen zum Hochladen folgen oder ein vorhandenes Bild aus deiner <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-medienbibliothek\/\">Mediathek<\/a> ausw\u00e4hlen.<\/p>\n<h3>Wesentliche Formatierungsoptionen<\/h3>\n<p>Um grundlegende Formatierungsentscheidungen f\u00fcr deine Bl\u00f6cke zu treffen, bekommst du eine schwebende Symbolleiste, die erscheint, wenn du auf einen beliebigen Block klickst.<\/p>\n<p>Wenn du normalen Text formatieren willst, kannst du das hier tun:<\/p>\n<ul>\n<li>Fett oder kursiv hinzuf\u00fcgen<\/li>\n<li>Links einf\u00fcgen<\/li>\n<li>Ausrichtungen \u00e4ndern<\/li>\n<li>Hinzuf\u00fcgen von Formatierungen, wie Inline-Code, Durchstreichen und Abonnieren<\/li>\n<\/ul>\n<figure id=\"attachment_100528\" aria-describedby=\"caption-attachment-100528\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100528 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/floating-formatting-toolbar-1024x650.png\" alt=\"Mit der schwebenden Werkzeugleiste kannst du grundlegende Formatierungsentscheidungen treffen.\" width=\"1024\" height=\"650\"><figcaption id=\"caption-attachment-100528\" class=\"wp-caption-text\">Mit der schwebenden Werkzeugleiste kannst du grundlegende Formatierungsentscheidungen treffen.<\/figcaption><\/figure>\n<p>Nehmen wir an, du m\u00f6chtest einen Link in deinen Inhalt einf\u00fcgen. Du w\u00fcrdest zuerst den spezifischen Text ausw\u00e4hlen, den du verlinken m\u00f6chtest &#8211; in unserem Beispiel ist das &#8222;F\u00fcr andere Arten von Inhalten&#8220;. Dann kannst du auf das Link-Symbol in der Symbolleiste klicken, um die Optionen zum Einf\u00fcgen von Links zu \u00f6ffnen:<\/p>\n<figure id=\"attachment_100500\" aria-describedby=\"caption-attachment-100500\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100500 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-link-1024x608.png\" alt=\"Einen Link im Gutenberg WordPress Block Editor einf\u00fcgen.\" width=\"1024\" height=\"608\"><figcaption id=\"caption-attachment-100500\" class=\"wp-caption-text\">Einen Link im Gutenberg WordPress Block Editor einf\u00fcgen.<\/figcaption><\/figure>\n<h3>Erweiterte Einstellungen um Bl\u00f6cke zu konfigurieren<\/h3>\n<p>Alle Bl\u00f6cke, die du einf\u00fcgst, kommen mit zus\u00e4tzlichen Einstellungen in der Sidebar. Bei einigen Bl\u00f6cken kannst du nur wenige Einstellungen vornehmen, w\u00e4hrend du bei anderen Bl\u00f6cken mehrere Optionen hast, um das <a href=\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\">Design<\/a>, das Layout, die Funktionalit\u00e4t, etc. zu steuern.<\/p>\n<p>Um die Einstellungen eines Blocks zu \u00f6ffnen, klicke den <strong>Block<\/strong> im Editor an, um ihn auszuw\u00e4hlen. Gehe dann auf den Tab Block in der Sidebar, um seine Einstellungen zu sehen.<\/p>\n<p>Unten siehst du die Einstellungen f\u00fcr den Button-Block, der einer der flexibleren Bl\u00f6cke ist. Du kannst die Farbe \u00e4ndern, ihn breiter machen und vieles mehr.<\/p>\n<p>Wenn du \u00c4nderungen an den Einstellungen eines Blocks vornimmst, siehst du diese \u00c4nderungen sofort im Editor.<\/p>\n<figure id=\"attachment_100521\" aria-describedby=\"caption-attachment-100521\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100521 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-settings-button-1024x982.png\" alt=\"Du kannst die Einstellungen eines Blocks in der Sidebar aufrufen.\" width=\"1024\" height=\"982\"><figcaption id=\"caption-attachment-100521\" class=\"wp-caption-text\">Du kannst die Einstellungen eines Blocks in der Sidebar aufrufen.<\/figcaption><\/figure>\n<p>Wiederum hat jeder Block Einstellungen, die nur f\u00fcr diesen Block gelten. Wenn du zum Beispiel die Einstellungen f\u00fcr normalen Absatztext \u00f6ffnest, bekommst du nur einige grundlegende <a href=\"https:\/\/kinsta.com\/de\/blog\/moderne-schriften\/\">Typografie<\/a>&#8211; und Farboptionen. Unten kannst du sehen, dass wir einen farbigen Hintergrund anwenden konnten, um den Text hervorzuheben:<\/p>\n<figure id=\"attachment_100507\" aria-describedby=\"caption-attachment-100507\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100507 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/paragraph-text-settings-1024x877.png\" alt=\"Die Blockeinstellungen f\u00fcr einen regul\u00e4ren Absatztext.\" width=\"1024\" height=\"877\"><figcaption id=\"caption-attachment-100507\" class=\"wp-caption-text\">Die Blockeinstellungen f\u00fcr einen regul\u00e4ren Absatztext.<\/figcaption><\/figure>\n<h3>Bl\u00f6cke neu anordnen<\/h3>\n<p>Zus\u00e4tzlich zum Kopieren und Einf\u00fcgen (was du f\u00fcr Text wie in jedem anderen Editor auch tun kannst), bietet dir Gutenberg zwei M\u00f6glichkeiten, Bl\u00f6cke neu anzuordnen.<\/p>\n<p>Wenn du einen Block ein paar Positionen nach oben oder unten verschieben m\u00f6chtest, kannst du die Pfeile in der Werkzeugleiste verwenden.<\/p>\n<p>F\u00fcr umfangreiche Verschiebungen kannst du Drag-and-Drop verwenden. Um einen Block zu ziehen und abzulegen, musst du auf das Symbol mit den &#8222;sechs Punkten&#8220; links neben den Pfeilen klicken.<\/p>\n<p>Sobald du mit der Maus auf dieses Symbol klickst und es gedr\u00fcckt h\u00e4ltst, kannst du den Block an eine beliebige Stelle auf der Seite ziehen:<\/p>\n<figure id=\"attachment_100511\" aria-describedby=\"caption-attachment-100511\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100511 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/rearrange-blocks-1024x622.png\" alt=\"Du kannst die Bl\u00f6cke mit den Pfeilen oder per Drag-and-Drop neu anordnen.\" width=\"1024\" height=\"622\"><figcaption id=\"caption-attachment-100511\" class=\"wp-caption-text\">Du kannst die Bl\u00f6cke mit den Pfeilen oder per Drag-and-Drop neu anordnen.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Kopieren und Einf\u00fcgen kann bei Nicht-Text-Inhalten knifflig sein. Etwas sp\u00e4ter in diesem Beitrag zeigen wir dir, wie du ganze Bl\u00f6cke kopieren und einf\u00fcgen kannst und dabei ihre Stile beibeh\u00e4ltst.<\/p>\n<\/aside>\n\n<h3>Inhalte aus anderen Quellen einbetten<\/h3>\n<p>Gutenberg kommt mit speziellen Bl\u00f6cken zum Einbetten von Inhalten aus Drittquellen wie YouTube, Vimeo, Soundcloud, etc. Du findest alle diese Optionen im Bereich <strong>Embeds<\/strong> des Block-Inserters.<\/p>\n<p>Um zum Beispiel ein <a href=\"https:\/\/kinsta.com\/de\/blog\/einbettung-youtube-video-wordpress\/\">YouTube-Video einzubetten<\/a>, musst du nur Folgendes tun:<\/p>\n<ol>\n<li>F\u00fcge den entsprechenden YouTube-Block hinzu.<\/li>\n<li>F\u00fcge die direkte URL zum Video ein.<\/li>\n<li>Klicke auf <strong>Einbetten<\/strong>.<\/li>\n<\/ol>\n<figure id=\"attachment_100527\" aria-describedby=\"caption-attachment-100527\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100527 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/embed-youtube-video-1024x821.png\" alt=\"Ein YouTube-Video in Gutenberg einbetten.\" width=\"1024\" height=\"821\"><figcaption id=\"caption-attachment-100527\" class=\"wp-caption-text\">Ein YouTube-Video in Gutenberg einbetten.<\/figcaption><\/figure>\n<p>Du solltest dann eine Vorschau des eingebetteten Videos im Editor sehen.<\/p>\n<h3>Mehrspaltige oder gruppierte Layouts erstellen<\/h3>\n<p>Wie wir bereits erw\u00e4hnt haben, ist einer der gro\u00dfen Vorteile des Blockeditors gegen\u00fcber dem \u00e4lteren TinyMCE-Editor, dass du komplexere Layouts erstellen kannst, ohne dich auf <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/#css\">eigenen Code<\/a> oder Shortcodes verlassen zu m\u00fcssen.<\/p>\n<p>Der Blockeditor kommt mit zwei Standardbl\u00f6cken, die dir dabei helfen:<\/p>\n<ul>\n<li><strong>Spalten<\/strong>: Erstelle ein mehrspaltiges Layout.<\/li>\n<li><strong>Gruppen<\/strong>: Gruppiere mehrere Bl\u00f6cke. Du k\u00f6nntest dies zum Beispiel nutzen, um eine Hintergrundfarbe f\u00fcr einen ganzen Abschnitt festzulegen, der hinter zahlreichen Bl\u00f6cken angezeigt wird.<\/li>\n<\/ul>\n<p>Beide Bl\u00f6cke funktionieren nach dem Prinzip der &#8222;Verschachtelung&#8220; von Bl\u00f6cken, was bedeutet, dass du einen oder mehrere Bl\u00f6cke innerhalb eines anderen Blocks anordnest.<\/p>\n<p>Wir zeigen dir ein Beispiel mit dem Spaltenblock, aber das gleiche Grundprinzip gilt auch f\u00fcr den Gruppenblock.<\/p>\n<p>Nehmen wir an, du m\u00f6chtest ein zweispaltiges Layout erstellen, bei dem die Spalte auf der linken Seite einen normalen Absatztext und die Spalte auf der rechten Seite einen Button enth\u00e4lt.<\/p>\n<p>Um loszulegen, w\u00fcrdest du den Block-Inserter verwenden, um den Spaltenblock hinzuzuf\u00fcgen. Es wird eine Aufforderung angezeigt, in der du dein bevorzugtes Layout ausw\u00e4hlen kannst:<\/p>\n<figure id=\"attachment_100523\" aria-describedby=\"caption-attachment-100523\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100523 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/choose-columns-layout-1024x631.png\" alt=\"W\u00e4hle die Spaltenstruktur und das Verh\u00e4ltnis.\" width=\"1024\" height=\"631\"><figcaption id=\"caption-attachment-100523\" class=\"wp-caption-text\">W\u00e4hle die Spaltenstruktur und das Verh\u00e4ltnis.<\/figcaption><\/figure>\n<p>F\u00fcr dieses Beispiel w\u00e4hlen wir ein zweispaltiges 50\/50 Layout. Damit siehst du zwei gleichgro\u00dfe Boxen mit <strong>+<\/strong> Icons darin. Um Inhalte einzuf\u00fcgen, klickst du auf das <strong>+<\/strong>-Symbol und \u00f6ffnest das Block-Inserter-Interface:<\/p>\n<figure id=\"attachment_100498\" aria-describedby=\"caption-attachment-100498\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100498 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-content-in-columns-1024x685.png\" alt=\"Wie man Inhalte zu den Spalten hinzuf\u00fcgt.\" width=\"1024\" height=\"685\"><figcaption id=\"caption-attachment-100498\" class=\"wp-caption-text\">Wie man Inhalte zu den Spalten hinzuf\u00fcgt.<\/figcaption><\/figure>\n<p>Sobald du den ersten Block zu einer Spalte hinzugef\u00fcgt hast, kannst du das <strong>+<\/strong> Symbol dr\u00fccken, um weitere Bl\u00f6cke einzuf\u00fcgen. Oder du kannst einen Block von au\u00dferhalb der Spaltenstruktur per Drag &#038; Drop in die Spalte ziehen.<\/p>\n<h2>10 n\u00fctzliche Gutenberg Tipps, um produktiver zu arbeiten<\/h2>\n<p>Nachdem du nun ein grundlegendes Verst\u00e4ndnis f\u00fcr die Funktionsweise von Gutenberg hast, wollen wir uns nun einige wertvolle Tipps und Tricks ansehen, die dir helfen werden, den Block-Editor effektiver zu nutzen.<\/p>\n<h3>1. Benutze <code>\/<\/code> (Schr\u00e4gstrich) zum schnellen Einf\u00fcgen von Bl\u00f6cken<\/h3>\n<p>Wenn du viele Bl\u00f6cke einf\u00fcgen musst, kann das manuelle \u00d6ffnen des Block-Inserters ein wenig m\u00fchsam werden. Gl\u00fccklicherweise gibt es einen schnelleren Weg, Bl\u00f6cke nur mit der Tastatur einzuf\u00fcgen &#8211; <code>\/<\/code> (Schr\u00e4gstrich), sobald du die Namen der h\u00e4ufig verwendeten Bl\u00f6cke gelernt hast.<\/p>\n<p>Wenn du &#8222;Enter&#8220; dr\u00fcckst, um einen neuen Absatzblock zu beginnen, kannst du einen Block schnell einf\u00fcgen, indem du einen Schr\u00e4gstrich tippst, gefolgt von dem Namen des Blocks, den du einf\u00fcgen m\u00f6chtest.<\/p>\n<p>W\u00e4hrend du anf\u00e4ngst zu tippen, siehst du eine Liste mit allen Bl\u00f6cken, die deiner Anfrage entsprechen. Du kannst dann mit den Pfeiltasten der Tastatur durch die Bl\u00f6cke navigieren und mit &#8222;Enter&#8220; den Block ausw\u00e4hlen, den du einf\u00fcgen m\u00f6chtest.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr das Einf\u00fcgen eines Bildblocks mit Quick-Insert:<\/p>\n<figure id=\"attachment_100510\" aria-describedby=\"caption-attachment-100510\" style=\"width: 1760px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100510 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/quick-insert-block.gif\" alt=\"Wie man den Schr\u00e4gstrich zum schnellen Einf\u00fcgen von Bl\u00f6cken verwendet.\" width=\"1760\" height=\"1205\"><figcaption id=\"caption-attachment-100510\" class=\"wp-caption-text\">Wie man den Schr\u00e4gstrich zum schnellen Einf\u00fcgen von Bl\u00f6cken verwendet.<\/figcaption><\/figure>\n<h3>2. Einf\u00fcgen von Bildern durch Ziehen von deinem Desktop<\/h3>\n<p>Wenn du viele Bilder einf\u00fcgst, bietet der Block-Editor eine weitere zeitsparende Funktion, mit der du keinen Bildblock mehr hinzuf\u00fcgen musst, bevor du ein <a href=\"https:\/\/kinsta.com\/de\/blog\/dateien-hochlaedt-ftp-in-wordpress-mediathek\/\">Bild hochl\u00e4dst<\/a>.<\/p>\n<p>Stattdessen kannst du die Bilddatei einfach direkt von deinem Desktop an die Stelle ziehen, an der du es zu deinem Beitrag hinzuf\u00fcgen m\u00f6chtest. Wenn du die Bilddatei \u00fcber den Inhalt deiner Webseite ziehst, siehst du eine blaue Linie, die markiert, wo das Bild angezeigt wird.<\/p>\n<p>Sobald du die Datei freigibst, l\u00e4dt WordPress sie automatisch hoch und f\u00fcgt einen Bildblock an der richtigen Stelle ein:<\/p>\n<figure id=\"attachment_100515\" aria-describedby=\"caption-attachment-100515\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100515 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/upload-images-drag-from-desktop-1024x595.png\" alt=\"Du kannst Bilder einf\u00fcgen, indem du die Datei von deinem Desktop ziehst.\" width=\"1024\" height=\"595\"><figcaption id=\"caption-attachment-100515\" class=\"wp-caption-text\">Du kannst Bilder einf\u00fcgen, indem du die Datei von deinem Desktop ziehst.<\/figcaption><\/figure>\n<h3>3. Benutze einige Markdown Formatierungen<\/h3>\n<p>Wenn du ein Fan der Markdown-Syntax f\u00fcr die Erstellung von Inhalten bist, wird es dich freuen zu h\u00f6ren, dass der Block-Editor eine begrenzte Verwendung von <a href=\"https:\/\/kinsta.com\/de\/blog\/markdown-editoren\/\">Markdown<\/a> unterst\u00fctzt &#8211; haupts\u00e4chlich f\u00fcr \u00dcberschriften.<\/p>\n<p>Wenn du zum Beispiel einen \u00dcberschriftenblock mit einem H3-Tag einf\u00fcgen willst, kannst du drei Hashtags (`###`) eingeben und dann die Leertaste dr\u00fccken. Der Editor wird das automatisch in ein H3 umwandeln und dann kannst du mit der Eingabe der \u00dcberschrift fortfahren:<\/p>\n<figure id=\"attachment_100504\" aria-describedby=\"caption-attachment-100504\" style=\"width: 1749px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100504 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/markdown-support.gif\" alt=\"Der Block-Editor unterst\u00fctzt die grundlegende Markdown-Syntax f\u00fcr \u00dcberschriften.\" width=\"1749\" height=\"1008\"><figcaption id=\"caption-attachment-100504\" class=\"wp-caption-text\">Der Block-Editor unterst\u00fctzt die grundlegende Markdown-Syntax f\u00fcr \u00dcberschriften.<\/figcaption><\/figure>\n<p>Angenommen, du m\u00f6chtest einen noch weitergehenden Markdown Support. In diesem Fall kannst du ein kostenloses Plugin wie <a href=\"https:\/\/wordpress.org\/plugins\/block-options\/\">EditorsKit<\/a> installieren, mit dem du Markdown auch f\u00fcr fett, kursiv und durchgestrichen verwenden kannst &#8211; wir werden etwas sp\u00e4ter in diesem Post mehr \u00fcber Gutenberg-Plugins sprechen.<\/p>\n<h3>4. Die Formatierungsleiste am oberen Rand des Editors anheften<\/h3>\n<p>Wenn du es nicht magst, dass das Formatierungstool \u00fcber einem Block &#8222;schwebt&#8220;, kannst du es im Block-Editor unter der oberen Toolbar anheften:<\/p>\n<figure id=\"attachment_100508\" aria-describedby=\"caption-attachment-100508\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100508 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/pin-top-toolbar-1024x769.png\" alt=\"Du kannst die Formatierungs-Symbolleiste oben anheften\" width=\"1024\" height=\"769\"><figcaption id=\"caption-attachment-100508\" class=\"wp-caption-text\">Du kannst die Formatierungs-Symbolleiste oben anheften<\/figcaption><\/figure>\n<h3>5. Kopieren eines Blocks und all seiner Einstellungen<\/h3>\n<p>Im Blockeditor kannst du Text wie in jedem anderen Editor kopieren und einf\u00fcgen &#8211; &#8222;<strong>Strg + C<\/strong>&#8220; oder mit der rechten Maustaste klicken und <strong>Kopieren<\/strong> w\u00e4hlen.<\/p>\n<p>Allerdings kannst du mit dieser Methode nicht einen ganzen Block kopieren und einf\u00fcgen, w\u00e4hrend seine Einstellungen erhalten bleiben. Stattdessen musst du das tun:<\/p>\n<ol>\n<li>W\u00e4hle den Block aus.<\/li>\n<li>Klicke auf das Symbol mit den drei Punkten in der Werkzeugleiste des Blocks.<\/li>\n<li>W\u00e4hle <strong>Kopieren<\/strong>.<\/li>\n<\/ol>\n<figure id=\"attachment_100524\" aria-describedby=\"caption-attachment-100524\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100524 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/copy-block-settings-1024x860.png\" alt=\"So kopierst du einen Block mit all seinen Einstellungen.\" width=\"1024\" height=\"860\"><figcaption id=\"caption-attachment-100524\" class=\"wp-caption-text\">So kopierst du einen Block mit all seinen Einstellungen.<\/figcaption><\/figure>\n<p>Sobald du den Block auf diese Weise kopiert hast, kannst du ihn wie gewohnt einf\u00fcgen &#8211; z.B. mit &#8222;<strong>Strg + V<\/strong>&#8220; oder einem Rechtsklick und der Auswahl von &#8222;<strong>Einf\u00fcgen<\/strong>&#8222;.<\/p>\n<h3>6. Schnelles Ausw\u00e4hlen des richtigen Blocks mit der Blocklistenansicht<\/h3>\n<p>F\u00fcr die meisten Bl\u00f6cke kannst du einfach auf den Editor klicken, um den Block auszuw\u00e4hlen. Dies kann jedoch knifflig werden, wenn du anf\u00e4ngst, &#8222;verschachtelte&#8220; Bl\u00f6cke zu verwenden, wie z.B. das Einf\u00fcgen von Bl\u00f6cken innerhalb der Spalten oder Gruppenbl\u00f6cke.<\/p>\n<p>Der Editor verf\u00fcgt \u00fcber eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#persistent-list-view-in-the-post-editor\">Listenansicht<\/a>, die du \u00fcber die obere Werkzeugleiste \u00f6ffnen kannst, um dies zu ber\u00fccksichtigen. Die Listenansicht zeigt dir jeden Block an, auch einger\u00fcckte verschachtelte Bl\u00f6cke.<\/p>\n<p>Du kannst einen Block ausw\u00e4hlen, indem du ihn in der Liste anklickst, und der Editor hebt den Block auch hervor, wenn du den Mauszeiger \u00fcber ihn in der Liste bewegst.<\/p>\n<p>Im Beispiel unten kannst du sehen:<\/p>\n<ul>\n<li>Der prim\u00e4re \u00fcbergeordnete Spaltenblock<\/li>\n<li>Verschachtelte Bl\u00f6cke f\u00fcr jede Spalte<\/li>\n<li>Ein verschachtelter Gruppenblock innerhalb einer Spalte<\/li>\n<li>Ein verschachtelter \u00dcberschriftenblock innerhalb des Gruppenblocks<\/li>\n<\/ul>\n<p>Um den Haupt-Elternblock auszuw\u00e4hlen, kannst du einfach die Listenansicht \u00f6ffnen und ihn aus der Liste ausw\u00e4hlen:<\/p>\n<figure id=\"attachment_100502\" aria-describedby=\"caption-attachment-100502\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100502 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/list-view-1024x712.png\" alt=\"Das \u00d6ffnen der Listenansicht hilft dir, in verschachtelten Bl\u00f6cken zu navigieren\" width=\"1024\" height=\"712\"><figcaption id=\"caption-attachment-100502\" class=\"wp-caption-text\">Das \u00d6ffnen der Listenansicht hilft dir, in verschachtelten Bl\u00f6cken zu navigieren<\/figcaption><\/figure>\n<h3>7. \u00d6ffne den Code-Editor (f\u00fcr einzelne Bl\u00f6cke oder komplette Posts)<\/h3>\n<p>Einer der Vorteile des Gutenberg-Block-Editors ist, dass er es dir erm\u00f6glicht, viele Stile und Layout-Optionen zu konfigurieren, ohne auf den Code zur\u00fcckzugreifen. Dennoch kann es Situationen geben, in denen du als fortgeschrittener Nutzer <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">direkt auf den Code zugreifen<\/a> m\u00f6chtest.<\/p>\n<p>Um dir dabei zu helfen, kommt der Gutenberg-Editor mit ein paar verschiedenen Optionen.<\/p>\n<p>Erstens kannst du den Code eines einzelnen Blocks bearbeiten, was f\u00fcr kleinere Anpassungen wie das Einf\u00fcgen einer CSS-Klasse n\u00fctzlich ist. Dazu \u00f6ffnest du das Dropdown-Men\u00fc in der Werkzeugleiste des Blocks und w\u00e4hlst <strong>Als HTML bearbeiten<\/strong>:<\/p>\n<figure id=\"attachment_100505\" aria-describedby=\"caption-attachment-100505\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100505 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/open-html-editor-1024x762.png\" alt=\"Wie man einen einzelnen Block als HTML bearbeitet.\" width=\"1024\" height=\"762\"><figcaption id=\"caption-attachment-100505\" class=\"wp-caption-text\">Wie man einen einzelnen Block als HTML bearbeitet.<\/figcaption><\/figure>\n<p>Wenn du diese Option ausw\u00e4hlst, wird die visuelle Vorschau in einen Code-Editor f\u00fcr nur diesen Block umgewandelt, ohne die visuelle Vorschau anderer Bl\u00f6cke zu beeinflussen:<\/p>\n<figure id=\"attachment_100506\" aria-describedby=\"caption-attachment-100506\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100506 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/open-html-editor-2-1024x513.png\" alt=\"Der HTML-Editor f\u00fcr einen einzelnen Block.\" width=\"1024\" height=\"513\"><figcaption id=\"caption-attachment-100506\" class=\"wp-caption-text\">Der HTML-Editor f\u00fcr einen einzelnen Block.<\/figcaption><\/figure>\n<p>Zweitens enth\u00e4lt der Editor einen benutzerdefinierten <a href=\"https:\/\/kinsta.com\/de\/blog\/html-vs-html5\/\">HTML<\/a>-Block, mit dem du vollst\u00e4ndige HTML-Snippets einbetten kannst. Alles was du tun musst, ist den Block hinzuzuf\u00fcgen und deinen Code einzuf\u00fcgen.<\/p>\n<p>Schlie\u00dflich kannst du auch den vollst\u00e4ndigen Code-Editor f\u00fcr das gesamte Dokument \u00f6ffnen, indem du das Dropdown in der oberen rechten Ecke oder ein Tastaturk\u00fcrzel verwendest: <strong>Strg + Shift + Alt + M<\/strong>.<\/p>\n<p>Wenn du den vollst\u00e4ndigen Code-Editor \u00f6ffnest, siehst du auch das Blockformatierungs-Markup von Gutenberg, daher kann es ein wenig knifflig sein zu navigieren:<\/p>\n<figure id=\"attachment_100529\" aria-describedby=\"caption-attachment-100529\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100529 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-code-editor-1024x974.png\" alt=\"Der vollst\u00e4ndige Code-Editor, der das Block-Markup beinhaltet.\" width=\"1024\" height=\"974\"><figcaption id=\"caption-attachment-100529\" class=\"wp-caption-text\">Der vollst\u00e4ndige Code-Editor, der das Block-Markup beinhaltet.<\/figcaption><\/figure>\n<h3>8. Lerne die Tastaturk\u00fcrzel<\/h3>\n<p>Der Block-Editor enth\u00e4lt eine Menge <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-tastenkombinationen\/\">Tastaturk\u00fcrzel<\/a>, mit denen du h\u00e4ufige Aktionen ausf\u00fchren kannst. Es lohnt sich, die Zeit zu nehmen, sie zu lernen, denn sie machen dich produktiver und ersparen dir viele sich wiederholende Mausklicks.<\/p>\n<p>Hier sind einige der gebr\u00e4uchlichsten Tastenkombinationen &#8211; wenn du mit einem Mac arbeitest, solltest du &#8222;Strg&#8220; mit &#8222;Befehl (\u2318)&#8220; austauschen:<\/p>\n<ul>\n<li>\u00d6ffnen der Blocklistenansicht &#8211; <strong>Shift + Alt + O<\/strong><\/li>\n<li>Speichern deiner \u00c4nderungen &#8211; <strong>Strg + S<\/strong><\/li>\n<li>Letzte(n) \u00c4nderung(en) r\u00fcckg\u00e4ngig machen &#8211; <strong>Strg + Z<\/strong><\/li>\n<li>Wiederholen deiner letzte R\u00fcckg\u00e4ngigmachung &#8211; <strong>Strg + Shift + Z<\/strong><\/li>\n<li>Duplizieren des\/der ausgew\u00e4hlten Blocks\/Bl\u00f6cke &#8211; <strong>Strg + Umschalt + D<\/strong><\/li>\n<li>L\u00f6schen des\/der ausgew\u00e4hlten Blocks\/Bl\u00f6cke &#8211; <strong>Umschalt + Alt + Z<\/strong><\/li>\n<li>Einf\u00fcgen eines neuen Blocks vor dem\/den ausgew\u00e4hlten Block(s) &#8211; <strong>Strg + Alt + T<\/strong><\/li>\n<li>Einf\u00fcgen eines neuen Blocks nach dem\/den ausgew\u00e4hlten Block(s) &#8211; <strong>Strg + Alt + Y<\/strong><\/li>\n<\/ul>\n<p>Du kannst auch einen kompletten Spickzettel mit allen Tastaturk\u00fcrzeln \u00f6ffnen, wenn du im Editor bist. Daf\u00fcr kannst du entweder ein Tastaturk\u00fcrzel verwenden &#8211; <strong>Shift + Alt + H<\/strong> &#8211; oder du klickst auf das Men\u00fcsymbol mit den &#8222;drei vertikalen Punkten&#8220; (\u22ee) in der oberen rechten Ecke des Editors und w\u00e4hlst <strong>Tastaturk\u00fcrzel<\/strong> aus dem Dropdown-Men\u00fc.<\/p>\n<h3>9. Dein Interface aufr\u00e4umen, indem du Bl\u00f6cke ausblendest<\/h3>\n<p>Der Block-Editor f\u00fcgt standardm\u00e4\u00dfig viele Bl\u00f6cke hinzu, aber du wirst wahrscheinlich nicht alle davon benutzen. Um dir dabei zu helfen, die Oberfl\u00e4che aufzur\u00e4umen, enth\u00e4lt der Editor eine Funktion namens <strong>Block Manager<\/strong>, mit der du Bl\u00f6cke, die du nicht verwendest, deaktivieren und ausblenden kannst:<\/p>\n<figure id=\"attachment_100520\" aria-describedby=\"caption-attachment-100520\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100520 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-manager-1024x962.png\" alt=\"Du kannst das H\u00e4kchen bei Bl\u00f6cken entfernen, um sie vor dem Block-Inserter zu verbergen.\" width=\"1024\" height=\"962\"><figcaption id=\"caption-attachment-100520\" class=\"wp-caption-text\">Du kannst das H\u00e4kchen bei Bl\u00f6cken entfernen, um sie vor dem Block-Inserter zu verbergen.<\/figcaption><\/figure>\n<h3>10. Anker f\u00fcr Sprunglinks hinzuf\u00fcgen<\/h3>\n<p>Unser letzter hilfreicher Tipp ist die spezielle HTML-Ankerlink-Funktion des Block-Editors, mit der du <a href=\"https:\/\/kinsta.com\/de\/blog\/ankerlinks\/\">Sprunglinks zu bestimmten Abschnitten deines Inhalts erstellen kannst<\/a> (z.B. f\u00fcr ein Inhaltsverzeichnis).<\/p>\n<p>Im klassischen Editor musstest du HTML-Anker mit Code manuell hinzuf\u00fcgen. Mit Gutenberg kannst du den Text f\u00fcr deinen Sprunglink einfach in das <strong>HTML-Ankerfeld<\/strong> im Bereich <strong>Erweitert<\/strong> in den Einstellungen eines jeden Blocks eingeben:<\/p>\n<figure id=\"attachment_100517\" aria-describedby=\"caption-attachment-100517\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100517 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/anchor-text-1024x758.png\" alt=\"Wie man einen benutzerdefinierten Ankertext setzt.\" width=\"1024\" height=\"758\"><figcaption id=\"caption-attachment-100517\" class=\"wp-caption-text\">Wie man einen benutzerdefinierten Ankertext setzt.<\/figcaption><\/figure>\n<h2>Vertiefung in fortgeschrittene Konzepte des Blockeditors<\/h2>\n<p>An dieser Stelle haben wir schon einiges \u00fcber die Funktionsweise des Editors und einige Tipps zum effizienteren Arbeiten behandelt. Nun, da du dieses Basiswissen hast, wollen wir uns zwei etwas fortgeschrittenere Taktiken ansehen:<\/p>\n<ul>\n<li>Blockmuster<\/li>\n<li>Wiederverwendbare Bl\u00f6cke<\/li>\n<\/ul>\n<h3><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Block Patterns<\/span><\/h3>\n<p>Ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-5\/#block-patterns\">Blockmuster<\/a> ist im Wesentlichen ein Template. Es ist eine Sammlung von Bl\u00f6cken, die in einem Layout angeordnet sind. Es kann etwas Kleines sein, wie eine Anordnung von Buttons. Es kann auch ein Template f\u00fcr einen ganzen Abschnitt oder sogar eine ganze Seite sein.<\/p>\n<p>WordPress kommt mit seinen eigenen eingebauten Blockmustern, und Plugin-Entwickler von Drittanbietern k\u00f6nnen auch ihre eigenen hinzuf\u00fcgen.<\/p>\n<p>Du kannst neue Muster \u00fcber den <strong>Patterns-Tab<\/strong> des Hauptblock-Inserters einf\u00fcgen:<\/p>\n<figure id=\"attachment_100516\" aria-describedby=\"caption-attachment-100516\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100516 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/add-block-patterns-1024x898.png\" alt=\"So f\u00fcgst du ein Blockmuster ein.\" width=\"1024\" height=\"898\"><figcaption id=\"caption-attachment-100516\" class=\"wp-caption-text\">So f\u00fcgst du ein Blockmuster ein.<\/figcaption><\/figure>\n<p>Sobald du das Blockmuster eingef\u00fcgt hast, kannst du alle Bl\u00f6cke, aus denen das Muster besteht, vollst\u00e4ndig bearbeiten, so als ob du die Bl\u00f6cke manuell hinzugef\u00fcgt h\u00e4ttest.<\/p>\n<p>Derzeit kannst du mit dem Gutenberg-Editor keine Blockmuster erstellen (es sei denn, du kennst dich mit Code aus). Du kannst dies jedoch mit dem kostenlosen <a href=\"https:\/\/wordpress.org\/plugins\/block-pattern-builder\/\">Plugin Block Pattern Builder<\/a> von Justin Tadlock beheben. Wenn das Plugin aktiviert ist, kannst du deine Designs mit Gutenberg erstellen und dann als Muster speichern.<\/p>\n<p>Um zu beginnen, gehe zu <strong>Block Patterns &gt; Add New<\/strong>, um ein neues Muster mit dem Editor zu erstellen. Stelle sicher, dass du es ver\u00f6ffentlichst, wenn du fertig bist:<\/p>\n<figure id=\"attachment_100525\" aria-describedby=\"caption-attachment-100525\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100525 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-block-pattern-1024x593.png\" alt=\"Erstelle dein eigenes Blockmuster.\" width=\"1024\" height=\"593\"><figcaption id=\"caption-attachment-100525\" class=\"wp-caption-text\">Erstelle dein eigenes Blockmuster.<\/figcaption><\/figure>\n<p>Sobald du das getan hast, kannst du dein Blockmuster wie jedes andere einf\u00fcgen &#8211; suche es in der Sektion <strong>Uncategorized<\/strong>:<\/p>\n<figure id=\"attachment_100499\" aria-describedby=\"caption-attachment-100499\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100499 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/inserting-custom-block-pattern-1024x621.png\" alt=\"Einf\u00fcgen des benutzerdefinierten Blockmusters, das du erstellt hast.\" width=\"1024\" height=\"621\"><figcaption id=\"caption-attachment-100499\" class=\"wp-caption-text\">Einf\u00fcgen des benutzerdefinierten Blockmusters, das du erstellt hast.<\/figcaption><\/figure>\n<p>Das WordPress-Core-Team hat auch eine <a href=\"https:\/\/wordpress.org\/patterns\/\">offizielle Blockmuster-Bibliothek auf WordPress.org<\/a> gestartet. Du kannst sie mit <strong>Copy<\/strong> and Paste in den Editor einf\u00fcgen. Klicke einfach auf der Webseite der Blockmuster-Bibliothek auf den Button Kopieren und f\u00fcge es dann in den Editor ein.<\/p>\n<h3>Wiederverwendbare Bl\u00f6cke<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/\">Wiederverwendbare Bl\u00f6cke<\/a> sind eine Sammlung von einem oder mehreren Bl\u00f6cken, die du als Gruppe einf\u00fcgen kannst. Sie sind den Blockmustern \u00e4hnlich, aber mit einem entscheidenden Unterschied:<\/p>\n<p>W\u00e4hrend ein Blockmuster ein anf\u00e4ngliches Template ist, das du in jeder Instanz bearbeitest, wird ein wiederverwendbarer Block in jeder Instanz, in der du ihn einf\u00fcgst, derselbe sein.<\/p>\n<p>Wenn du den wiederverwendbaren Block aktualisierst, werden diese \u00c4nderungen automatisch auf alle bestehenden Instanzen angewendet.<\/p>\n<p>Du k\u00f6nntest zum Beispiel einen wiederverwendbaren Block verwenden, um einen Call to Action (CTA) zu erstellen, der in allen deinen Inhalten gleich sein soll. Wenn du den CTA dann aktualisieren m\u00f6chtest, musst du den wiederverwendbaren Block nur einmal aktualisieren, um ihn auf deiner Webseite zu \u00e4ndern.<\/p>\n<p>Um einen wiederverwendbaren Block im Gutenberg WordPress Editor zu erstellen, klicke und ziehe, um einen oder mehrere Bl\u00f6cke auszuw\u00e4hlen. Dann klickst du auf die Option <strong>Zu wiederverwendbaren Bl\u00f6cken hinzuf\u00fcgen<\/strong>. (Das Plugin, das wir oben erw\u00e4hnt haben, l\u00e4sst dich auch auf diese Weise ein Blockmuster erstellen).<\/p>\n<figure id=\"attachment_100526\" aria-describedby=\"caption-attachment-100526\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100526 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-reusable-block-1024x703.png\" alt=\"Wie man einen wiederverwendbaren Block erstellt\" width=\"1024\" height=\"703\"><figcaption id=\"caption-attachment-100526\" class=\"wp-caption-text\">Wie man einen wiederverwendbaren Block erstellt<\/figcaption><\/figure>\n<p>Deine Bl\u00f6cke werden dann gruppiert &#8211; du kannst deinem wiederverwendbaren Block einen Namen in den Einstellungen des wiederverwendbaren Blocks in der Sidebar geben.<\/p>\n<p>Jetzt kannst du den wiederverwendbaren Block einf\u00fcgen, indem du nach seinem Namen suchst. Du kannst `\/` verwenden, um den Block schnell einzuf\u00fcgen:<\/p>\n<figure id=\"attachment_100501\" aria-describedby=\"caption-attachment-100501\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100501 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-reusable-block-1024x527.png\" alt=\"So setzt du einen wiederverwendbaren Block ein.\" width=\"1024\" height=\"527\"><figcaption id=\"caption-attachment-100501\" class=\"wp-caption-text\">So setzt du einen wiederverwendbaren Block ein.<\/figcaption><\/figure>\n<p>Wenn du den wiederverwendbaren Block \u00e4nderst, bekommst du eine Option, diese \u00c4nderungen zu ver\u00f6ffentlichen, wenn du den Beitrag aktualisierst. Und wenn du dich entscheidest, die \u00c4nderungen am wiederverwendbaren Block zu ver\u00f6ffentlichen, werden diese \u00c4nderungen automatisch auf jede Instanz des wiederverwendbaren Blocks angewendet:<\/p>\n<figure id=\"attachment_100514\" aria-describedby=\"caption-attachment-100514\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100514 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/update-reusable-block-1024x568.png\" alt=\"Wie man einen wiederverwendbaren Block aktualisiert.\" width=\"1024\" height=\"568\"><figcaption id=\"caption-attachment-100514\" class=\"wp-caption-text\">Wie man einen wiederverwendbaren Block aktualisiert.<\/figcaption><\/figure>\n<h2>Den Blockeditor mit Plugins erweitern<\/h2>\n<p>Bis jetzt haben wir uns auf die Kernfunktionen des Blockeditors konzentriert, mit ein paar Ausnahmen.<\/p>\n<p>Das Tolle am Block-Editor ist jedoch, dass du ihn mit <a href=\"https:\/\/kinsta.com\/de\/thema\/wordpress-plugins\/\">Plugins erweitern<\/a> kannst, genau wie den Rest deiner WordPress Seite.<\/p>\n<p>Du kannst Plugins f\u00fcr ein paar verschiedene Dinge verwenden:<\/p>\n<ul>\n<li><strong>Neue Inhaltsbl\u00f6cke hinzuf\u00fcgen<\/strong>: Plugins k\u00f6nnen neue Bl\u00f6cke hinzuf\u00fcgen, die du in deinen Designs verwenden kannst. Es ist der h\u00e4ufigste Anwendungsfall f\u00fcr Gutenberg Plugins im Moment.<\/li>\n<li><strong>Neue Templates\/Blockmuster hinzuf\u00fcgen<\/strong>: Einige Plugins nutzen das Kern-Blockmuster-System, w\u00e4hrend andere ihre eigenen Template-Systeme erstellt haben.<\/li>\n<li><strong>\u00c4ndere die Editoroberfl\u00e4che\/Features<\/strong>: Du kannst Plugins verwenden, um den Editor selbst zu ver\u00e4ndern. Zum Beispiel kannst du besseren Markdown Support hinzuf\u00fcgen.<\/li>\n<\/ul>\n<p>Neben Plugins, die speziell f\u00fcr Gutenberg entwickelt wurden, k\u00f6nnen auch viele andere WordPress-Plugins den Block-Editor nutzen.<\/p>\n<p>Wenn du zum Beispiel ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-kontaktformular-plugins\/\">Kontaktformular-Plugin<\/a> verwendest, kann das Plugin dir einen eigenen Block zur Verf\u00fcgung stellen, den du zum Einbetten deiner Formulare verwenden kannst. Das Gleiche gilt f\u00fcr viele andere Arten von Plugins.<\/p>\n<p>Sobald du die Grundlagen des Editors beherrschst, lohnt es sich, diese Plugins zu erkunden, um zu sehen, ob du welche findest, die deine Erfahrung verbessern k\u00f6nnen.<\/p>\n<p>Hier sind einige der beliebtesten Optionen zum Zeitpunkt des Verfassens dieses Beitrags:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\">Ultimate Addons for Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/kadence-blocks\/\">Kadence Blocks<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/generateblocks\/\">GenerateBlocks<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">Stackable<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/getwid\/\">Getwid<\/a><\/li>\n<\/ul>\n<p>Du kannst mehr im Bereich der <a href=\"https:\/\/wordpress.org\/plugins\/browse\/blocks\/\">blockf\u00e4higen Plugins auf WordPress.org<\/a> sehen.<\/p>\n<h2>Gutenberg WordPress Editor und vollst\u00e4ndige Bearbeitung der Webseite<\/h2>\n<p>Wie wir bereits zu Beginn dieses Beitrags erw\u00e4hnt haben, will das Gutenberg Projekt viel mehr sein als nur ein Content Editor.<\/p>\n<p>Langfristig ist geplant, dass WordPress in das <strong>Full Site Editing<\/strong> \u00fcbergeht. Es bedeutet genau das, was es sagt &#8211; das Ziel ist, dass du irgendwann in der Lage sein wirst, alle Teile deiner Webseite mit dem Gutenberg-Editor zu bearbeiten. Dazu geh\u00f6ren auch der Header, der Footer, die Sidebars, etc.<\/p>\n<p>Anders als bei der Einf\u00fchrung des Block-Editors in WordPress 5.0, wird das Full Site Editing schrittweise eingef\u00fchrt. Es wird ein schrittweises Hinzuf\u00fcgen von Features sein, wobei jede neue Version auf den vorherigen aufbaut.<\/p>\n<p>Zum Beispiel wirst du ab <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a> den Block-Editor nutzen, um die Widgets deiner Webseite zu verwalten. Du bekommst auch Zugang zu einigen neuen themenbezogenen Bl\u00f6cken, wie z.B. Site Logo, Navigation, Query Loop (l\u00e4sst dich Templates f\u00fcr Listenbeitr\u00e4ge erstellen) und mehr.<\/p>\n<p>W\u00e4hrend das offizielle Full Site Editing noch in Arbeit ist, haben einige unerschrockene Theme-Entwickler bereits damit begonnen, blockbasierte Themes zu ver\u00f6ffentlichen, die uns einige ziemlich gute Beispiele daf\u00fcr liefern, wie Full Site Editing funktionieren k\u00f6nnte.<\/p>\n<p>Zus\u00e4tzlich kannst du auf einige der experimentellen Full Site Editing Features in der <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">Plugin Version von Gutenberg<\/a> zugreifen.<\/p>\n<p>Also, lass uns zwei Dinge betrachten:<\/p>\n<ul>\n<li>Die existierenden Core Full Site Editing Features, die wir jetzt ab WordPress 5.8 haben<\/li>\n<li>Wie &#8222;volles&#8220; Full Site Editing funktionieren k\u00f6nnte, basierend auf experimentellen Funktionen<\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p><strong>All dies kann sich in kleiner oder gro\u00dfer Weise \u00e4ndern, wenn Full Site Editing zum Mainstream wird<\/strong>. Es soll dir nur eine Vorstellung davon geben, wie es sein k\u00f6nnte.<\/p>\n<\/aside>\n\n<h3>Bl\u00f6cke anstelle von Widgets verwenden<\/h3>\n<p>Ab WordPress 5.8 verwendest du nun Bl\u00f6cke zur Steuerung deiner <a href=\"https:\/\/kinsta.com\/blog\/wordpress-register-sidebar\/\">Sidebars<\/a> und Footer anstelle von Widgets (standardm\u00e4\u00dfig &#8211; du kannst dies deaktivieren, wenn du m\u00f6chtest).<\/p>\n<p>Wenn du auf <strong>Aussehen &gt; Widgets<\/strong> gehst, kannst du den Inhalt jedes Widget-Bereichs mit dem Block-Editor verwalten.<\/p>\n<p>Du kannst sehen, dass jeder Widget-Bereich einen separaten Editor erh\u00e4lt, den du mit einem Klick auf die Akkordeon-Kippschalter \u00f6ffnen kannst. Du kannst auch Bl\u00f6cke zwischen verschiedenen Widget-Bereichen verschieben, indem du auf die hakenf\u00f6rmigen Pfeilsymbole oben klickst:<\/p>\n<figure id=\"attachment_100522\" aria-describedby=\"caption-attachment-100522\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100522 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-widget-areas-1024x887.png\" alt=\"Bl\u00f6cke verwenden, um Widgetbereiche zu bearbeiten.\" width=\"1024\" height=\"887\"><figcaption id=\"caption-attachment-100522\" class=\"wp-caption-text\">Bl\u00f6cke verwenden, um Widgetbereiche zu bearbeiten.<\/figcaption><\/figure>\n<h3>Neue Theme-Bl\u00f6cke verwenden<\/h3>\n<p>Mit WordPress 5.8 gibt es auch neue Theme-Bl\u00f6cke, mit denen du dynamische Inhalte auf deiner Webseite einf\u00fcgen kannst. Diese Bl\u00f6cke werden auch eine entscheidende Rolle spielen, wenn du in zuk\u00fcnftigen Versionen Templates f\u00fcr dein Theme entwirfst.<\/p>\n<p>Nehmen wir an, du m\u00f6chtest eine Liste deiner neuesten Inhalte auf einer Seite einbinden. Jetzt kannst du einfach den Query Loop Block hinzuf\u00fcgen und du kannst dynamisch Inhalte aus einem bestimmten <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">Beitragstyp<\/a> (z.B. Blogbeitr\u00e4ge) einf\u00fcgen, einschlie\u00dflich der Filterung nach Kategorien, Autoren, Keywords und mehr:<\/p>\n<figure id=\"attachment_100509\" aria-describedby=\"caption-attachment-100509\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100509 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-block-1024x945.png\" alt=\"Benutze den Query Loop Block, um dynamische Inhalte anzuzeigen.\" width=\"1024\" height=\"945\"><figcaption id=\"caption-attachment-100509\" class=\"wp-caption-text\">Benutze den Query Loop Block, um dynamische Inhalte anzuzeigen.<\/figcaption><\/figure>\n<p>Innerhalb des Query Loop Blocks kannst du die anderen Theme Bl\u00f6cke verschachteln, um das Template f\u00fcr den dort angezeigten Inhalt zu steuern. Zum Beispiel kannst du das Datum jedes Beitrags anzeigen, indem du den Block Post Date zu deinem Template hinzuf\u00fcgst.<\/p>\n<p>Mit dem Query Loop-Block in WordPress 5.8 kannst du im Wesentlichen deine eigene Blog-Listing-Seite gestalten. Wenn du deine Webseite richtig bearbeitest, kannst du das auf dein gesamtes Theme ausweiten &#8211; also schauen wir uns das als n\u00e4chstes an.<\/p>\n<h3>Content Templates entwerfen<\/h3>\n<p>Der Template-Bearbeitungsmodus ist eine weitere neue Funktion in WordPress 5.8. Es l\u00e4sst dich Gutenberg nutzen, um die Templates f\u00fcr deine Beitr\u00e4ge und Seiten mit Hilfe von Bl\u00f6cken zu gestalten.<\/p>\n<p>Momentan ist diese Funktion nur verf\u00fcgbar, wenn dein Theme-Entwickler sie speziell aktiviert hat, sodass du sie m\u00f6glicherweise nicht siehst, wenn der Entwickler deines Themes das noch nicht getan hat.<\/p>\n<p>Wenn du ein Theme verwendest, das den Template-Bearbeitungsmodus in WordPress 5.8 unterst\u00fctzt, wirst du einen neuen <strong>Template<\/strong>-Bereich im <strong>Post\/Page<\/strong>-Tab der Sidebar sehen, wenn du einen Beitrag oder eine Seite bearbeitest. Du kannst ein neues Template erstellen oder eines deiner bestehenden Templates ausw\u00e4hlen:<\/p>\n<figure id=\"attachment_100512\" aria-describedby=\"caption-attachment-100512\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100512 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/template-editing-mode-1024x853.png\" alt=\"Erstellen eines neuen Templates in Themes, die den Template-Modus unterst\u00fctzen.\" width=\"1024\" height=\"853\"><figcaption id=\"caption-attachment-100512\" class=\"wp-caption-text\">Erstellen eines neuen Templates in Themes, die den Template-Modus unterst\u00fctzen.<\/figcaption><\/figure>\n<p>Wenn du ein neues Template erstellst, kannst du ihm einen Namen geben, damit du es nicht vergisst. Dann kannst du das Template mit dem speziellen Template-Editor-Modus und den neuen Theme-Bl\u00f6cken, die wir im vorherigen Abschnitt beschrieben haben, gestalten:<\/p>\n<figure id=\"attachment_100513\" aria-describedby=\"caption-attachment-100513\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100513 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/template-editor-1024x875.png\" alt=\"Der neue Template Editor in WordPress 5.8.\" width=\"1024\" height=\"875\"><figcaption id=\"caption-attachment-100513\" class=\"wp-caption-text\">Der neue Template Editor in WordPress 5.8.<\/figcaption><\/figure>\n<h3>Blockbase Full Site Editing Beispiel<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/themes\/blockbase\/\">Blockbase<\/a> ist ein Theme von Automattic, das als eine Art &#8222;Proof of Concept&#8220; und Spielwiese f\u00fcr Full Site Editing dient. Es ist noch experimentell, daher kann es sich noch \u00e4ndern, bevor diese Funktionen in der WordPress-Core Software enthalten sind. Aber es bietet eine Idee von Full Site Editing.<\/p>\n<p>Wenn du das Theme und die Plugin-Version von Gutenberg installiert hast, bekommst du einen neuen Bereich f\u00fcr den <strong>Site Editor<\/strong>, mit dem du dein Theme mit dem gleichen Editor &#8222;bauen&#8220; kannst, den du oben gesehen hast.<\/p>\n<p>Der entscheidende Unterschied ist jedoch, dass du nicht nur einen einzelnen Beitrag oder eine Seite erstellst. Stattdessen verwendest du den Gutenberg WordPress Block-Editor, um die eigentlichen Templates zu erstellen, die von allen Inhalten deiner Webseite verwendet werden &#8211; zum Beispiel das Template f\u00fcr deinen Header.<\/p>\n<figure id=\"attachment_100530\" aria-describedby=\"caption-attachment-100530\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100530 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-1-1024x689.png\" alt=\"Ein fr\u00fches Beispiel f\u00fcr Full Site Editing.\" width=\"1024\" height=\"689\"><figcaption id=\"caption-attachment-100530\" class=\"wp-caption-text\">Ein fr\u00fches Beispiel f\u00fcr Full Site Editing.<\/figcaption><\/figure>\n<p>Um dir dabei zu helfen, bekommst du eine Reihe von neuen Designbl\u00f6cken, darunter einige der Theme-Bl\u00f6cke, die du oben gesehen hast:<\/p>\n<figure id=\"attachment_100531\" aria-describedby=\"caption-attachment-100531\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100531 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-new-blocks-1024x985.png\" alt=\"Die neuen Designbl\u00f6cke mit Full Site Editing.\" width=\"1024\" height=\"985\"><figcaption id=\"caption-attachment-100531\" class=\"wp-caption-text\">Die neuen Designbl\u00f6cke mit Full Site Editing.<\/figcaption><\/figure>\n<p>Um zwischen verschiedenen Templates zu navigieren, kannst du auf das WordPress-Logo in der oberen linken Ecke klicken, um andere Templates zu bearbeiten und neue zu erstellen:<\/p>\n<figure id=\"attachment_100532\" aria-describedby=\"caption-attachment-100532\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100532 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-templates-1024x809.png\" alt=\"Editieren verschiedener Theme Templates.\" width=\"1024\" height=\"809\"><figcaption id=\"caption-attachment-100532\" class=\"wp-caption-text\">Editieren verschiedener Theme Templates.<\/figcaption><\/figure>\n<p>Auch hier ist die Idee, dass du irgendwann in der Lage sein wirst, den Gutenberg-Editor zu nutzen, um alle Templates\/Layouts deines Themes zu kontrollieren. Und wenn das passiert, wird die Erstellung einer WordPress Seite ganz anders aussehen, als das, was wir im Jahr 2021 als &#8222;normal&#8220; ansehen.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Seit 2018 hat der Gutenberg-Blockeditor eine Menge Fortschritte gemacht. Mit dem bevorstehenden Schritt in Richtung Full Site Editing wird der Block-Editor nur ein noch bedeutenderer Teil von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-statistiken\/\">WordPress<\/a> werden.<\/p>\n<p>In diesem Beitrag haben wir alles von den Grundlagen des Blockeditors bis hin zu fortgeschrittenen Tipps und Funktionen behandelt. Wir haben auch einen Blick darauf geworfen, wie Full Site Editing in der Zukunft aussehen k\u00f6nnte.<\/p>\n<p>Wenn du noch nicht bereit bist, es auszuprobieren, kannst du Gutenberg dauerhaft deaktivieren und den klassischen Editor verwenden. Gutenberg wird jedoch weiter wachsen, also ist es nichts, was du f\u00fcr immer ignorieren willst.<\/p>\n<p>Hast du noch irgendwelche Fragen oder Gedanken zum Editor? Wenn ja, w\u00fcrden wir gerne deine Kommentare h\u00f6ren, sowohl gute als auch schlechte.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Als der WordPress Block-Editor, oder Gutenberg, im Dezember 2018 vorgestellt wurde, wussten wir nicht, was wir erwarten w\u00fcrden. Sicher, wir hatten genug Zeit, um mit der &#8230;<\/p>\n","protected":false},"author":38,"featured_media":42881,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[501,52],"topic":[999],"class_list":["post-20280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","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>Das Neueste aus dem Gutenberg WordPress Editor (2026)<\/title>\n<meta name=\"description\" content=\"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Das Neueste aus dem Gutenberg WordPress Editor (2026)\" \/>\n<meta property=\"og:description\" content=\"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\" \/>\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:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-10T06:00:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T10:28:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.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=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"32\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Das Neueste aus dem Gutenberg WordPress Editor (2026)\",\"datePublished\":\"2018-08-10T06:00:45+00:00\",\"dateModified\":\"2023-08-24T10:28:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\"},\"wordCount\":6168,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg\",\"keywords\":[\"Block Editor\",\"Gutenberg\"],\"articleSection\":[\"Die besten WordPress Plugins und Themes\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\",\"name\":\"Das Neueste aus dem Gutenberg WordPress Editor (2026)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg\",\"datePublished\":\"2018-08-10T06:00:45+00:00\",\"dateModified\":\"2023-08-24T10:28:38+00:00\",\"description\":\"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Das Neueste aus dem Gutenberg WordPress Editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#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\":\"Das Neueste aus dem Gutenberg WordPress Editor (2024)\"}]},{\"@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\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Das Neueste aus dem Gutenberg WordPress Editor (2026)","description":"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/","og_locale":"de_DE","og_type":"article","og_title":"Das Neueste aus dem Gutenberg WordPress Editor (2026)","og_description":"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.","og_url":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2018-08-10T06:00:45+00:00","article_modified_time":"2023-08-24T10:28:38+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg","type":"image\/jpeg"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg","twitter_creator":"@brianleejackson","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Brian Jackson","Gesch\u00e4tzte Lesezeit":"32\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Das Neueste aus dem Gutenberg WordPress Editor (2026)","datePublished":"2018-08-10T06:00:45+00:00","dateModified":"2023-08-24T10:28:38+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/"},"wordCount":6168,"commentCount":3,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg","keywords":["Block Editor","Gutenberg"],"articleSection":["Die besten WordPress Plugins und Themes"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/","url":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/","name":"Das Neueste aus dem Gutenberg WordPress Editor (2026)","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg","datePublished":"2018-08-10T06:00:45+00:00","dateModified":"2023-08-24T10:28:38+00:00","description":"Lerne alles \u00fcber den neuesten Gutenberg WordPress Editor, auch bekannt als der Block Editor. Erfahre, warum es die Zukunft von WordPress ist, die komplette Seite zu bearbeiten.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/08\/gutenberg-wordpress-editor.jpeg","width":1460,"height":730,"caption":"Das Neueste aus dem Gutenberg WordPress Editor"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/#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":"Das Neueste aus dem Gutenberg WordPress Editor (2024)"}]},{"@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\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/20280","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\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=20280"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/20280\/revisions"}],"predecessor-version":[{"id":53472,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/20280\/revisions\/53472"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/translations\/se"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/20280\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/42881"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=20280"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=20280"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=20280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}