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

cleanup allowed_blocks logic and add mechanism for disabling blade template for specific block
a working react/php dynamic wordpress block example integrated with the Vite build process
2025-12-13 14:22:42 +00:00 · 2025-12-12 13:12:37 +00:00 · 2025-12-10 19:44:32 +00:00 · 2025-12-09 22:40:44 +00:00 · 2025-12-09 22:11:20 +00:00 · 2025-12-09 22:10:55 +00:00
64 changed files with 1392 additions and 916 deletions
--- a/app/ACF/CloneGroup.php
+++ b/app/ACF/CloneGroup.php
@@ -8,21 +8,51 @@ class CloneGroup
    {

    }
-    public function background()
+    public function block_background()
    {
        return [
            'contrast',
-            'bg_type',
            'bg_colour',
            'bg_tint',
-            'bg_opacity',
-            'bg_image',
-            'bg_video',
-            'pattern',
-            'pattern_top',
-            'pattern_bottom',
-            'padding_top',
-            'padding_bottom',
        ];
    }
+
+    public function block_intro()
+    {
+        return [
+            'overline',
+            'heading',
+            'blurb',
+            'intro_alignment',
+        ];
+    }
+
+    public function block_footer()
+    {
+        return [
+            'blurb_footer',
+            'links',
+            'footer_alignment',
+        ];
+    }
+
+    public function block_settings()
+    {
+        return [
+            'section_anchor_id',
+            'padding_top',
+            'padding_bottom',
+            'container_width',
+            'angle_status',
+            'angle_position',
+            'angle_direction',
+            'angle_colour',
+            'angle_tint',
+        ];
+    }
+
+    public function block_all()
+    {
+        return array_merge($this->block_intro(), $this->block_footer(), $this->block_settings(), $this->block_background());
+    }
 }
--- a/app/ACF/Dynamic.php
+++ b/app/ACF/Dynamic.php
@@ -15,6 +15,7 @@ class Dynamic
        add_filter('acf/load_field/name=fontawesome_regular',   [ $this, 'load_fontawesome_regular_icons' ]);
        add_filter('acf/load_field/name=fontawesome_solid',     [ $this, 'load_fontawesome_solid_icons'   ]);
        add_filter('acf/load_field/name=fontawesome_brands',    [ $this, 'load_fontawesome_brand_icons'   ]);
+        add_action('acf/input/admin_footer',                    [$this, 'colour_ui'] );
    }

    public function load_colours( $field )
@@ -98,5 +99,43 @@ class Dynamic

        return $choices;
    }
+
+    public function colour_ui()
+    { ?>
+
+        <script type="text/javascript">
+            console.log("Script loaded from sage/app/ACF/Dynamic.php");
+
+            (function($) {
+
+                function my_custom_escaping_method( original_value){
+                    return original_value;
+                }
+
+                acf.add_filter('select2_escape_markup', function( escaped_value, original_value, $select, settings, field, instance ){
+                    console.log(field.data('name'));
+
+                    const whitelist = [
+                        'colour',
+                        'bg_colour',
+                        'angle_colour',
+                        'fontawesome_brands',
+                    ];
+
+                    // do something to the original_value to override the default escaping, then return it.
+                    // this value should still have some kind of escaping for security, but you may wish to allow specific HTML.
+                    if (whitelist.includes(field.data( 'name' ))) {
+                        return my_custom_escaping_method( original_value );
+                    }
+
+                    // return
+                    return escaped_value;
+                });
+
+            })(jQuery);
+
+        </script>
+
+    <?php }
 }

--- a/app/Admin/Blocks.php
+++ b/app/Admin/Blocks.php
@@ -1,135 +0,0 @@
-<?php
-
-namespace App\Admin;
-
-class Blocks
-{
-    public function __construct()
-    {
-        add_action('allowed_block_types_all', [$this, 'blacklist'], 100, 2);
-    }
-
-    public function blacklist()
-    {
-        // Reference:
-        // https://www.wpexplorer.com/how-to-remove-gutenberg-blocks/
-        // https://www.wpexplorer.com/wordpress-core-blocks-list/
-
-        // Existing blocks with Blade templates
-        // https://roots.io/acorn/docs/rendering-blade-views/#existing-blocks-with-blade-templates
-
-        $blocks = array_keys( \WP_Block_Type_Registry::get_instance()->get_all_registered() );
-
-        $blacklist = [
-            // Design
-            'core/button',
-            'core/comment-template',
-            'core/home-link',
-            'core/navigation-link',
-            'core/navigation-submenu',
-            'core/buttons',
-            'core/column',
-            'core/columns',
-            'core/group',
-            'core/more',
-            'core/nextpage',
-            'core/separator',
-            'core/spacer',
-            'core/text-columns',
-
-            // Embed
-            'core/embed',
-
-            // Media
-            'core/cover',
-            'core/file',
-            'core/gallery',
-            'core/image',
-            'core/media-text',
-            'core/audio',
-            'core/video',
-
-            // Reusable
-            'core/block',
-
-            // Text
-            'core/footnotes',
-            'core/heading',
-            'core/list',
-            'core/code',
-            'core/details',
-            'core/freeform',
-            'core/list-item',
-            'core/missing',
-            'core/paragraph',
-            'core/preformatted',
-            'core/pullquote',
-            'core/quote',
-            'core/table',
-            'core/verse',
-
-            // Theme
-            'core/avatar',
-            'core/comment-author-name',
-            'core/comment-content',
-            'core/comment-date',
-            'core/comment-edit-link',
-            'core/comment-reply-link',
-            'core/comments',
-            'core/comments-pagination',
-            'core/comments-pagination-next',
-            'core/comments-pagination-numbers',
-            'core/comments-pagination-previous',
-            'core/comments-title',
-            'core/loginout',
-            'core/navigation',
-            'core/pattern',
-            'core/post-author',
-            'core/post-author-biography',
-            'core/post-author-name',
-            'core/post-comments-form',
-            'core/post-content',
-            'core/post-date',
-            'core/post-excerpt',
-            'core/post-featured-image',
-            'core/post-navigation-link',
-            'core/post-template',
-            'core/post-terms',
-            'core/post-title',
-            'core/query',
-            'core/query-no-results',
-            'core/query-pagination',
-            'core/query-pagination-next',
-            'core/query-pagination-numbers',
-            'core/query-pagination-previous',
-            'core/query-title',
-            'core/read-more',
-            'core/site-logo',
-            'core/site-tagline',
-            'core/site-title',
-            'core/template-part',
-            'core/term-description',
-            'core/post-comments',
-
-            // Widgets
-            'core/legacy-widget',
-            'core/widget-group',
-            'core/archives',
-            'core/calendar',
-            'core/categories',
-            'core/latest-comments',
-            'core/latest-posts',
-            'core/page-list',
-            'core/page-list-item',
-            'core/rss',
-            'core/search',
-            'core/shortcode',
-            'core/social-link',
-            'core/tag-cloud',
-            'core/html',
-            'core/social-links',
-        ];
-
-        return array_values( array_diff( $blocks, $blacklist ) );
-    }
-}
--- a/app/Blocks/BadExample.php
+++ b/app/Blocks/BadExample.php
@@ -1,65 +0,0 @@
-<?php
-
-namespace App\Blocks;
-use App\Utilities;
-use App\ACF;
-
-class BadExample
-{
-    public function __construct()
-    {
-        add_action('acf/init', [$this, 'init']);
-    }
-
-    public function init()
-    {
-        acf_register_block_type([
-            'name'              => 'badegg/bad-example',
-            'title'             => __('Bad Example'),
-            'description'       => __('This is an example block'),
-            'render_callback'   => [ $this, 'render'],
-            'category'          => 'layout',
-            'multiple'          => false,
-            'icon'              => [
-                'src'   => 'dismiss',
-            ],
-            'supports'          => [
-                'align' => false,
-            ],
-        ]);
-    }
-
-    public function render($block)
-    {
-        $CssClasses = new Utilities\CssClasses;
-        $Colour     = new Utilities\Colour;
-        $CloneGroup = new ACF\CloneGroup;
-
-        $data = [];
-
-        $fields = [
-            'heading',
-            'blurb',
-        ];
-
-        $fields = array_merge($fields, $CloneGroup->background());
-
-        foreach($fields as $field):
-            $data[$field] = get_field($field);
-        endforeach;
-
-        unset($block['data']);
-        $block['name'] = str_replace('acf/', '', $block['name']);
-
-        $data = array_merge($data, $block);
-        $data['section_classes'] = $CssClasses->section($data);
-        $data['block'] = $block;
-
-        $data['knockout'] = ($Colour->is_dark($data['bg_colour'], $data['bg_tint'], $data['contrast'])) ? null : 'knockout';
-
-        echo \Roots\view('blocks.bad-example', [
-            'data' => $data,
-            'block' => $block,
-        ])->render();
-    }
-}
--- a/app/Utilities/CssClasses.php
+++ b/app/Utilities/CssClasses.php
@@ -14,7 +14,8 @@ class CssClasses {

        $classes = [
            'section',
-            'section-' . str_replace('acf/', '', $props['name']),
+            'section-' . $props['name'],
+            // 'section-' . str_replace('acf/', '', $props['name']),
            'bg-' . $this->colourTint([
                'colour' => @$props['bg_colour'],
                'tint' => @$props['bg_tint'],
--- a/app/View/Composers/App.php
+++ b/app/View/Composers/App.php
@@ -31,9 +31,6 @@ class App extends Composer
            'VideoSrcset' => new Utilities\VideoSrcset,
            'ImageSrcset' => new Utilities\ImageSrcset,
            'siteName' => $this->siteName(),
-            'company_legal' => get_field('badegg_company_legal', 'option'),
-            'company_tel' => get_field('badegg_company_tel', 'option'),
-            'company_email' => get_field('badegg_company_email', 'option'),
        ];
    }
 }
--- a/app/blocks.php
+++ b/app/blocks.php
@@ -0,0 +1,182 @@
+<?php
+
+/**
+ * Theme Blocks.
+ */
+
+namespace App\Blocks;
+
+// Disable all core blocks except what we need as inner blocks
+// resources/js/editor.js handles hiding the inner blocks at the top level
+add_action('allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2);
+
+// add blocks to the allowed list via filter
+add_filter('badegg_block_types_allow', function($allowed){
+    return array_merge($allowed, [
+        // 'core/categories',
+    ]);
+});
+
+// Add the badegg block category
+add_filter( 'block_categories_all' , function ( $categories ) {
+
+        // Adding a new category.
+        $categories = array_merge([
+            [
+                'slug'  => 'badegg',
+                'title' => __('Provided by Bad Egg Digital'),
+            ],
+        ], $categories);
+
+        return $categories;
+});
+
+// Auto register WP blocks
+add_action('init', function () {
+    $blocks = glob(get_theme_file_path('resources/views/blocks/*/block.json'));
+
+    foreach ($blocks as $block_json) {
+        $json = json_decode(file_get_contents($block_json));
+        $slug = basename(dirname($block_json));
+        $blockPath = "resources/views/blocks/{$slug}";
+
+        $viewScript = "{$blockPath}/view.js";
+        $script = "{$blockPath}/script.js";
+        $editorCSS = "{$blockPath}/editor.scss";
+        $style = "{$blockPath}/style.scss";
+
+        // editorStyle
+        if (file_exists(get_theme_file_path($editorCSS))) {
+            wp_register_style(
+                "{$slug}-editor-style",
+                \Vite::asset($editorCSS),
+                [],
+                null
+            );
+        }
+
+        // script
+        if(file_exists(get_theme_file_path($script))) {
+            wp_register_script(
+                "{$slug}-script",
+                \Vite::asset($script),
+                [],
+                null,
+                true
+            );
+        }
+
+        // style
+        if (file_exists(get_theme_file_path($style))) {
+            wp_register_style(
+                "{$slug}-style",
+                \Vite::asset($style),
+                [],
+                null
+            );
+        }
+
+        // viewScript
+        if(file_exists(get_theme_file_path($viewScript))) {
+            wp_register_script(
+                "{$slug}-view-script",
+                \Vite::asset($viewScript),
+                [],
+                null,
+                true
+            );
+        }
+
+        $props = [
+            'editor_style'      => "{$slug}-editor-style",
+            'style'             => "{$slug}-style",
+            'script'            => "{$slug}-script",
+            'view_script'       => "{$slug}-view-script",
+        ];
+
+        if(!property_exists($json, 'acf') && \Roots\view()->exists("blocks.{$slug}.render")) {
+            $props['render_callback']   = function ($attributes, $content, $block) {
+                $slug = basename($block->name);
+
+                return \Roots\view("blocks.{$slug}.render", [
+                    'attributes' => $attributes,
+                    'content' => $content,
+                    'block' => $block,
+                ]);
+            };
+        }
+
+        register_block_type($block_json, $props);
+    }
+});
+
+function list_inner()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/core-block-whitelist.json"));
+    $json = json_decode($file);
+
+    return $json;
+}
+
+function list_all()
+{
+    $blocks = array_map(function($block) {
+        $name = $block->name;
+
+        return $block->name;
+
+    }, \WP_Block_Type_Registry::get_instance()->get_all_registered());
+
+    return array_values($blocks);
+}
+
+function list_custom()
+{
+    return array_filter(list_all(), function($value){
+        if (str_starts_with($value, 'acf/') || str_starts_with($value, 'badegg/')) return $value;
+    });
+}
+
+function list_allowed()
+{
+    $add_allowed = [];
+
+    return array_merge(
+        list_custom(),
+        list_inner(),
+        apply_filters('badegg_block_types_allow', $add_allowed),
+    );
+}
+
+function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $wp_block = false, $context = false) {
+    $slug = basename($block['name']);
+    $block['slug'] = $slug;
+
+    $blade = \Roots\view("blocks.{$slug}.render", [
+        'block' => $block,
+        'content' => $content,
+        'is_preview' => $is_preview,
+        'post_id' => $post_id,
+        'wp_block' => $wp_block,
+        'context' => $context,
+    ]);
+
+    if($blade) {
+        echo $blade;
+    } else {
+        ob_start(); ?>
+
+        <section class="section bg-error knockout">
+            <div class="container container-small align-centre wysiwyg">
+                <h2>Missing Blade Template</h2>
+                <p>(resources/views/blocks/<?= $slug ?>/render.blade.php)</p>
+            </div>
+        </section>
+
+        <?php echo ob_get_clean();
+    }
+}
+
+add_action('wp_footer', function(){
+    echo '<pre>',print_r(list_allowed()),'</pre>';
+});
--- a/composer.json
+++ b/composer.json
@@ -35,7 +35,8 @@
  },
  "autoload": {
    "psr-4": {
-      "App\\": "app/"
+      "App\\": "app/",
+      "Blocks\\": "resources/views/acf-blocks"
    }
  },
  "require": {
--- a/functions.php
+++ b/functions.php
@@ -57,9 +57,22 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-autoload_psr4('Blocks');
 autoload_psr4('Ajax');

+function autoload_psr4_blocks() {
+    $path = __dir__ . '/resources/views/acf-blocks/*';
+    $namespace = 'Blocks\\';
+
+    foreach(glob($path, GLOB_ONLYDIR) as $directory) {
+        $name = basename($directory);
+        $class = $namespace . $name . '\\' . $name;
+
+        new $class();
+    }
+}
+
+autoload_psr4_blocks();
+
 /*
 |--------------------------------------------------------------------------
 | Register Sage Theme Files
@@ -72,7 +85,7 @@ autoload_psr4('Ajax');
 |
 */

-collect(['setup', 'filters'])
+collect(['setup', 'filters', 'blocks'])
    ->each(function ($file) {
        if (! locate_template($file = "app/{$file}.php", true, true)) {
            wp_die(
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
      "name": "sage",
      "devDependencies": {
        "@roots/vite-plugin": "^1.0.2",
+        "fast-glob": "^3.3.3",
        "laravel-vite-plugin": "^1.2.0",
        "sass": "^1.93.2",
        "vite": "^6.2.0"
@@ -512,6 +513,44 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/@parcel/watcher": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -1505,7 +1544,6 @@
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "dependencies": {
        "fill-range": "^7.1.1"
      },
@@ -1781,6 +1819,23 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
    "node_modules/fast-uri": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -1799,6 +1854,16 @@
      "license": "BSD-3-Clause",
      "peer": true
    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
    "node_modules/fdir": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1823,7 +1888,6 @@
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -1846,6 +1910,19 @@
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/glob-to-regexp": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -1886,7 +1963,6 @@
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -1897,7 +1973,6 @@
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@@ -1911,7 +1986,6 @@
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -1998,13 +2072,22 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/micromatch": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "dependencies": {
        "braces": "^3.0.3",
        "picomatch": "^2.3.1"
@@ -2019,7 +2102,6 @@
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -2144,6 +2226,27 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -2180,6 +2283,17 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/rollup": {
      "version": "4.52.5",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
@@ -2222,6 +2336,30 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
    "node_modules/safe-buffer": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -2441,7 +2579,6 @@
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "dev": true,
      "license": "MIT",
-      "optional": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
  },
  "devDependencies": {
    "@roots/vite-plugin": "^1.0.2",
+    "fast-glob": "^3.3.3",
    "laravel-vite-plugin": "^1.2.0",
    "sass": "^1.93.2",
    "vite": "^6.2.0"
--- a/resources/acf/group_block_bad_example.json
+++ b/resources/acf/group_block_bad_example.json
@@ -1,9 +1,9 @@
 {
-    "key": "group_block_bad_example",
-    "title": "Block: Bad Example",
+    "key": "group_block_editor",
+    "title": "Block: Editor",
    "fields": [
        {
-            "key": "field_676599038e31d",
+            "key": "field_67659ad8dc795",
            "label": "",
            "name": "",
            "aria-label": "",
@@ -16,42 +16,7 @@
                "class": "",
                "id": ""
            },
-            "message": "<h3><span class=\"dashicons dashicons-dismiss\"><\/span> Bad Example<\/h3>",
-            "new_lines": "wpautop",
-            "esc_html": 0
-        },
-        {
-            "key": "field_67659accdc794",
-            "label": "Content",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "placement": "top",
-            "endpoint": 0
-        },
-        {
-            "key": "field_67659ad8dc795",
-            "label": "Example",
-            "name": "",
-            "aria-label": "",
-            "type": "message",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "message": "Place your block-specific custom fields here.",
+            "message": "You can insert a variety of blocks inside of this one to build your page or post.",
            "new_lines": "wpautop",
            "esc_html": 0
        },
@@ -127,7 +92,7 @@
            {
                "param": "block",
                "operator": "==",
-                "value": "acf\/badegg-bad-example"
+                "value": "acf\/badegg-editor"
            }
        ]
    ],
@@ -140,5 +105,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1734712286
+    "modified": 1763915024
 }
--- a/resources/acf/group_block_intro.json
+++ b/resources/acf/group_block_intro.json
@@ -1,82 +0,0 @@
-{
-    "key": "group_block_intro",
-    "title": "Clone: Block Intro",
-    "fields": [
-        {
-            "key": "field_67659970db415",
-            "label": "Introduction",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "placement": "top",
-            "endpoint": 0
-        },
-        {
-            "key": "field_676599964d3cc",
-            "label": "Heading",
-            "name": "heading",
-            "aria-label": "",
-            "type": "text",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "maxlength": "",
-            "placeholder": "",
-            "prepend": "",
-            "append": ""
-        },
-        {
-            "key": "field_6765999d4d3cd",
-            "label": "Blurb",
-            "name": "blurb",
-            "aria-label": "",
-            "type": "textarea",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "maxlength": "",
-            "rows": 3,
-            "placeholder": "",
-            "new_lines": ""
-        }
-    ],
-    "location": [
-        [
-            {
-                "param": "widget",
-                "operator": "==",
-                "value": "rss"
-            }
-        ]
-    ],
-    "menu_order": 0,
-    "position": "normal",
-    "style": "default",
-    "label_placement": "top",
-    "instruction_placement": "label",
-    "hide_on_screen": "",
-    "active": true,
-    "description": "",
-    "show_in_rest": 0,
-    "modified": 1734711913
-}
--- a/resources/acf/group_clone_background_settings.json
+++ b/resources/acf/group_clone_background_settings.json
@@ -2,36 +2,9 @@
    "key": "group_clone_background_settings",
    "title": "Clone: Background Settings",
    "fields": [
-        {
-            "key": "field_672d3ba78bc40",
-            "label": "Background Type",
-            "name": "bg_type",
-            "aria-label": "",
-            "type": "select",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "20",
-                "class": "",
-                "id": ""
-            },
-            "choices": {
-                "0": "Solid Colour",
-                "image": "Still Photo",
-                "video": "Looping Video"
-            },
-            "default_value": 0,
-            "return_format": "value",
-            "multiple": 0,
-            "allow_null": 0,
-            "ui": 0,
-            "ajax": 0,
-            "placeholder": ""
-        },
        {
            "key": "field_67325dd23234e",
-            "label": "Background Colour",
+            "label": "Colour",
            "name": "bg_colour",
            "aria-label": "",
            "type": "select",
@@ -39,30 +12,28 @@
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
-                "width": "20",
+                "width": "50",
                "class": "",
                "id": ""
            },
            "choices": {
-                "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
-                "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
-                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
-                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
-                "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
-                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
-                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
            },
            "default_value": 0,
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
+            "allow_in_bindings": 1,
            "ui": 1,
            "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
        },
        {
            "key": "field_67325e213234f",
-            "label": "Background Tint",
+            "label": "Tint",
            "name": "bg_tint",
            "aria-label": "",
            "type": "select",
@@ -70,7 +41,7 @@
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
-                "width": "20",
+                "width": "50",
                "class": "",
                "id": ""
            },
@@ -87,9 +58,12 @@
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
+            "allow_in_bindings": 1,
            "ui": 1,
            "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
        },
        {
            "key": "field_67350f526abf1",
@@ -101,7 +75,7 @@
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
-                "width": "20",
+                "width": "",
                "class": "",
                "id": ""
            },
@@ -116,413 +90,9 @@
            "allow_null": 0,
            "ui": 0,
            "ajax": 0,
-            "placeholder": ""
-        },
-        {
-            "key": "field_67325e3432350",
-            "label": "Opacity",
-            "name": "bg_opacity",
-            "aria-label": "",
-            "type": "range",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_672d3ba78bc40",
-                        "operator": "!=",
-                        "value": "0"
-                    }
-                ]
-            ],
-            "wrapper": {
-                "width": "20",
-                "class": "",
-                "id": ""
-            },
-            "default_value": 30,
-            "min": 5,
-            "max": 100,
-            "step": 5,
-            "prepend": "",
-            "append": "%"
-        },
-        {
-            "key": "field_6734b234f9c47",
-            "label": "Pattern Edge",
-            "name": "pattern",
-            "aria-label": "",
-            "type": "select",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "20",
-                "class": "",
-                "id": ""
-            },
-            "choices": {
-                "0": "Disabled",
-                "top": "Top",
-                "bottom": "Bottom",
-                "both": "Both"
-            },
-            "default_value": 0,
-            "return_format": "value",
-            "multiple": 0,
-            "allow_null": 0,
-            "ui": 0,
-            "ajax": 0,
-            "placeholder": ""
-        },
-        {
-            "key": "field_6734b2daf9c4b",
-            "label": "Top Pattern",
-            "name": "pattern_top",
-            "aria-label": "",
-            "type": "group",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_6734b234f9c47",
-                        "operator": "==",
-                        "value": "top"
-                    }
-                ],
-                [
-                    {
-                        "field": "field_6734b234f9c47",
-                        "operator": "==",
-                        "value": "both"
-                    }
-                ]
-            ],
-            "wrapper": {
-                "width": "40",
-                "class": "",
-                "id": ""
-            },
-            "layout": "block",
-            "sub_fields": [
-                {
-                    "key": "field_673514b45e977",
-                    "label": "Colour",
-                    "name": "colour",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "50",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
-                        "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
-                        "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
-                        "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
-                        "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
-                        "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
-                        "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
-                    },
-                    "default_value": false,
-                    "return_format": "",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "ui": 1,
-                    "ajax": 0,
-                    "placeholder": ""
-                },
-                {
-                    "key": "field_673514d85e978",
-                    "label": "Tint",
-                    "name": "tint",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "50",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "lightest": "Lightest",
-                        "lighter": "Lighter",
-                        "light": "Light",
-                        "0": "None",
-                        "dark": "Dark",
-                        "darker": "Darker",
-                        "darkest": "Darkest"
-                    },
-                    "default_value": 0,
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": ""
-                }
-            ]
-        },
-        {
-            "key": "field_673514f15e979",
-            "label": "Bottom Pattern",
-            "name": "pattern_bottom",
-            "aria-label": "",
-            "type": "group",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "40",
-                "class": "",
-                "id": ""
-            },
-            "layout": "block",
-            "sub_fields": [
-                {
-                    "key": "field_673514f15e97a",
-                    "label": "Colour",
-                    "name": "colour",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "50",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
-                        "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
-                        "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
-                        "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
-                        "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
-                        "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
-                        "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
-                    },
-                    "default_value": false,
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "ui": 1,
-                    "ajax": 0,
-                    "placeholder": ""
-                },
-                {
-                    "key": "field_673514f15e97b",
-                    "label": "Tint",
-                    "name": "tint",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": [
-                        [
-                            {
-                                "field": "field_673514f15e97a",
-                                "operator": "!=",
-                                "value": "black"
-                            }
-                        ],
-                        [
-                            {
-                                "field": "field_673514f15e97a",
-                                "operator": "!=",
-                                "value": "0"
-                            }
-                        ]
-                    ],
-                    "wrapper": {
-                        "width": "50",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "lightest": "Lightest",
-                        "lighter": "Lighter",
-                        "light": "Light",
-                        "0": "None",
-                        "dark": "Dark",
-                        "darker": "Darker",
-                        "darkest": "Darkest"
-                    },
-                    "default_value": 0,
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": ""
-                }
-            ]
-        },
-        {
-            "key": "field_672d3b128bc39",
-            "label": "Background Image",
-            "name": "bg_image",
-            "aria-label": "",
-            "type": "image",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_672d3ba78bc40",
-                        "operator": "!=",
-                        "value": "0"
-                    }
-                ]
-            ],
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "return_format": "id",
-            "library": "all",
-            "min_width": "",
-            "min_height": "",
-            "min_size": "",
-            "max_width": "",
-            "max_height": "",
-            "max_size": "",
-            "mime_types": "",
-            "preview_size": "medium"
-        },
-        {
-            "key": "field_672d3b228bc3a",
-            "label": "Background Video",
-            "name": "bg_video",
-            "aria-label": "",
-            "type": "group",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_672d3ba78bc40",
-                        "operator": "==",
-                        "value": "video"
-                    }
-                ]
-            ],
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "layout": "block",
-            "sub_fields": [
-                {
-                    "key": "field_672d3b428bc3b",
-                    "label": "Extra Small",
-                    "name": "xs",
-                    "aria-label": "",
-                    "type": "file",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "20",
-                        "class": "",
-                        "id": ""
-                    },
-                    "return_format": "array",
-                    "library": "all",
-                    "min_size": "",
-                    "max_size": "",
-                    "mime_types": "mp4"
-                },
-                {
-                    "key": "field_672d3b678bc3c",
-                    "label": "Small",
-                    "name": "sm",
-                    "aria-label": "",
-                    "type": "file",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "20",
-                        "class": "",
-                        "id": ""
-                    },
-                    "return_format": "array",
-                    "library": "all",
-                    "min_size": "",
-                    "max_size": "",
-                    "mime_types": "mp4"
-                },
-                {
-                    "key": "field_672d3b728bc3d",
-                    "label": "Medium",
-                    "name": "md",
-                    "aria-label": "",
-                    "type": "file",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "20",
-                        "class": "",
-                        "id": ""
-                    },
-                    "return_format": "array",
-                    "library": "all",
-                    "min_size": "",
-                    "max_size": "",
-                    "mime_types": "mp4"
-                },
-                {
-                    "key": "field_672d3b7a8bc3e",
-                    "label": "Large",
-                    "name": "lg",
-                    "aria-label": "",
-                    "type": "file",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "20",
-                        "class": "",
-                        "id": ""
-                    },
-                    "return_format": "array",
-                    "library": "all",
-                    "min_size": "",
-                    "max_size": "",
-                    "mime_types": "mp4"
-                },
-                {
-                    "key": "field_672d3b838bc3f",
-                    "label": "Extra Large",
-                    "name": "xl",
-                    "aria-label": "",
-                    "type": "file",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "20",
-                        "class": "",
-                        "id": ""
-                    },
-                    "return_format": "array",
-                    "library": "all",
-                    "min_size": "",
-                    "max_size": "",
-                    "mime_types": "mp4"
-                }
-            ]
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
        }
    ],
    "location": [
@@ -543,5 +113,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1733505903
+    "modified": 1764224358
 }
--- a/resources/acf/group_clone_block_footer.json
+++ b/resources/acf/group_clone_block_footer.json
@@ -1,5 +1,5 @@
 {
-    "key": "group_block_footer",
+    "key": "group_clone_block_footer",
    "title": "Clone: Block Footer",
    "fields": [
        {
@@ -7,7 +7,7 @@
            "label": "Footer",
            "name": "",
            "aria-label": "",
-            "type": "tab",
+            "type": "accordion",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
@@ -16,7 +16,8 @@
                "class": "",
                "id": ""
            },
-            "placement": "top",
+            "open": 0,
+            "multi_expand": 0,
            "endpoint": 0
        },
        {
@@ -53,7 +54,7 @@
                "class": "",
                "id": ""
            },
-            "layout": "table",
+            "layout": "block",
            "pagination": 0,
            "min": 0,
            "max": 2,
@@ -85,6 +86,54 @@
                    "parent_repeater": "field_67659b7502137"
                }
            ]
+        },
+        {
+            "key": "field_682fb9ff58080",
+            "label": "Alignment",
+            "name": "footer_alignment",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "centre": "Centre",
+                "left": "Left",
+                "right": "Right"
+            },
+            "default_value": "centre",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        },
+        {
+            "key": "field_6828dac95eb68",
+            "label": "Footer (end)",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
        }
    ],
    "location": [
@@ -105,5 +154,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1734712326
+    "modified": 1747958307
 }
--- a/resources/acf/group_clone_block_intro.json
+++ b/resources/acf/group_clone_block_intro.json
@@ -0,0 +1,149 @@
+{
+    "key": "group_clone_block_intro",
+    "title": "Clone: Block Intro",
+    "fields": [
+        {
+            "key": "field_67659970db415",
+            "label": "Introduction",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 0
+        },
+        {
+            "key": "field_676599964d3cc",
+            "label": "Heading",
+            "name": "heading",
+            "aria-label": "",
+            "type": "textarea",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "hfont",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 0,
+            "rows": 2,
+            "placeholder": "",
+            "new_lines": ""
+        },
+        {
+            "key": "field_6765999d4d3cd",
+            "label": "Blurb",
+            "name": "blurb",
+            "aria-label": "",
+            "type": "textarea",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "rows": 3,
+            "placeholder": "",
+            "new_lines": ""
+        },
+        {
+            "key": "field_68bf1126c2760",
+            "label": "Links",
+            "name": "links",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "pagination": 0,
+            "min": 0,
+            "max": 1,
+            "collapsed": "",
+            "button_label": "Add Button",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_68bf1171c2761",
+                    "label": "Link",
+                    "name": "link",
+                    "aria-label": "",
+                    "type": "clone",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "clone": [
+                        "group_clone_button"
+                    ],
+                    "display": "seamless",
+                    "layout": "block",
+                    "prefix_label": 0,
+                    "prefix_name": 0,
+                    "parent_repeater": "field_68bf1126c2760"
+                }
+            ]
+        },
+        {
+            "key": "field_6828dae1d1bb0",
+            "label": "Intro (end)",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1757498726
+}
--- a/resources/acf/group_clone_block_settings.json
+++ b/resources/acf/group_clone_block_settings.json
@@ -7,7 +7,7 @@
            "label": "Settings",
            "name": "",
            "aria-label": "",
-            "type": "tab",
+            "type": "accordion",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
@@ -16,9 +16,62 @@
                "class": "",
                "id": ""
            },
-            "placement": "top",
+            "open": 0,
+            "multi_expand": 1,
            "endpoint": 0
        },
+        {
+            "key": "field_680016e0fac24",
+            "label": "Anchor ID",
+            "name": "section_anchor_id",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "#",
+            "append": ""
+        },
+        {
+            "key": "field_6800097e61765",
+            "label": "Container Width",
+            "name": "container_width",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "full": "Full Width",
+                "large": "Large",
+                "medium": "Medium",
+                "small": "Small",
+                "narrow": "Narrow"
+            },
+            "default_value": "medium",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 1,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        },
        {
            "key": "field_67350eb62cdf9",
            "label": "Top Padding",
@@ -29,7 +82,7 @@
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
-                "width": "33.33",
+                "width": "50",
                "class": "",
                "id": ""
            },
@@ -54,7 +107,7 @@
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
-                "width": "33.33",
+                "width": "50",
                "class": "",
                "id": ""
            },
@@ -83,8 +136,8 @@
                "class": "",
                "id": ""
            },
-            "open": 0,
-            "multi_expand": 0,
+            "open": 1,
+            "multi_expand": 1,
            "endpoint": 0
        },
        {
@@ -108,6 +161,24 @@
            "layout": "block",
            "prefix_label": 0,
            "prefix_name": 0
+        },
+        {
+            "key": "field_6828da67543fc",
+            "label": "Settings (end)",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
        }
    ],
    "location": [
@@ -128,5 +199,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1731536288
+    "modified": 1764247227
 }
--- a/resources/acf/group_clone_button.json
+++ b/resources/acf/group_clone_button.json
@@ -9,14 +9,15 @@
            "aria-label": "",
            "type": "link",
            "instructions": "",
-            "required": 0,
+            "required": 1,
            "conditional_logic": 0,
            "wrapper": {
-                "width": "40",
+                "width": "",
                "class": "",
                "id": ""
            },
-            "return_format": "array"
+            "return_format": "array",
+            "allow_in_bindings": 1
        },
        {
            "key": "field_673529a2a37a1",
@@ -26,14 +27,22 @@
            "type": "text",
            "instructions": "",
            "required": 0,
-            "conditional_logic": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3d7b2c273",
+                        "operator": "!=empty"
+                    }
+                ]
+            ],
            "wrapper": {
-                "width": "20",
+                "width": "",
                "class": "",
                "id": ""
            },
            "default_value": "",
            "maxlength": "",
+            "allow_in_bindings": 1,
            "placeholder": "",
            "prepend": "",
            "append": ""
@@ -46,28 +55,42 @@
            "type": "select",
            "instructions": "",
            "required": 0,
-            "conditional_logic": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3d7b2c273",
+                        "operator": "!=empty"
+                    }
+                ]
+            ],
            "wrapper": {
-                "width": "20",
+                "width": "",
                "class": "",
                "id": ""
            },
            "choices": {
-                "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
-                "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
-                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
-                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
-                "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #002448\"><\/i> Prussian Blue",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #fc533e\"><\/i> Sunset Orange",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #fdd400\"><\/i> Gold",
+                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #7d89d1\"><\/i> Moody Blue",
+                "quinary": "<i class=\"fas fa-circle\" style=\"color: #ffdab4\"><\/i> Frangipani",
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
-                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+                "quaternary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quaternary-white\"><\/i> Moody Blue to White",
+                "quinary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quinary-white\"><\/i> Frangipani to White",
+                "white-quaternary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quaternary\"><\/i> White to Moody Blue",
+                "white-quinary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quinary\"><\/i> White to Frangipani"
            },
-            "default_value": 0,
+            "default_value": "primary",
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
+            "allow_in_bindings": 1,
            "ui": 1,
            "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
        },
        {
            "key": "field_672d3dc52c275",
@@ -77,9 +100,16 @@
            "type": "select",
            "instructions": "",
            "required": 0,
-            "conditional_logic": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3d7b2c273",
+                        "operator": "!=empty"
+                    }
+                ]
+            ],
            "wrapper": {
-                "width": "20",
+                "width": "",
                "class": "",
                "id": ""
            },
@@ -91,9 +121,12 @@
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
+            "allow_in_bindings": 1,
            "ui": 0,
            "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
        }
    ],
    "location": [
@@ -114,5 +147,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1731537485
+    "modified": 1748001311
 }
--- a/resources/acf/group_post_social.json
+++ b/resources/acf/group_post_social.json
@@ -492,7 +492,9 @@
            "allow_null": 0,
            "ui": 1,
            "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
        },
        {
            "key": "field_664c65c653f1c",
@@ -530,5 +532,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1734711372
+    "modified": 1764224435
 }
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -18,9 +18,6 @@
@use "components/button";
@use "components/card";

-// Blocks
-@use "blocks/BadExample";
-
 // Page Styles
@use "views/page";

--- a/resources/css/editor.scss
+++ b/resources/css/editor.scss
@@ -0,0 +1,65 @@
+@use "app";
+@use "global/variables/colours";
+
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
+  &:hover:after {
+    content: '';
+    outline: 2px solid colours.$wpblue;
+    position: absolute;
+    inset: 0;
+  }
+
+  &:focus:after {
+    outline-style: dashed;
+  }
+}
+
+.editor-styles-wrapper {
+  padding: 1em;
+  background: transparent;
+}
+
+.editor-visual-editor {
+  .wp-block {
+    max-width: none;
+  }
+
+  .is-root-container > .wp-block:not(.block-list-appender) {
+    margin: 0;
+  }
+
+  .block-list-appender {
+    width: 350px;
+    max-width: 90%;
+    margin: 1em auto;
+  }
+
+  &__post-title-wrapper {
+    padding: 1rem;
+    margin: 0 0 3rem !important;
+    background: white;
+    box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
+  }
+
+  .wp-block-post-title {
+    position: relative;
+    padding: 0.5rem;
+    border: 1px solid rgba(black, 0.3);
+    margin: 0;
+
+    &::before {
+      content: 'Page Title';
+      position: absolute;
+      top: -0.5rem;
+      left: 0.5rem;
+      color: rgba(black, 0.3);
+      font-size: 0.8rem;
+      display: block;
+      padding: 0 0.5rem;
+      margin: 0;
+      background: white;
+      line-height: 1;
+      font-weight: 400;
+    }
+  }
+}
--- a/resources/css/global/_typography.scss
+++ b/resources/css/global/_typography.scss
@@ -63,7 +63,7 @@ p,
 li,
 td,
 label {
-  color: colours.$grey;
+  color: colours.$grey-dark;
  font-family: fonts.$font;
  font-weight: 400;
  line-height: 1.5em;
--- a/resources/css/global/variables/_colours.scss
+++ b/resources/css/global/variables/_colours.scss
@@ -1,5 +1,7 @@
@use "sass:color";

+$wpblue: #2271b1;
+
 //== Status
 $success: #39b54a;
 $error: #be1e2d;
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,16 +3,11 @@ import.meta.glob([
  '../fonts/**',
 ]);

-import domReady from '@wordpress/dom-ready';
-import blocks from './blocks.js';
-import Header from './sections/header.js';
+// import.meta.glob('../views/blocks/**/{style.scss,script.js,view.js}', { eager: true })
+
+import Header from '../views/sections/header/header.js';
 import LazyLoad from './lib/Lazy.js';

-/**
- * Application entrypoint
- */
-domReady(async () => {
-  LazyLoad();
-  blocks();
-  Header();
-});
+LazyLoad();
+Header();
+
--- a/resources/js/blocks.js
+++ b/resources/js/blocks.js
@@ -1,6 +0,0 @@
-import BadExample from "./blocks/BadExample";
-
-export default function()
-{
-  BadExample();
-}
--- a/resources/js/blocks/BadExample.js
+++ b/resources/js/blocks/BadExample.js
@@ -1,4 +0,0 @@
-export default function BadExample()
-{
-
-}
--- a/resources/js/editor.js
+++ b/resources/js/editor.js
@@ -1,5 +1,53 @@
 import domReady from '@wordpress/dom-ready';
+import blockWhitelist from '../json/core-block-whitelist.json';
+import.meta.glob('../views/blocks/**/{index.jsx,index.js}', { eager: true })

 domReady(() => {
-  //
+  const TEXT_EDITOR_BLOCKS = [
+    // Design
+    'core/separator',
+    'core/spacer',
+
+    // Media
+    'core/cover',
+    'core/file',
+    'core/gallery',
+    'core/image',
+    'core/media-text',
+    'core/audio',
+    'core/video',
+
+    // Text
+    'core/footnotes',
+    'core/heading',
+    'core/list',
+    'core/code',
+    'core/details',
+    'core/list-item',
+    'core/missing',
+    'core/paragraph',
+    'core/preformatted',
+    'core/pullquote',
+    'core/quote',
+    'core/table',
+    'core/verse',
+  ];
+
+  const restrictEditorParentBlocks = (settings, name) => {
+    if (TEXT_EDITOR_BLOCKS.includes(name)) {
+      settings.parent = [
+        'acf/badegg-editor',
+        'badegg/article',
+      ];
+    }
+
+    return settings
+  }
+
+  wp.hooks.addFilter(
+      'blocks.registerBlockType',
+      'your-project-name/restrict-parent-blocks',
+      restrictEditorParentBlocks
+  );
+
 });
--- a/resources/js/lib/isInsideBlock.js
+++ b/resources/js/lib/isInsideBlock.js
@@ -0,0 +1,12 @@
+export default function isInsideMyACFBlock(blockName)
+{
+  const editor = wp.data.select('core/block-editor');
+  const selectedId = editor.getSelectedBlockClientId();
+
+  if (!selectedId) return false;
+
+  const parents = editor.getBlockParents(selectedId);
+  const parentNames = parents.map(id => editor.getBlockName(id));
+
+  return parentNames.includes(blockName);
+}
--- a/resources/json/core-block-whitelist.json
+++ b/resources/json/core-block-whitelist.json
@@ -0,0 +1,26 @@
+[
+  "core/separator",
+  "core/spacer",
+
+  "core/cover",
+  "core/file",
+  "core/gallery",
+  "core/image",
+  "core/media-text",
+  "core/audio",
+  "core/video",
+
+  "core/footnotes",
+  "core/heading",
+  "core/list",
+  "core/code",
+  "core/details",
+  "core/list-item",
+  "core/missing",
+  "core/paragraph",
+  "core/preformatted",
+  "core/pullquote",
+  "core/quote",
+  "core/table",
+  "core/verse"
+]
--- a/resources/views/acf-blocks/Editor/Editor.blade.php
+++ b/resources/views/acf-blocks/Editor/Editor.blade.php
@@ -0,0 +1,21 @@
+@if(@$data['section_anchor_id'])
+  <div id="{{ $data['section_anchor_id'] }}" class="section-anchor"></div>
+@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">
+    <div class="container container-{{ @$data['container_width'] ? $data['container_width'] : 'medium' }} block-content wysiwyg">
+      <InnerBlocks
+        allowedBlocks="{!! esc_attr( wp_json_encode( $data['allowed_blocks'] ) ) !!}"
+        template="{!! esc_attr( wp_json_encode( $data['template'] ) ) !!}"
+      />
+    </div>
+  </div>
+
+</section>
--- a/resources/views/acf-blocks/Editor/Editor.jpg
+++ b/resources/views/acf-blocks/Editor/Editor.jpg
--- a/resources/views/acf-blocks/Editor/Editor.php
+++ b/resources/views/acf-blocks/Editor/Editor.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace Blocks\Editor;
+use App\Utilities;
+use App\ACF;
+
+class Editor
+{
+  public function __construct()
+  {
+    add_action('acf/init', [$this, 'init']);
+  }
+
+  public function init()
+  {
+      acf_register_block_type([
+          'name'              => 'badegg-editor',
+          'title'             => __('Text Editor'),
+          'description'       => __('Long form text content with support for things like headings, lists, and images.'),
+          'render_callback'   => [ $this, 'render'],
+          'category'          => 'badegg',
+          'icon'              => 'media-document',
+          'supports'          => [
+              'align' => false,
+              'jsx' => true,
+          ],
+          'example' => [
+              'attributes' => [
+                  'mode' => 'preview',
+                  'data' => [
+                    'inserter' => true,
+                  ],
+              ],
+          ],
+      ]);
+  }
+
+  public function render($block, string $content = '', bool $is_preview = false, int $post_id = 0)
+  {
+    $name = basename(__FILE__, '.php');
+    $themeURL = get_template_directory_uri();
+
+    if($is_preview && @$block['data']['inserter']):
+      echo '<img style="display: block; width: 100%" src="' . $themeURL . '/resources/views/acf-blocks/' . $name . '/' . $name . '.jpg" />';
+      return;
+    endif;
+
+    $CssClasses = new Utilities\CssClasses;
+    $Colour     = new Utilities\Colour;
+    $CloneGroup = new ACF\CloneGroup;
+
+    $data = [];
+
+    $fields = [
+
+    ];
+
+    $fields = array_merge($fields, $CloneGroup->block_all());
+
+    foreach($fields as $field):
+      $data[$field] = get_field($field);
+    endforeach;
+
+    unset($block['data']);
+    $block['name'] = str_replace('acf/', '', $block['name']);
+
+    $data = array_merge($data, $block);
+    $data['section_classes'] = $CssClasses->section($data);
+    $data['allowed_blocks'] = \App\Blocks\list_inner();
+    $data['template'] = $this->default_template();
+    $data['block'] = $block;
+
+    echo \Roots\view("acf-blocks.$name.$name", [
+      'data' => $data,
+      'block' => $block,
+    ])->render();
+  }
+
+  public function default_template()
+  {
+    return [
+      [
+        'core/heading',
+        [
+          'level' => 1,
+          'placeholder' => 'Heading',
+        ],
+      ],
+      [
+        'core/paragraph',
+        [
+          'placeholder' => 'You can type your own text, change the heading level, or delete it altogether. You can also type over this text.',
+        ],
+      ],
+      [
+        'core/paragraph',
+        [
+          'placeholder' => 'To adjust block settings, click the Text Editor icon floating above this block to display them in the sidebar.',
+        ],
+      ],
+    ];
+  }
+}
--- a/resources/views/acf-blocks/Editor/Editor.scss
+++ b/resources/views/acf-blocks/Editor/Editor.scss
--- a/resources/views/blocks/acfdemo/block.json
+++ b/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
+      }
+    }
+  }
+}
--- a/resources/views/blocks/acfdemo/editor.scss
+++ b/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;
+}
--- a/resources/views/blocks/acfdemo/index.js
+++ b/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')
--- a/resources/views/blocks/acfdemo/render.blade.php
+++ b/resources/views/blocks/acfdemo/render.blade.php
@@ -0,0 +1,3 @@
+<section class="wp-block-{{ $block['slug'] }}">
+  <h2>ACF Example</h2>
+</section>
--- a/resources/views/blocks/acfdemo/script.js
+++ b/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')
--- a/resources/views/blocks/acfdemo/style.scss
+++ b/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;
+}
--- a/resources/views/blocks/acfdemo/view.js
+++ b/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')
--- a/resources/views/blocks/article/block.json
+++ b/resources/views/blocks/article/block.json
@@ -0,0 +1,19 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/article",
+  "title": "Article Builder",
+  "category": "badegg",
+  "icon": {
+    "src": "format-aside",
+    "foreground": "#f58762"
+  },
+  "description": "A wrapper to contain core blocks",
+  "supports": {
+    "html": true,
+    "align": ["wide", "full"],
+    "color": {
+      "background": true,
+      "text": false
+    }
+  }
+}
--- a/resources/views/blocks/article/editor.scss
+++ b/resources/views/blocks/article/editor.scss
@@ -0,0 +1,4 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-badegg-article.block-editor-block-list__block {
+  display: block;
+}
--- a/resources/views/blocks/article/index.jsx
+++ b/resources/views/blocks/article/index.jsx
@@ -0,0 +1,39 @@
+// 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, {
+  edit({ attributes, setAttributes }) {
+    const blockProps = useBlockProps();
+
+    return (
+      <section { ...blockProps }>
+        <div className="container">
+          <InnerBlocks
+            allowedBlocks={ allowedBlocks }
+            defaultBlock={
+              {
+                name: "core/paragraph",
+                attributes: {
+                  placeholder: "start typing",
+                }
+              }
+            }
+          />
+        </div>
+      </section>
+    );
+  },
+  save() {
+    return (
+      <section { ...useBlockProps.save() }>
+        <div className="container">
+          <InnerBlocks.Content />
+        </div>
+      </section>
+    )
+  }
+});
--- a/resources/views/blocks/article/script.js
+++ b/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')
--- a/resources/views/blocks/article/style.scss
+++ b/resources/views/blocks/article/style.scss
@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-badegg-article {
+  display: block;
+}
--- a/resources/views/blocks/article/view.js
+++ b/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')
--- a/resources/views/blocks/example/block.json
+++ b/resources/views/blocks/example/block.json
@@ -0,0 +1,15 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/example",
+  "title": "Example",
+  "category": "badegg",
+  "icon": "cover-image",
+  "description": "This is an example of a custom native block",
+  "editorScript": "example-editor-script",
+  "editorStyle": "example-editor-style",
+  "style": "example-style",
+  "script": "example-script",
+  "supports": {
+    "html": false
+  }
+}
--- a/resources/views/blocks/example/editor.scss
+++ b/resources/views/blocks/example/editor.scss
@@ -0,0 +1,5 @@
+// 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;
+}
--- a/resources/views/blocks/example/index.jsx
+++ b/resources/views/blocks/example/index.jsx
@@ -0,0 +1,17 @@
+// block.json's editorScript, loaded only in the block editor
+
+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 { ...blockProps }>
+        <h2>Bad Egg Block Example</h2>
+      </section>
+    );
+  }
+});
--- a/resources/views/blocks/example/render.blade.php
+++ b/resources/views/blocks/example/render.blade.php
@@ -0,0 +1,3 @@
+<section class="block-badegg-example">
+  <h2>Bad Egg Example Block (Blade)</h2>
+</section>
--- a/resources/views/blocks/example/script.js
+++ b/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')
--- a/resources/views/blocks/example/style.scss
+++ b/resources/views/blocks/example/style.scss
@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-badegg-example {
+  display: block;
+}
--- a/resources/views/blocks/example/view.js
+++ b/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')
--- a/resources/views/components/button.blade.php
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,5 @@
+@if(@$link)
+  <a href="{{ @$link['url'] }}" target="{{ @$link['target'] }}" class="btn {{ @$colour ?: 'primary' }} {{ $style ?: 'solid' }} {{ @$class }}">
+    <span>{{ @$link['title'] }}</span>
+  </a>
+@endif
--- a/resources/views/components/image.blade.php
+++ b/resources/views/components/image.blade.php
@@ -1,15 +1,18 @@
-@php($image = wp_get_attachment_image_src(@$id, 'medium'))
+@php($image = wp_get_attachment_image_src(@$id, @$size))

-<img
-  @if(@$lazy)
-    src="{{ wp_get_attachment_image_src($id, 'lazy')[0] }}"
-    data-src="{{ $image[0] }}"
-    class="lazy"
-  @else
-    src="{{ $image[0] }}"
-  @endif
+@if($image)
+  <img
+    @if(@$lazy && !is_admin())
+      src="{{ wp_get_attachment_image_src($id, 'lazy')[0] }}"
+      data-src="{{ @$image[0] }}"
+      class="lazy {{ @$class }}"
+    @else
+      src="{{ $image[0] }}"
+      class="{{ @$class }}"
+    @endif

-  alt="{{ get_post_meta( $id, '_wp_attachment_image_alt', true ) }}"
-  width="{{ $image[1] }}"
-  height="{{ $image[2] }}"
-/>
+    alt="{{ get_post_meta( $id, '_wp_attachment_image_alt', true ) }}"
+    width="{{ $image[1] }}"
+    height="{{ $image[2] }}"
+  />
+@endif
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -17,19 +17,24 @@
        {{ __('Skip to content', 'sage') }}
      </a>

-      @include('sections.header')
+      @include('sections.header.header')

-      <main id="main" class="main">
-        @yield('content')
-      </main>
+      <div class="wrapper">
+        <main id="main" class="main">
+          @yield('content')
+        </main>

-      @hasSection('sidebar')
-        <aside class="sidebar">
-          @yield('sidebar')
-        </aside>
-      @endif
+        @hasSection('sidebar')
+          <aside class="sidebar">
+            @yield('sidebar')
+          </aside>
+        @endif
+
+        @include('sections.footer.footer')
+      </div>
+
+      @include('partials.menu-off-canvas')

-      @include('sections.footer')
    </div>

    @php(do_action('get_footer'))
--- a/resources/views/layouts/block.blade.php
+++ b/resources/views/layouts/block.blade.php
@@ -1,34 +1,50 @@
-<section id="{{ $block['id'] }}" class="{{ implode(' ', $data['section_classes']) }} {{ @$block['className'] }}">
-  @if(@$data['heading'] || @$data['blurb'])
-    <div class="section-intro container container-narrow align-centre wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
-      <h2>{{ @$data['heading'] }}</h2>
-      @include('components.divider')
-      <p>{{ @$data['blurb'] }}</p>
-    </div>
-  @endif
+@if(@$data['section_anchor_id'])
+  <div id="{{ $data['section_anchor_id'] }}" class="section-anchor"></div>
+@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="section container container-large block-content bg-watermarked-content">
-    @yield('block-content')
  </div>

-  @if(@$data['links'])
-    <div class="section-footer container container-narrow align-centre wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
-      <div class="button-wrap">
-        @foreach($data['links'] as $link)
-          @include('components.button', $link)
-        @endforeach
-      </div>
-    </div>
-  @endif
-
-  @if(@$data['bg_image'])
-    <div class="bg-watermarked-image" style="opacity: {!! (@$data['bg_opacity'] ?: 30) * 0.01 !!}">
-      {!! $ImageSrcset->render([
-        'image' => $data['bg_image'],
-        'name' => 'hero',
-        'lazy' => true,
-      ]) !!}
-    </div>
-  @endif
-
 </section>
--- a/resources/views/partials/menu-off-canvas.blade.php
+++ b/resources/views/partials/menu-off-canvas.blade.php
@@ -0,0 +1,28 @@
+<div class="menu-off-canvas bg-white">
+  <div class="inner">
+    <div class="menu-off-canvas-logo">
+      <a class="brand" href="{{ home_url('/') }}">
+        Site Logo
+      </a>
+
+      <button
+        class="block menu-toggle menu-close js-menu-close"
+        type="button"
+        command="toggle-popover"
+        commandfor="menu-side"
+        aria-expanded="false"
+        aria-controls="menu-side"
+      >
+        <i></i>
+        <i></i>
+        <i></i>
+        <span class="visually-hidden">Close Mobile Menu</span>
+      </button>
+    </div>
+
+    @if (has_nav_menu('primary_navigation'))
+      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'caret-links nolist']) !!}
+    @endif
+  </div>
+
+</div>
--- a/resources/views/sections/footer/footer.blade.php
+++ b/resources/views/sections/footer/footer.blade.php
--- a/resources/views/sections/footer/footer.scss
+++ b/resources/views/sections/footer/footer.scss
--- a/resources/views/sections/header/header.blade.php
+++ b/resources/views/sections/header/header.blade.php
--- a/resources/views/sections/header/header.js
+++ b/resources/views/sections/header/header.js
@@ -24,6 +24,8 @@ export default function Header() {
    const position = body.offsetTop;
    const header = document.querySelector(".site-header");

+    if(!header) return;
+
    if (scrolled > position + header.offsetHeight) {
      body.classList.add("scrolled");
    } else {
--- a/resources/views/sections/header/header.scss
+++ b/resources/views/sections/header/header.scss
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,17 +1,49 @@
 import { defineConfig } from 'vite'
 import laravel from 'laravel-vite-plugin'
 import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';
+import fg from 'fast-glob';
+import path from 'path';
+
+function blockAsset(file)
+{
+  const files = fg.sync('resources/views/blocks/**/' + file);
+  let list = {};
+
+  files.forEach(file => {
+    const parts = file.split(path.sep);
+    const fileName = parts[parts.length - 1];
+    const extension = fileName.split('.').pop();
+    const blockName = parts[parts.length - 2];
+
+    list[`blocks/${blockName}/${fileName.replace('.' + extension, '')}`] = `resources/views/blocks/${blockName}/${fileName}`;
+  });
+
+  return list;
+}
+
+const editorStyle = blockAsset('editor.scss');
+const script = blockAsset('script.js');
+const viewScript = blockAsset('view.js');
+const style = blockAsset('style.scss');

 export default defineConfig({
-  base: '/app/themes/sage/public/build/',
+  base: '/app/themes/badegg/public/build/',
  plugins: [
    laravel({
-      input: [
-        'resources/css/app.scss',
-        'resources/js/app.js',
-        'resources/css/editor.scss',
-        'resources/js/editor.js',
-      ],
+      input: {
+        // 'resources/css/app.scss',
+        // 'resources/js/app.js',
+        // 'resources/css/editor.scss',
+        // 'resources/js/editor.js',
+        'css/app': 'resources/css/app.scss',
+        'js/app': 'resources/js/app.js',
+        'css/editor': 'resources/css/editor.scss',
+        'js/editor': 'resources/js/editor.js',
+        ...editorStyle,
+        ...viewScript,
+        ...script,
+        ...style,
+      },
      refresh: true,
      url: process.env.APP_URL,
    }),
Author	SHA1	Message	Date
Steve Ross	d47b3fdb07	auto-registering blocks in php and javascript with dynamic enqueuing of associated styles and scripts with support for scss and blade	2025-12-13 14:22:42 +00:00
Steve Ross	da8097e7c3	cleanup allowed_blocks logic and add mechanism for disabling blade template for specific block	2025-12-12 13:12:37 +00:00
Steve Ross	917150bbe6	a working react/php dynamic wordpress block example integrated with the Vite build process	2025-12-10 19:44:32 +00:00
Steve Ross	b16bd77355	restrict core blocks to inner blocks of specified parent blocks. blocks blocks blocks	2025-12-09 22:40:44 +00:00
Steve Ross	7d1beee2da	stop loading blocks in main app.js	2025-12-09 22:11:20 +00:00
Steve Ross	292fc01370	block whitelist json	2025-12-09 22:10:55 +00:00
Steve Ross	68a42deebb	remove BadExample css	2025-12-09 22:10:35 +00:00
Steve Ross	f6ba2ea71b	remove old code	2025-12-09 22:09:49 +00:00
Steve Ross	ab4aad0fc6	move Blocks.php stuff alongside top level includes	2025-12-09 22:07:50 +00:00
Steve Ross	5558a60696	use json file for block whitelist	2025-12-09 22:06:47 +00:00
Steve Ross	2ee1171474	basic block styles within editor	2025-12-09 22:04:29 +00:00
Steve Ross	046da1742e	remove blocks.js	2025-12-09 22:02:59 +00:00
Steve Ross	65bc75b56e	tweak acf block settings	2025-12-09 22:02:24 +00:00
Steve Ross	8ac6583758	add $wpblue var	2025-12-09 22:01:52 +00:00
Steve Ross	b03bdc2139	fix container width in blocks	2025-12-09 22:01:23 +00:00
Steve Ross	0055a25420	new text editor block that contains core blocks as inner blocks and prevents them from being used at top level	2025-11-27 07:14:31 +00:00
Steve Ross	00d0861014	default content block that uses core inner blocks	2025-11-23 17:34:49 +00:00
Steve Ross	de94d0e68e	update vite base path	2025-11-22 20:51:28 +00:00