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

web/app/themes/badegg/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
+      }
+    }
+  }
+}

web/app/themes/badegg/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;
+}

web/app/themes/badegg/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')

web/app/themes/badegg/resources/views/blocks/acfdemo/render.blade.php

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

web/app/themes/badegg/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')

web/app/themes/badegg/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;
+}

web/app/themes/badegg/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')