Now that I have realized several projects with the WordPress Gutenberg Editor, I have also found a structure with which I reintegrate Gutenberg blocks into my projects.
The structure
The most important thing about an automation is the structure. For this you have to think a lot in advance, because that is the factor that will rarely and in the best case never change. I have decided on the following structure:
- {Theme-folder} /
- blocks /
- blocks.php
- {Block-1} /
- {Block-1} php
- {1} block-js
- {1} block-css
- {Block-2} /
- {2} block-php
- {2} block-js
- {2} block-css
- {Block 3} /
- {3} block-php
{3} block-js
{3} block-css
- {3} block-php
- …
- blocks /
The import
First I loaded the /blocks/blocks.php file into the functions.php file. From there all block operations will take place.
<?php
// ...
require_once('blocks/blocks.php');
// ...In the blocks.php I then loaded all existing blocks automatically. In this case, all subfolders are getting read and if a php file with the same name as the folder name exists, it will be loaded.
<?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');
}
// ...The php file in the respective block folder also has a unique structure. If no special functions are required, this structure is as follows:
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'
) );
});
}Here, the block name (folder name) is taken as the basis and all scripts and CSS files are named with this name. The block is automatically loaded in the front-end (enqueue_block_assets) and backend (enqueue_block_editor_assets). If I program a new block, I just need to create a folder and put my js and css files in there. The rest is done fully automatically.
Conclusion
It takes a lot of time to think about structure and automation and you have a stop at work. You do not progress for a while. However, when you have found a solution, you catch up in a very short time this stop and you are also able to save a lot of time in the future.
In the digital world, time is the biggest resource and you should pay the most attention to this resource to be as economical as possible.
