Vor den Block Vorlagen gab (und gibt es natürlich immer noch) es die wiederverwendbaren (reusable) Blöcke, die ich bereits in einem älteren Beitrag behandelte. Das Wesen eines Reusables ist, dass man ihn aus jedem beliebigen Block (auch mehreren Blöcken auf einmal) generieren kann, und genau so, wie abgespeichert an einer beliebigen anderen Stelle nochmal verwenden. Er lässt sich unbegrenzt oft einsetzen, allerdings nicht bearbeiten (es sei denn, er wird in einen „normalen“ Block zurückverwandelt), resp. nur das Original. Wird was daran verändert, zeigt sich die Änderung an allen Positionen, in die der Block eingefügt wurde.

Ich hatte damals den Gedanken, man könnte Reusable Blocks als Formatvorlagen verwenden, einsetzen, zurückverwandeln, und sich über die Zeit eine Bibliothek von Layouts schaffen. Noch dazu kann man Reusables importieren und exportieren. Die Idee ist überholt, denn nun gibt es die Block-Vorlagen, oder Block Patterns.

Was sind Block-Vorlagen?

Mit WordPress 5.5 am 11. August kam das neue Feature, das den Umgang mit Gutenberg massiv aufwerten wird. Block-Vorlagen sind vordefinierte Blocklayouts. Bereits fertig gesetzte Layout(teile), die in der linken Seitenleiste, in der die verfügbaren Blöcke gelistet sind, im Tab „Vorlagen“ daneben zu finden sind, lassen sich per Mausklick in die Seite einfügen. Anschließend muss nur der Inhalt entsprechend geändert werden. Und das ist auch schon der große Unterschied zu Reusables – einmal eingefügt, sind Vorlagen eigenständige Elemente, die sich nicht mehr zentral, sondern nur noch direkt (an der eingefügten Position) verändern lassen.

Die Einführung der Block-Vorlagen ist ein großer Schritt, der Gutenberg näher an einen vollwertigen Page Builder heranbringt. Einziger Nachteil ist, einfach selber anlegen (wie Reusables) ist nicht vorgesehen. Vorlagen kommen mit dem Theme (das Standard-Theme TwentyTwenty enthält ein paar Vorlagen), oder Plugins.

Der Zweck von Block Vorlagen

Bei Vorlagen geht es nicht einfach nur darum, einen einzelnen Block zu gestalten, sondern ganze Layouts, die mehrere Blöcke enthalten, die mehr oder weniger aufwendig gestaltet sind. Ganze Landingpage-Layouts können auf diese Weise entstehen. So wie populäre Themes mit importierbaren Vorlagen daherkommen (die man dann über den Customizer noch anpassen kann), werden Themes der Zukunft vielleicht (auch) Block-Vorlagen mitbringen, und ihre Qualität wird daran bemessen werden, wie viele sie davon haben. – Pro-Versionen werden vermutlich ein paar Vorlagen mehr liefern.

Wie kann man selber Block-Vorlagen anlegen?

Die Voraussetzung dafür ist (mal wieder) eine eigene functions.php (Childtheme), oder ein Snippets-Plugin, um eigene Funktionen anzulegen und zu speichern. Der erste Schritt ist, mit dem Gutenberg-Editor das gewünschte Layout zu bauen. Wenn dieses fertig gestaltet ist, in die Code-Editor-Ansicht wechseln, und das Layout von da kopieren.

Mit einem Snippet wie diesem fügt wird die Vorlage im Gutenberg-Editor verfügbar.

function my_custom_block_patterns() {
        register_block_pattern(
            'custom/my-example',
            array(
                'title'         => __( 'My First Block Pattern', 'textdomain' ),
                'description'   => _x( 'This is my first block pattern', 'Block pattern description', 'textdomain' ),
                'content'       => '[Hier den Code aus dem Gutenberg-Editor einfügen]',
                'categories'    => array( 'text' ),
                'keywords'      => array( 'design', 'demo', 'example' )
            )
        );
}
add_action( 'init', 'my_custom_block_patterns' );

Im Handbuch sah ich ein Beispiel, in dem der Editor-Code escaped wurde, bevor er als Vorlage verwendete.

Aus einem Code wie:

{"backgroundColor":"black","textColor":"white"}

würde dann dieser

{\"backgroundColor\":\"black\",\"textColor\":\"white\"}

Zwar konnte ich bei meinen nicht sehr umfangreichen Tests keinen Unterschied feststellen, resp. die Vorlagen funktionierte eins zu eins wie aus dem Code-Editor kopiert, hier jedoch ein Link zu einem Tool, zum escapen und unescapen von JSON.