Das große WordPress Gutenberg Tutorial für Entwickler:innen – eigene Blöcke erstellen

Maddy Osman
11 Min.
WordPress-Gutenberg-Tutorial-Developer

Gutenberg eröffnet dir als Entwickler:in spannende neue Möglichkeiten. In diesem Tutorial erkläre ich dir alles, was du über den Block Editor wissen solltest. Lerne, wie du eigene WordPress Blöcke erstellst und bestehende Blöcke anpasst.

Gutenberg ist der Editor, welcher mit WordPress 5.0 veröffentlicht wurde. Mit Gutenberg wurde das Konzept der WordPress Blöcke eingeführt. Dies ermöglicht es Websitebetreiber:innen, Designelemente per Drag & Drop zu platzieren – ohne dafür einen externen Page Builder oder Programmierkenntnisse zu benötigen. 

Gutenberg wird in Zukunft als Grundlage für Full Site Editing genutzt werden. In der Vergangenheit war es immer notwendig zu programmieren, selbst wenn du einen Page Builder benutzt hast: Bei einigen Änderungen und Anpassungen kam zwingend Code ins Spiel.

Mit jedem neuen WordPress Major Update wird klar, dass PHP Kenntnisse und die traditionelle Entwicklung von WordPress Websites nicht mehr ausreichen. Als WordPress Entwickler:in musst du Gutenberg beherrschen.

Dieses Tutorial beinhaltet: 

  • Was Gutenberg ist
  • Wie du mit WordPress Blöcken arbeitest
  • Wie du diese neuen Funktionen und Technologien nutzt, um leistungsstarke WordPress Websites zu bauen

Lass uns in das WordPress Gutenberg Tutorial für Entwickler:innen eintauchen!

Was ist Gutenberg?

Gutenberg wurde erstmals in WordPress 5.0 ausgerollt, um das Erstellen von Beiträgen und Seiten auf rein visuelle Weise zu vereinfachen. Dies war aber nur Phase 1 des Projekts.

Gutenberg setzt auf moderne Technologien wie JavaScript, React und REST API, um ein dynamisches Editor Erlebnis zu schaffen, das die Front End Bearbeitung imitiert. In dieser ersten Phase wurde der Block Editor veröffentlicht. 

Was ist der Gutenberg Block Editor?

Gutenberg ersetzt den TinyMCE Editor (welcher oft als klassischer Editor bezeichnet wird) und lässt dich Inhaltsblöcke verwenden, um Elemente wie Text oder Bilder zu deinen Posts und Seiten hinzuzufügen.

Mit weiteren Updates und Phase 2 soll Gutenberg zu einem vollwertigen Website Editor werden. In Zukunft wird es möglich sein, ganze WordPress Websites mit Blöcken zu erstellen.

WordPress-Gutenberg-Tutorial-Developer

Das bedeutet: Wer WordPress Websites entwickelt, muss den eigenen Developer Workflow neu definieren. PHP Kenntnisse reichen nicht mehr aus, um eine WordPress Website von Grund auf zu erstellen. Du musst dich mit JavaScript, React und REST API auskennen, wenn du individuelle Blöcke und Designelemente für Gutenberg basierte Websites erstellen willst. 

Einstieg in WordPress Blöcke

Es ist aufregend, sich auf diese neue Reise mit dem Gutenberg Block Editor zu begeben. Mit diesem Tutorial erfährst du alles Wichtige, bevor du mit Gutenberg Development startest und deine eigenen WordPress Blöcke erstellst.

Was du wissen musst, bevor du für Gutenberg entwickelst 

Die wichtigste Sprache, die du kennen musst, um diesem WordPress Gutenberg Tutorial für Entwickler:innen zu folgen, ist Javascript. Genauer gesagt musst du die Version ES5 kennen, die von den meisten modernen Browsern unterstützt wird. 

Neuere Features sind in der 2015er Version, ES6, und in der neuesten Version, ESNext, enthalten. 

ES6 und ESNext zu verstehen kann wertvoll sein. Wenn du sie jedoch in deiner Entwicklung von WordPress Blöcken verwenden willst, musst du wissen, wie du Tools konfigurierst, die deinen neueren Code in ES5 umwandeln. 

WordPress-Gutenberg-Tutorial-Developer

Du musst auch JSX verstehen, das eine Syntax Erweiterung von Javascript ist und ebenfalls eine Transformation erfordert. Da ES6, ESNext und JSX so viel einfacher zu schreiben sind als ES5, ist es die Mühe wert, Transformationswerkzeuge einzurichten. 

WordPress-Gutenberg-Tutorial-Developer

Webpack, in Verbindung mit Babel, ist ein beliebtes Transformationswerkzeug. Diese Werkzeugkombination minifiziert dein Javascript. 

WordPress-Gutenberg-Tutorial-Developer

Zu guter Letzt kann dir das Wissen über React JS immens helfen, wenn du deine eigenen WordPress Blöcke erstellst oder verschiedenen WordPress Tutorials für Entwickler:innen folgst, die sich auf die Anpassung von Blöcken konzentrieren. 

Inhalte werden in Gutenberg anders gespeichert 

Im Gegensatz zum klassischen Content Editor werden die Inhalte in Gutenberg anders gespeichert. Inhalte werden nicht mehr als HTML gespeichert, sondern als HTML Kommentare in einer bestimmten Struktur mit JSON Format. Das macht es einfacher, Inhalte in eine andere WordPress Installation oder in ein Content Management System (CMS) zu übertragen. 

Das Speichern von Inhalten in traditionellem HTML ist in Ordnung, wenn es sich um einfache und textbasierte Inhalte handelt. Wenn du jedoch mit dynamisch generierten Inhalten zu tun hast, wird dein Code leider unsauber. 

Du musst nicht unbedingt die technischen Details darüber kennen, wie WordPress Blöcke funktionieren. Wichtig ist: Wenn du Inhalte in Gutenberg erstellst, ist das erzeugte HTML frei von geparstem unordentlichem Code. Denn alle Details werden innerhalb von HTML Kommentaren gespeichert. 

Was du mit den WordPress Gutenberg Blöcken machen kannst 

Du kannst in Gutenberg mehrere Dinge tun. Wenn du einem WordPress Tutorial für Entwickler:innen folgst, solltest du dir über deine Möglichkeiten im Klaren sein. 

Lass uns ein paar Möglichkeiten erkunden: 

  • Entwickle eigene WordPress Blöcke: Dies ist die komplexeste Aufgabe, die du erledigen kannst. Trotzdem sind eigene WordPress Blöcke oft ihre Mühe wert, um echte Anpassungen zu erreichen. 
  • Bereite dein Theme für Gutenberg vor: Dazu gehört, dass du die von WordPress.org vorgeschlagenen Theme Anleitung befolgst, um dein Theme kompatibel für Gutenberg zu machen. Dazu gehört auch die Anpassung des Block Stylings, um den gewünschten Look deines Themes zu erhalten und die Blockfunktionalität beizubehalten. 
  • Vorhandene WordPress Inhaltsblöcke anpassen oder erweitern: Wie oben erwähnt, kannst du bestehende WordPress Blöcke in Gutenberg anpassen. Dies beinhaltet entweder das Hinzufügen von benutzerdefinierten Blockstilen, das Hinzufügen von Filtern über Javascript oder das Anpassen von Blockkategorien und Blocktypen, die für bestimmte individuell anpassbare Beitragstypen angezeigt werden. 

Eine Entwicklungsumgebung für den Gutenberg Block Editor einrichten

WordPress-Gutenberg-Tutorial-Developer

Bevor du irgendetwas mit Gutenberg erstellen oder irgendwelche WordPress Tutorials für Entwickler:innen absolvieren kannst, musst du eine Entwicklungsumgebung einrichten. Dein erster Schritt ist es, dir Node.js zu besorgen. WordPress empfiehlt, den Node Version Manager (nvm) zu verwenden, um Node zu installieren und zu verwalten. 

Innerhalb des geklonten Repositorys kannst du Gutenberg bauen, indem du folgendes ausführst: 

npm ci
npm run build

Diese Kodierung sorgt dafür, dass Gutenberg als Plugin verwendet werden kann. Anschließend fügst du das erstellte Gutenberg Verzeichnis in den Ordner wp-content/plugins in deiner lokalen WordPress Umgebung ein. A White Pixel empfiehlt außerdem die Installation von Webpack und Babel. 

Gehe durch alle Einrichtungsschritte, um eine Entwicklungsumgebung zu konfigurieren. Du brauchst eine lokale Testwebsite, auf der WordPress mit dem von dir erstellten Gutenberg Plugin läuft, und Zugang zu Terminal, um eine Reihe von Befehlszeilenaufforderungen auszuführen. WordPress.org bietet zahlreiche Ressourcen für Entwicklungsskripte

Nachdem du deine lokale Umgebung eingerichtet und konfiguriert hast, können wir nun zum Hauptteil dieses WordPress Tutorials für Entwickler:innen übergehen: WordPress Blöcke.

WordPress Blöcke verstehen

WordPress Blöcke sind Container, in denen Inhalte innerhalb des WordPress Block Editors platziert werden. WordPress Blöcke können über eine Drag & Drop Schnittstelle verschoben werden .

Zu verstehen, was WordPress Blöcke sind, ist wichtig, bevor du deine eigenen erstellst. Die WordPress Blöcke sind ebenfalls sehr umfangreich und umfassen mehrere wichtige Funktionen, unter anderem in Bezug auf: 

Wie du eigene WordPress Blöcke erstellst

Mit diesem WordPress Gutenberg Tutorial für Entwickler:innen lernst du, was du brauchst, um individuelle WordPress Inhaltsblöcke zu erstellen. Dann kannst du sie auf deiner Website oder der deiner Kund:innen verwenden. 

Wie du neue WordPress Blöcke registrierst

Jeder neue Block beginnt mit der Registrierung. Verwende die Funktion registerBlockType, um eine neue Blocktyp Definition zu registrieren.  

Der Blockname ist ein String, der als namespace/block-name geschrieben werden muss. Tausche namespace gegen den Namen des Blocks aus, den du erstellen willst. 

Von dort aus musst du die Eigenschaften deines neuen Blocks definieren, wie zum Beispiel den Titel, die Beschreibung, die Kategorie, das Symbol, die Schlüsselwörter oder die Stile. 

Hinzufügen von Symbolleisten für individuell anpassbare Aktionen

Wenn du deinem Block über eine interaktive Symbolleiste benutzerdefinierte Aktionen hinzufügen möchtest, kannst du funktionierende Gutenberg Symbolleisten anpassen (oder von Grund auf neu erstellen). Lege benutzerdefinierte Icons, Formatierungen, Positionierungen und zugewiesene Aktionen fest – je nach den Bedürfnissen deines Plugins oder Themes. 

WordPress-Gutenberg-Tutorial-Developer

Laut dem Block Editor Handbook könnte das Hinzufügen einer benutzerdefinierten Symbolleiste etwa so aussehen: 

Import-Toolbar

So übersetztst du WordPress Blöcke 

Wenn du die Internationalisierung durchführst, kannst du sicherstellen, dass die von dir erstellten WordPress Blöcke ein größeres Publikum erreichen. 

Seit WordPress 5.0 kannst du das wp-i18n JavaScript Paket verwenden, um übersetzbare Strings hinzuzufügen. Du kannst auch Übersetzungsdateien erstellen und sie laden lassen, wenn ein Nutzer Inhalte in dieser Sprache anfordert. 

Hinzufügen von Inspektoreinstellungen

Alle Blöcke haben eine Reihe von Inspektoreinstellungen, die auf der rechten Seite des Bildschirms erscheinen, wenn sie in deinen Inhalt eingefügt werden. Und je nach WordPress Block sind die Aspekte, die Benutzer:innen anpassen können, unterschiedlich. Für jeden individuellen Block, den du erstellst, müssen die Inspektoreinstellungen definiert werden. 

WordPress-Gutenberg-Tutorial-Developer

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Die Bemühungen von JavaScript für WordPress sehen in etwa so aus: 

WordPress-Gutenberg-Tutorial-Developer

Mit diesen Spezifikationen kannst du dann JSX verwenden, um jede Funktion zu stylen und ihre Reihenfolge anzupassen. 

Wie du dynamische Inhalte mit PHP ausgibst

Dynamischer Content ist essenziell für WordPress. Es gibt viele Gründe, warum du einen dynamischen Block benötigen könntest. 

Wenn du zum Beispiel einen individuellen Latest Posts Block erstellen möchtest, der die neuesten Blogbeiträge in Echtzeit anzeigt, brauchst du einen dynamischen Block. 

Der Block ist auf PHP angewiesen, da er jedes Mal, wenn er gerendert wird, neue Informationen abrufen muss. Der Schlüssel für die meisten Blöcke, um ihn dynamisch zu machen, ist, seine Speicherfunktion auf null zu ändern. Füge dann Code ein, um den neuen Block anzuweisen, den entsprechenden Inhalt abzurufen. 

Du kannst auch ein Attribut setzen, um den Block anzuweisen, eine bestimmte Anzahl von Beiträgen anzuzeigen.

Hinzufügen von individuellen Einstellungen zu bereits existierenden Gutenberg Blocken

Du kannst auch individuell anpassbare Einstellungen hinzufügen und Änderungen an bestehenden Gutenberg WordPress Blöcken vornehmen. Zum Beispiel kannst du individuell anpassbare Steuerelemente zum erweiterten Block Panel innerhalb der Inspektor Einstellungen eines Blocks hinzufügen. Hierzu hat Jeffrey Carandang eine super Anleitung in seinem Blog geschrieben.

Custom Block Patterns erstellen

Lass uns in diesem WordPress Tutorial für Entwickler:innen einen weiteren Aspekt von Gutenberg erkunden. Mit WordPress Block Patterns kannst du vordefinierte Block Layouts erstellen und teilen. Dabei handelt es sich um eine Gruppierung von WordPress Blöcken, die es dir ermöglichen, mit ein paar Klicks komplexe Layouts zu erstellen.

Auf die Block Patterns kannst du im Bearbeitungsbildschirm für Beiträge/Seiten zugreifen, indem du das + Zeichen drückst. Du siehst dann alle verfügbaren Block Patterns für deine Website. 

WordPress-Gutenberg-Tutorial-Developer

So erstellst du eigene Block Patterns 

Um zu beginnen, erstelle einen Seiten- oder Beitragsentwurf. Füge Blöcke in jeder gewünschten Konfiguration ein. Wenn du z.B. ein Online Magazin betreibst, möchtest du vielleicht ein Seitenlayout für neue Artikel mit prominenten Titeln, Spalten, Bildern und Zitaten erstellen. 

Als Nächstes musst du die Blöcke so gestalten, dass sie so aussehen, wie du es möchtest. 

Der nächste Schritt ist, alles zu kopieren, was du bisher gemacht hast. Klicke alle deine Blöcke an, während du die ALT Taste gedrückt hältst, um sie auszuwählen. Klicke dann auf das Symbol mit den drei gestapelten Punkten (mehr Optionen) in der Werkzeugleiste. Klicke auf Kopieren. 

WordPress-Gutenberg-Tutorial-Developer

Als Nächstes musst du die HTML Ausgabe, die du gerade kopiert hast, entschlüsseln. Um dies zu tun, kannst du das JSON Escape/Unescape Tool verwenden. Kopiere den Result String Code, der nach dem Klick auf Escape erscheint. 

WordPress-Gutenberg-Tutorial-Developer

Jetzt musst du dein neues Block Pattern registrieren. 

Wie du Block Patterns registrierst und unregistrierst

Du kannst ein Custom Block Patterns registrieren, indem du die Block Patterns API verwendest, um den Code, den du oben kopiert hast, in die functions.php Datei deines WordPress Themes einzufügen oder indem du ihn zu einem benutzerdefinierten Plugin hinzufügst.

Du kannst auch das Block Pattern Builder Plugin verwenden, um die Codierungsanforderungen für die Erstellung von Block Patterns zu eliminieren.  

WordPress-Gutenberg-Tutorial-Developer

Wie du den Gutenberg Editor als Theme Entwickler:in nutzt

Gutenberg macht es einfach, benutzerdefinierte WordPress Blöcke zu entwickeln, die das Veröffentlichen von Inhalten zu einem reichhaltigen Erlebnis machen. Du kannst Gutenberg aber auch nutzen, um auf ein separates Page Builder Plugin wie Elementor oder Divi zu verzichten.

Gutenberg kann verwendet werden, um ansprechende Layouts für die Startseite zu erstellen, indem du Blöcke in voller Breite und Breite aktivierst. Oder du kannst ein blockbasiertes Theme von Grund auf erstellen. 

Lass uns ein paar deiner Optionen im Detail besprechen. 

Cover Blöcke für das Hinzufügen von Seitenabschnitten verwenden

Cover Blöcke sind eine neuere Ergänzung zu Gutenberg und sind eine großartige Möglichkeit, verschiedene Abschnitte zu einer Seite hinzuzufügen. Weitere Informationen dazu findest du in diesem Video.

Was sind Cover Blöcke?

Cover Blöcke sind Bildblöcke, über die du Text legen kannst. Sie sind eine großartige Möglichkeit, um Kopfzeilen oder benutzerdefinierte Abschnitte zu erstellen, die du in WordPress Plugins für den Seitenaufbau oder in WordPress Themes finden würdest.

Überlagerungsblöcke, die du hinzufügen kannst, sind:

  • Bildblöcke
  • Video Hintergründe
  • Überschriftenblöcke
  • Absatzblöcke
  • Button Blöcke 

Cover Blöcke machen deine Website vielseitiger. Auf diese Weise kannst du eine individuelle Homepage erstellen. Du könntest sogar ein einfaches WordPress Theme mit einer Kombination aus Cover Blöcken und Block Patterns erstellen. 

Noch umfangreichere Möglichkeiten zur vollständigen Bearbeitung von Websites sind ebenfalls am Horizont zu sehen. Das Team von Make WordPress Design gibt an, dass Template Manipulation, fortgeschrittene Block Patterns und globale Stile die Hauptschwerpunkte sein werden. 

Verwendung des Advanced Custom Fields Plugin 

Eine Einschränkung von Blöcken ist, dass du kein Full Width Layout erreichen kannst: Es wird immer in Boxen sein. 

Mit ein paar geschickten Manipulationen kannst du jedoch das Advanced Custom Fields Plugin verwenden, um benutzerdefinierte Meta Einstellungen hinzuzufügen und Layouts mit voller Breite zu erzwingen. Dies ist essenziell, wenn du Gutenberg nutzen willst, um eigene Themes zu erstellen. 

WordPress-Gutenberg-Tutorial-Developer

Benutzerdefinierte Blockstile verwenden 

Eine weitere Möglichkeit, Gutenberg als Theme Entwickler:in zu nutzen, ist die Verwendung von Custom Block Styles. Sobald du Block Patterns erstellt oder Cover Blöcke verwendet hast, um Seitenabschnitte zu erstellen, kannst du dann Blockstile zu jedem beteiligten Block hinzufügen oder entfernen. 

Du musst den Namen des Blocks kennen, damit du Stile hinzufügen oder entfernen kannst, die mit ihm verbunden sind. Dieser zusätzliche Schritt macht es möglich, dass die benutzerdefinierte CSS Klasse nicht jedes Mal eingefügt werden muss, wenn der Block verwendet wird. 

WordPress Blöcke für Landing Pages und Front Pages

Wir haben bereits erwähnt, wie effektiv Deckblöcke für die Erstellung von Homepages für deine Website oder dein Theme sein können. Sie funktionieren auch hervorragend für Landing Pages. 

Ein paar andere Blöcke, die erwähnenswert sind und bei dieser Aufgabe helfen können, sind: 

  • Galerien
  • Spaltenblöcke
  • Bild-Blöcke
  • Tabellenblöcke
  • Textblöcke

Die meisten Blöcke können in Verbindung mit den Titelbildblöcken verwendet werden, um eine professionell aussehende Homepage zu erstellen. 

Wenn du mehr Funktionen benötigst, kannst du ein Gutenberg Block Plugin hinzufügen, das einen einzelnen Block zu Gutenberg hinzufügt, oder ein Gutenberg Blockbibliothek Plugin, das mehrere hinzufügt. 

Ultimate Addons for Gutenberg und Atomic Blocks sind herausragende Bibliotheksoptionen, die eine einfachere Site Building Erfahrung mit Blöcken für Testimonials, Call to Action, Optionen für Seitenlayouts, Kontaktformulare, Preistabellen und Shortcodes bieten. 

WordPress-Gutenberg-Tutorial-Developer

Plugins sind ideal für diejenigen, die sich mit Gutenberg vertraut machen und Websites entwickeln wollen – ohne dabei viel Code zu verwenden. 

Abschließende Gedanken zu WordPress Blöcken

Der WordPress Gutenberg Block Editor ist jetzt ein Teil des WordPress Core und das Entwicklungsteam hinter WordPress hat große Pläne damit. Letztendlich wirst du Gutenberg nutzen können, um Navigationsmenüs zu erstellen. Und in Zukunft wird der Editor mit noch mehr Themes kompatibel sein.

Mit Hilfe dieses WordPress Tutorials für Entwickler:innen kannst du nun WordPress Blöcke verwenden, um Websites zu erstellen und Inhalte an deine Bedürfnisse anzupassen. 

Du kannst nun WordPress Blöcke von Grund auf erstellen und schließlich ganze WordPress Websites mit dem eingebauten Block Editor erstellen. 
In der Zwischenzeit solltest du sicherstellen, dass die von dir entwickelten Websites bei RAIDBOXES gehostet werden. RAIDBOXES bietet umfassende WordPress Hosting Pakete an, die sowohl für individuelle Websitebetreiber:innen als auch für Agenturen geeignet sind.

Deine Fragen zu Gutenberg Development

Du hast Fragen an Maddy zu dem Gutenberg Guide für Entwickler:innen? Wir freuen uns über deinen Kommentar. Du willst über neue Beiträge rund um WordPress informiert werden? Dann folge RAIDBOXES auf TwitterFacebook oder über unseren Newsletter.

Maddy Osman ist SEO Content Strategist. Sie arbeitet mit ausgewählten Kunden im WordPress- und Webhosting Bereich. Durch ihren Hintergrund in Webdesign und WordPress hat sie ein tiefes Verständnis in SEO – und weiß ganz genau, wie man Marken mit SEO-relevanten Inhalten verbindet.

Ähnliche Artikel

Kommentare zu diesem Artikel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.