Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Jede Website besteht aus wiederkehrenden Strukturen – auch Patterns genannt. Die sog. »Block Patterns« von WordPress 5.5+ sind vordefinierte Kombinationen verschiedener Gutenberg-Blöcke, die sehr einfach eingefügt und dann angepasst werden können. Mit dem Block-Editor könnt ihr eigene Patterns für häufig benötige Strukturen entwickeln und somit die redaktionellen Möglichkeiten des CMS voll ausnutzen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Wo organisiert WordPress die Block Patterns?

Seit WordPress 5.5 gibt es neben den »Wiederverwendbaren Blöcken auch eine Kategorie namens »Patterns«. Die Patterns erscheinen als Tab in der linken Seitenleiste. Darunter findet sich eine Liste aller Vorlagen inklusive Vorschau.

WordPress Block-Editor (Gutenberg) kategorisierte Liste der Patterns
Liste der Block Patterns

Was ist der Unterschied zwischen »Patterns« und »Wiederverwendbaren Blöcken«?

Die als Pattern eingefügten Blöcke sind nach dem Einfügen nicht mehr mit ihrer Pattern-Vorlage verknüpft. Sollte sich das Pattern ändern, bleiben die bereits eingefügten Blöcke unverändert.

Ändert sich allerdings ein Wiederverwendbarer Block, aktualisieren sich auch alle Verknüpfungen. Er kann an globaler Stelle angepasst werden und ändert sich auf allen Unterseiten, auf denen der Wiederverwendbare Block eingefügt wurde und die Verknüpfung noch besteht.

Wiederverwendbare Blöcke können allerdings nicht im Theme via PHP registriert werden. Sie können als JSON über das Backend importiert werden. Pattern werden via PHP z. B. in der functions.php eures Themes registriert.

Ein Block Pattern erstellen

Als erstes bauen wir uns das gewünschte Pattern im Block-Editor, um später, den im Hintergrund erzeugten Code, in unsere Registrierungs-Funktion zu kopieren.

Wir möchten gerne das nachfolgende (Teaser)-Layout als Pattern sichern, um es immer wieder verwenden zu können. Nach dem Einfügen möchten wir jeweils das Bild austauschen, den kurzen Beschreibungstext anpassen und den Link des »Mehr erfahren«-Buttons ändern.

WordPress Block-Editor (Gutenberg) Visueller Editor Teaser Layout
Teaser Layout im visuellen Editor

Ein Block Pattern registrieren

Um ein Block Pattern zu registrieren, fügen wir in der functions.php unseres Themes den nachfolgenden Code ein. Eine Registrierung in einem Plugin ist natürlich auch möglich.

register_block_pattern(
  'kb-teaser-pattern',
    array(
    'title' => __( 'Teaser', 'kb-theme' ),
    'description' => _x( 'Hier steht eine Beschreibung des Pattern', 'Block pattern description', 'kb-theme' ),
    'categories'  => array('buttons'),
    'content'     => Hier folgt der Code des Patterns,
  )
);

In der register_block_pattern-Funktion übergeben wir als erstes Argument den Namen unseres Patterns und dann ein Array, mit beschreibenden Eigenschaften des Patterns, als zweites Argument.

Block Pattern Content

Um an den Code (Content) für unser Block Pattern zu gelangen, wechseln wir im Block-Editor von der visuellen Ansicht zur Code-Ansicht und kopieren den gesamten Code.

WordPress Block-Editor (Gutenberg) Code-Editor Teaser Layout
Teaser Layout in der Code-Ansicht

Den kopierten Code fügen wir ohne Leerzeichen und mit maskierten Anführungszeichen als 'content' in unsere register_block_pattern-Funktion ein.

register_block_pattern(
    'kb-teaser-pattern',
    array(
        'title'       => __( 'Teaser', 'kb-theme' ),
        'description' => _x( 'This is the pattern description', 'Block pattern description', 'kb-theme' ),
        'categories'  => array('buttons'),
        'content'     => "<!-- wp:image {\"align\":\"left\",\"id\":598,\"width\":246,\"height\":193,\"sizeSlug\":\"large\",\"className\":\"is-style-default\"} --><div class=\"wp-block-image is-style-default\"><figure class=\"alignleft size-large is-resized\"><img src=\"https://starter/wp-content/uploads/2020/06/person-skating-2626102-1024x805.jpg\" alt=\"\" class=\"wp-image-598\" width=\"246\" height=\"193\"/></figure></div><!-- /wp:image --><!-- wp:paragraph --><p>Das ist ein kurzer Beschreibungstext. Das ist ein kurzer Beschreibungstext. Das ist ein kurzer Beschreibungstext. </p><!-- /wp:paragraph --><!-- wp:buttons --><div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":0,\"className\":\"is-style-outline\"} --><div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link no-border-radius\">Mehr erfahren</a></div><!-- /wp:button --></div><!-- /wp:buttons -->",
    )
);

Block Pattern verwenden

Jetzt steht uns das erstellte Teaser Block Pattern, inklusive der automatisch erzeugten Vorschau, in der Liste der Patterns zur Verfügung. Nach dem Einfügen kann es wie gewünscht angepasst werden.

In der Komplexität der Patterns sind wir uneingeschränkt.

Standard Block Pattern von WordPress deaktivieren

WordPress bringt standardmäßig schon ein paar Patterns mit, wie z. B. Kombinationen aus Spalten mit Bild und Text. Diese können bei Bedarf über die remove_theme_support-Funktion vollständig deaktiviert werden. Dazu muss nur folgender Code in die functions.php des aktiven WordPress-Themes geschrieben werden:

remove_theme_support( 'core-block-patterns' );

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – 1 Kommentar

  1. Paul Amann
    schrieb am 18.02.2021 um 09:33 Uhr:

    Hi Felix, danke für die gute Anleitung.
    Für die Umsetzung muss man die „register_block_pattern“ Funktion mit einem Handler in der functions.php aufrufen:

    function wpdocs_register_my_patterns() {
    register_block_pattern( … );
    }

    add_action( ‚init‘, ‚wpdocs_register_my_patterns‘ );

    Siehe: https://developer.wordpress.org/reference/functions/register_block_pattern/

    Damit funktioniert es tadellos
    lg
    Paul

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: