von Kirsten

Arbeiten mit Block Patterns

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.

Die neuesten Artikel