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

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')