use standard block.json method with ACF blocks

resources/views/blocks/acfdemo/block.json

@@ -6,12 +6,6 @@
   "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",

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

@@ -1,3 +1,10 @@
-<section class="wp-block-{{ $block['slug'] }}">
-  <h2>ACF Example</h2>
-</section>
+@extends('layouts.block-acf', [
+  'block' => $block,
+  'is_preview' => $is_preview,
+  'context' => $context,
+  'knockout' => true,
+])
+
+@section('block-content')
+  {!! the_field('content') !!}
+@overwrite

resources/views/blocks/article/index.jsx

@@ -10,7 +10,7 @@ registerBlockType(metadata.name, {
     const blockProps = useBlockProps();
 
     return (
-      <section { ...blockProps }>
+      <div { ...blockProps }>
         <div className="container">
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
@@ -24,16 +24,16 @@ registerBlockType(metadata.name, {
             }
           />
         </div>
-      </section>
+      </div>
     );
   },
   save() {
     return (
-      <section { ...useBlockProps.save() }>
+      <div { ...useBlockProps.save() }>
         <div className="container">
           <InnerBlocks.Content />
         </div>
-      </section>
+      </div>
     )
   }
 });

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

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