Nachdem ich jetzt mehrere Projekte mit dem WordPress Gutenberg Editor realisiert habe, habe ich auch eine Struktur gefunden, womit ich Gutenberg Blöcke in meine Projekte reinlade.
Die Struktur
Das wichtigste bei einer automatisierung ist die Struktur. Hierfür muss man sich im vornherein sehr viele Gedanken machen, weil das der Faktor ist, der sich sehr selten und im besten Fall nie ändern wird. Ich habe mich für die folgende Struktur entschieden:
- {theme-ordner}/
- blocks/
- blocks.php
- {block-1}/
- {block-1}.php
- {block-1}.js
- {block-1}.css
- {block-2}/
- {block-2}.php
- {block-2}.js
- {block-2}.css
- {block-3}/
- {block-3}.php
{block-3}.js
{block-3}.css
- {block-3}.php
- …
- blocks/
Das reinladen
Als erstes habe ich in der functions.php Datei die /blocks/blocks.php Datei reingeladen. Von dort aus werden alle Blocks-Operationen stattfinden.
<?php
// ...
require_once('blocks/blocks.php');
// ...In der blocks.php habe ich dann alle vorhandenen Blöcke automatisiert reingeladen. Hierbei werden alle Unterordner ausgelesen und falls in diesem Ordner eine php-Datei mit dem Ordnernamen existiert, wird dieser geladen.
<?php
foreach (glob(__DIR__ . '/*' , GLOB_ONLYDIR) as $block_path) {
$block_slug = str_replace(__DIR__.'/','',$block_path);
if( file_exists($block_path.'/'.$block_slug.'.php') ) require_once($block_slug.'/'.$block_slug.'.php');
}
// ...Die php-Datei in dem jeweiligen Block-Ordner hat ebenfalls eine einheitliche Struktur. Falls keine Sonderfunktionen benötigt werden, wird diese Struktur beibehalten:
foreach (array('enqueue_block_editor_assets', 'enqueue_block_assets') as $action_tag) {
add_action( $action_tag, function(){
wp_enqueue_script(
basename(__DIR__),
get_stylesheet_directory_uri() . substr( __DIR__, strlen( get_stylesheet_directory() ) ) .'/block.js',
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' )
);
wp_enqueue_style(
basename(__DIR__).'-style',
get_template_directory_uri().'/blocks/'.basename(__DIR__).'/'.basename(__DIR__).'.css'
);
register_block_type( 'powerradach/'.basename(__DIR__), array(
'editor_script' => basename(__DIR__),
'style' => basename(__DIR__).'-style',
'editor_style' => basename(__DIR__).'-style'
) );
});
}Hierbei wird der Blockname (Ordnername) als Basis genommen und alle Scriptdateien und CSS-Dateien werden automatisch mit diesem Namen benannt. Der Block wird automatisch im Front- (enqueue_block_assets) sowie Backend (enqueue_block_editor_assets) geladen. Wenn ich einen neuen Block programmiere, brauche ich also nur einen Ordner zu erstellen und dort meine js sowie css-Datei ablegen. Der Rest geschieht vollautomatisch.
Fazit
Sich Gedanken über die Struktur und die Automatisierung zu machen erfordert sehr viel Zeit und man hat einen Stop bei der Arbeit. Man kommt für eine Weile nicht voran. Wenn man dann jedoch einen Faden gefunden hat, holt man in sehr kurzer Zeit diesen Stop ein und spart in sehr kurzer Zeit unheimlich viel Zeit.
In der digitalen Welt ist Zeit die größte Ressource und man sollte dieser Ressource die meiste Aufmerksamkeit widmen, um so sparsam wie möglich damit umzugehen.
