auto-registering blocks in php and javascript with dynamic enqueuing of associated styles and scripts with support for scss and blade

app/blocks.php

@@ -4,8 +4,20 @@
  * Theme Blocks.
  */
 
-namespace App;
+namespace App\Blocks;
 
+// Disable all core blocks except what we need as inner blocks
+// resources/js/editor.js handles hiding the inner blocks at the top level
+add_action('allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2);
+
+// add blocks to the allowed list via filter
+add_filter('badegg_block_types_allow', function($allowed){
+    return array_merge($allowed, [
+        // 'core/categories',
+    ]);
+});
+
+// Add the badegg block category
 add_filter( 'block_categories_all' , function ( $categories ) {
 
         // Adding a new category.
@@ -19,45 +31,86 @@ 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) {
+        $json = json_decode(file_get_contents($block_json));
+        $slug = basename(dirname($block_json));
+        $blockPath = "resources/views/blocks/{$slug}";
 
-//                 if (\Roots\view()->exists($view)) {
-//                     return \Roots\view($view, [
-//                         'attributes' => $attributes,
-//                         'content' => $content,
-//                         'block' => $block,
-//                     ]);
-//                 }
+        $viewScript = "{$blockPath}/view.js";
+        $script = "{$blockPath}/script.js";
+        $editorCSS = "{$blockPath}/editor.scss";
+        $style = "{$blockPath}/style.scss";
 
-//                 return $content;
-//             }
-//         ]);
-//     }
-// });
+        // editorStyle
+        if (file_exists(get_theme_file_path($editorCSS))) {
+            wp_register_style(
+                "{$slug}-editor-style",
+                \Vite::asset($editorCSS),
+                [],
+                null
+            );
+        }
 
-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());
+        // script
+        if(file_exists(get_theme_file_path($script))) {
+            wp_register_script(
+                "{$slug}-script",
+                \Vite::asset($script),
+                [],
+                null,
+                true
+            );
+        }
 
-    return array_values( array_diff( $blocks, $blacklist ) );
-}, 100, 2);
+        // style
+        if (file_exists(get_theme_file_path($style))) {
+            wp_register_style(
+                "{$slug}-style",
+                \Vite::asset($style),
+                [],
+                null
+            );
+        }
 
-function block_blacklist()
-{
-    $file = file_get_contents(get_theme_file_path("resources/json/core-block-blacklist.json"));
-    $json = json_decode($file);
+        // viewScript
+        if(file_exists(get_theme_file_path($viewScript))) {
+            wp_register_script(
+                "{$slug}-view-script",
+                \Vite::asset($viewScript),
+                [],
+                null,
+                true
+            );
+        }
 
-    return $json;
-}
+        $props = [
+            'editor_style'      => "{$slug}-editor-style",
+            'style'             => "{$slug}-style",
+            'script'            => "{$slug}-script",
+            'view_script'       => "{$slug}-view-script",
+        ];
 
-function block_whitelist()
+        if(!property_exists($json, 'acf') && \Roots\view()->exists("blocks.{$slug}.render")) {
+            $props['render_callback']   = function ($attributes, $content, $block) {
+                $slug = basename($block->name);
+
+                return \Roots\view("blocks.{$slug}.render", [
+                    'attributes' => $attributes,
+                    'content' => $content,
+                    'block' => $block,
+                ]);
+            };
+        }
+
+        register_block_type($block_json, $props);
+    }
+});
+
+function list_inner()
 {
     $file = file_get_contents(get_theme_file_path("resources/json/core-block-whitelist.json"));
     $json = json_decode($file);
@@ -65,18 +118,65 @@ function block_whitelist()
     return $json;
 }
 
-function block_all()
+function list_all()
 {
-    $enabled_blocks = array_map(function($block) {
+    $blocks = array_map(function($block) {
         $name = $block->name;
 
         return $block->name;
 
     }, \WP_Block_Type_Registry::get_instance()->get_all_registered());
 
-    return array_values($enabled_blocks);
+    return array_values($blocks);
+}
+
+function list_custom()
+{
+    return array_filter(list_all(), function($value){
+        if (str_starts_with($value, 'acf/') || str_starts_with($value, 'badegg/')) return $value;
+    });
+}
+
+function list_allowed()
+{
+    $add_allowed = [];
+
+    return array_merge(
+        list_custom(),
+        list_inner(),
+        apply_filters('badegg_block_types_allow', $add_allowed),
+    );
+}
+
+function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $wp_block = false, $context = false) {
+    $slug = basename($block['name']);
+    $block['slug'] = $slug;
+
+    $blade = \Roots\view("blocks.{$slug}.render", [
+        'block' => $block,
+        'content' => $content,
+        'is_preview' => $is_preview,
+        'post_id' => $post_id,
+        'wp_block' => $wp_block,
+        'context' => $context,
+    ]);
+
+    if($blade) {
+        echo $blade;
+    } else {
+        ob_start(); ?>
+
+        <section class="section bg-error knockout">
+            <div class="container container-small align-centre wysiwyg">
+                <h2>Missing Blade Template</h2>
+                <p>(resources/views/blocks/<?= $slug ?>/render.blade.php)</p>
+            </div>
+        </section>
+
+        <?php echo ob_get_clean();
+    }
 }
 
 add_action('wp_footer', function(){
-    echo '<pre>',print_r(block_all()),'</pre>';
+    echo '<pre>',print_r(list_allowed()),'</pre>';
 });

composer.json

@@ -36,7 +36,7 @@
   "autoload": {
     "psr-4": {
       "App\\": "app/",
-      "Blocks\\": "resources/views/blocks"
+      "Blocks\\": "resources/views/acf-blocks"
     }
   },
   "require": {

functions.php

@@ -60,7 +60,7 @@ autoload_psr4('Admin');
 autoload_psr4('Ajax');
 
 function autoload_psr4_blocks() {
-    $path = __dir__ . '/resources/views/blocks/*';
+    $path = __dir__ . '/resources/views/acf-blocks/*';
     $namespace = 'Blocks\\';
 
     foreach(glob($path, GLOB_ONLYDIR) as $directory) {

package-lock.json

@@ -7,6 +7,7 @@
       "name": "sage",
       "devDependencies": {
         "@roots/vite-plugin": "^1.0.2",
+        "fast-glob": "^3.3.3",
         "laravel-vite-plugin": "^1.2.0",
         "sass": "^1.93.2",
         "vite": "^6.2.0"
@@ -512,6 +513,44 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -1505,7 +1544,6 @@
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -1781,6 +1819,23 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
     "node_modules/fast-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -1799,6 +1854,16 @@
       "license": "BSD-3-Clause",
       "peer": true
     },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1823,7 +1888,6 @@
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1846,6 +1910,19 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -1886,7 +1963,6 @@
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1897,7 +1973,6 @@
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1911,7 +1986,6 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -1998,13 +2072,22 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -2019,7 +2102,6 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -2144,6 +2226,27 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -2180,6 +2283,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.52.5",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
@@ -2222,6 +2336,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -2441,7 +2579,6 @@
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },

package.json

@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "@roots/vite-plugin": "^1.0.2",
+    "fast-glob": "^3.3.3",
     "laravel-vite-plugin": "^1.2.0",
     "sass": "^1.93.2",
     "vite": "^6.2.0"

resources/js/app.js

@@ -3,8 +3,11 @@ import.meta.glob([
   '../fonts/**',
 ]);
 
+// import.meta.glob('../views/blocks/**/{style.scss,script.js,view.js}', { eager: true })
+
 import Header from '../views/sections/header/header.js';
 import LazyLoad from './lib/Lazy.js';
 
 LazyLoad();
 Header();
+

resources/js/editor.js

@@ -1,8 +1,8 @@
 import domReady from '@wordpress/dom-ready';
+import blockWhitelist from '../json/core-block-whitelist.json';
+import.meta.glob('../views/blocks/**/{index.jsx,index.js}', { eager: true })
 
 domReady(() => {
-
-  const restrictEditorParentBlocks = (settings, name) => {
   const TEXT_EDITOR_BLOCKS = [
     // Design
     'core/separator',
@@ -23,7 +23,6 @@ domReady(() => {
     'core/list',
     'core/code',
     'core/details',
-      'core/freeform',
     'core/list-item',
     'core/missing',
     'core/paragraph',
@@ -34,12 +33,14 @@ domReady(() => {
     'core/verse',
   ];
 
+  const restrictEditorParentBlocks = (settings, name) => {
     if (TEXT_EDITOR_BLOCKS.includes(name)) {
-      settings.parent = ['acf/badegg-editor']
+      settings.parent = [
+        'acf/badegg-editor',
+        'badegg/article',
+      ];
     }
 
-    // console.log(settings, name)
-
     return settings
   }
 

resources/json/core-block-blacklist.json

@@ -1,102 +0,0 @@
-[
-  "core/button",
-  "core/comment-template",
-  "core/home-link",
-  "core/navigation-link",
-  "core/navigation-submenu",
-  "core/buttons",
-  "core/column",
-  "core/columns",
-  "core/group",
-  "core/more",
-  "core/nextpage",
-  "core/separator",
-  "core/spacer",
-  "core/text-columns",
-
-  "core/embed",
-
-  "core/cover",
-  "core/file",
-  "core/gallery",
-  "core/image",
-  "core/media-text",
-  "core/audio",
-  "core/video",
-
-  "core/block",
-
-  "core/footnotes",
-  "core/heading",
-  "core/list",
-  "core/code",
-  "core/details",
-  "core/freeform",
-  "core/list-item",
-  "core/missing",
-  "core/paragraph",
-  "core/preformatted",
-  "core/pullquote",
-  "core/quote",
-  "core/table",
-  "core/verse",
-
-  "core/avatar",
-  "core/comment-author-name",
-  "core/comment-content",
-  "core/comment-date",
-  "core/comment-edit-link",
-  "core/comment-reply-link",
-  "core/comments",
-  "core/comments-pagination",
-  "core/comments-pagination-next",
-  "core/comments-pagination-numbers",
-  "core/comments-pagination-previous",
-  "core/comments-title",
-  "core/loginout",
-  "core/navigation",
-  "core/pattern",
-  "core/post-author",
-  "core/post-author-biography",
-  "core/post-author-name",
-  "core/post-comments-form",
-  "core/post-content",
-  "core/post-date",
-  "core/post-excerpt",
-  "core/post-featured-image",
-  "core/post-navigation-link",
-  "core/post-template",
-  "core/post-terms",
-  "core/post-title",
-  "core/query",
-  "core/query-no-results",
-  "core/query-pagination",
-  "core/query-pagination-next",
-  "core/query-pagination-numbers",
-  "core/query-pagination-previous",
-  "core/query-title",
-  "core/read-more",
-  "core/site-logo",
-  "core/site-tagline",
-  "core/site-title",
-  "core/template-part",
-  "core/term-description",
-  "core/post-comments",
-
-  "core/legacy-widget",
-  "core/widget-group",
-  "core/archives",
-  "core/calendar",
-  "core/categories",
-  "core/latest-comments",
-  "core/latest-posts",
-  "core/page-list",
-  "core/page-list-item",
-  "core/rss",
-  "core/search",
-  "core/shortcode",
-  "core/social-link",
-  "core/tag-cloud",
-  "core/html",
-  "core/social-links"
-]

resources/views/acf-blocks/Editor/Editor.php

@@ -41,7 +41,7 @@ class Editor
     $themeURL = get_template_directory_uri();
 
     if($is_preview && @$block['data']['inserter']):
-      echo '<img style="display: block; width: 100%" src="' . $themeURL . '/resources/views/blocks/' . $name . '/' . $name . '.jpg" />';
+      echo '<img style="display: block; width: 100%" src="' . $themeURL . '/resources/views/acf-blocks/' . $name . '/' . $name . '.jpg" />';
       return;
     endif;
 
@@ -66,11 +66,11 @@ class Editor
 
     $data = array_merge($data, $block);
     $data['section_classes'] = $CssClasses->section($data);
-    $data['allowed_blocks'] = \App\block_whitelist();
+    $data['allowed_blocks'] = \App\Blocks\list_inner();
     $data['template'] = $this->default_template();
     $data['block'] = $block;
 
-    echo \Roots\view("blocks.$name.$name", [
+    echo \Roots\view("acf-blocks.$name.$name", [
       'data' => $data,
       'block' => $block,
     ])->render();

resources/views/blocks/acfdemo/block.json

@@ -0,0 +1,33 @@
+{
+  "name": "badegg/acfdemo",
+  "title": "ACF Demo",
+  "category": "badegg",
+  "icon": "media-document",
+  "description": "An example block powered by ACF",
+  "keywords": ["acf", "demo"],
+
+  "editorScript": "acfdemo-editor-script",
+  "editorStyle": "acfdemo-editor-style",
+  "script": "acfdemo-script",
+  "style": "acfdemo-style",
+  "viewScript": "acfdemo-view-script",
+
+  "acf": {
+      "mode": "preview",
+      "validate": "false",
+      "renderCallback": "\\App\\Blocks\\render_acf"
+  },
+  "supports": {
+      "anchor": true,
+      "align": false,
+      "jsx": true
+  },
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "inserter": true
+      }
+    }
+  }
+}

resources/views/blocks/acfdemo/editor.scss

@@ -0,0 +1,4 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-acf-demo.block-editor-block-list__block {
+  display: block;
+}

resources/views/blocks/acfdemo/index.js

@@ -0,0 +1,2 @@
+// block.json's editorScript, loaded only in the block editor
+console.log('loaded: resources/views/blocks/acfdemo/index.js')

resources/views/blocks/acfdemo/render.blade.php

@@ -0,0 +1,3 @@
+<section class="wp-block-{{ $block['slug'] }}">
+  <h2>ACF Example</h2>
+</section>

resources/views/blocks/acfdemo/script.js

@@ -0,0 +1,2 @@
+// block.json's script, loaded in block editor and front end
+console.log('loaded: resources/views/blocks/acf-demo/script.js')

resources/views/blocks/acfdemo/style.scss

@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-acf-demo {
+  display: block;
+}

resources/views/blocks/acfdemo/view.js

@@ -0,0 +1,2 @@
+// block.json's viewScript, applied on front end only
+console.log('loaded: resources/views/blocks/acf-demo/view.js')

resources/views/blocks/article/block.json

@@ -0,0 +1,19 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/article",
+  "title": "Article Builder",
+  "category": "badegg",
+  "icon": {
+    "src": "format-aside",
+    "foreground": "#f58762"
+  },
+  "description": "A wrapper to contain core blocks",
+  "supports": {
+    "html": true,
+    "align": ["wide", "full"],
+    "color": {
+      "background": true,
+      "text": false
+    }
+  }
+}

resources/views/blocks/article/editor.scss

@@ -0,0 +1,4 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-badegg-article.block-editor-block-list__block {
+  display: block;
+}

resources/views/blocks/article/index.jsx

@@ -0,0 +1,39 @@
+// block.json's editorScript, loaded only in the block editor
+
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import metadata from './block.json';
+import allowedBlocks from '../../../json/core-block-whitelist.json';
+
+registerBlockType(metadata.name, {
+  edit({ attributes, setAttributes }) {
+    const blockProps = useBlockProps();
+
+    return (
+      <section { ...blockProps }>
+        <div className="container">
+          <InnerBlocks
+            allowedBlocks={ allowedBlocks }
+            defaultBlock={
+              {
+                name: "core/paragraph",
+                attributes: {
+                  placeholder: "start typing",
+                }
+              }
+            }
+          />
+        </div>
+      </section>
+    );
+  },
+  save() {
+    return (
+      <section { ...useBlockProps.save() }>
+        <div className="container">
+          <InnerBlocks.Content />
+        </div>
+      </section>
+    )
+  }
+});

resources/views/blocks/article/script.js

@@ -0,0 +1,2 @@
+// block.json's script, loaded in block editor and front end
+console.log('loaded: resources/views/blocks/article/script.js')

resources/views/blocks/article/style.scss

@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-badegg-article {
+  display: block;
+}

resources/views/blocks/article/view.js

@@ -0,0 +1,2 @@
+// block.json's viewScript, applied on front end only
+console.log('loaded: resources/views/blocks/article/view.js')

resources/views/blocks/example/block.json

@@ -0,0 +1,15 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/example",
+  "title": "Example",
+  "category": "badegg",
+  "icon": "cover-image",
+  "description": "This is an example of a custom native block",
+  "editorScript": "example-editor-script",
+  "editorStyle": "example-editor-style",
+  "style": "example-style",
+  "script": "example-script",
+  "supports": {
+    "html": false
+  }
+}

resources/views/blocks/example/editor.scss

@@ -0,0 +1,5 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-badegg-example.block-editor-block-list__block {
+  display: block;
+  border: 2px solid red;
+}

resources/views/blocks/example/index.jsx

@@ -0,0 +1,17 @@
+// block.json's editorScript, loaded only in the block editor
+
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import metadata from './block.json';
+
+registerBlockType(metadata.name, {
+  edit() {
+    const blockProps = useBlockProps();
+
+    return (
+      <section { ...blockProps }>
+        <h2>Bad Egg Block Example</h2>
+      </section>
+    );
+  }
+});

resources/views/blocks/example/render.blade.php

@@ -0,0 +1,3 @@
+<section class="block-badegg-example">
+  <h2>Bad Egg Example Block (Blade)</h2>
+</section>

resources/views/blocks/example/script.js

@@ -0,0 +1,2 @@
+// block.json's script, loaded in block editor and front end
+console.log('loaded: resources/views/blocks/example/script.js')

resources/views/blocks/example/style.scss

@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-badegg-example {
+  display: block;
+}

resources/views/blocks/example/view.js

@@ -0,0 +1,2 @@
+// block.json's viewScript, applied on front end only
+console.log('loaded: resources/views/blocks/example/view.js')

vite.config.js

@@ -1,17 +1,49 @@
 import { defineConfig } from 'vite'
 import laravel from 'laravel-vite-plugin'
 import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';
+import fg from 'fast-glob';
+import path from 'path';
+
+function blockAsset(file)
+{
+  const files = fg.sync('resources/views/blocks/**/' + file);
+  let list = {};
+
+  files.forEach(file => {
+    const parts = file.split(path.sep);
+    const fileName = parts[parts.length - 1];
+    const extension = fileName.split('.').pop();
+    const blockName = parts[parts.length - 2];
+
+    list[`blocks/${blockName}/${fileName.replace('.' + extension, '')}`] = `resources/views/blocks/${blockName}/${fileName}`;
+  });
+
+  return list;
+}
+
+const editorStyle = blockAsset('editor.scss');
+const script = blockAsset('script.js');
+const viewScript = blockAsset('view.js');
+const style = blockAsset('style.scss');
 
 export default defineConfig({
   base: '/app/themes/badegg/public/build/',
   plugins: [
     laravel({
-      input: [
-        'resources/css/app.scss',
-        'resources/js/app.js',
-        'resources/css/editor.scss',
-        'resources/js/editor.js',
-      ],
+      input: {
+        // 'resources/css/app.scss',
+        // 'resources/js/app.js',
+        // 'resources/css/editor.scss',
+        // 'resources/js/editor.js',
+        'css/app': 'resources/css/app.scss',
+        'js/app': 'resources/js/app.js',
+        'css/editor': 'resources/css/editor.scss',
+        'js/editor': 'resources/js/editor.js',
+        ...editorStyle,
+        ...viewScript,
+        ...script,
+        ...style,
+      },
       refresh: true,
       url: process.env.APP_URL,
     }),