a working react/php dynamic wordpress block example integrated with the Vite build process

This commit is contained in:
2025-12-10 19:44:32 +00:00
parent b16bd77355
commit 917150bbe6
15 changed files with 247 additions and 34 deletions

View File

@@ -6,6 +6,7 @@
namespace App;
// Add the badegg block category
add_filter( 'block_categories_all' , function ( $categories ) {
// Adding a new category.
@@ -19,29 +20,70 @@ add_filter( 'block_categories_all' , function ( $categories ) {
return $categories;
});
// add_action('init', function () {
// $blocks = glob(get_theme_file_path('resources/blocks/*/block.json'));
// Auto register WP blocks
add_action('init', function () {
$blocks = glob(get_theme_file_path('resources/views/blocks/*/block.json'));
// foreach ($blocks as $block_json) {
// register_block_type($block_json, [
// 'render_callback' => function ($attributes, $content, $block) {
// $slug = basename($block->name);
// $view = "blocks.{$slug}.render";
foreach ($blocks as $block_json) {
$slug = basename(dirname($block_json));
// if (\Roots\view()->exists($view)) {
// return \Roots\view($view, [
// 'attributes' => $attributes,
// 'content' => $content,
// 'block' => $block,
// ]);
// }
// Editor JS
$editor_js_path = "resources/views/blocks/{$slug}/index.jsx";
if (file_exists(get_theme_file_path($editor_js_path))) {
wp_register_script(
"{$slug}-editor-script",
\Vite::asset($editor_js_path),
['wp-blocks', 'wp-element', 'wp-editor'],
null,
true
);
}
// return $content;
// }
// ]);
// }
// });
// Editor SCSS (compiled to CSS)
$editor_css_path = "resources/views/blocks/{$slug}/editor.scss";
if (file_exists(get_theme_file_path($editor_css_path))) {
wp_register_style(
"{$slug}-editor-style",
\Vite::asset($editor_css_path),
[],
null
);
}
// Frontend SCSS (compiled to CSS)
$style_css_path = "resources/views/blocks/{$slug}/style.scss";
if (file_exists(get_theme_file_path($style_css_path))) {
wp_register_style(
"{$slug}-style",
\Vite::asset($style_css_path),
[],
null
);
}
register_block_type($block_json, [
'editor_script' => "{$slug}-editor-script",
'editor_style' => "{$slug}-editor-style",
'style' => "{$slug}-style",
'render_callback' => function ($attributes, $content, $block) {
$slug = basename($block->name);
$view = "blocks.{$slug}.render";
if (\Roots\view()->exists($view)) {
return \Roots\view($view, [
'attributes' => $attributes,
'content' => $content,
'block' => $block,
]);
}
return $content;
}
]);
}
});
// Disable most of the core blocks
add_action('allowed_block_types_all', function(){
$blocks = array_keys( \WP_Block_Type_Registry::get_instance()->get_all_registered() );
$blacklist = array_diff(block_blacklist(), block_whitelist());
@@ -76,7 +118,3 @@ function block_all()
return array_values($enabled_blocks);
}
add_action('wp_footer', function(){
echo '<pre>',print_r(block_all()),'</pre>';
});