kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Eigene Patterns für den WordPress Block-Editor (Gutenberg) erstellen

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

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' );

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.