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>

resources/views/layouts/block-acf.blade.php

@@ -0,0 +1,23 @@
+@php
+  $settings = get_field('settings');
+
+  $sectionProps = [
+    'class' => implode(' ', $CssClasses->section(get_field('settings'), @$block['name'], @$knockout)),
+  ];
+
+  $containerProps = [
+    'width' => @$settings['container_width'],
+  ];
+@endphp
+
+<div id="{{ @$block['anchor'] }}" @if($is_preview) class="{{ $sectionProps['class'] }}" @else {!! get_block_wrapper_attributes($sectionProps) !!} @endif>
+
+  @include('partials.block-acf-intro', ['props' => get_field('intro'), 'settings' => $settings])
+
+  <div class="{{ implode(' ', $CssClasses->container($containerProps)) }}">
+    @yield('block-content')
+  </div>
+
+  @include('partials.block-acf-footer', ['props' => get_field('footer'), 'settings' => $settings])
+
+</div>

resources/views/layouts/block.blade.php

@@ -1,50 +1,11 @@
-@if(@$data['section_anchor_id'])
-  <div id="{{ $data['section_anchor_id'] }}" class="section-anchor"></div>
+@if(!$is_preview)
+  <div {!! get_block_wrapper_attributes() !!}>
 @endif
 
-<section
-  id="{{ $block['id'] }}"
-  class="badegg-block
-    @if(@$data['section_classes']) {{ implode(' ', $data['section_classes']) }} @endif
-    {{ @$block['className'] }}
-  ">
-
-  <div class="section-{{ $block['name'] }}-inner">
-    @if(@$data['heading'] || @$data['blurb'])
-      <div class="section-intro inner inner-bottom @if($data['bg_colour'] != 'white') knockout @endif">
-        <div class="container">
-          <div class="section-intro-inner wysiwyg">
-            <h2>{{ @$data['heading'] }}</h2>
-            <p>{{ @$data['blurb'] }}</p>
-          </div>
-
-          @if(@$data['links'])
-            <div class="btn-wrap">
-              @foreach($data['links'] as $link)
-                @include('components.button', $link)
-              @endforeach
-            </div>
-          @endif
-        </div>
-      </div>
-    @endif
-
-    <div class="container container-{{ @$data['container_width'] ? $data['container_width'] : 'medium' }} block-content">
-      @yield('block-content')
-    </div>
-
-    @if(@$data['links'])
-      <div class="section-footer inner-top">
-        <div class="container">
-          <div class="btn-wrap">
-            @foreach($data['links'] as $link)
-              @include('components.button', $link)
-            @endforeach
-          </div>
-        </div>
-      </div>
-    @endif
+<div class="wp-block-inner">
+    @yield('block-content')
+</div>
 
+@if(!$is_preview)
   </div>
-
-</section>
+@endif

resources/views/partials/block-acf-footer.blade.php

@@ -0,0 +1,30 @@
+@if($props['blurb'])
+  @php
+    $containerProps = [
+      'width' => $props['container_width'],
+      'location' => 'block-footer',
+      'section' => true,
+      'align' => $props['align'],
+      'wysiwyg' => true,
+    ];
+  @endphp
+
+  <div class="{{ implode(' ', $CssClasses->container($containerProps, @$settings)) }}">
+    @if($props['blurb']) <p>{{ $props['blurb'] }}</p> @endif
+
+    @if(@$props['links'])
+      <div class="section-footer inner-top">
+        <div class="container">
+          <div class="btn-wrap">
+            @foreach($props['links'] as $link)
+              @include('components.button', $link)
+            @endforeach
+          </div>
+        </div>
+      </div>
+    @endif
+  </div>
+
+@endif
+
+

resources/views/partials/block-acf-intro.blade.php

@@ -0,0 +1,17 @@
+@if(@$props['heading'] || @$props['blurb'])
+  @php
+    $containerProps = [
+      'width' => $props['container_width'],
+      'location' => 'block-intro',
+      'section' => true,
+      'align' => $props['align'],
+      'wysiwyg' => true,
+    ];
+  @endphp
+
+  <div class="{{ implode(' ', $CssClasses->container($containerProps, @$settings)) }}">
+    @if($props['heading']) <h2>{{ $props['heading'] }}</h3> @endif
+    @if($props['blurb']) <p>{{ $props['blurb'] }}</p> @endif
+  </div>
+
+@endif