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

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