WordPress Themes für Gutenberg vorbereiten – so funktioniert’s

Wie bestimmt viele von euch schon wissen, wird es bald einen neuen WordPress-Editor geben. Wir arbeiten momentan daran, unsere ersten WordPress Themes für diesen neuen Gutenberg-Editor vorzubereiten (Gutenberg ist der Projektname für die Entwicklung des Editors).

In unseren WordPress Theme Pukeko haben wir das Gutenberg-Plugin bereits unterstützt. Alle aktuellen Gutenberg-Blocks müssen dabei in den Theme-Styles gestaltet werden, damit die Vorschau des Textes im neuen Editor der späteren Webseitenansicht im Theme entspricht. Da diese Arbeit im Moment auf alle Theme-Autoren zukommt, möchten wir unsere Erfahrungen in einer kleinen Gutenberg Beitragsserie teilen.

1. Gutenberg-Optionen im Theme angeben

Im ersten Schritt kannst du ein paar Einstellungen für Gutenberg über die functions.php Datei deines Themes angeben. Mit dem folgenden Code kannst zum Beispiel bestimmen, ob du die Option für breitere Bilder (full width und fullscreen) in Beiträgen und auf Seiten unterstützen möchtest.

Bilder in Gutenberg
Themenutzer haben die Möglichkeit, breitere Bilder zu integrieren.

Außerdem kannst du eine für dein Theme vorbereitete Farbpalette nutzen. Die Themenutzer sehen dann neben der Option eigene Farben auszuwählen eine Farbpalette, die auf das Theme abgestimmt ist.

Eigene Farben in Gutenberg Blocks

Für die breiteren Bilder, benötigst du den folgenden Code in der functions.php deines Themes (Angaben aus dem WordPress Gutenberg Handbook):

add_theme_support( 'align-wide' );

Eine eigene Farbpalette kannst du mit dem folgenden Codesnippet angeben. Du kannst deinen eigenen Farben dabei auch Namen geben:

add_theme_support( 'editor-color-palette',
        array(
            'name' => 'dark blue',
            'color' => '#1767ef',
        ),
        array(
            'name' => 'light gray',
            'color' => '#eee',
        ),
        array(
            'name' => 'dark gray',
            'color' => '#444',
        )
    );

Der fertige Code für Gutenberg in der functions.php kann dann so aussehen:

/**
* Add support for Gutenberg.
*
* @link https://wordpress.org/gutenberg/handbook/reference/theme-support/
*/
function mytheme_setup_theme_supported_features() {
		
		// Theme supports wide images, galleries and videos.
		add_theme_support( 'align-wide' );
		
		// Make specific theme colors available in the editor.
    add_theme_support( 'editor-color-palette',
        array(
            'name' => 'dark blue',
            'color' => '#1767ef',
        ),
        array(
            'name' => 'light gray',
            'color' => '#eee',
        ),
        array(
            'name' => 'dark gray',
            'color' => '#444',
        )
    );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

2. Gutenberg Standard-Blocks ans Themedesign anpassen

Im nächsten Schritt musst du zusätzliches CSS schreiben, um das Aussehen der Gutenberg Blocks an dein Themedesign anzupassen. Nach der Installation des Gutenberg-Plugins sehen die Blocks normalerweise unabhängig vom installieren Theme immer gleich aus.

Der große Vorteil von Gutenberg liegt aber ja darin, dass wir endlich eine ans Themedesign angepasste Vorschauansicht der Inhalte im Editor anbieten können. Das ging natürlich bis zu einem gewissen Maße auch schon mit den alten Editor, aber erst mit Hilfe des neuen Gutenberg-Editors wird das Erlebnis so richtig benutzerfreundlich.

Gutenberg Editor Ansicht
Ein Blogbeitrag im Gutenbergeditor mit dem Pukeko Theme.

Um die Gutenberg-Blocks für dein Theme umzugestalten, musst du die Standard-Styles von Gutenberg mit CSS überschreiben. Das kann je nach Themedesign einfacher oder aufwendiger werden. Im großen und ganzen sind wir mit unserem Pukeko-Theme recht gut zurechtgekommen.

Wichtig ist zu bedenken, dass einige Block-Styles nicht nur im Editor umgestalten werden müssen, sondern du die neuen Blocks auch noch für die Frontendansicht deines Themes vorbereiten musst (ein gutes Beispiel ist der Cover Image Blog von Gutenberg). Du solltest also alle Blocks Schrittweise durchgehen und dabei auch die unterschiedlichen Block-Optionen beachten. Im Paragraph-Block gibt es z.B. die Optionen unterschiedliche Schriftgrößen zu nutzen und den ersten Buchstaben als „Dropcaps“ anzuzeigen.

In der Editoransicht sind alle Gutenberg-Blocks mit der CSS-Klasse .editor-post-visual-editor ausgestattet. Ich plane in einem nächsten Folge-Blogbeitrag noch genauer auf das CSS-Styling der einzelnen Blocks einzugehen und meiner Erfahrungen hierzu ausführlicher zu teilen. Hilfreich ist auch der Blogbeitrag auf dem Themeshaper-Blog, in dem das Automattic-Themeteam seine Erfahrungen beim der Vorbereitung der ersten WordPress-Themes für Gutenberg teilt.

2.1. Die editor-style.css Datei im Theme angeben

Wichtig ist, alle CSS-Styles für den Editor genau wie beim bisherigen Editor in ein extra Stylesheet im Theme zu verpacken. Bei Pukeko haben wir diese editor-style.css Datei im Ordner assets/css untergebracht.

Du kannst dann wieder über deine functions.php diese Datei aufrufen. Außerdem musst du die in deinem Theme genutzten Schriften auch für den Editor mit angeben. Der Code sieht sollte dann ungefähr so aussehen:

/**
 * Enqueue editor styles for Gutenberg
 */
function pukeko_editor_styles() {
	wp_enqueue_style( 'pukeko-editor-style', get_template_directory_uri() . '/assets/css/editor-style.css' );
	wp_enqueue_style( 'pukeko-fonts', pukeko_fonts_url(), array(), null );

}
add_action( 'enqueue_block_editor_assets', 'pukeko_editor_styles' );

Die Styles für die Gutenberg-Blocks im Frontend deines deines Themes kannst du entweder direkt in die style.css Datei deines Themes schreiben, oder du legst eine extra gutenberg.css Datei an. Im Pukeko Theme haben wir die Styles momentan direkt in unserem Haupt-Stylesheet untergebracht.

3. Was habe ich gelernt

Wir haben unser Pukeko Theme als ersten Test genutzt, um herauszufinden wie aufwendig die Theme-Anpassung für Gutenberg ist. Ich denke, wenn man sich einmal mit den nötigen Styles vertraut gemacht hat, hält sich die Arbeit für Themeautoren noch in Grenzen. Es ist also relativ leicht möglich alle Standard Gutenberg-Blocks in Themes zu unterstützen.

Spannend wird es natürlich, wenn man erste eigene Blocks für Gutenberg anbieten möchte. Darüber werde ich aber in einem weiteren Blogbeitrag mehr schreiben.

Der einzige Schritt, der etwas schwieriger ist, vor allem wenn man eine Sidebar-Option für Seiten und Blogbeiträge anbietet, ist die Gutenberg Block-Option „fullwidth“ und „fullscreen“. Hier muss man darauf achten, das Styling nur anzubieten, wenn die Sidebar nicht im Beitrag angezeigt wird.

Im Pukeko Theme bieten wir optional eine Sidebar auf Blogbeiträgen und auf Seiten an. Daher musste ich eine extra CSS-Klasse nutzen um abzufragen, ob die Sidebar gerade aktiv ist. Die breiten Bilder werden also nur gezeigt, wenn auf der jeweiligen Seite keine Sidebar aktiv ist.

4. Fragen und Feedback

Hast du schon angefangen, das Gutenberg-Plugin auszuprobieren oder hast du vielleicht sogar schon selbst ein Theme für Gutenberg vorbereitet? Welche Fragen haben sich für dich gestellt und welche Erfahrungen kannst du weitergeben. Gefällt dir der neue Gutenberg-Editor oder hast du die neue Editoransicht bisher noch nicht ausprobiert? Schreib mir deine Fragen, deine Tipps und Ideen für weitere Blogbeiträge zum Thema Gutenberg doch einfach in einem Kommentar. Ich freue mich schon, von dir zu hören!

18 Kommentare zu “WordPress Themes für Gutenberg vorbereiten – so funktioniert’s

  1. Hallo Ellen,
    auf einer Testinstallation habe ich schon etwas reingeschnuppert. Habe mich auch gewundert warum die Option für breitere Bilder (full width und fullscreen) in Beiträgen und auf Seiten nicht da gewesen ist. Hatte ich sie doch in einem Gutenberg Video bei dir gesehen. Nach diesem Artikel gehe ich aber nun davon aus, dass die Unterstützung im neuen Pukeko Update dabei ist.
    Insgesamt muss ich bisher sagen, dass mir der Gutenberg Editor ganz gut gefällt. Für Laien wie mich wird er ganz sicher eine Bereicherung sein.

    LG Uwe

    • Nochmal ich. Habe das Update Pukeko 1.1 gerade installiert. Die Option für breite Bilder ist jetzt dabei. Leider werden mir nun auf der Startseite die Beiträge doppelt angezeigt. Als erstes alle in 1 Reihe und danach wie eingestellt 3-spaltig.

      LG Uwe

  2. Hallo,

    also müssen alle Theme-Entwickler/Ersteller, wie zum Beispiel von Themeforest, den (ggf.) mitgelieferten Page-Builder rausnehmen und die Funktionen und Elemente an/auf Gutenberg anpassen? Das würde ich nämlich sehr begrüßen … Kannst du das sicher bestätigen, egal ob ja oder nein? Das wäre nämlich echt gut, da es mittlerweile so viele Unterschiedliche gibt, und viele Themes auch noch Themeeigene entwickeln … Es wäre ja Klasse wenn diese (meine) Probleme damit behoben wären …

    Gruß,
    Fabian

    • Hallo Fabian,

      Gutenberg wird NICHT alle existierenden Pagebuilder ersetzen. Das wäre auch bei deren Anzahl und Komplexität kaum zu erreichen für den WordPress Core. Gutenberg ist eher als eine Art „Light Pagebuilder“ zu verstehen, der grundsätzliche Gestaltungsoptionen in Beiträgen ermöglicht und den zugegebenermaßen veralteten Classic-Editor ersetzen soll.

      Wer bisher ohne den klassischen Editor arbeitet (sondern nur mit Pagebuildern), wird ohnehin nicht von der Änderung auf Gutenberg betroffen sein.

      Gruß, Martin

  3. Rheinlaender

    warum bietet das federführende WordPress Entwickler Team mit dem neuem Upgrade nicht zwei Optionen an, von mir aus Gutenberg für Experimentierfreudige, für „Konservative“ bleibt der gewohnte Editor erhalten. Ich habe jedenfalls keine Interesse daran, ein „running System“ mit einem liebgewonnen Theme aufs Spiel zu setzen. Denke, viele Blogger machen sich Sorgen, dass ihre Websites bei Aktualisierung auf 5.0 crashen. Ich hoffe, es gibt eine „Fork Version“ wie ein anderer kompetenter Blogger folgerichtig einfordert. Nicht nur ich würde dem WordPress Chaos den Rücken kehren.

    • @Rheinlaender:

      Falls Du den Gutenberg-Editor in der neuen WP-Version nicht nutzen möchtest, gibt es das folgende Plugin:
      https://de.wordpress.org/plugins/classic-editor/

      Des Weiteren sollten alte Posts nicht crashen. Beim Gutenberg-Editor – vereinfacht gesagt – ändert sich nur die Art, wie neue Inhalte erstellt werden.

      • Aber wird man nicht, wenn Gutenberg einmal etabliert ist und man Änderungen an älteren Beiträgen vornehmen möchte, diese Beiträge im Sinne des Gutenberg-Editors anpassen müssen? (Weniger besorgt gefragt, als rein wissbegierig – als noch recht frischer Blogger wären es bei mir nicht allzu viele Beiträge, die ich „auffrischen“ müsste, und mir scheint der neue Editor viel Potential für schönere Beiträge zu enthalten).

        Ich kann’s kaum abwarten, endlich mit Gutenberg zu arbeiten – traue mich aber noch nicht, das Plugin zu installieren und habe keine Zeit/Nerven/Skills für eine Testumgebung nur zum Üben. Bin einfach gespannt auf die Umstellung.

    • Ich bin eine Bloggerin, die sich Sorgen macht – Rheinländer, Du sprichst mir aus der Seele!

    • Lieber Rheinlaender,

      deine Meinung zu Gutenberg verstehe ich nicht richtig: Aus Sorge vor möglichen Komplikationen mit Gutenberg lieber das ganze CMS in die Tonne hauen? Was machst du dann mit deinem Blog? Schaffst du dir dadurch nicht das Zehnfache an Problemen?

  4. @ Nick,

    das PlugIn ist eine Beta Version, es wird ausdrücklich darauf hingewiesen diese Ergänzung nicht für Live Websites einzusetzen;-)

    @ Ursula,

    Die WordPress Entwickler orientieren sich m.E. eher an Prestige und Quotentauglichkeit, die tatsächlichen Bedürfnisse vieler Blogger werden nicht berücksichtigt. Auch das Hotlinking Problem sowie weitere Sicherheitsaspekte, die von Nicht Codern einfacher zu handhaben wären, finden in der Elite Class keinen Anklang. Mullenberg geht einen falschen Weg, Instant Providern hinterher zu hecheln.

    Nein, diejenigen, die sich an den Tiny Editor gewöhnt haben und damit solide arbeiten können, sollen nicht einer zusätzlichen Gefahr der Nichterreichbarkeit ihrer Blogs benachteiligt werden. Die Beliebtheit und Verbreitung von WordPress könnte sich rapide umkehren.

  5. Hallo Ellen, danke für Deinen unermüdlichen Einsatz.
    Hast Du schon einen Eindruck davon gewinnen können, wie sich Gutenberg auf „normale“ WordPress-Entwickler bzw. „Customizer“ auswirkt, die z.B. typischerweise ein halbwegs brauchbares Theme ohne Schnickschnack oder ein Starter Theme nehmen, ein Child Theme davon erstellen und dieses dann mit ihren eigenen Ergänzungen erweitern? Z.B. durch overriden von Theme-Files oder noch eher durch „hooken“ in bestimmte Stellen? (nicht zu sprechen von CPT usw.) Ich habe bisher den Eindruck, dass diese Arbeitsweise komplett den Bach runter ist und man als PHP-Entwickler im Grunde seinen Workflow vergessen kann. Warum man für serverseitige Komponenten mit Javascript arbeiten soll, habe ich auch noch nicht wirklich begriffen, ebensowenig, warum ein neuer Backend-Editor jetzt soviel Einfluss auf das Frontend haben soll – ich sehe ab V5 schon vor mir, dass alle neuen Seiten wieder mal genau gleich aussehen, weil sie alle mit den Standardblocks zusammengeschustert sind und die wenigsten in der Lage sind, das zu ändern.

    Ich habe versucht, den Kommentar nicht allzu negativ klingen zu lassen, aber Du bemerkst sicher meine generellen Bedenken. Insgesamt habe ich aber immer noch das Gefühl, dass mir hier etwas entgeht, weil ich mir nicht vorstellen kann, dass hier eine ganze Generation WordPress-Worker abgehängt werden sollen.

  6. Hallo Ellen,

    arbeitet Ihr eigentlich schon an einer Gutenberg-Version von Uku? Wenn ja, wann wird diese veröffentlicht? Mit WordPress 5.0?

    Viele Grüße,
    Nick

  7. der kommende Gutenberg Editor schafft jetzt schon Verdruss und Ärger und einen handfesten Streit bezüglich des Vorwurfs, die DSGVO zu umgehen. Tatsächlich sind die Protagonisten nicht bemüht, den Datenschutz und die Lauffähigkeit von jahrelangen Produktionsseiten sicher zu stellen.

    WordPress goes wrong, ich finde das überhaupt nicht in Ordnung, wie Mullenweg und Google miteinander klüngeln. Wer als Administrator definitiv nicht will, dass ohne seine ausdrückliche Willenserklärung aktuelle WordPress Installationen „mit Dritten“ kommunizieren, der soll zumindest die Möglichkeit haben, nicht authorisierte Datentransfers mit einfachen Mitteln zu unterbinden. Da reichen unmissverständliche Schaltflächen unter Einstellungen aus.

    WordPress ist imho zu einer Experimentierbude verkommen, wo Mullenweg und Konsorten sich gegenseitig beweihräuchern. Ich fürchte, dass sich Blogger mehr nach Alternativen umsehen werden (müssen) Auch hier sind die Nachteile von „Open Source“ eklatant sichtbar, denn viele Köche können den Brei restlos verderben.

    • Lieber Rheinlaender,

      da deine Antworten leider etwas verstreut unter dem Beitrag sind hier noch mal eine Anmerkung zu:

      Du sagst „Auch hier sind die Nachteile von „Open Source“ eklatant sichtbar, denn viele Köche können den Brei restlos verderben.“

      Viele Köche sorgen unentgeltlich und freiwillig dafür, dass das CMS überhaupt leben kann, Sicherheitsupdates zügig umgesetzt werden und das Gesamtsystem sich mit dem Rest der Netzwelt mitentwickelt anstatt im Status Quo zu stagnieren.

      Wer mit der „Experimentierbude“ nicht einverstanden ist, hat schon immer die Möglichkeit gehabt, auf kostenpflichtige CMS (wie bspw. „Craft“) umzusteigen oder eben mit den verbundenen Kosten sich sein eigenes Mini-CMS entwickeln zu lassen. Ganz zu schweigen von der großen Anzahl an weiteren, kostenlosen Open-Source-CMS, unter denen man frei wählen kann.

      Ich kann verstehen, dass nicht jedem jede Änderung am WordPress Core gefallen kann (und auch nicht muss!), aber den vielen Machern dahinter eine mutwillige Absicht und schlechte Intentionen anzudichten, während man selbst seit geraumer Zeit kostenlos und ohne eigenen Einsatz von deren Arbeit profitiert, halte ich für unfair.

      Be the change you want to see.

  8. Hallo Ellen,

    ich setzte Eurer Theme Baylys seit mehreren Jahren erfolgreich für mehrere Websites ein.

    Wird es für dieses Theme ein Gutenberg Update geben? Wenn ja, wann rechnest Du damit?

    Viele Grüße
    Wolf

    • Hallo Wolf,
      ja, auf jeden Fall. Wir werden all unsere Themes Schritt für Schritt für Gutenberg vorbereiten. Ich schreibe in den kommenden Tagen auch noch einen Blogbeitrag zum Thema Gutenberg + Elmastudio Themes.
      Viele Grüße und es freut mich, dass dir Baylys weiter gefällt.
      Ellen

  9. Hallo Ellen,

    danke für die Darstellung.
    Als „einfacher“ WP-Nutzer habe ich mit dem Block-Konzept keine Probleme (und eigene themes erstelle ich nicht, nur ein child). Allerdings sehe ich bisher keine Möglichkeit, Buttons für hoch- und tiefgestellt in den Editor zu integrieren. Bei TinyMCE ging das und da meine Texte oft „CO2“ enthalten, ist das für mich wichtig. Siehst du eine Möglichkeit?
    Gerade habe ich einen ersten post mit Gutenberg (Version 3.5.0) erstellt und veröffentlicht und jetzt ein erstes echtes Problem gefunden: Der automatische Newsletterversand funktioniert nicht. Wahrscheinlich gibt es auch noch Konsequenzen für plugin-Entwickler…

  10. ich habe keine Lust auf Experimente und Warten auf Fehlerbereinigungen, denn Gutenberg wird die Blogger auf Trab halten. Deswegen das Angebot mit Version 4.9.8 wahrgenommen und den Classic Editor aktiviert. Bin gespannt ob die Wahl auf Fortsetzung der TinyE Umgebung mit Erscheinen von Version 5.0 noch Bestand haben wird. Das Erzwingen mit späteren Versionen auf Gutenberg hat mit der sprichwörtlichen Open Source Demokratie nichts mehr gemein. Bisher zeigt sich die Begeisterung für die Block Technologie in Grenzen. Das zeigt sich auch bei weiteren PlugIn Autoren, die Gutenberg vollständig verbannen wollen.

Hinterlasse eine Antwort

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