add css class name helper functions for blocks

.editorconfig

@@ -1,15 +1,25 @@
 root = true
 
 [*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
 indent_style = space
 indent_size = 2
-end_of_line = lf
-charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.php]
-indent_size = 2
+quote_type = single
 
 [*.md]
 trim_trailing_whitespace = false
+
+[*.php]
+indent_size = 4
+
+[*.blade.php]
+indent_size = 2
+
+[resources/views/**.php]
+indent_size = 2
+
+[index.php]
+indent_size = 2

composer.json

@@ -54,7 +54,7 @@
     "oscarotero/env": "^2.1",
     "roots/bedrock-autoloader": "^1.0",
     "roots/bedrock-disallow-indexing": "^2.0",
-    "roots/wordpress": "6.8.2",
+    "roots/wordpress": "^6.9",
     "roots/wp-config": "1.0.0",
     "wpackagist-theme/twentytwentyfive": "^1.0",
     "koodimonni-language/core-en_gb": "^6.8",
@@ -65,9 +65,9 @@
     "roots/acorn-prettify": "^1.0",
     "wpackagist-plugin/contact-form-7": "^6.1",
     "wpackagist-plugin/flamingo": "^2.6",
-    "wpackagist-plugin/resizable-editor-sidebar": "^1.02",
-    "wpengine/advanced-custom-fields-pro": "^6.5",
-    "ourcodeworld/name-that-color": "dev-master"
+    "wpengine/advanced-custom-fields-pro": "^6.7",
+    "ourcodeworld/name-that-color": "dev-master",
+    "wpackagist-plugin/resizable-editor-sidebar": "1.0.6"
   },
   "require-dev": {
     "roave/security-advisories": "dev-latest",

web/app/themes/badegg/app/ACF/CloneGroup.php

@@ -1,58 +0,0 @@
-<?php
-
-namespace App\ACF;
-
-class CloneGroup
-{
-    public function __construct()
-    {
-
-    }
-    public function block_background()
-    {
-        return [
-            'contrast',
-            'bg_colour',
-            'bg_tint',
-        ];
-    }
-
-    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());
-    }
-}

web/app/themes/badegg/app/ACF/Dynamic.php

@@ -8,14 +8,15 @@ class Dynamic
 {
     public function __construct()
     {
-        add_filter('acf/load_field/name=colour',                [ $this, 'load_colours'   ]);
-        add_filter('acf/load_field/name=bg_colour',             [ $this, 'load_colours'   ]);
-        add_filter('acf/load_field/name=tint',                  [ $this, 'load_tints'   ]);
-        add_filter('acf/load_field/name=bg_tint',               [ $this, 'load_tints'   ]);
+        add_filter('acf/load_field/name=colour',                [ $this, 'load_colours' ]);
+        add_filter('acf/load_field/name=bg_colour',             [ $this, 'load_colours' ]);
+        add_filter('acf/load_field/name=tint',                  [ $this, 'load_tints' ]);
+        add_filter('acf/load_field/name=bg_tint',               [ $this, 'load_tints' ]);
+        add_filter('acf/load_field/name=container_width',       [ $this, 'container_width' ]);
         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'] );
+        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 )
@@ -25,7 +26,9 @@ class Dynamic
 
         $colours = $colour->values();
 
-        $field['choices'] = [];
+        $field['choices'] = [
+            '0' => __('None', 'badegg'),
+        ];
 
         foreach($colours as $slug => $hex):
             $field['choices'][$slug] = '<i class="fas fa-circle" style="color: '. $hex .'"></i> ' . @$NameThatColour->name($hex)['name'];
@@ -47,13 +50,27 @@ class Dynamic
                 $field['choices'][$slug] = ucfirst($slug);
 
             else:
-                $field['choices'][0] = 'None';
+                $field['choices'][0] =  __('None', 'badegg');
             endif;
         endforeach;
 
         return $field;
     }
 
+    public function container_width( $field )
+    {
+        $field['choices'] = [
+            0 => 'Auto',
+            'narrow' => __('Narrow', 'badegg'),
+            'small'  => __('Small', 'badegg'),
+            'medium' => __('Medium', 'badegg'),
+            'large'  => __('Large', 'badegg'),
+            'full'   => __('Edge to edge', 'badegg'),
+        ];
+
+        return $field;
+    }
+
     public function load_fontawesome_regular_icons( $field )
     {
         $field['choices'] = [];

web/app/themes/badegg/app/Admin/Blocks.php

@@ -1,155 +0,0 @@
-<?php
-
-namespace App\Admin;
-use Blocks\Editor;
-
-class Blocks
-{
-    public function __construct()
-    {
-        add_filter( 'block_categories_all' ,   [$this, 'categories']);
-        add_action('allowed_block_types_all', [$this, 'blacklist'], 100, 2);
-    }
-
-    public function categories( $categories )
-    {
-
-        // Adding a new category.
-        $categories = array_merge([
-            [
-                'slug'  => 'badegg',
-                'title' => __('Provided by Bad Egg Digital'),
-            ],
-        ], $categories);
-
-        return $categories;
-    }
-
-    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',
-        ];
-
-        $Editor = new Editor\Editor();
-
-        $blacklist = array_diff($blacklist, $Editor->inner_blocks());
-
-        return array_values( array_diff( $blocks, $blacklist ) );
-    }
-}

web/app/themes/badegg/app/Utilities/Colour.php

@@ -40,7 +40,7 @@ class Colour
             endforeach;
         endif;
 
-        $values['0'] = '#FFFFFF';
+        $values['white'] = '#FFFFFF';
         $values['black'] = '#000000';
 
         return $values;

web/app/themes/badegg/app/Utilities/CssClasses.php

@@ -3,56 +3,94 @@
 namespace App\Utilities;
 
 class CssClasses {
-    public function section($props = [])
+    public function section($props = [], $name = 'unnamed', $knockout = false)
     {
-        $Colour = new Colour;
-        $hex = $Colour->name2hex(@$props['bg_colour'], @$props['bg_tint']);
+        $defaults = [
+            'padding_top' => null,
+            'padding_bottom' => null,
+            'bg_colour' => null,
+            'bg_tint' => null,
+            'contrast' => null,
+            'bg_image' => null,
+        ];
 
-        $pattern = @$props['pattern'];
-        $pattern_top = @$props['pattern_top'];
-        $pattern_bottom = @$props['pattern_bottom'];
+        $props = wp_parse_args($props, $defaults);
+
+        $Colour = new Colour;
+        $hex = $Colour->name2hex($props['bg_colour'], $props['bg_tint']);
 
         $classes = [
             'section',
-            'section-' . $props['name'],
-            // 'section-' . str_replace('acf/', '', $props['name']),
-            'bg-' . $this->colourTint([
-                'colour' => @$props['bg_colour'],
-                'tint' => @$props['bg_tint'],
-            ]),
+            'section-' . str_replace('/', '-', $name),
         ];
 
-        if($Colour->is_dark($hex) && $this->is_knockout_block($props['name']))
+        if($props['bg_colour'])
+            $classes[] = 'bg-' . $this->colourTint([
+                'colour' => $props['bg_colour'],
+                'tint' => $props['bg_tint'],
+            ]);
+
+        if(($knockout && $Colour->is_dark($hex) || $props['contrast'] == 'light'))
             $classes[] = 'knockout';
 
-        if(@$props['padding_top'])
+        if($props['padding_top'])
             $classes[] = 'section-zero-top';
 
-        if(@$props['padding_bottom'])
+        if($props['padding_bottom'])
             $classes[] = 'section-zero-bottom';
 
-        if($pattern):
-            if($pattern == 'both'):
-                $classes[] =  'pattern-top';
-                $classes[] =  'pattern-bottom';
-
-            else:
-                $classes[] = 'pattern-' . $pattern;
-
-            endif;
-
-            if(in_array($pattern, ['top', 'both']))
-                $classes[] = 'pattern-top-' . $this->colourTint($pattern_top);
-
-            if(in_array($pattern, ['bottom', 'both']))
-                $classes[] = 'pattern-bottom-' . $this->colourTint($pattern_bottom);
-
-        endif;
-
-        if(@$props['bg_image'])
+        if($props['bg_image'])
             $classes[] = "bg-watermarked";
 
-        if(@$props['className']) $args = array_merge($classes, explode(' ', $props['className']));
+        return $classes;
+    }
+
+    public function container($args = [], $bg_props = [])
+    {
+        $args = wp_parse_args($args, [
+            'width' => null,
+            'location' => null,
+            'section' => false,
+            'align' => null,
+            'wysiwyg' => false,
+        ]);
+
+        $bg_props = wp_parse_args($bg_props, [
+            'bg_colour' => null,
+            'bg_tint' => null,
+            'contrast' => null,
+        ]);
+
+        $Colour = new Colour;
+        $hex = $Colour->name2hex($bg_props['bg_colour'], $bg_props['bg_tint']);
+
+        $classes = [
+            'container',
+        ];
+
+        if($args['width'])
+            $classes[] = 'container-' . $args['width'];
+
+        if($args['location'])
+            $classes[] = $args['location'];
+
+        if($args['section'])
+            $classes[] = 'section';
+
+        if(str_contains($args['location'], 'intro'))
+            $classes[] = 'section-zero-top';
+
+        if(str_contains($args['location'], 'footer'))
+            $classes[] = 'section-zero-bottom';
+
+        if($args['wysiwyg'])
+            $classes[] = 'wysiwyg';
+
+        if($args['align'])
+            $classes[] = 'align-' . $args['align'];
+
+        if(($Colour->is_dark($hex) || $bg_props['contrast'] == 'light'))
+            $classes[] = 'knockout';
 
         return $classes;
     }
@@ -94,7 +132,7 @@ class CssClasses {
     public function is_knockout_block($name = null)
     {
         $blacklist = [
-            'bad-example',
+            'badegg/acfdemo',
         ];
 
         if(in_array($name, $blacklist)):

web/app/themes/badegg/app/Utilities/RestAPI.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Utilities;
+
+class RestAPI
+{
+    public function __construct()
+    {
+        add_action( 'rest_api_init', [$this, 'blocks']);
+    }
+
+    public function blocks( )
+    {
+        $restBase = 'badegg/v1';
+
+        register_rest_route($restBase, '/blocks/container-widths', [
+            'methods' => 'GET',
+            'callback' => [ $this, 'containerWidths'],
+            'permission_callback' => function(){
+                return true;
+            },
+        ]);
+    }
+
+    public function containerWidths()
+    {
+        $containerWidths = [
+            [ 'label' => __('Auto', 'badegg'),          'value' => 0        ],
+            [ 'label' => __('Narrow', 'badegg'),        'value' => 'narrow' ],
+            [ 'label' => __('Small', 'badegg'),         'value' => 'small'  ],
+            [ 'label' => __('Medium', 'badegg'),        'value' => 'medium' ],
+            [ 'label' => __('Large', 'badegg'),         'value' => 'large'  ],
+            [ 'label' => __('Edge to edge', 'badegg'),  'value' => 'full'   ],
+        ];
+
+        return rest_ensure_response($containerWidths);
+    }
+}

web/app/themes/badegg/app/View/Composers/Blocks.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\View\Composers;
+
+use Roots\Acorn\View\Composer;
+use App\Utilities;
+
+class Blocks extends Composer
+{
+    /**
+     * List of views served by this composer.
+     *
+     * @var array
+     */
+    protected static $views = [
+        'layouts.block-acf',
+        'partials.block-*',
+    ];
+
+    /**
+     * Data to be passed to view before rendering.
+     *
+     * @return array
+     */
+    public function with()
+    {
+        return [
+            'CssClasses' => new Utilities\CssClasses,
+        ];
+    }
+}

web/app/themes/badegg/app/blocks.php

@@ -0,0 +1,192 @@
+<?php
+
+/**
+ * Theme Blocks.
+ */
+
+namespace App\Blocks;
+
+add_filter('block_type_metadata', function($metadata){
+    $name = $metadata['name'];
+
+    if (str_starts_with($name, 'core/') ) {
+        unset($metadata['supports']['color']);
+        unset($metadata['supports']['typography']);
+    }
+
+    return $metadata;
+});
+
+// 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();
+    }
+}

web/app/themes/badegg/app/setup.php

@@ -46,16 +46,6 @@ add_filter('admin_head', function () {
     ])->toHtml();
 });
 
-add_action( 'enqueue_block_editor_assets', function(){
-    wp_enqueue_script(
-        'restrict-core-blocks',
-        Vite::asset('resources/js/admin/block-restrictions.js'),
-        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-blocks', 'wp-hooks' ),
-        'v1.0.0',
-        true
-    );
-});
-
 /**
  * Use the generated theme.json file.
  *

web/app/themes/badegg/composer.json

@@ -35,8 +35,7 @@
   },
   "autoload": {
     "psr-4": {
-      "App\\": "app/",
-      "Blocks\\": "resources/views/blocks"
+      "App\\": "app/"
     }
   },
   "require": {

web/app/themes/badegg/functions.php

@@ -57,21 +57,7 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-autoload_psr4('Ajax');
 
-function autoload_psr4_blocks() {
-    $path = __dir__ . '/resources/views/blocks/*';
-    $namespace = 'Blocks\\';
-
-    foreach(glob($path, GLOB_ONLYDIR) as $directory) {
-        $name = basename($directory);
-        $class = $namespace . $name . '\\' . $name;
-
-        new $class();
-    }
-}
-
-autoload_psr4_blocks();
 
 /*
 |--------------------------------------------------------------------------
@@ -85,7 +71,7 @@ autoload_psr4_blocks();
 |
 */
 
-collect(['setup', 'filters'])
+collect(['setup', 'filters', 'blocks'])
     ->each(function ($file) {
         if (! locate_template($file = "app/{$file}.php", true, true)) {
             wp_die(

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

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

web/app/themes/badegg/resources/acf/group_block_acfdemo.json

@@ -0,0 +1,131 @@
+{
+    "key": "group_block_acfdemo",
+    "title": "Block: ACF Demo",
+    "fields": [
+        {
+            "key": "field_693d7783d862a",
+            "label": "Content",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 1,
+            "multi_expand": 1,
+            "endpoint": 0
+        },
+        {
+            "key": "field_693d779cd862b",
+            "label": "",
+            "name": "content",
+            "aria-label": "",
+            "type": "wysiwyg",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "allow_in_bindings": 0,
+            "tabs": "all",
+            "toolbar": "full",
+            "media_upload": 1,
+            "delay": 0
+        },
+        {
+            "key": "field_693d7764938f3",
+            "label": "Introduction",
+            "name": "block_intro",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_intro"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        },
+        {
+            "key": "field_6940187f74afb",
+            "label": "Footer",
+            "name": "block_footer",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_footer"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        },
+        {
+            "key": "field_693d776493992",
+            "label": "Settings",
+            "name": "block_settings",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_settings"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "badegg\/acfdemo"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "modified": 1765814950
+}

web/app/themes/badegg/resources/acf/group_clone_background_settings.json

@@ -17,7 +17,9 @@
                 "id": ""
             },
             "choices": {
-                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "0": "auto",
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #dd3333\"><\/i> Punch",
+                "white": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
                 "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
             },
             "default_value": 0,
@@ -39,7 +41,29 @@
             "type": "select",
             "instructions": "",
             "required": 0,
-            "conditional_logic": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_67325dd23234e",
+                        "operator": "!=",
+                        "value": "0"
+                    }
+                ],
+                [
+                    {
+                        "field": "field_67325dd23234e",
+                        "operator": "!=",
+                        "value": "black"
+                    }
+                ],
+                [
+                    {
+                        "field": "field_67325dd23234e",
+                        "operator": "!=",
+                        "value": "white"
+                    }
+                ]
+            ],
             "wrapper": {
                 "width": "50",
                 "class": "",
@@ -113,5 +137,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1764224358
+    "modified": 1765746167
 }

web/app/themes/badegg/resources/acf/group_clone_block_footer.json

@@ -3,7 +3,7 @@
     "title": "Clone: Block Footer",
     "fields": [
         {
-            "key": "field_67659b49a6db2",
+            "key": "field_694016b164221",
             "label": "Footer",
             "name": "",
             "aria-label": "",
@@ -21,31 +21,11 @@
             "endpoint": 0
         },
         {
-            "key": "field_67659b49a754a",
-            "label": "Blurb",
-            "name": "blurb_footer",
+            "key": "field_694016b164272",
+            "label": "",
+            "name": "footer",
             "aria-label": "",
-            "type": "textarea",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "maxlength": "",
-            "rows": 3,
-            "placeholder": "",
-            "new_lines": ""
-        },
-        {
-            "key": "field_67659b7502137",
-            "label": "Links",
-            "name": "links",
-            "aria-label": "",
-            "type": "repeater",
+            "type": "group",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -55,19 +35,33 @@
                 "id": ""
             },
             "layout": "block",
-            "pagination": 0,
-            "min": 0,
-            "max": 2,
-            "collapsed": "",
-            "button_label": "Add Button",
-            "rows_per_page": 20,
             "sub_fields": [
                 {
-                    "key": "field_67659b8702138",
-                    "label": "Button",
-                    "name": "button",
+                    "key": "field_694016b165315",
+                    "label": "Blurb",
+                    "name": "blurb",
                     "aria-label": "",
-                    "type": "clone",
+                    "type": "textarea",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "rows": 3,
+                    "placeholder": "",
+                    "new_lines": ""
+                },
+                {
+                    "key": "field_69401a2f06555",
+                    "label": "Links",
+                    "name": "links",
+                    "aria-label": "",
+                    "type": "repeater",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -76,49 +70,106 @@
                         "class": "",
                         "id": ""
                     },
-                    "clone": [
-                        "group_clone_button"
-                    ],
-                    "display": "seamless",
                     "layout": "block",
-                    "prefix_label": 0,
-                    "prefix_name": 0,
-                    "parent_repeater": "field_67659b7502137"
+                    "pagination": 0,
+                    "min": 0,
+                    "max": 0,
+                    "collapsed": "",
+                    "button_label": "Add Row",
+                    "rows_per_page": 20,
+                    "sub_fields": [
+                        {
+                            "key": "field_69401a4006556",
+                            "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_69401a2f06555"
+                        }
+                    ]
+                },
+                {
+                    "key": "field_694016b165337",
+                    "label": "Alignment",
+                    "name": "align",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "left": "Left",
+                        "centre": "Centre",
+                        "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_694016b16537f",
+                    "label": "Container width",
+                    "name": "container_width",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "0": "Auto",
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": "narrow",
+                    "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_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",
+            "key": "field_694016b1642c5",
             "label": "Footer (end)",
             "name": "",
             "aria-label": "",
@@ -154,5 +205,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1747958307
+    "display_title": "",
+    "modified": 1765809897
 }

web/app/themes/badegg/resources/acf/group_clone_block_intro.json

@@ -21,52 +21,11 @@
             "endpoint": 0
         },
         {
-            "key": "field_676599964d3cc",
-            "label": "Heading",
-            "name": "heading",
+            "key": "field_693f37ad7fa70",
+            "label": "",
+            "name": "intro",
             "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",
+            "type": "group",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -76,19 +35,34 @@
                 "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",
+                    "key": "field_676599964d3cc",
+                    "label": "Heading",
+                    "name": "heading",
                     "aria-label": "",
-                    "type": "clone",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "hfont",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_6765999d4d3cd",
+                    "label": "Blurb",
+                    "name": "blurb",
+                    "aria-label": "",
+                    "type": "textarea",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -97,14 +71,74 @@
                         "class": "",
                         "id": ""
                     },
-                    "clone": [
-                        "group_clone_button"
-                    ],
-                    "display": "seamless",
-                    "layout": "block",
-                    "prefix_label": 0,
-                    "prefix_name": 0,
-                    "parent_repeater": "field_68bf1126c2760"
+                    "default_value": "",
+                    "maxlength": "",
+                    "rows": 3,
+                    "placeholder": "",
+                    "new_lines": ""
+                },
+                {
+                    "key": "field_69400cbafb964",
+                    "label": "Alignment",
+                    "name": "align",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "left": "Left",
+                        "centre": "Centre",
+                        "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_693f3a7fae85e",
+                    "label": "Container width",
+                    "name": "container_width",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "0": "Auto",
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": "narrow",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
                 }
             ]
         },
@@ -145,5 +179,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1757498726
+    "display_title": "",
+    "modified": 1765809893
 }

web/app/themes/badegg/resources/acf/group_clone_block_settings.json

@@ -3,7 +3,7 @@
     "title": "Clone: Block Settings",
     "fields": [
         {
-            "key": "field_673511c31122f",
+            "key": "field_69403228d2637",
             "label": "Settings",
             "name": "",
             "aria-label": "",
@@ -17,15 +17,15 @@
                 "id": ""
             },
             "open": 0,
-            "multi_expand": 0,
+            "multi_expand": 1,
             "endpoint": 0
         },
         {
-            "key": "field_680016e0fac24",
-            "label": "Anchor ID",
-            "name": "section_anchor_id",
+            "key": "field_694031b513e66",
+            "label": "",
+            "name": "settings",
             "aria-label": "",
-            "type": "text",
+            "type": "group",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -34,155 +34,117 @@
                 "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": {
-                "0": "Full Width",
-                "large": "Large",
-                "medium": "Medium",
-                "small": "Small",
-                "narrow": "Narrow"
-            },
-            "default_value": 0,
-            "return_format": "value",
-            "multiple": 0,
-            "allow_null": 0,
-            "ui": 0,
-            "ajax": 0,
-            "placeholder": ""
-        },
-        {
-            "key": "field_67350eb62cdf9",
-            "label": "Top Padding",
-            "name": "padding_top",
-            "aria-label": "",
-            "type": "radio",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "50",
-                "class": "",
-                "id": ""
-            },
-            "choices": [
-                "On",
-                "Off"
-            ],
-            "default_value": "",
-            "return_format": "value",
-            "allow_null": 0,
-            "other_choice": 0,
-            "layout": "horizontal",
-            "save_other_choice": 0
-        },
-        {
-            "key": "field_673510c1dc830",
-            "label": "Bottom Padding",
-            "name": "padding_bottom",
-            "aria-label": "",
-            "type": "radio",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "50",
-                "class": "",
-                "id": ""
-            },
-            "choices": [
-                "On",
-                "Off"
-            ],
-            "default_value": "",
-            "return_format": "value",
-            "allow_null": 0,
-            "other_choice": 0,
-            "layout": "horizontal",
-            "save_other_choice": 0
-        },
-        {
-            "key": "field_6735258c2d9ff",
-            "label": "Background",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 0
-        },
-        {
-            "key": "field_67350aeb146ca",
-            "label": "Background",
-            "name": "background",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "clone": [
-                "group_clone_background_settings"
-            ],
-            "display": "seamless",
             "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0
+            "sub_fields": [
+                {
+                    "key": "field_67350eb62cdf9",
+                    "label": "Top Padding",
+                    "name": "padding_top",
+                    "aria-label": "",
+                    "type": "radio",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": [
+                        "On",
+                        "Off"
+                    ],
+                    "default_value": "",
+                    "return_format": "value",
+                    "allow_null": 0,
+                    "other_choice": 0,
+                    "layout": "horizontal",
+                    "save_other_choice": 0
+                },
+                {
+                    "key": "field_673510c1dc830",
+                    "label": "Bottom Padding",
+                    "name": "padding_bottom",
+                    "aria-label": "",
+                    "type": "radio",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": [
+                        "On",
+                        "Off"
+                    ],
+                    "default_value": "",
+                    "return_format": "value",
+                    "allow_null": 0,
+                    "other_choice": 0,
+                    "layout": "horizontal",
+                    "save_other_choice": 0
+                },
+                {
+                    "key": "field_6800097e61765",
+                    "label": "Container Width",
+                    "name": "container_width",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "0": "Auto",
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": 0,
+                    "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_67350aeb146ca",
+                    "label": "Background",
+                    "name": "background",
+                    "aria-label": "",
+                    "type": "clone",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "clone": [
+                        "group_clone_background_settings"
+                    ],
+                    "display": "seamless",
+                    "layout": "block",
+                    "prefix_label": 0,
+                    "prefix_name": 0
+                }
+            ]
         },
         {
-            "key": "field_67fff4d4ddbb7",
-            "label": "Angle",
-            "name": "angle",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "clone": [
-                "group_clone_angle"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 1,
-            "prefix_name": 1
-        },
-        {
-            "key": "field_6828da67543fc",
+            "key": "field_69403239d2638",
             "label": "Settings (end)",
             "name": "",
             "aria-label": "",
@@ -218,5 +180,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1747508044
+    "display_title": "",
+    "modified": 1765815052
 }

web/app/themes/badegg/resources/css/app.scss

@@ -18,9 +18,6 @@
 @use "components/button";
 @use "components/card";
 
-// Blocks
-@use "blocks/BadExample";
-
 // Page Styles
 @use "views/page";
 

web/app/themes/badegg/resources/css/components/_button.scss

@@ -13,13 +13,13 @@ button {
 
 button,
 input[type="submit"] {
-  &.button {
+  &.btn {
     appearance: none;
   }
 }
 
 %button,
-.button {
+.btn {
   display: inline-block;
   padding: 0.5em 1.25em;
   border: 0.125em solid colours.$black;
@@ -102,10 +102,10 @@ input[type="submit"] {
   &.bigger { font-size: 1.5em; }
 }
 
-.button-wrap {
+.btn-wrap {
   margin: 1.5em -0.25em -0.25em;
 
-  .button {
+  .btn {
     margin: 0.25em;
   }
 }

web/app/themes/badegg/resources/css/components/_forms.scss

@@ -2,10 +2,6 @@
 @use "../global/variables/breakpoints";
 @use "../global/variables/colours";
 
-textarea {
-  min-height: 10.375em;
-}
-
 input,
 textarea {
   color: colours.$grey;

web/app/themes/badegg/resources/css/editor.scss

@@ -1,53 +1,69 @@
-@use "./app";
+@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;
+  padding: 0;
   background: transparent;
 }
 
 .editor-visual-editor {
-  .wp-block {
-    max-width: none;
+  &__post-title-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 1rem;
+    margin: 0 !important;
+    background: white;
+    box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
   }
+}
+
+.editor-styles-wrapper {
+  background: colours.$grey-lightest;
 
   .block-list-appender {
     width: 350px;
     max-width: 90%;
     margin: 1em auto;
-    background: white;
-  }
-
-  &__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;
-    }
-  }
-
-  .wp-block-post-content {
-    // 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;
+  }
+}
+
+.is-root-container > .wp-block:not(.block-list-appender) {
+  max-width: none;
+  margin: 0;
+}

web/app/themes/badegg/resources/css/global/_typography.scss

@@ -142,11 +142,7 @@ hr {
 }
 
 .align {
-  &-centre {
-    text-align: center;
-  }
-
-  &-right {
-    text-align: right;
-  }
+  &-left { text-align: left; }
+  &-centre, &-center { text-align: center; }
+  &-right { text-align: right; }
 }

web/app/themes/badegg/resources/css/global/framework/_spacing.scss

@@ -27,9 +27,10 @@
 }
 
 .container {
-  width: 90%;
+  width: calc(100% - spacing.$innerMedium * 2);
   margin: auto;
 
+  &-full { width: auto; }
   &-large { max-width: spacing.$containerLarge; }
   &-medium { max-width: spacing.$containerMedium; }
   &-small { max-width: spacing.$containerSmall; }

web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss

@@ -5,7 +5,7 @@
 @mixin generate_button_colors($name, $hex) {
 
   $buttons: (
-    ".button",
+    ".btn",
     "button",
     "input[type=submit]",
   );

web/app/themes/badegg/resources/css/global/variables/_colours.scss

@@ -1,5 +1,7 @@
 @use "sass:color";
 
+$wpblue: #2271b1;
+
 //== Status
 $success: #39b54a;
 $error: #be1e2d;

web/app/themes/badegg/resources/js/app.js

@@ -3,10 +3,11 @@ import.meta.glob([
   '../fonts/**',
 ]);
 
-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';
 
 LazyLoad();
-blocks();
 Header();
+

web/app/themes/badegg/resources/js/blocks.js

@@ -1,6 +0,0 @@
-// import BadExample from "./blocks/BadExample";
-
-export default function()
-{
-  // BadExample();
-}

web/app/themes/badegg/resources/js/editor.js

@@ -1,45 +1,46 @@
 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) => {
-    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/freeform',
-      'core/list-item',
-      'core/missing',
-      'core/paragraph',
-      'core/preformatted',
-      'core/pullquote',
-      'core/quote',
-      'core/table',
-      'core/verse',
-    ];
-
     if (TEXT_EDITOR_BLOCKS.includes(name)) {
-      settings.parent = ['acf/badegg-editor']
+      settings.parent = [
+        'acf/badegg-editor',
+        'badegg/article',
+      ];
     }
 
-    // console.log(settings, name)
-
     return settings
   }
 

web/app/themes/badegg/resources/js/lib/blocks/classNames.js

@@ -0,0 +1,39 @@
+export function containerClassNames(attributes, bgProps)
+{
+
+  let classNames = [
+    'container',
+  ];
+
+  if('container_width' in attributes)
+    classNames.push(`container-${attributes.container_width}`);
+
+  if('alignment' in attributes)
+    classNames.push(`align-${attributes.alignment}`);
+
+  return classNames;
+}
+
+export function sectionClassNames(attributes, defaultClasses, extraClasses = [])
+{
+  defaultClasses = defaultClasses.split(' ');
+
+  let classNames = [
+    'section',
+  ];
+
+  if('padding_top'in attributes && !attributes.padding_top)
+    classNames.push('section-zero-top');
+
+  if('padding_bottom'in attributes && !attributes.padding_bottom)
+    classNames.push('section-zero-bottom');
+
+
+  // combine arrays
+  classNames = classNames.concat(defaultClasses).concat(extraClasses);
+
+  // remove duplicate items
+  classNames = [ ...new Set(classNames) ];
+
+  return classNames;
+}

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

web/app/themes/badegg/resources/views/blocks/Editor/Editor.blade.php

@@ -1,21 +0,0 @@
-@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{{ @$data['container_width'] ?  ' container-' . $data['container_width'] : '' }} block-content wysiwyg">
-      <InnerBlocks
-        allowedBlocks="{!! esc_attr( wp_json_encode( $data['allowed_blocks'] ) ) !!}"
-        template="{!! esc_attr( wp_json_encode( $data['template'] ) ) !!}"
-      />
-    </div>
-  </div>
-
-</section>

web/app/themes/badegg/resources/views/blocks/Editor/Editor.php

@@ -1,137 +0,0 @@
-<?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, $content = '', $is_preview = false)
-    {
-          $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/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'] = $this->inner_blocks();
-          $data['template'] = $this->default_template();
-          $data['block'] = $block;
-
-          echo \Roots\view("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.',
-            ],
-          ],
-        ];
-      }
-
-      public function inner_blocks()
-      {
-        return [
-              // 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/freeform',
-              'core/list-item',
-              'core/missing',
-              'core/paragraph',
-              'core/preformatted',
-              'core/pullquote',
-              'core/quote',
-              'core/table',
-              'core/verse',
-        ];
-      }
-}

web/app/themes/badegg/resources/views/blocks/acfdemo/block.json

@@ -0,0 +1,28 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/acfdemo",
+  "title": "ACF Demo",
+  "category": "badegg",
+  "icon": "media-document",
+  "description": "An example block powered by ACF",
+  "keywords": ["acf", "demo"],
+
+  "acf": {
+      "mode": "preview",
+      "validate": "false",
+      "renderCallback": "\\App\\Blocks\\render_acf"
+  },
+  "supports": {
+      "anchor": true,
+      "align": false,
+      "jsx": true
+  },
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "inserter": true
+      }
+    }
+  }
+}

web/app/themes/badegg/resources/views/blocks/acfdemo/editor.scss

@@ -0,0 +1,4 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-acf-demo.block-editor-block-list__block {
+  display: block;
+}

web/app/themes/badegg/resources/views/blocks/acfdemo/index.js

@@ -0,0 +1 @@
+// block.json's editorScript, loaded only in the block editor

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

@@ -0,0 +1,10 @@
+@extends('layouts.block-acf', [
+  'block' => $block,
+  'is_preview' => $is_preview,
+  'context' => $context,
+  'knockout' => true,
+])
+
+@section('block-content')
+  {!! the_field('content') !!}
+@overwrite

web/app/themes/badegg/resources/views/blocks/acfdemo/script.js

@@ -0,0 +1 @@
+// block.json's script, loaded in block editor and front end

web/app/themes/badegg/resources/views/blocks/acfdemo/style.scss

@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-acf-demo {
+  display: block;
+}

web/app/themes/badegg/resources/views/blocks/acfdemo/view.js

@@ -0,0 +1 @@
+// block.json's viewScript, applied on front end only

web/app/themes/badegg/resources/views/blocks/article/block.json

@@ -0,0 +1,35 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/article",
+  "title": "Article Builder",
+  "category": "badegg",
+  "icon": {
+    "src": "format-aside",
+    "foreground": "#f58762"
+  },
+  "description": "A wrapper to contain core blocks",
+  "attributes": {
+    "container_width": {
+      "type": "string",
+      "default": 0
+    },
+    "alignment": {
+      "type": "string"
+    },
+    "padding_top": {
+      "type": "boolean",
+      "default": true
+    },
+    "padding_bottom": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "supports": {
+    "html": true,
+    "color": {
+      "background": true,
+      "text": false
+    }
+  }
+}

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

web/app/themes/badegg/resources/views/blocks/article/index.jsx

@@ -0,0 +1,124 @@
+// block.json's editorScript, loaded only in the block editor
+
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+
+import {
+  useBlockProps,
+  InnerBlocks,
+  InspectorControls,
+  BlockControls,
+  AlignmentToolbar,
+} from '@wordpress/block-editor';
+
+import {
+  Panel,
+  PanelBody,
+  PanelRow,
+  SelectControl,
+  ToggleControl,
+} from '@wordpress/components';
+
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import metadata from './block.json';
+import allowedBlocks from '../../../json/core-block-whitelist.json';
+import { containerClassNames, sectionClassNames } from '../../../js/lib/blocks/classNames';
+
+registerBlockType(metadata.name, {
+  edit({ attributes, setAttributes }) {
+    const blockProps = useBlockProps();
+    const [ isLoading, setIsLoading ] = useState( true );
+
+    const {
+      container_width,
+      alignment,
+      padding_top,
+      padding_bottom,
+    } = attributes;
+
+    const [
+      containerWidthOptions, setContainerWidthOptions,
+    ] = useState( [] );
+
+    useEffect( () => {
+      apiFetch( { path: '/badegg/v1/blocks/container-widths' } )
+        .then( ( data ) => {
+          setContainerWidthOptions( data );
+          setIsLoading( false );
+        } )
+        .catch( () => {
+          setContainerWidthOptions( [] );
+          setIsLoading( false );
+        } );
+    }, [] );
+
+    blockProps.className = sectionClassNames(
+      attributes,
+      blockProps.className,
+      [
+        'wysiwyg'
+      ]).join(' ');
+
+    console.log(blockProps.className);
+
+    return (
+      <div { ...blockProps }>
+        <BlockControls>
+          <AlignmentToolbar
+            value={ alignment }
+            onChange={(value) => setAttributes({alignment: value})}
+          />
+        </BlockControls>
+        <InspectorControls>
+          <Panel>
+            <PanelBody title={ __("Settings", "badegg") }>
+              <SelectControl
+                label={ __("Container Width", "badegg") }
+                value={ container_width }
+                options={ containerWidthOptions }
+                onChange={ (value) => setAttributes({ container_width: value }) }
+                __next40pxDefaultSize={ true }
+                __nextHasNoMarginBottom={ true }
+              />
+              <ToggleControl
+                label={ __('Top Padding', 'badegg') }
+                checked={ padding_top }
+                onChange={(value) => setAttributes({ padding_top: value }) }
+                __nextHasNoMarginBottom
+              />
+              <ToggleControl
+                label={ __('Bottom Padding', 'badegg') }
+                checked={ padding_bottom }
+                onChange={(value) => setAttributes({ padding_bottom: value }) }
+                __nextHasNoMarginBottom
+              />
+            </PanelBody>
+          </Panel>
+        </InspectorControls>
+        <div className={ containerClassNames(attributes).join(' ') }>
+          <InnerBlocks
+            allowedBlocks={ allowedBlocks }
+            defaultBlock={
+              {
+                name: "core/paragraph",
+                attributes: {
+                  placeholder: "start typing",
+                }
+              }
+            }
+          />
+        </div>
+      </div>
+    );
+  },
+  save({ attributes }) {
+    return (
+      <div { ...useBlockProps.save() }>
+        <div className={ containerClassNames(attributes).join() }>
+          <InnerBlocks.Content />
+        </div>
+      </div>
+    )
+  }
+});

web/app/themes/badegg/resources/views/blocks/article/script.js

@@ -0,0 +1 @@
+// block.json's script, loaded in block editor and front end

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

web/app/themes/badegg/resources/views/blocks/article/view.js

@@ -0,0 +1 @@
+// block.json's viewScript, applied on front end only

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

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

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

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

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

web/app/themes/badegg/resources/views/blocks/example/script.js

@@ -0,0 +1 @@
+// block.json's script, loaded in block editor and front end

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

web/app/themes/badegg/resources/views/blocks/example/view.js

@@ -0,0 +1 @@
+// block.json's viewScript, applied on front end only

web/app/themes/badegg/resources/views/layouts/block-acf.blade.php

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

web/app/themes/badegg/resources/views/layouts/block.blade.php

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

web/app/themes/badegg/resources/views/partials/block-acf-footer.blade.php

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

web/app/themes/badegg/resources/views/partials/block-acf-intro.blade.php

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

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

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