Internetkurse Köln

Seit WordPress 5.5, also seit Sommer 2020, bietet WordPress mit dem Gutenberg Editor die sogenannten Block Vorlagen (oder auch Block Patterns). Seither erleichtern diese meist verschachtelten Konstruktionen die Arbeit mit dem Block Editor. WordPress und wahrscheinlich auch Ihr Theme bieten schon so einige Vorlagen. Aber auch Sie können für Ihre WordPress Website eigene Block Vorlagen erstellen. Und auch wenn das Vorgehen von Ihnen ein wenig Geschick im Umgang mit Code verlangt, ist es doch machbar.

Block Vorlagen – was ist das?

Block Vorlagen sind auf jeden Fall mal eine enorme Erleichterung. Das merke ich immer wieder, wenn ich Kund/innen anleite, eine solche verschachtelte Konstruktion zu erstellen. Sprich: einen Block zu nehmen – sagen wir: den Medien und Text Block – und ihn zu gruppieren. Als Erstes stellt sich dann immer die Frage, warum es überhaupt diese Gruppierung braucht. Und in der Bearbeitung ist es die Verwirrung, welches Element Sie da eigentlich gerade ansprechen.

Im Laufe der Zeit hat sich im Gutenberg Editor so einiges getan, aber im Endeffekt braucht es noch immer etwas Übung, um damit zurechtzukommen. So gesehen sind die Block Vorlagen also gar nicht so hilfreich. Halten sie einen nämlich davon ab, sich weitere Gedanken über die Möglichkeiten der Gruppierung zu machen. Denn natürlich arbeiten viele Vorlagen mit Gruppierungen.

Das ist ja die Idee hinter den Block Vorlagen. Sie sind keine neuen Blöcke. Sie bieten nur unterschiedliche Möglichkeiten, Text, Bild und andere Elemente ansprechend auszugeben.

Hierfür bringt WordPress von Haus aus einige Vorlagen mit. Hinzu kommen solche, die das Theme bereitstellt. Zudem gibt es Plugins, die weitere Vorlagen liefern. Und schließlich können Sie auch eigene WordPress Block Vorlagen erstellen.

So erstellen Sie Ihre erste Block Vorlage

Wenn es Ihnen wie mir geht und Sie auf Ihrer Website öfter mal den neuen Abfrage Block einsetzen und dessen Ausgabe auf einem farbigen, die volle Breite nutzenden Hintergrund darstellen wollen, lohnt es sich, dafür eine Block Vorlage zu erstellen.

Wichtig: Für das Erstellen von Block Vorlagen im Rahmen Ihres WordPress Themes ist es nötig, ein Child Theme zu erstellen. Ansonsten ist Ihre für das Vorgehen nötige Registrierung der Vorlagen nach dem nächsten Theme Update verschwunden.

1. Sie erstellen eine gruppierte Abfrage

Der erste Schritt zur eigenen Block Vorlage für gruppierte Abfragen hat nichts mit Code zu tun. Hierfür nutzen Sie einen x-belieben Beitrag oder irgendeine Seite (beide bestenfalls noch im Entwurf) und erstellen eine Abfrage.

Dazu wählen Sie den Abfrage Loop Block und nutzen eines der vorhandenen Muster oder erstellen mittels der vielen Beitrags Blöcke ein eigenes.

In meinem Fall habe ich die erste Option des Abfrage Loop Blocks gewählt und diese weiter bearbeitet. Meine Abfrage zeigt nun also immer nur die aktuellsten drei Beiträge an. Dafür gebe ich das Beitragsbild, den Beitragstitel und das Beitrags-Excerpt (allerdings ohne Weiterlesen-Button) aus.

Welche drei Beiträge dies bei Ihnen sind, ist erst einmal völlig egal. Filtern können Sie noch später. Im Moment geht es viel mehr um das Muster, nach dem die Ausgabe gestrickt sein soll, denn um konkrete Inhalte.

Für die Darstellung habe ich die Grid-Option gewählt und die Spaltenanzahl auf 3 gestellt. Außerdem habe ich Weiß als Hintergrundfarbe gewählt. Dem Abfrage Loop Block können Sie auch die Ausrichtung »weite Breite« geben, müssen es aber nicht, wenn Sie diesen Block nun gruppieren.

Denn nun gilt es, den Abfrage Loop Block in eine Gruppe umzuwandeln. Die Gruppe bekommt eine Hintergrundfarbe (dieses dezente Twenty Twenty-One Gelb oder eine andere Farbe). Außerdem stellen Sie hier die Ausrichtung auf volle Breite. Schließlich können Sie der Gruppe auch noch eine CSS Klasse geben – ich nenne sie .abfragegruppe. So ist es später leichter möglich, nur diese Abfragegruppen mit zusätzlichem CSS zu verändern.

Anmerkung: Diese Angaben beziehen sich auf das Theme Twenty Twenty-One. Bei anderen Themes (zum Beispiel Twenty Nineteen) mag es nötig sein, dem Abfrage Loop Block die Ausrichtung »weite Breite« zu geben, damit alles gut aussieht. Bei wiederum anderen Themes mag das Ganze gar nicht gut funktionieren. Es kommt halt darauf an, wie gut das Theme seinen Gutenberg kennt.

2. Sie lassen sich Ihre Arbeit im Code Editor anzeigen

Wenn Sie mit dem Ergebnis zufrieden sind, rufen Sie Ihre Arbeit mit dem Code Editor auf. Zu dieser Option gelangen Sie über den Ansicht anpassen Button (die drei vertikalen Pünktchen) ganz oben rechts neben dem Veröffentlichen / Aktualisieren Button.

Nun sehen Sie Ihren Beitrag / Ihre Seite in der Code Ansicht. Die besteht aus HTML und sogenannten Kommentaren. Alles hat was mit spitzen Klammern zu tun.

Ihr Code beginnt also mit dem Kommentar <!-- wp:group {"align":"full","backgroundColor": ... und endet auf den Kommentar <!-- /wp:group -->

Und genau diesen Code brauchen Sie, denn der macht den content für die Registrierung Ihrer Block Vorlage aus.

3. Sie denken sich einen eindeutigen Namen für Ihre Vorlage aus

In meinem Fall lautet die Bezeichnung: abfrage-gruppe-pattern. Ich hätte das Ganze aber auch katzen-sind-toll nennen können. Wesentlich ist nur, dass die Funktion einen eindeutigen Namen hat.

4. Sie registrieren Ihre Block Vorlage

Nun erstellen Sie für Ihre Block Vorlage die Registrierung. Diese erfolgt im Rahmen der functions.php Ihres Child Themes. Für das Erstellen eigener Block Vorlagen bietet WordPress eine Funktion. Sie heißt register_block_pattern.

Zu dieser Funktion gehört eine Anordnung (Array) von Eigenschaften:

register_block_pattern(
	'NAME-DER-VORLAGE',
	array(
		'title'         => (notwendig) der sichtbare Name im Editor,
		'categories'    => (optional) Kategorien, unter denen die Vorlage erscheinen soll,
		'description'   => (optional) Beschreibung der Vorlage,
		'keywords'      => (optional) Keywords, die in der Suche genutzt werden,
		'viewportWidth' => (optional) die Breite der Vorlage in der Vorschau (intern),
		'content'       => (notwendig) Code (HTML mit Kommentaren) der gruppierten Abfrage,
	)
);

Sie sehen: Nicht alle sind notwendig. Die Breite des Viewports halte ich zum Beispiel für überflüssig. Manche klingen sogar erst einmal verwirrend. So haben categories und die keywords nichts mit den Kategorien und den Schlagwörtern zu tun, die Sie für Ihre Blogbeitrage angelegt haben. Dennoch können sie hilfreich sein.

Vorteile von keywords und categories

Nehmen wir die keywords. Wenn Sie Ihre Block Vorlage mit »Katzen« verschlagworten, dann finden Sie Ihre Vorlage schneller. Gewiss wird es keine weitere Vorlage geben, die so verschlagwortet wurde. »Hunde« dürften allerdings auch funktionieren.

Hilfreich ist dieses Keyword auch insofern, als Sie Block Vorlagen nicht durch die Eingabe von »/ …« schnell aufrufen können. Ist halt nur eine Vorlage und kein neuer Block.

Auch die categories dienen dem Auffinden der gewünschten Block Vorlage. Hier geht es allerdings mehr um das Sortieren. Eine Vorlage wie die hier geplante – eine gruppierte Abfrage – ließe sich also gut unter der Kategorie »Abfrage« (query) ablegen. »Spalten« (columns) bieten sich auch an. »Buttons« hingegen eher weniger.

Diese Kategorien finden Sie direkt unterhalb des Tabs für die Vorlagen. Bei Twenty Twenty-One erscheinen dort immer als Erstes die theme-eigenen Vorlagen. Die Registrierung einer eigenen Kategorie ist auch möglich, erscheint mir aber übertrieben, solange Sie nicht reihenweise eigene WordPress Block Vorlagen erstellen wollen. Ansonsten beginnt die Liste mit den Buttons.

Ich habe mich jedenfalls für die Vergabe von Werten für die optionalen Eigenschaften Beschreibung, Kategorien und Schlagwörter entschieden.

Content der Registrierung in einfachen Anführungszeichen

Haben Sie nun mindestens mal den Titel, bei Bedarf auf eine Beschreibung, Keywords und Kategorien, folgt nun der wesentliche Part: Ihr Content. Also der Code Ihrer Abfragegruppe, die Sie erstellt haben.

Wenn Sie sich wie ich das Leben extrem erleichtern wollen, dann beginnen und beenden Sie diesen Code nicht mit doppelten, sondern mit einfachen Anführungszeichen.

Wenn Sie sich an den WordPress Codex halten, müssten Sie doppelte Anführungszeichen benutzen und dann jedes doppelte Anführungszeichen, das in Ihrem Code vorkommt, mit einem Backslash maskieren. Dabei kann es aber schnell zu Fehlern kommen, die WordPress dann auch gerne mal als fatal betrachtet.

Steht der Code für den Content hingegen in einfachen Anführungszeichen, brauchen Sie an Ihrem Code gar nichts mehr zu ändern. Sie kopieren ihn einfach zwischen die beiden einfachen Anführungszeichen.

Meine Registrierung sieht so aus:

// Block Vorlage für gruppierte 3-spaltige Abfragen
register_block_pattern(
    'abfrage-gruppe-pattern',
    array(
        'title'       => __( 'Abfragegruppe' ),
        'description' => _x( 'Abfrage mit drei Spalten' ),
        'categories'  => array( 'query', 'columns' ),
	'keywords'    => array( 'abfrage', 'gruppe', 'katzen' ),
        'content'     => '<!-- wp:group {"align":"full","backgroundColor":"yellow","className":"abfragegruppe"} --><div class="wp-block-group alignfull abfragegruppe has-yellow-background-color has-background"><!-- wp:query {"queryId":7,"query":{"perPage":"3","pages":0,"offset":"0","postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide","backgroundColor":"white"} -->
<div class="wp-block-query alignwide has-white-background-color has-background"><!-- wp:post-template -->
<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->',
    )
);

Eigene Block Vorlagen im Einsatz

Ihre eigenen Block Vorlagen können Sie nun überall nutzen. Ob auf Seiten, Beiträgen oder im Rahmen von Custom Post Types – sobald Sie Ihre Block Vorlage einbinden, wird sie so aussehen, wie Sie sie definiert haben.

Aber das muss nicht so sein. Der Vorteil von Block Vorlagen im Gegensatz zu wieder verwendbaren Blöcken ist nämlich, dass Sie die Vorlage für den konkreten Einsatz auch verändern können. Eine andere Hintergrund- oder Schriftfarbe. Eine andere Ausrichtung. Oder auch die Modifikation der Abfrage: statt Beiträge ein Custom Post Type. Ein anderer Filter. Das alles ist möglich, ohne dass Sie die Block Vorlage an sich verändern. Sie verändern nur die Instanz, die Sie gerade bearbeiten.

Mit anderen Worten: Sie können aus dieser Block Vorlage im Einzelfall auch eine Abfrage Ihrer zehn Top-Produkte als Zweispalter vor schwarzem Hintergrund machen – ohne dabei die Vorlage an sich zu verändern.

Auch lässt sich der Code für diese gruppierte Abfrage durchaus im Rahmen eines anderen Themes benutzen. Allerdings hat diese Übertragbarkeit ihre Grenzen. Nicht jedes Theme kommt damit so gut klar wie eines der Twenty-Standardthemes. Deshalb halte ich es auch nicht für nötig, das Ganze als Plugin anzulegen.

Das bedeutet aber auch, dass Sie beim Themewechsel die Block Vorlage für das neue Theme erst einmal registrieren müssen.

CSS für die Block Vorlage gruppierte Abfrage

Nun hatte ich meiner Block Vorlage eine eigene Klasse gegeben. Bei mir liegt es nur an dem Innenabstand der Gruppe, der mir zu klein ist. Zumindest der Vor- und der Nachabstand könnten für meinen Geschmack etwas größer sein.

Solche Anpassungen können dann gerade im Rahmen eines Themewechsels noch bedeutsamer werden. Deshalb ist es gut, wenn es eine solche Klasse gibt.

Im Rahmen meines eigenen Themes hier sieht das Ganze jedenfalls nicht wirklich gut aus. Die Funktion ist da. Allein sieht die Ausgabe – selbst wenn ich die Sidebar deaktiviere – nicht so aus, wie ich es mir wünschen würde. Dafür bräuchte es dann also noch zusätzliches CSS, auf das ich hier aber nicht eingehe.

Das CSS (hier nur für Twenty Twenty-One) gehört in den Customizer > zusätzliches CSS.

/* Abfragegruppe Innenabstand */

.wp-block-group.alignfull.abfragegruppe.has-background {padding-top: 4em; padding-bottom: 4em;}

---

Beitragsbilder: Britta Kretschmer