Arbeiten mit Block Patterns
Dieser Artikel ist ursprünglich am 10. 12. 2020 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist womöglich nicht mehr ganz aktuell.
Dieser Artikel ist eine Sammlung von Code-Schnipseln, die ich in Projekten regelmäßig brauche, in denen ich mit Block-Patterns arbeite.
Wie du eine Block-Pattern erstellen kannst, habe ich in diesem Artikel beschrieben
Gutenberg Block-Pattern erstellen
Core-Patterns deaktivieren
In der Regel braucht man die Core-Patterns und Patterns-Kategorien nicht, die Gutenberg standardmäßig mitbringt. So kann man sie deaktivieren:
function removeCorePatterns() {
remove_theme_support('core-block-patterns');
}
add_action('init', 'removeCorePatterns');
Code-Sprache: PHP (php)Patterns-Kategorien deaktivieren
Auch die Kategorien kannst du deaktivieren, wenn du sie nicht nutzen möchtest.
function removeCorePatternsCategories() {
unregister_block_pattern_category('buttons');
unregister_block_pattern_category('columns');
unregister_block_pattern_category('gallery');
unregister_block_pattern_category('header');
unregister_block_pattern_category('text');
unregister_block_pattern_category('uncategorized');
}
add_action('init', 'removeCorePatternsCategories');Code-Sprache: PHP (php)Eigene Patterns-Kategorien erstellen
So erstelle ich eine eigene Kategorie für meine Block-Patterns:
function netzialisten_register_block_categories() {
if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
register_block_pattern_category(
'Netzialisten',
array( 'label' => _x( 'Patterns Netzialisten', 'Block pattern category', 'netzialisten' ) )
);
}
}
add_action( 'init', 'netzialisten_register_block_categories' );
Code-Sprache: PHP (php)Darstellung Vorschau anpassen
Falls die Darstellung des Vorschaubildes im Inserter seltsam aussieht, kann man beim Registrieren der Pattern mit der Eigenschaft viewportWidth innerhalb der Funktion register_block_pattern experimentieren. Das Vorschaubild wird entsprechend der dort angegebenen Breite erstellt. Bei einer Breite von 1400px beispielsweise würde man die Darstellung der Pattern für große Bildschirme sehen. Würde man einen niedrigen Wert eintragen, z.B. 480px, würde man die Darstellung für mobile Geräte sehen.
'viewportWidth' => 1400, Code-Sprache: PHP (php)Wo kommt dieser Code hin?
Den Code zu Block-Patterns kannst du direkt in die functions.php von deinem Child-Theme kopieren. Das ist aber ein bisschen unpraktisch, weil die functions.php dadurch recht unübersichtlich wird und du deine Block-Patterns nicht im Blick hast.
Es ist besser, für die Organisation solcher Code-Schnipsel ein Plugin zu nutzen. Meine Empfehlung wäre Code Snippets.