Kategorie für eigene Block Patterns definieren

Block Pattern: Benutzerdefinierte Kategorie am Beispiel von Buttons

In einem Beitrag haben wir gezeigt, wie man Buttons im Block-Editor (Gutenberg) individuell gestalten kann. Besser ist natürlich, wenn man diese Buttons als Block Patterns definiert, so dass man diese Vorlagen direkt auswählen kann. Noch interessanter ist aber, wenn man zusätzlich eine benutzerdefinierte Kategorie (category) für diese Block Patterns definiert. Wie das funktioniert, beschreibe ich in diesem Beitrag.

Die Serie zum Thema

Schauen wir uns erst mal an, wie diese Buttons auf einer Testseite von uns aussehen.

Damit man direkt die Farbgebung sehen kann, habe ich die Hintergrundfarbe des Buttons „Zur Gallery“ bereits unter Eigenschaften > Hintergrundfarbe auf #b70000 geändert. Der Button wird im Unterschied zu den oberen Buttons dann im Dashboard auch schon rot angezeigt:

Button im Block-Editor von WordPress
Grafik: haurand.com

Der Code für den Block Pattern

Den Code für den Button erhalten wir über den Code-Editor. Dazu klicken wir oben auf die drei senkrechten Punkte (1) und anschließend auf den Code-Editor (2).

Anschließend markieren wir den Code im Code-Editor und kopieren den Code in einen geeigneten Editor wie z. B. Notepad++ oder Visual Studio Code. Danach müssen wir den Code noch entsprechend bearbeiten.

Code-Editor in WordPress beim Block-Editor (Gutenberg)
Grafik: haurand.com
Markierter Code aus dem Code-Editor
Grafik: haurand.com

Der Quellcode für den roten Button

Wie man den Quellcode für einen Block Pattern bearbeitet, habe ich in einem weiteren Beitrag dieser Serie ausführlich erläutert. Daher beschränke ich mich an dieser Stelle auf den Teil nach content: Hier muss man das Anführungszeichen „maskieren“, d. h. man muss erst mal allen Anführungszeichen des Blocks einen Backslash voranstellen, damit sie nicht als Ende der Zeichenfolge interpretiert werden:

Code für Block Pattern
Grafik: haurand.com

In der Grafik habe ich den Bereich markiert, der im Screenshot bereits entsprechend geändert wurde.

Den Code für diese Vorlage schreiben wir in die functions.php des Child Themes. Nutzt man kein Child Theme, kann man allerdings auch das Plugin Code Snippets verwenden. Alle weiteren Informationen dazu finden Sie hier.

Hier also noch der vollständige Code für den Block Pattern, der der Kategorie „haurand“ zugeordnet wird (siehe die Kennzeichnung in rot).

/* ------------------------------------------------ */
/* zentrierter roter Button                         */
/* dieser Button wird im Dashboard                  */
/* rot angezeigt, weil hier bei den Eigenschaften   */
/* schon die Farbe geändert worden ist              */
/* -----------------------------------------------  */
register_block_pattern(
    'button_zentriert_rot',
      array(
      'title' => __( 'zentrierter roter Button mit Hover-Effekt', 'button_zentriert_rot' ),
      'description' => _x( 'zentrierter roter Button mit Hover-Effekt', 'zentrierter roter Button mit Hover-Effekt', 'button_zentriert_rot' ),
      'categories'  => array('Haurand'),
      'content'     =>
         "<!-- wp:buttons {\"contentJustification\":\"center\"} -->
         <div class=\"wp-block-buttons is-content-justification-center\"><!-- wp:button {\"style\":{\"color\":{\"background\":\"#b70000\"}},\"className\":\"ein_button\"} -->
         <div class=\"wp-block-button ein_button\"><a class=\"wp-block-button__link has-background\" style=\"background-color:#b70000\">Test-Button</a></div>
         <!-- /wp:button --></div>
         <!-- /wp:buttons -->",
    )
  );

Wenn man keine eigene Kategorie definiert hat, dann befinden sich die eigenen Block Patterns unter der Kategorie „Allgemein“. Wenn Sie allerdings mehrere Block Patterns erstellt haben und die anderen Block Patterns eher seltener oder überhaupt nicht verwenden, dann bietet sich eine eigene Kategorie für die benutzerdefinierten Block Patterns an.

Kategorien Block Patterns
Grafik: haurand.com

Eine benutzerdefinierte Kategorie für Block Patterns

Mit der function register_block_pattern_category() registrieren wir die eigene Vorlagen-Kategorie „haurand“.

Um bestimmte Kategorien auszublenden, nutze ich die function unregister_block_pattern_category(). Im Beispiel werden in diesem Fall alle Block Patterns der Kategorien „buttons“, „header“, „text“ und „columns“ ausgeblendet. Die Kategorien „gallery“, „uncategorized“ und „query“ (ab WordPress 5.8) werden dagegen gezeigt.

Um alle WordPress-Standard-Vorlagen auszublenden, können wir die function remove_theme_support() einsetzen. Im Beispiel habe ich diese function auskommentiert. Allerdings werden bei Aktivierung dieser function zumindest bei mir die Block Patterns von dem Theme Twenty Twenty weiterhin gezeigt. Eine Lösung, um bei Nutzung des Themes Twenty Twenty ausschließlich meine eigenen Block Patterns der Kategorie „haurand“ zu zeigen, habe ich leider nicht gefunden.

/* --------------------------------- */
/* eigene Kategorie (hier: haurand)  */
/* --------------------------------- */


  /* Um alle WordPress-Standard-Block Patterns auszublenden 
  add_action('after_setup_theme', 'removeCorePatterns');
 
  function removeCorePatterns() {
    remove_theme_support('core-block-patterns');
  }
  */
 
  
  /* um bestimmte Kategorien ausblenden */
  function prefix_unregister_category() {
    unregister_block_pattern_category( 'buttons'); 
    unregister_block_pattern_category( 'header'); 
    unregister_block_pattern_category( 'text'); 
    unregister_block_pattern_category( 'columns');
    /* unregister_block_pattern_category( 'gallery');
    unregister_block_pattern_category( 'uncategorized');
    unregister_block_pattern_category( 'query'); */
  }
  add_action( 'init', 'prefix_unregister_category' );

  
  /* eigene Vorlagen registrieren - im Beispiel "Vorlagen Haurand" */
  function haurand_register_block_categories() {
    if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
    register_block_pattern_category(
     'Haurand',
     array( 'label' => _x( 'Vorlagen Haurand', 'Block pattern category', 'Haurand' ) )
     );
    }
   }
   add_action( 'init', 'haurand_register_block_categories' );
Vorlagen-Kategorien
Vorlagen-Kategorien

Hier ein Beispiel mit der Anzeige der Block Pattern Kategorien „Twenty Twenty“, „Abfrage“, „Vorlagen Haurand“ und „Allgemein“:

Vorlagen-Kategorien
Grafik: haurand.com

Bei der Neugestaltung unserer Webseite vor einigen Wochen haben wir übrigens genau das genutzt und z. B. Block Patterns für die Anzeige der Bilder (siehe grauer Kasten) erstellt. Anstatt jetzt jedes Mal die aufwendige Formatierung vorzunehmen, brauchen wir nur noch den entsprechenden Block Pattern unter Vorlagen > haurand auszuwählen. Lediglich das Bild müssen wir dann noch austauschen. Das spart eine Menge Zeit.

Block Patterns haurand.com
Grafik: haurand.com

Fazit:

Block Patterns werden immer wichtiger und sind eine wunderbare Sache, weil man sich sehr viel Arbeit ersparen kann. Durch die Definition einer eigenen Kategorie wird das Handling noch bequemer, weil man innerhalb der gewählten Kategorie alle benutzerdefinierten Vorlagen findet. Bei vielen Projekten setzen wir das mittlerweile so um und schalten in der Regel die Standard-Vorlagen aus.


Mehr erfahren auf dieser Webseite

Foto von Sharon McCutcheon von Pexels


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über Ihre Kontaktaufnahme

Was halten Sie davon?

Ich hoffe, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier

Schreibe einen Kommentar