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

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,5 +1,6 @@
 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 TEXT_EDITOR_BLOCKS = [

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

@@ -66,7 +66,7 @@ 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;
 

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

@@ -3,8 +3,17 @@
   "name": "badegg/article",
   "title": "Article Builder",
   "category": "badegg",
+  "icon": {
+    "src": "format-aside",
+    "foreground": "#f58762"
+  },
   "description": "A wrapper to contain core blocks",
-  "editorScript": "article-editor-script",
-  "editorStyle": "article-editor-style",
-  "style": "article-style"
+  "supports": {
+    "html": true,
+    "align": ["wide", "full"],
+    "color": {
+      "background": true,
+      "text": false
+    }
+  }
 }

resources/views/blocks/article/editor.scss

@@ -1,3 +1,4 @@
-.block-badegg-example-editor {
+// 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

@@ -1,13 +1,11 @@
+// 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, {
-  icon: {
-    src: 'format-aside',
-    foreground: '#f58762',
-  },
   edit({ attributes, setAttributes }) {
     const blockProps = useBlockProps();
 

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

@@ -1,3 +0,0 @@
-<section class="block-badegg-article">
-  <h2>Bad Egg Article Block (Blade)</h2>
-</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

@@ -1,3 +1,4 @@
-.block-badegg-hero {
+// 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

@@ -4,9 +4,12 @@
   "title": "Example",
   "category": "badegg",
   "icon": "cover-image",
-  "description": "This is an example of a custom Wordpress Block created using the offical method.",
+  "description": "This is an example of a custom native block",
   "editorScript": "example-editor-script",
   "editorStyle": "example-editor-style",
   "style": "example-style",
-  "render": "resources/blocks/example/render.blade.php"
+  "script": "example-script",
+  "supports": {
+    "html": false
+  }
 }

resources/views/blocks/example/editor.scss

@@ -1,3 +1,5 @@
-.block-badegg-example-editor {
+// 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

@@ -1,11 +1,17 @@
-import { registerBlockType } from '@wordpress/blocks';
+// block.json's editorScript, loaded only in the block editor
 
-registerBlockType('badegg/example', {
+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 className="block-badegg-example">
+      <section { ...blockProps }>
         <h2>Bad Egg Block Example</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

@@ -1,3 +1,4 @@
-.block-badegg-hero {
+// 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')