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 Block Patterns
- Block Patterns in WordPress
- Block Pattern ohne Child-Theme – das geht!
- Plugins: Block Pattern Builder oder Blockmeister
- Die Musterseite für einen Block Pattern
- Kategorie für eigene Block Patterns definieren
- Block Pattern im patterns-Verzeichnis bei einem Block Theme
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:
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.
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:
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.
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' );
Hier ein Beispiel mit der Anzeige der Block Pattern Kategorien „Twenty Twenty“, „Abfrage“, „Vorlagen Haurand“ und „Allgemein“:
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.
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.
Links:
- Block patterns tips and resources
- Removing core pattern category and core block patterns doesn’t remove them
- Introduction to block patterns
- Block Editor Handbook
Mehr erfahren auf dieser Webseite
Wir freuen uns über eine Kontaktaufnahme
Was hältst du davon?
Ich hoffe, dieser Beitrag hat dir 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 findest du hier