Arbeiten mit Gutenberg: Block-Styles und Block-Patterns
Veröffentlicht am 20.04.2023 von Kirsten Schelper
In diesem Artikel möchte ich zwei Konzepte vorstellen, über die Sie mit dem Gutenberg-Editor schöne, anspruchsvolle Designs umsetzen können. Über Block-Styles können Sie einem Gutenberg-Block ein individuelles Design mitgeben. Mit Block-Patterns stellen Sie in Ihrem Projekt wiederverwendbare Layoutvorlagen zur Verfügung. Wenn Sie gute Grundkenntnisse in CSS und HTML haben, können Sie Block-Styles und Block-Patterns selbst in Ihr Theme einbauen. Alternativ können Sie sich ein Theme suchen, in das die Autor*innen Block-Styles und Block-Patterns bereits integriert haben.
Block-Styles
Gutenberg bringt einige Block-Styles schon mit. So gibt es z.B. für den Zitat-Block zwei unterschiedliche Designs. Links ist ein Zitat im Standard-Design zu sehen, rechts eine alternative Variante mit größerem Text:
Auch den Button-Block gibt es in zwei Versionen, einmal mit Hintergrundfarbe und einmal mit transparentem Hintergrund:
Alle Block-Styles werden in der rechten Seitenleiste angezeigt. Für jeden Block-Style wird automatisch ein kleines "Thumbnail" generiert, so dass man das Aussehen des Designs gut erkennen kann.
Ein Gutenberg-Block kann mehrere Designvarianten haben. Über das Dropdown-Feld „Standard-Stil“ kann man festlegen, welches Design beim Einfügen des Blocks standardmäßig ausgewählt werden soll.
Was ist der Unterschied zwischen Block-Styles und Custom CSS?
Eine Designvariante für einen Block könnte man auch über eine zusätzliche CSS-Klasse umsetzen. Diese Klasse trägt man unter „Erweitert/Zusätzliche CSS-Klassen” ein.
Dazu muss die CSS-Klasse natürlich im Theme-CSS (style.css) vorhanden sein.
Die Arbeit mit CSS-Klassen empfinde ich persönlich als wenig intuitiv. Das Feld für die zusätzlichen Klassen liegt etwas versteckt.
Wenn man nach einer Weile, in der man nicht mehr am Projekt gearbeitet hat, den Faden wieder aufnimmt, übersieht man leicht, dass eine CSS-Klasse im Einsatz ist. Außerdem sieht man den Effekt, den das CSS hat, nur im Frontend. Wenn man möchte, dass das Design auch im Backend angezeigt wird, muss man zusätzlich zum Theme-CSS auch die Editor-Styles ergänzen.
Block-Styles sind hier intuitiver und einfacher in der Handhabung. Man sieht auf den ersten Blick, welche Varianten es gibt. Niemand muss sich die Namen von CSS-Klassen merken, und die Entwickler*innen müssen nicht eigens dafür sorgen, dass das CSS sowohl im Backend als auch im Frontend auftaucht. Das passiert bei den Block-Styles automatisch.
Beispiel 1: Absatz als Box
Technische Anmerkung: Meistens werden Block-Styles in ein Plugin ausgelagert. Diesen Ansatz verfolge ich auch hier. Auf diese Weise kann man Block-Styles über mehrere Projekte hinweg verwenden.
Ich möchte zum normalen Absatz-Block eine Designvariante mit einem roten Hintergrund hinzufügen. Der Absatz-Block soll so aussehen:
Die Datei-Struktur
Für die Block-Styles brauchen wir drei Dateien:
- eine PHP-Datei (index.php)
- eine CSS-Datei (block-styles.css)
- eine JavaScript-Datei (blocks.js)
|── ks-block-styles
|── blocks.js
|── block-styles.css
|── index.php
Das CSS
Als erstes überlege ich mir mein CSS. Die Box soll eine rote Hintergrund-Farbe bekommen. Den Text möchte ich zentriert ausrichten.
Das würde so aussehen:
.paragraph-red-box {
padding: 1em;
background-color: #dc143c;
color:white;
text-align: center;
border-radius:6px;
}
Für die bessere Lesbarkeit verwende ich im Namen der CSS-Klasse den Namen des Blocks (paragraph) und kombiniere ihn mit einem Stichwort zur Designvariante (box). Dieses CSS speichere ich in einer Datei namens block-styles.css.
Das JavaScript
Als nächstes brauche ich eine JavaScript-Datei. Da steht nicht viel drin außer dem Namen der CSS-Klasse paragraph-box und einer kurzen Beschreibung (Rote Box). Und natürlich findet sich dort auch die Bezeichnung des Blocks, auf den die Block-Styles angewendet werden sollen. In unserem Fall ist das der Absatz-Block core/paragraph.
wp.blocks.registerBlockStyle( 'core/paragraph', {
name: 'paragraph-red-box',
label: 'Rote Box'
} );
Die PHP-Datei
Es geht weiter mit der index.php. Das ist unsere Haupt-Plugin-Datei. Sie enthält auch den Plugin-Header, damit unser Block-Styles-Plugin als Plugin erkannt wird.
In dieser Datei binde ich die JavaScript-Datei und die CSS-Datei über die Hooks enqueue_block_assets und enqueue_block_editor_assets ein.
Eine Sache noch: Wir müssen eine kleine Änderung in der CSS-Datei machen. Damit das CSS von WordPress korrekt gelesen wird, muss man vor den Namen der CSS-Klasse ein is-style setzen.
Das fertige CSS sieht also so aus:
.is-style-paragraph-red-box {
padding: 1em;
background-color: #dc143c;
color:white;
text-align: center;
border-radius:6px;
}
Block-Styles anwenden
Wenn ich jetzt in den Editor gehe und den Absatz-Block wähle, taucht in der rechten Seitenleiste unter „Block/Styles“ ein zusätzliches Design auf, das ich auswählen kann.
Das neue Absatz-Design erscheint im Editor unter „Block/Styles“.
Beispiel 2: Liste mit grünen Häkchen
Wenn die Grundstruktur von meinen Block-Styles steht, kann ich ganz leicht weitere Block-Styles hinzufügen.
Dazu muss ich lediglich die CSS-Datei und die JavaScript-Datei um die Anweisungen für die zusätzlichen Styles ergänzen. An der PHP-Datei muss ich nichts verändern.
Angenommen, ich möchte eine Liste haben, die so aussieht:
Dann ergänze ich mein JavaScript und CSS um die entsprechenden Anweisungen.
JavaScript:
//List with checkmarks
wp.blocks.registerBlockStyle( 'core/list', {
name: 'checkmark-list',
label: 'Liste mit Häkchen',
} );
CSS:
/*List with checkmark */
.is-style-checkmark-list {
list-style: none !important;
padding-left: 0;
}
.is-style-checkmark-list li:before {
content: '✔';
padding-right: 0.5em;
}
Die Block-Styles für die Liste sind jetzt in der Sidebar des Editors sichtbar.
Hier der vollständige Code der beiden Block-Styles als Plugin:
Wo kommen Block-Styles zum Einsatz?
Immer dann, wenn man eine Variante eines Gutenberg-Blocks braucht, die sich gut per CSS umsetzen lässt, sind Block-Styles die Methode der Wahl. Mit Block-Styles können Sie das Aussehen von jedem Gutenberg-Block individualisieren.
Block-Styles sind gut für Websites geeignet, an denen Redakteure arbeiten, die einfach nur den Gutenberg-Editor anwenden möchten.
Block-Styles beziehen sich immer nur auf einen einzelnen Block. Möchte man mehrere Blöcke kombinieren und dieser Kombination ein individuelles Aussehen geben, dann kommt eine Block-Pattern in Frage.
Block-Patterns
Block-Patterns sind Layout-Vorlagen, wie man sie aus der Welt der Page-Builder kennt. In den Vorlagen werden mehrere Blöcke miteinander kombiniert. Mit diesen Vorlagen lassen sich anhand von wenigen Klicks anspruchsvolle Layouts aufbauen.
Ich möchte zwei Beispiele zeigen: einmal ein Testimonials-Modul und einmal eine Preistabelle. Für jedes Modul werde ich jeweils eine Block-Vorlage (die deutsche Übersetzung für Block-Pattern) erstellen.
Beispiel 1: Testimonials
Ich verwende für diese Block-Pattern eine Kombination von Standard-Modulen. Ich arbeite ohne zusätzliches CSS.
Im ersten Schritt baue ich meine Testimonial-Modul ganz normal im Gutenberg-Editor auf. Ich füge eine Überschrift ein, lege drei Spalten an und setze in jede Spalte einen Zitat-Block.
Abschließend gruppiere ich das Modul. Der Gruppe gebe ich eine CSS-Klasse mit, für den Fall, dass ich das Modul doch einmal per CSS ansprechen möchte.
Schritt 1: Block-Vorlage per Funktion registrieren
Als nächstes registriere ich die neue Block-Vorlage per Funktion. Das kann ich in der functions.php direkt im Theme machen. Ich könnte auch ein Plugin für die Block-Patterns schreiben. Dann sind die Patterns für mehrere Projekte nutzbar.
Die Funktion, mit der die Block-Pattern registriert wird, heißt register_block_pattern. Jede Block-Pattern hat einen Titel (title), eine Beschreibung (description), und man kann die Kategorie (category) definieren, unter der die Vorlage erscheinen soll. Und einen Inhalt (content) hat die Vorlage natürlich auch.
register_block_pattern( 'beispiel', array( 'title' => The visible name in the editor, 'viewportWidth' => The width of the pattern preview (int), 'categories' => An array of categories, 'description' => A description of the pattern, 'keywords' => An array of keywords used in the search, 'content' => The block comment and markup, ) );
Beispiel aus https://fullsiteediting.com/lessons/introduction-to-block-patterns/.
Schritt 2: Block-Code kopieren
Jetzt brauchen wir noch den Code für die Vorlage. Dazu gehe ich an die Stelle, wo ich die Block-Vorlage erstellt habe (ein Beitrag oder eine Seite) und schaue mir den Beitrag in der Code-Editor-Ansicht von Gutenberg an. Diese Ansicht erreichen Sie über die drei Pünktchen ganz rechts oben.
Jetzt noch die Block-Pattern suchen und den entsprechenden Bereich in die Zwischenablage kopieren.
Schritt 3: Code in die Funktion kopieren
Den Code-Schnipsel füge ich jetzt an der Stelle in der register_block_pattern-Funktion ein, wo content steht.
Damit ist die Block-Vorlage fertig. Sie erscheint jetzt im Editor unter „Vorlagen“.
Der Code für meine Testimonials-Vorlage sieht im Ganzen so aus:
Beispiel 2: Preistabelle
Bei dieser Vorlage setze ich zusätzliches CSS ein. Dieses CSS muss im Theme vorhanden sein. Wenn ich also die Block-Vorlage per Plugin einbauen würde, müsste ich dem Plugin eine CSS-Datei mit den notwendigen Styles mitgeben.
Registriere ich die Vorlage direkt im Theme, muss das CSS im Theme-CSS (style.css) und in den Editor-Styles enthalten sein. Fehlt das CSS in den Editor-Styles, wird die Vorschau im Inserter nicht richtig angezeigt.
Grundlage der Pattern ist wieder der Spalten-Block mit drei Spalten. In jede Spalte kommen fünf Blöcke: Die erste Zeile ist eine Überschrift, darauf folgen drei Absatz-Blöcke und ein Button.
Ich gruppiere sowohl die drei inneren Blöcke als auch das gesamte Module. So kann ich jeweils eine CSS-Klasse vergeben, über die ich die Elemente gut ansprechen kann.
Das CSS:
Hier der Code für die beiden Block-Patterns, Testimonials und Preistabelle:
Beide Vorlagen erscheinen jetzt in der Auswahl für die Vorlagen.
Core-Patterns deaktivieren
In der Regel braucht man die Core-Patterns nicht, die Gutenberg standardmäßig mitbringt. So können Sie sie deaktivieren:
function removeCorePatterns() {
remove_theme_support('core-block-patterns');
}
add_action('after_setup_theme', 'removeCorePatterns');
Patterns-Kategorien deaktivieren und eigene Kategorien erstellen
Auch die Standard-Kategorien kann man deaktivieren, wenn man sie nicht nutzen möchte.
So erstellen Sie eine eigene Kategorie für Ihre Block-Patterns:
Wo kommt die Funktion für die Block-Patterns hin?
Den Code zu Block-Patterns können Sie direkt in die functions.php von Ihrem Child-Theme einfügen. Das ist aber ein bisschen unpraktisch, weil die functions.php dadurch recht unübersichtlich wird.
Es bietet sich daher an, die Block-Patterns in ein eigenes Funktions-Modul auszulagern. Dieses Modul kann man dann per require in die functions.php des Themes einbinden.
require get_template_directory() . '/inc/block-patterns.php';
Eine weitere Option wäre, für die Organisation der Block-Patterns ein Plugin zu nutzen, das solche und ähnliche Code-Schnipsel verwaltet. Meine Empfehlung dafür wäre das Plugin Code Snippets.
Der Unterschied zwischen Block-Patterns und wiederverwendbaren Blöcken
Wenn man eine Block-Pattern wählt und in eine Seite einfügt, wird die Pattern damit Teil der Seite. Die Block-Pattern ist nach dem Einfügen nicht mehr mit der Vorlage verknüpft. Würde irgendjemand die Vorlage nachträglich ändern, würde man davon auf den Seiten nichts merken.
Bei wiederverwendbaren Blöcken ist das anders. Diese Blöcke sind für Elemente gedacht, die mehrfach auf Ihrer Website vorkommen und überall identisch ausschauen und denselben Inhalt haben.
Ein Beispiel wäre ein Block mit Ihrer Telefonnummer. Der Block sieht überall gleich aus und hat denselben Inhalt. In Wirklichkeit handelt es sich hier um immer denselben Block. Er ist nur mehrfach verknüpft. Ändern Sie die Telefonnummer, dann ändert sich die Nummer in allen vorkommenden Verknüpfungen.
Block-Patterns – Bedeutung und Ausblick
Ich habe von Anfang an gern mit Gutenberg gearbeitet. Kam ich einmal mit den Standard-Einstellungen eines Blocks nicht weiter, habe ich mir schnell ein paar Zeilen CSS geschrieben. So konnte ich eigentlich so gut wie alles mit Gutenberg umsetzen, was ich gerne machen wollte.
Viele Anwender*innen erleben das anders. Sie kommen ein Stück weit voran – und bleiben dann stecken. Weil sie einen Abstand nicht hinbekommen oder eine Farbe nicht so vergeben können, wie sie möchten. Viele geben an dieser Stelle frustriert auf und gehen zurück zu ihrem gewohnten Page-Builder-Theme.
Page-Builder haben für jedes Modul Einstellungsoptionen für alle Details. Da ist Gutenberg (noch) nicht. Es fehlen nach wie vor die kleinen Einstellungsoptionen bei den Blöcken.
Aber die Optionen werden mehr. Mit jedem Release gibt es Verbesserungen und Ergänzungen.
Schnell komplexe Layouts bauen
Theme-Autor*innen können ihren Themes jetzt schöne Block-Patterns mitgeben, mit denen auch Laien anspruchsvolle Layouts bauen können.
Für die Anwender sind Block-Patterns super-einfach zu handhaben: Vorlage auswählen, Content anpassen, fertig. Wenn man so ein Layout-Modul jedes Mal von Hand erstellen müsste, wäre das ziemlich mühsam.
Block-Patterns sind sehr leicht zu erstellen. Man muss sich nicht mit React, JavaScript und der Gutenberg-API herumschlagen. Jeder, der mit einem Code-Editor umgehen kann, kann diese Funktion nutzen.
Stabiler Demo-Content
Für Theme-Autor*innen haben die Block-Patterns den Vorteil, dass sie damit ihrem Theme standardkonformen Demo-Content mitgeben können, der gut funktioniert. Vorbei die Zeiten, in denen Theme-Autor*innen mit immer neuen Kombinationen von Customizer-Optionen, Shortcodes und Theme-Options herumexperimentieren mussten. Irgendwas funktionierte immer nicht und für die Anwender*innen war es entsprechend schwer, die versprochene Design-Vorlage nachzubilden.
Wir brauchen weniger Custom Blocks
Es gibt unzählige Plugins, über die man sich zusätzliche Gutenberg-Blöcke in die Website holen kann. Meistens handelt es sich um Sets mit mehreren Blöcken. Braucht man nur einen davon, muss man damit leben, dass noch zehn andere Blöcke den Inserter bevölkern, die man überhaupt nicht braucht. Das ist auf die Dauer ziemlich nervig.
Problematisch ist auch, dass viele dieser Plugins das Rad neu erfinden. Ich glaube nicht, dass die Welt 20 Überschriften-Blöcke braucht, die sich jeweils als eigener Block präsentieren, aber in Wirklichkeit nur eine einfache Variante des Überschriften-Blocks sind.
Auch komplexere Layout-Module, wie z.B. Hero-Banner, Testimonials oder Preistabellen, lassen sich sehr gut mit Gutenberg-Bordmitteln und Block-Patterns umsetzen.
Ein speziell dafür programmierter Block ist nicht notwendig. Im Gegenteil. Ein Modul, das in einen Custom Block gegossen ist, ist recht unflexibel. Mal eben eine Kleinigkeit ändern, geht leider nicht. Wird das selbe Module mit einer Block-Pattern umgesetzt, kann man das Modul jederzeit anpassen.
Der Block-Editor und die Zukunft von WordPress – Experten-Tipps zum Gratis-Download
Block-Styles und Block-Patterns - Fazit
Mit Gutenberg werden Layout-Funktionen ins WordPress-System integriert, die man bisher nur mit einem Page-Builder umsetzen konnte.
Ein wichtiger Aspekt dabei ist, dass Gutenberg fester Bestandteil von WordPress ist. Während Page-Builder-Plugins und Theme-Plugin-Pakete, wie z.B. Avada oder Divi, von freien Entwicklern entwickelt und gepflegt werden, wird Gutenberg vom gesamten WordPress-Ökosystem getragen.
Das ist wichtig für die Planungssicherheit. Bei kommerziellen Themes oder Plugins kann es immer sein, dass die Autor*innen ihr Produkt eines Tages nicht weiterführen. Bei Gutenberg besteht diese Gefahr nicht.
Locked-in-Effekt
Ein weiterer Aspekt, der für die Projektplanung wichtig ist: Aus einem Page-Builder kann man nicht so einfach aussteigen. Passt der Page-Builder eines Tages nicht mehr, muss man die Website neu aufbauen und z.B. die Inhalte Seite für Seite per Hand übertragen. Das gilt für alle Fälle, ob man von Page-Builder A auf Page-Builder B umsteigen will oder ob man zu Gutenberg wechseln möchte.
Auch im Gutenberg-Umfeld ist ein Theme-Wechsel mit Arbeit verbunden. Mal eben schnell ein neues Theme aktivieren und alles ist gut, das klappt eher selten.
Aber alle Gutenberg-Blöcke funktionieren mit jedem standardkonformen Theme. Nach dem Theme-Wechsel ist noch alles da. Keine Inhalte gehen verloren, man muss lediglich das Design anpassen.
Reise in die Zukunft mit leichtem Gepäck
Gutenberg ist schlank und modern. Die HTML-Struktur ist weit weniger komplex und verschachtelt als die eines Page-Builders. Für schnelle Ladezeiten ist das ein unschätzbarer Vorteil.
Mit einer Kombination von Block-Styles und Block-Patterns kommt man sehr weit. Man kann damit schöne, individuell gestaltete Websites umsetzen.
Titelmotiv: Pixabay
Der Autor:
