article block: resolve parent/inner focus toggle issue

app/ACF/CloneGroup.php

@@ -1,28 +0,0 @@
-<?php
-
-namespace App\ACF;
-
-class CloneGroup
-{
-    public function __construct()
-    {
-
-    }
-    public function background()
-    {
-        return [
-            'contrast',
-            'bg_type',
-            'bg_colour',
-            'bg_tint',
-            'bg_opacity',
-            'bg_image',
-            'bg_video',
-            'pattern',
-            'pattern_top',
-            'pattern_bottom',
-            'padding_top',
-            'padding_bottom',
-        ];
-    }
-}

app/ACF/Dynamic.php

@@ -8,13 +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_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 )
@@ -24,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'];
@@ -46,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'] = [];
@@ -90,13 +108,49 @@ class Dynamic
             '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
         ];
 
-        foreach($icons as $slug => $props):
-            if(in_array($slug, range(0,9))) continue;
-
+        foreach($icons as $slug):
             $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
         endforeach;
 
         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 }
 }
 

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 ) );
-    }
-}

app/Admin/DisablePost.php

@@ -6,8 +6,8 @@ class DisablePost
 {
     public function __construct()
     {
-        add_filter('register_post_type_args', [$this, 'args'], 0, 2);
-        add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
+        // add_filter('register_post_type_args', [$this, 'args'], 0, 2);
+        // add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
     }
 
     public function args($args, $type)

app/Admin/Enqueue.php

@@ -13,9 +13,9 @@ class Enqueue
     {
         wp_enqueue_style(
             'fontawesome',
-            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css',
             false,
-            '6.5.2',
+            '7.0.1',
             'all'
         );
     }

app/Admin/Integrations.php

@@ -7,6 +7,7 @@ class Integrations
     public function __construct()
     {
         add_action( 'wp_head',  [$this, 'FathomAnalytics']);
+        add_action( 'wp_footer',  [$this, 'FontAwesomeKit'], 100);
     }
 
     public function FathomAnalytics()
@@ -21,4 +22,17 @@ class Integrations
 
         <?php endif;
     }
+
+    public function FontAwesomeKit()
+    {
+        $kit = get_field('badegg_integrations_fontawesome_kit', 'option');
+
+        if($kit): ?>
+
+<!-- FontAwesome Kit -->
+<script src="https://kit.fontawesome.com/<?= $kit ?>.js" crossorigin="anonymous"></script>
+<!-- / FontAwesome Kit -->
+
+        <?php endif;
+    }
 }

app/Admin/Theme.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Admin;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+use App\Utilities;
+
+class Theme
+{
+    public function __construct()
+    {
+        add_action( 'after_setup_theme', [$this, 'DynamicPalette'] );
+    }
+
+    public function DynamicPalette()
+    {
+        $colour = new Utilities\Colour;
+        $NameThatColour = new NameThatColor;
+
+        $palette = [];
+
+        $colours = $colour->values();
+
+        foreach($colours as $slug => $hex) {
+            $palette[] = [
+                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
+                'slug' => $slug,
+                'color' => $hex,
+            ];
+        }
+
+        if(!empty($colours)) {
+            add_theme_support('editor-color-palette', $palette);
+        }
+    }
+}

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();
-    }
-}

app/Utilities/Colour.php

@@ -10,6 +10,8 @@ class Colour
 
         if($colour == 'black'):
             $hex = '#000000';
+        elseif($colour == 'grey'):
+            $hex = '#808080';
         elseif($colour == 'white'):
             $hex = '#FFFFFF';
         else:
@@ -27,20 +29,23 @@ class Colour
 
     public function values()
     {
-        $colours = get_field('badegg_colours', 'option');
-
         $values = [];
 
-        if($colours):
-            foreach($colours as $index => $props):
-                $index = $index + 1;
-                $hex = @$props['hex'];
+        if(function_exists('get_field')):
+            $colours = @get_field('badegg_colours', 'option');
 
-                if($hex) $values[$this->latinate($index)] = $hex;
-            endforeach;
+            if($colours):
+                foreach($colours as $index => $props):
+                    $index = $index + 1;
+                    $hex = @$props['hex'];
+
+                    if($hex) $values[$this->latinate($index)] = $hex;
+                endforeach;
+            endif;
         endif;
 
-        $values['0'] = '#FFFFFF';
+        $values['white'] = '#FFFFFF';
+        $values['grey'] = '#808080';
         $values['black'] = '#000000';
 
         return $values;
@@ -49,13 +54,13 @@ class Colour
     public function tints()
     {
       return [
-        'lightest'  =>  100,
-        'lighter'   =>  66,
-        'light'     =>  33,
+        'lightest'  =>  40,
+        'lighter'   =>  25,
+        'light'     =>  10,
         '0'         =>   0,
-        'dark'      => -33,
-        'darker'    => -66,
-        'darkest'   => -100,
+        'dark'      => -10,
+        'darker'    => -25,
+        'darkest'   => -40,
       ];
     }
 

app/Utilities/CssClasses.php

@@ -3,55 +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-' . 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(($props['contrast'] && $knockout))
             $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';
+        if($props['bg_image'])
+            $classes[] = "has-bg-image";
 
-            else:
-                $classes[] = 'pattern-' . $pattern;
+        return $classes;
+    }
 
-            endif;
+    public function container($args = [], $bg_props = [])
+    {
+        $args = wp_parse_args($args, [
+            'width' => null,
+            'location' => null,
+            'section' => false,
+            'align' => null,
+            'wysiwyg' => false,
+        ]);
 
-            if(in_array($pattern, ['top', 'both']))
-                $classes[] = 'pattern-top-' . $this->colourTint($pattern_top);
+        $bg_props = wp_parse_args($bg_props, [
+            'bg_colour' => null,
+            'bg_tint' => null,
+            'contrast' => null,
+        ]);
 
-            if(in_array($pattern, ['bottom', 'both']))
-                $classes[] = 'pattern-bottom-' . $this->colourTint($pattern_bottom);
+        $Colour = new Colour;
+        $hex = $Colour->name2hex($bg_props['bg_colour'], $bg_props['bg_tint']);
 
-        endif;
+        $classes = [
+            'container',
+        ];
 
-        if(@$props['bg_image'])
-            $classes[] = "bg-watermarked";
+        if($args['width'])
+            $classes[] = 'container-' . $args['width'];
 
-        if(@$props['className']) $args = array_merge($classes, explode(' ', $props['className']));
+        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(($bg_props['contrast']))
+            $classes[] = 'knockout';
 
         return $classes;
     }
@@ -93,7 +132,7 @@ class CssClasses {
     public function is_knockout_block($name = null)
     {
         $blacklist = [
-            'bad-example',
+            'badegg/acfdemo',
         ];
 
         if(in_array($name, $blacklist)):

app/Utilities/RestAPI.php

@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Utilities;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+
+class RestAPI
+{
+    public function __construct()
+    {
+        add_filter( 'wp_prepare_attachment_for_js', [$this, 'image_sizes'], 10, 3 );
+        add_action( 'rest_api_init', [$this, 'blocks']);
+    }
+
+    public function image_sizes( $response, $attachment, $meta )
+    {
+        if ( empty( $response['sizes'] ) || empty( $meta['sizes'] ) ) {
+            return $response;
+        }
+
+        $custom_sizes = [ 'hero', 'lazy' ];
+
+        foreach ( $custom_sizes as $size ) {
+            if ( ! empty( $meta['sizes'][ $size ] ) ) {
+                $response['sizes'][ $size ] = [
+                    'url'         => wp_get_attachment_image_url( $attachment->ID, $size ),
+                    'width'       => $meta['sizes'][ $size ]['width'],
+                    'height'      => $meta['sizes'][ $size ]['height'],
+                    'orientation' =>
+                        $meta['sizes'][ $size ]['height'] > $meta['sizes'][ $size ]['width']
+                            ? 'portrait'
+                            : 'landscape',
+                ];
+            }
+        }
+
+        return $response;
+    }
+
+    public function blocks( )
+    {
+        $restBase = 'badegg/v1';
+
+        register_rest_route($restBase, '/blocks/config', [
+            'methods' => 'GET',
+            'callback' => [ $this, 'config'],
+            'permission_callback' => function(){
+                return true;
+            },
+        ]);
+    }
+
+    public function config()
+    {
+        return rest_ensure_response([
+            'container' => $this->containerWidths(),
+            'colours' => $this->colours(),
+            'tints' => $this->tints(),
+        ]);
+    }
+
+    public function containerWidths()
+    {
+        return [
+            [ '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'   ],
+        ];
+    }
+
+    public function colours()
+    {
+        $colour = new Colour;
+        $NameThatColour = new NameThatColor;
+
+        $palette = [];
+
+        $colours = $colour->values();
+
+        foreach($colours as $slug => $hex) {
+            $palette[] = [
+                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
+                'slug' => $slug,
+                'color' => $hex,
+            ];
+        }
+
+        return $palette;
+    }
+
+    public function tints()
+    {
+        return [
+            ['label' => __('Lightest',  'badegg'), 'value' => 'lightest'],
+            ['label' => __('Lighter',   'badegg'), 'value' => 'lighter' ],
+            ['label' => __('Light',     'badegg'), 'value' => 'light'   ],
+            ['label' => __('None',      'badegg'), 'value' => 0         ],
+            ['label' => __('Dark',      'badegg'), 'value' => 'dark'    ],
+            ['label' => __('Darker',    'badegg'), 'value' => 'darker'  ],
+            ['label' => __('Darkest',   'badegg'), 'value' => 'darkest' ],
+        ];
+    }
+}

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'),
         ];
     }
 }

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,
+        ];
+    }
+}

app/blocks.php

@@ -0,0 +1,328 @@
+<?php
+
+/**
+ * Theme Blocks.
+ */
+
+namespace App\Blocks;
+
+/**
+ * Disable block styles in frontend
+ */
+add_filter( 'should_load_separate_core_block_assets', '__return_false', 99 );
+add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
+add_action( 'init', __NAMESPACE__ . '\\remove_action_block_inline' );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\disable_frontend_inline_css', 20 );
+add_action( 'template_redirect', __NAMESPACE__ . '\\delete_block_support_inline_css' );
+
+/**
+ * block editor back end tweaks
+ *  - 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_action( 'admin_init', __NAMESPACE__ . '\\admin_block_cleanup' );
+add_filter( 'block_type_metadata', __NAMESPACE__ . '\\unset_core_supports' );
+
+/**
+ * Custom blocks
+ */
+add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' );
+add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' );
+add_action( 'init', __NAMESPACE__ . '\\auto_register' );
+
+/**
+ * Core Blocks
+ */
+add_filter( 'render_block_core/details', __NAMESPACE__ . '\\core_details_modified', 10, 2 );
+add_filter( 'render_block_core/image', __NAMESPACE__ . '\\core_image_modified', 10, 2 );
+
+
+function remove_action_block_inline()
+{
+    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
+    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_support_styles');
+    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
+    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
+}
+
+function admin_block_cleanup()
+{
+    remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
+}
+
+function disable_frontend_inline_css()
+{
+    wp_dequeue_style( 'wp-block-library' );
+    wp_dequeue_style( 'wp-block-library-theme' );
+    wp_dequeue_style( 'classic-theme-styles' );
+}
+
+function delete_block_support_inline_css ()
+{
+	ob_start( function ( $html ) {
+		return preg_replace(
+			'#<style id=[\'"]core-block-supports-inline-css[\'"][^>]*>.*?</style>#s',
+			'',
+			$html
+		);
+	} );
+}
+
+function unset_core_supports($metadata){
+    $name = $metadata['name'];
+
+    if (str_starts_with($name, 'core/') ) {
+        unset($metadata['supports']['color']);
+        unset($metadata['supports']['typography']);
+        unset($metadata['supports']['border']);
+    }
+
+    return $metadata;
+}
+
+
+function allowed_list($allowed){
+    return array_merge($allowed, [
+        // 'core/categories',
+    ]);
+}
+
+function add_categories( $categories ) {
+
+        // Adding a new category.
+        $categories = array_merge([
+            [
+                'slug'  => 'badegg',
+                'title' => __('Provided by Bad Egg Digital'),
+            ],
+        ], $categories);
+
+        return $categories;
+}
+
+function auto_register() {
+    $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",
+            'attributes'        => attributes(),
+        ];
+
+        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/block-core-whitelist.json"));
+    $json = json_decode($file);
+
+    return $json;
+}
+
+function attributes()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/block-attributes.json"));
+    $json = json_decode($file, true);
+
+    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();
+    }
+}
+
+function core_details_modified($content, $block)
+{
+    $content = str_replace('</summary>', '</summary><div class="wp-block-details__inner inner inner-zero-x wysiwyg">', $content);
+    $content = str_replace('</details>', '</div></details>', $content);
+
+    return $content;
+}
+
+function core_image_modified($content, $block)
+{
+    if(!$content) return '';
+
+    $dom = new \DomDocument();
+    $dom->strictErrorChecking = false;
+    @$dom->loadHTML($content);
+
+    $images = @$dom->getElementsByTagName('img');
+    $figures = @$dom->getElementsByTagName('figure');
+
+    if(!$figures) return $content;
+
+    // get image data
+    $imageID = @$block['attrs']['id'];
+    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
+    $specifiedSize = @wp_get_attachment_image_src($imageID, $block['sizeSlug']);
+    $large = wp_get_attachment_image_src($imageID, '2048x2048');
+
+    // create lightbox link node
+    $link = $dom->createElement('a');
+    $link->setAttribute('class', 'badegg-lightbox');
+    $link->setAttribute('target', '_blank');
+    $link->setAttribute('role', 'button');
+    $link->setAttribute('tabindex', '0');
+    $link->setAttribute('aria-label', __('expand image', 'badegg'));
+
+    foreach($images as $image) {
+        // define new image attributes
+        $src = $image->getAttribute('src');
+        $srcset = $image->getAttribute('srcset');
+        $class = $image->getAttribute('class');
+
+        // set image attributes
+        $image->setAttribute('src', $lazy[0]);
+        $image->setAttribute('srcset', '');
+        $image->setAttribute('data-src', $src);
+        $image->setAttribute('data-srcset', $srcset);
+        $image->setAttribute('class', $class . ' lazy');
+
+        if($specifiedSize) {
+            $image->setAttribute('width', $specifiedSize[1]);
+            $image->setAttribute('height', $specifiedSize[2]);
+        }
+
+        // clone lightbox link
+        $linkClone = $link->cloneNode();
+
+        // set lightbox link attributes
+        $linkClone->setAttribute('href', $large[0]);
+
+        // replace image with lightbox link
+        $image->parentNode->replaceChild($linkClone, $image);
+
+        // append original image to lightbox link
+        $linkClone->appendChild($image);
+    }
+
+    return $dom->saveHTML($figures[0]);
+}

app/setup.php

@@ -164,9 +164,17 @@ function cors() {
     if(WP_ENV == 'development'):
         header( 'Access-Control-Allow-Origin: *' );
     endif;
-
 }
 
-$image_srcset = new Utilities\ImageSrcset;
-$image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1000]);
-add_image_size('lazy', 50, 50);
+add_action('wp_head', function(){
+    if(file_exists(get_theme_file_path('resources/images/favicon/site.webmanifest'))) {
+        echo \Roots\view("partials.favicon")->render();
+    }
+});
+
+add_action('after_setup_theme', function(){
+    $image_srcset = new Utilities\ImageSrcset;
+    $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
+    add_image_size('lazy', 50, 50);
+    add_image_size('hero', 1920, 1080, true);
+});

functions.php

@@ -57,8 +57,7 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-autoload_psr4('Blocks');
-autoload_psr4('Ajax');
+
 
 /*
 |--------------------------------------------------------------------------
@@ -72,7 +71,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(

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"
@@ -463,7 +464,6 @@
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -475,7 +475,6 @@
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -486,7 +485,6 @@
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -497,8 +495,7 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
@@ -506,12 +503,49 @@
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@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",
@@ -1156,7 +1190,6 @@
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -1168,7 +1201,6 @@
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -1186,8 +1218,7 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "24.9.2",
@@ -1195,7 +1226,6 @@
       "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1206,7 +1236,6 @@
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -1217,24 +1246,21 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
@@ -1242,7 +1268,6 @@
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1254,8 +1279,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
@@ -1263,7 +1287,6 @@
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1277,7 +1300,6 @@
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -1288,7 +1310,6 @@
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -1298,8 +1319,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
@@ -1307,7 +1327,6 @@
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1325,7 +1344,6 @@
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -1340,7 +1358,6 @@
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1354,7 +1371,6 @@
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1370,7 +1386,6 @@
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -1398,16 +1413,14 @@
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/acorn": {
       "version": "8.15.0",
@@ -1429,7 +1442,6 @@
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -1461,7 +1473,6 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -1480,7 +1491,6 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -1494,7 +1504,6 @@
       "integrity": "sha512-JU0h5APyQNsHOlAM7HnQnPToSDQoEBZqzu/YBlqDnEeymPnZDREeXJA3KBMQee+dKteAxZ2AtvQEvVYdZf241Q==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
       }
@@ -1505,7 +1514,6 @@
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -1553,8 +1561,7 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001751",
@@ -1575,8 +1582,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "CC-BY-4.0",
-      "peer": true
+      "license": "CC-BY-4.0"
     },
     "node_modules/chokidar": {
       "version": "4.0.3",
@@ -1600,7 +1606,6 @@
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -1610,8 +1615,7 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/detect-libc": {
       "version": "1.0.3",
@@ -1632,8 +1636,7 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.244.tgz",
       "integrity": "sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==",
       "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
@@ -1641,7 +1644,6 @@
       "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -1655,8 +1657,7 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
       "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/esbuild": {
       "version": "0.25.11",
@@ -1706,7 +1707,6 @@
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -1717,7 +1717,6 @@
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -1732,7 +1731,6 @@
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -1746,7 +1744,6 @@
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -1757,7 +1754,6 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -1768,7 +1764,6 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -1778,8 +1773,24 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true,
+      "license": "MIT"
+    },
+    "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",
-      "peer": true
+      "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",
@@ -1796,8 +1807,17 @@
           "url": "https://opencollective.com/fastify"
         }
       ],
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
+    },
+    "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",
@@ -1823,7 +1843,6 @@
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1846,21 +1865,32 @@
         "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",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
@@ -1868,7 +1898,6 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -1886,7 +1915,6 @@
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1897,7 +1925,6 @@
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1911,7 +1938,6 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -1922,7 +1948,6 @@
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -1937,16 +1962,14 @@
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json2php": {
       "version": "0.0.7",
@@ -1981,7 +2004,6 @@
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -1995,8 +2017,17 @@
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true,
+      "license": "MIT"
+    },
+    "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",
-      "peer": true
+      "engines": {
+        "node": ">= 8"
+      }
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
@@ -2004,7 +2035,6 @@
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -2019,7 +2049,6 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -2033,7 +2062,6 @@
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -2044,7 +2072,6 @@
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -2076,8 +2103,7 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
@@ -2092,8 +2118,7 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
       "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
@@ -2108,6 +2133,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2144,13 +2170,33 @@
         "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",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -2175,11 +2221,21 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "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 +2278,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",
@@ -2241,8 +2321,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/sass": {
       "version": "1.93.2",
@@ -2250,6 +2329,7 @@
       "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -2271,7 +2351,6 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -2292,7 +2371,6 @@
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -2303,7 +2381,6 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2324,7 +2401,6 @@
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -2336,7 +2412,6 @@
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2353,7 +2428,6 @@
       "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       },
@@ -2368,7 +2442,6 @@
       "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -2388,7 +2461,6 @@
       "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -2441,7 +2513,6 @@
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -2454,8 +2525,7 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/update-browserslist-db": {
       "version": "1.1.4",
@@ -2477,7 +2547,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -2495,6 +2564,7 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -2594,7 +2664,6 @@
       "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -2659,7 +2728,6 @@
       "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }

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"

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
+}

resources/acf/group_block_editor.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
 }

resources/acf/group_block_footer.json

@@ -1,109 +0,0 @@
-{
-    "key": "group_block_footer",
-    "title": "Clone: Block Footer",
-    "fields": [
-        {
-            "key": "field_67659b49a6db2",
-            "label": "Footer",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "placement": "top",
-            "endpoint": 0
-        },
-        {
-            "key": "field_67659b49a754a",
-            "label": "Blurb",
-            "name": "blurb_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",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "layout": "table",
-            "pagination": 0,
-            "min": 0,
-            "max": 2,
-            "collapsed": "",
-            "button_label": "Add Button",
-            "rows_per_page": 20,
-            "sub_fields": [
-                {
-                    "key": "field_67659b8702138",
-                    "label": "Button",
-                    "name": "button",
-                    "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_67659b7502137"
-                }
-            ]
-        }
-    ],
-    "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": 1734712326
-}

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
-}

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,38 +12,63 @@
             "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": "None",
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #dd3333\"><\/i> Punch",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #81d742\"><\/i> Atlantis",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #8224e3\"><\/i> Purple Heart",
+                "white": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "grey": "<i class=\"fas fa-circle\" style=\"color: #808080\"><\/i> Gray",
+                "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",
             "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": "20",
+                "width": "50",
                 "class": "",
                 "id": ""
             },
@@ -87,442 +85,33 @@
             "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",
-            "label": "Text Contrast",
+            "label": "",
             "name": "contrast",
             "aria-label": "",
-            "type": "select",
+            "type": "true_false",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
-            "wrapper": {
-                "width": "20",
-                "class": "",
-                "id": ""
-            },
-            "choices": {
-                "0": "Auto",
-                "dark": "Force dark text",
-                "light": "Force light text"
-            },
-            "default_value": 0,
-            "return_format": "value",
-            "multiple": 0,
-            "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"
-                }
-            ]
+            "message": "Text Contrast",
+            "default_value": 0,
+            "allow_in_bindings": 0,
+            "ui_on_text": "Light",
+            "ui_off_text": "Dark",
+            "ui": 1
         }
     ],
     "location": [
@@ -543,5 +132,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1733505903
+    "display_title": "",
+    "modified": 1767548180
 }

resources/acf/group_clone_block_footer.json

@@ -0,0 +1,210 @@
+{
+    "key": "group_clone_block_footer",
+    "title": "Clone: Block Footer",
+    "fields": [
+        {
+            "key": "field_694016b164221",
+            "label": "Footer",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 0
+        },
+        {
+            "key": "field_694016b164272",
+            "label": "",
+            "name": "footer",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_694016b165315",
+                    "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_69401a2f06555",
+                    "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": 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_694016b1642c5",
+            "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": [
+        [
+            {
+                "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,
+    "display_title": "",
+    "modified": 1765809897
+}

resources/acf/group_clone_block_intro.json

@@ -0,0 +1,184 @@
+{
+    "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_693f37ad7fa70",
+            "label": "",
+            "name": "intro",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_676599964d3cc",
+                    "label": "Heading",
+                    "name": "heading",
+                    "aria-label": "",
+                    "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,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "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
+                }
+            ]
+        },
+        {
+            "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,
+    "display_title": "",
+    "modified": 1765809893
+}

resources/acf/group_clone_block_settings.json

@@ -3,11 +3,11 @@
     "title": "Clone: Block Settings",
     "fields": [
         {
-            "key": "field_673511c31122f",
+            "key": "field_69403228d2637",
             "label": "Settings",
             "name": "",
             "aria-label": "",
-            "type": "tab",
+            "type": "accordion",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -16,62 +16,146 @@
                 "class": "",
                 "id": ""
             },
-            "placement": "top",
+            "open": 0,
+            "multi_expand": 1,
             "endpoint": 0
         },
         {
-            "key": "field_67350eb62cdf9",
-            "label": "Top Padding",
-            "name": "padding_top",
+            "key": "field_694031b513e66",
+            "label": "",
+            "name": "settings",
             "aria-label": "",
-            "type": "radio",
+            "type": "group",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "33.33",
+                "width": "",
                 "class": "",
                 "id": ""
             },
-            "choices": [
-                "On",
-                "Off"
-            ],
-            "default_value": "",
-            "return_format": "value",
-            "allow_null": 0,
-            "other_choice": 0,
-            "layout": "horizontal",
-            "save_other_choice": 0
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "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_67350eb62cdf9",
+                    "label": "",
+                    "name": "padding_top",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Top Padding",
+                    "default_value": 1,
+                    "allow_in_bindings": 0,
+                    "ui_on_text": "On",
+                    "ui_off_text": "Off",
+                    "ui": 1
+                },
+                {
+                    "key": "field_673510c1dc830",
+                    "label": "",
+                    "name": "padding_bottom",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Bottom Padding",
+                    "default_value": 1,
+                    "allow_in_bindings": 0,
+                    "ui_on_text": "On",
+                    "ui_off_text": "Off",
+                    "ui": 1
+                },
+                {
+                    "key": "field_695aa550e16d4",
+                    "label": "Background",
+                    "name": "",
+                    "aria-label": "",
+                    "type": "message",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "",
+                    "new_lines": "wpautop",
+                    "esc_html": 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_673510c1dc830",
-            "label": "Bottom Padding",
-            "name": "padding_bottom",
-            "aria-label": "",
-            "type": "radio",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "33.33",
-                "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",
+            "key": "field_69403239d2638",
+            "label": "Settings (end)",
             "name": "",
             "aria-label": "",
             "type": "accordion",
@@ -85,29 +169,7 @@
             },
             "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
+            "endpoint": 1
         }
     ],
     "location": [
@@ -128,5 +190,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1731536288
+    "display_title": "",
+    "modified": 1767548583
 }

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
 }

resources/acf/group_options_global_settings.json

@@ -17,7 +17,8 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0
+            "endpoint": 0,
+            "selected": 0
         },
         {
             "key": "field_67658e49aba4f",
@@ -58,7 +59,10 @@
                     "default_value": "",
                     "enable_opacity": 0,
                     "return_format": "string",
-                    "parent_repeater": "field_67658e49aba4f"
+                    "parent_repeater": "field_67658e49aba4f",
+                    "custom_palette_source": "",
+                    "palette_colors": "",
+                    "show_color_wheel": true
                 },
                 {
                     "key": "field_67658fba41889",
@@ -167,6 +171,7 @@
                         "id": ""
                     },
                     "layout": "block",
+                    "parent_repeater": "field_67658e49aba4f",
                     "sub_fields": [
                         {
                             "key": "field_676590414188c",
@@ -184,7 +189,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_676590684188d",
@@ -202,7 +210,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_6765907f4188e",
@@ -220,7 +231,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_676590924188f",
@@ -238,7 +252,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_6765909941890",
@@ -256,7 +273,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_6765909f41891",
@@ -274,10 +294,12 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         }
-                    ],
-                    "parent_repeater": "field_67658e49aba4f"
+                    ]
                 }
             ]
         },
@@ -296,7 +318,8 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0
+            "endpoint": 0,
+            "selected": 0
         },
         {
             "key": "field_67659cb08081e",
@@ -372,7 +395,8 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0
+            "endpoint": 0,
+            "selected": 0
         },
         {
             "key": "field_676594615ead2",
@@ -393,6 +417,27 @@
             "placeholder": "",
             "prepend": "",
             "append": ""
+        },
+        {
+            "key": "field_698b36010d055",
+            "label": "Font Awesome Kit ID",
+            "name": "badegg_integrations_fontawesome_kit",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener nofollow noindex\">Visit website<\/a>",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 1,
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
         }
     ],
     "location": [
@@ -413,5 +458,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1734712625
+    "display_title": "",
+    "modified": 1770736471
 }

resources/css/app.scss

@@ -9,18 +9,17 @@
 @use "plugins/contact-form-7";
 @use "plugins/mce";
 
+// Components
+@use "components/block";
+@use "components/forms";
+@use "components/button";
+@use "components/card";
+@use "components/BadEggLightbox";
+
 // Sections
 @use "sections/header";
 @use "sections/footer";
 
-// Components
-@use "components/forms";
-@use "components/button";
-@use "components/card";
-
-// Blocks
-@use "blocks/BadExample";
-
 // Page Styles
 @use "views/page";
 

resources/css/components/_BadEggLightbox.scss

@@ -0,0 +1,92 @@
+#badegg-lightbox {
+  &-overlay,
+  &-image,
+  &-close {
+    transition: all 300ms ease;
+    opacity: 0;
+  }
+
+  &-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    padding: 3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(white, 0.5);
+
+    .open & {
+      opacity: 1;
+      backdrop-filter: blur(1em);
+    }
+  }
+
+  &-image {
+    position: relative;
+    z-index: 2;
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    transform: scale(0.8);
+
+    .open & {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  &-close {
+    position: absolute;
+    z-index: 3;
+    top: 1em;
+    right: 1em;
+    display: block;
+    appearance: none;
+    border: none;
+    background: transparent;
+    border: 2px solid black;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    transform: scale(0.01) rotate(-360deg);
+
+    .open & {
+      opacity: 1;
+      transform: none;
+    }
+
+    &:hover,
+    &:focus {
+      transform: scale(1.2) rotate(90deg);
+    }
+
+    .admin-bar & {
+      top: calc(1em + 32px);
+
+      @media (max-width: 782px) {
+        top: calc(1em + 46px);
+      }
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      stroke: black;
+      stroke-width: 5;
+    }
+
+    &:focus {
+      outline: 2px dashed red;
+    }
+  }
+}

resources/css/components/_block.scss

@@ -0,0 +1,15 @@
+
+
+.has-bg-image {
+  position: relative;
+
+  >.container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .badegg-block-background {
+    position: absolute;
+    inset: 0;
+  }
+}

resources/css/components/_button.scss

@@ -1,4 +1,4 @@
-@use "../global/fonts";
+@use "../global/variables/fonts";
 @use "../global/variables/colours";
 
 button {
@@ -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;
   }
 }

resources/css/components/_forms.scss

@@ -1,11 +1,7 @@
-@use "../global/fonts";
+@use "../global/variables/fonts";
 @use "../global/variables/breakpoints";
 @use "../global/variables/colours";
 
-textarea {
-  min-height: 10.375em;
-}
-
 input,
 textarea {
   color: colours.$grey;

resources/css/editor.scss

@@ -0,0 +1,73 @@
+@use "app";
+@use "global/variables/colours";
+
+html :where(.wp-block) {
+  max-width: none;
+}
+
+.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: 0;
+  background: transparent;
+}
+
+.editor-visual-editor {
+  &__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;
+  }
+}
+
+.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;
+}

resources/css/global/_fonts.scss

@@ -1,5 +1,3 @@
-$font: "Ubuntu", Helvetica, Arial, sans-serif;
-
 /*
  * Roots Fonts Setup
  * https://roots.io/sage/docs/fonts-setup/

resources/css/global/_typography.scss

@@ -1,14 +1,14 @@
-@use "fonts";
+@use "variables/fonts";
 @use "variables/breakpoints";
 @use "variables/colours";
 @use "variables/spacing";
 
 .wysiwyg {
-  *:first-child {
+  > *:first-child {
     margin-top: 0;
   }
 
-  *:last-child {
+  > *:last-child {
     margin-bottom: 0;
   }
 }
@@ -63,7 +63,7 @@ p,
 li,
 td,
 label {
-  color: colours.$grey;
+  color: colours.$grey-darker;
   font-family: fonts.$font;
   font-weight: 400;
   line-height: 1.5em;
@@ -129,7 +129,7 @@ ol {
 }
 
 hr {
-  margin: 1.5em auto 2em;
+  margin: 2em auto;
   height: 0;
   border: 0 solid colours.$grey-light;
   border-width: spacing.$borderThin 0 0;
@@ -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; }
 }

resources/css/global/_variables.scss

@@ -1,3 +1,4 @@
+@use "variables/fonts";
 @use "variables/colours";
 @use "variables/breakpoints";
 @use "variables/spacing";

resources/css/global/framework/_normalise.scss

@@ -30,8 +30,20 @@ img {
   max-width: 100%;
   height: auto;
   transition: all 300ms ease;
-
-  &.lazy {
-    filter: blur(0.25em);
-  }
+}
+
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+img.lazy,
+.lazy-bg,
+.lazy-loaded {
+  transition: all 300ms ease;
+}
+
+img.lazy,
+.lazy-bg {
+  filter: blur(0.25em);
 }

resources/css/global/framework/_spacing.scss

@@ -26,10 +26,16 @@
   }
 }
 
+figure {
+  margin: 0;
+  padding: 0;
+}
+
 .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; }

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]",
   );
@@ -24,7 +24,7 @@
       }
     }
 
-    #{$button}.#{$name}.inverted {
+    #{$button}.#{$name}.outline {
       color: $hex;
       background: transparent;
       border-color: $hex;

resources/css/global/mixins/_generate-colour-classes.scss

@@ -1,4 +1,5 @@
 @use "text-contrast";
+@use "../variables/colours";
 
 @use "sass:color";
 
@@ -22,6 +23,16 @@
       ::selection {
         @include text-contrast.text_contrast(color.invert($hex));
         background: color.invert($hex);
+        @if($name == "white") {
+          color: colours.$white;
+          background: colours.$primary;
+        } @else if($name == "black") {
+          color: colours.$white;
+          background: colours.$primary-lighter;
+        } @else {
+          @include text-contrast.text_contrast(color.invert($hex));
+          background: color.invert($hex);
+        }
       }
     }
   }

resources/css/global/variables/_colours.scss

@@ -1,5 +1,7 @@
 @use "sass:color";
 
+$wpblue: #2271b1;
+
 //== Status
 $success: #39b54a;
 $error: #be1e2d;
@@ -11,48 +13,50 @@ $secondary: #5bc0de;
 $tertiary: color.invert($primary);
 $quaternary: color.invert($secondary);
 
+//== Shades
+$white:               #FFFFFF;
+$grey:                #808080;
+$black:               #000000;
+
 //== Primary Tints
-$primary-darkest: color.adjust($primary, $lightness: -30%);
-$primary-darker: color.adjust($primary, $lightness: -20%);
-$primary-dark: color.adjust($primary, $lightness: -10%);
-$primary-light: color.adjust($primary, $lightness: 10%);
-$primary-lighter: color.adjust($primary, $lightness: 20%);
-$primary-lightest: color.adjust($primary, $lightness: 30%);
+$primary-darkest: color.adjust($primary, $lightness: -45%);
+$primary-darker: color.adjust($primary, $lightness: -30%);
+$primary-dark: color.adjust($primary, $lightness: -15%);
+$primary-light: color.adjust($primary, $lightness: 15%);
+$primary-lighter: color.adjust($primary, $lightness: 30%);
+$primary-lightest: color.adjust($primary, $lightness: 45%);
 
 //== Secondary Tints
-$secondary-darkest: color.adjust($secondary, $lightness: -30%);
-$secondary-darker: color.adjust($secondary, $lightness: -20%);
-$secondary-dark: color.adjust($secondary, $lightness: -10%);
-$secondary-light: color.adjust($secondary, $lightness: 10%);
-$secondary-lighter: color.adjust($secondary, $lightness: 20%);
-$secondary-lightest: color.adjust($secondary, $lightness: 30%);
+$secondary-darkest: color.adjust($secondary, $lightness: -45%);
+$secondary-darker: color.adjust($secondary, $lightness: -30%);
+$secondary-dark: color.adjust($secondary, $lightness: -15%);
+$secondary-light: color.adjust($secondary, $lightness: 15%);
+$secondary-lighter: color.adjust($secondary, $lightness: 30%);
+$secondary-lightest: color.adjust($secondary, $lightness: 45%);
 
 //== Tertiary Tints
-$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
-$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
-$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
-$tertiary-light: color.adjust($tertiary, $lightness: 10%);
-$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
-$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
+$tertiary-darkest: color.adjust($tertiary, $lightness: -45%);
+$tertiary-darker: color.adjust($tertiary, $lightness: -30%);
+$tertiary-dark: color.adjust($tertiary, $lightness: -15%);
+$tertiary-light: color.adjust($tertiary, $lightness: 15%);
+$tertiary-lighter: color.adjust($tertiary, $lightness: 30%);
+$tertiary-lightest: color.adjust($tertiary, $lightness: 45%);
 
 //== quaternary Tints
-$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
-$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
-$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
-$quaternary-light: color.adjust($quaternary, $lightness: 10%);
-$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
-$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
+$quaternary-darkest: color.adjust($quaternary, $lightness: -45%);
+$quaternary-darker: color.adjust($quaternary, $lightness: -30%);
+$quaternary-dark: color.adjust($quaternary, $lightness: -15%);
+$quaternary-light: color.adjust($quaternary, $lightness: 15%);
+$quaternary-lighter: color.adjust($quaternary, $lightness: 30%);
+$quaternary-lightest: color.adjust($quaternary, $lightness: 45%);
 
-//== Shades
-$white:               white;
-$grey-lightest:       color.adjust(black, $lightness: 95%);
-$grey-lighter:        color.adjust(black, $lightness: 80%);
-$grey-light:          color.adjust(black, $lightness: 70%);
-$grey:                color.adjust(black, $lightness: 50%);
-$grey-dark:           color.adjust(black, $lightness: 40%);
-$grey-darker:         color.adjust(black, $lightness: 20%);
-$grey-darkest:        color.adjust(black, $lightness: 05%);
-$black:               black;
+//== six shades of grey
+$grey-darkest:        color.adjust(grey, $lightness: -40%);
+$grey-darker:         color.adjust(grey, $lightness: -25%);
+$grey-dark:           color.adjust(grey, $lightness: -10%);
+$grey-light:          color.adjust(grey, $lightness: 10%);
+$grey-lighter:        color.adjust(grey, $lightness: 25%);
+$grey-lightest:       color.adjust(grey, $lightness: 40%);
 
 //## Colour Array (used in generating colour classes).
 $colors: (

resources/css/global/variables/_fonts.scss

@@ -0,0 +1,2 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+$blockquote: serif;

resources/css/global/variables/_spacing.scss

@@ -30,6 +30,11 @@ $innerSmall:            1.000em;
 $innerSmaller:          0.750em;
 $innerSmallest:         0.500em;
 
+$gap:                   1em;
+$gapSmall:              0.5em;
+$gapMedium:             1em;
+$gapLarge:              2em;
+
 $borderRadiusLargeer:   1.500em;
 $borderRadiusLarge:     1.000em;
 $borderRadius:          1.000em;

resources/js/app.js

@@ -3,16 +3,10 @@ import.meta.glob([
   '../fonts/**',
 ]);
 
-import domReady from '@wordpress/dom-ready';
-import blocks from './blocks.js';
-import Header from './sections/header.js';
+import Header from '../views/sections/header/header.js';
 import LazyLoad from './lib/Lazy.js';
+import BadEggLightbox from './lib/BadEggLightbox';
 
-/**
- * Application entrypoint
- */
-domReady(async () => {
-  LazyLoad();
-  blocks();
-  Header();
-});
+Header();
+LazyLoad();
+BadEggLightbox();

resources/js/blocks.js

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

resources/js/blocks/BadExample.js

@@ -1,4 +0,0 @@
-export default function BadExample()
-{
-
-}

resources/js/blocks/components/AttachmentImage.jsx

@@ -0,0 +1,46 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * AttachmentImage
+ *
+ * This component is used to display an image from the media library.
+ * It's meant as a JS companion to the PHP function `wp_get_attachment_image()`.
+ *
+ * @link https://www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
+ *
+ * @param {object} props
+ * @param {number} props.imageId The ID of the image to display.
+ * @param {string} props.size The size of the image to display. Defaults to 'full'.
+ * @returns {*} React JSX
+ */
+export default function AttachmentImage({ imageId, size = 'full' }) {
+
+	const { image } = useSelect((select) => ({
+		image: select('core').getEntityRecord('postType', 'attachment', imageId),
+	}));
+
+	const imageAttributes = () =>{
+		let attributes = {
+			src: image.source_url,
+			alt: image.alt_text,
+			className: `attachment-${size} size-${size}`,
+			width: image.media_details.width,
+			height: image.media_details.height,
+		};
+		if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
+			attributes.src = image.media_details.sizes[size].source_url;
+			attributes.width = image.media_details.sizes[size].width;
+			attributes.height = image.media_details.sizes[size].height;
+		}
+
+		return attributes;
+	};
+
+	return (
+		<>
+			{image && (
+				<img {...imageAttributes()} />
+			)}
+		</>
+	)
+}

resources/js/blocks/components/BackgroundImage.jsx

@@ -0,0 +1,54 @@
+import { select } from '@wordpress/data';
+
+/**
+ * BackgroundImage
+ *
+ * This component is used to display a background image for a block based on its attributes.
+ *
+ * @param {object} props
+ * @param {string} props.background_url The desired full size url.
+ * @param {string} props.background_url_lazy Tiny lazy url.
+ * @param {boolean} props.background_lazy Whether or not to lazy load the background image.
+ * @param {object} props.background_position x and y coordinates as decimals from 0 to 1.
+ * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
+ * @param {number} props.background_opacity The opacity value applied to the image.
+ * @returns {*} React JSX
+ */
+export default function BackgroundImage({
+  background_url,
+  background_url_lazy,
+  background_lazy,
+  background_position = 'center',
+  background_fixed = false,
+  background_opacity = 70,
+  disableLazyBG = false,
+}) {
+
+  if (background_url) {
+    let styles = {
+      backgroundImage: `url(${background_url})`,
+      backgroundPosition: `${ background_position.x * 100}% ${ background_position.y * 100}%`,
+      backgroundSize: 'cover',
+      backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
+      opacity: Number(background_opacity) * 0.01,
+    }
+
+    let attributes = {
+      className: 'badegg-block-background',
+      style: styles,
+    };
+
+    if(background_lazy && !disableLazyBG) {
+      attributes['data-bg'] = background_url;
+      attributes.style.backgroundImage = `url(${background_url_lazy})`;
+      attributes.className += ' lazy-bg';
+    }
+
+    return (
+      <div { ...attributes } />
+    )
+  } else {
+    return;
+  }
+
+}

resources/js/blocks/components/BlockSettings.jsx

@@ -0,0 +1,260 @@
+/**
+ * BlockSettings
+ *
+ * Bundles the <InspectorControls> used for several blocks
+ * *
+ * @param {object} props
+ * @param {number} props.attributes the data
+ * @param {string} props.setAttributes the state
+ * @returns {*} React JSX
+ */
+
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	SelectControl,
+	ToggleControl,
+	RangeControl,
+	ColorPalette,
+  FocalPointPicker,
+	Button,
+	Spinner,
+} from '@wordpress/components';
+
+import {
+	InspectorControls,
+  BlockControls,
+  AlignmentToolbar,
+	MediaUpload,
+	MediaUploadCheck,
+} from '@wordpress/block-editor';
+
+export default function BlockSettings({ attributes, setAttributes }) {
+	const [ configOptions, setConfigOptions ] = useState([]);
+	const [ isLoading, setIsLoading ] = useState(true);
+
+  useEffect( () => {
+		let isMounted = true;
+
+		apiFetch( { path: '/badegg/v1/blocks/config' } )
+			.then( ( data ) => {
+				if ( isMounted ) {
+					setConfigOptions( data );
+					setIsLoading( false );
+				}
+			} )
+			.catch( () => {
+				if ( isMounted ) {
+					setConfigOptions( null );
+					setIsLoading( false );
+				}
+			} );
+
+		return () => {
+			isMounted = false;
+		};
+	}, [] );
+
+  if ( isLoading ) {
+		return (
+			<InspectorControls>
+				<Panel>
+					<PanelBody>
+						<Spinner />
+					</PanelBody>
+				</Panel>
+			</InspectorControls>
+		);
+	}
+
+	if ( ! configOptions ) {
+		return null;
+	}
+
+  const {
+    alignment,
+		container_width,
+		padding_top,
+		padding_bottom,
+		background_hex,
+		background_tint,
+		background_image,
+    background_url,
+    background_lazy,
+    background_position,
+		background_opacity,
+		background_contrast,
+		background_fixed,
+	} = attributes;
+
+	return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={ alignment }
+          onChange={(value) => setAttributes({alignment: value})}
+        />
+      </BlockControls>
+      <InspectorControls>
+        <Panel className="badegg-components-panel">
+          <PanelBody title={ __("Spacing", "badegg") }>
+            <SelectControl
+              label={ __("Container Width", "badegg") }
+              value={ container_width }
+              options={ configOptions.container }
+              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>
+          <PanelBody title={ __("Background", "badegg") }>
+            <p style={{ textTransform: 'uppercase', fontSize: '11px' }} className="components-truncate components-text components-input-control__label">
+              { __('Colour', 'badegg') }
+            </p>
+            <ColorPalette
+              colors={ configOptions.colours }
+              value={ background_hex }
+              clearable={ false }
+              disableCustomColors={ true }
+              style={{ marginBottom: '16px' }}
+              onChange={ ( value ) => {
+                let slug, hex, selected = '';
+
+                if(value) {
+                  selected = configOptions.colours.find(
+                    ( c ) => c.color === value
+                  );
+
+                  hex = value;
+                }
+
+                if(selected) {
+                  slug = selected.slug;
+                }
+
+                let colourAttributes = {
+                  background_colour: slug,
+                  background_hex: hex,
+                };
+
+                if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
+                  colourAttributes.background_tint = '0';
+                }
+
+                setAttributes( colourAttributes );
+
+              } }
+            />
+
+            { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
+              <SelectControl
+                label={ __("Tint", "badegg") }
+                value={ background_tint }
+                options={ configOptions.tints }
+                onChange={ (value) => setAttributes({ background_tint: value }) }
+                __next40pxDefaultSize={ true }
+                __nextHasNoMarginBottom={ true }
+              />
+            ) : null }
+
+            <ToggleControl
+              label={ __('Text Contrast', 'badegg') }
+              checked={ background_contrast }
+              onChange={(value) => setAttributes({ background_contrast: value }) }
+              __nextHasNoMarginBottom
+            />
+
+            { background_image != 0 && (
+              <>
+                <ToggleControl
+                  label={ __('Fixed Position', 'badegg') }
+                  checked={ background_fixed }
+                  onChange={(value) => setAttributes({ background_fixed: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <ToggleControl
+                  label={ __('Lazy Loaded', 'badegg') }
+                  checked={ background_lazy }
+                  onChange={(value) => setAttributes({ background_lazy: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <FocalPointPicker
+                  url={ background_url }
+                  value={ background_position }
+                  onDragStart={ (value) => setAttributes({ background_position: value }) }
+                  onDrag={ (value) => setAttributes({ background_position: value }) }
+                  onChange={ (value) => setAttributes({ background_position: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <RangeControl
+                  __next40pxDefaultSize
+                  __nextHasNoMarginBottom
+                  label={ __("Opacity", "badegg") }
+                  value={ background_opacity }
+                  onChange={ ( value ) => setAttributes({ background_opacity: value }) }
+                  min={ 5 }
+                  max={ 100 }
+                />
+              </>
+            )}
+
+            <PanelRow>
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={ (media) => setAttributes({
+                    background_image: media.id,
+                    background_url: media.sizes.hero.url,
+                    background_url_lazy: media.sizes.lazy.url,
+                  })}
+                  allowedTypes={ ['image'] }
+                  value={ background_image }
+                  render={ ({ open }) => (
+                    <Button
+                      onClick={ open }
+                      variant="primary"
+                    >
+                      { background_image ?  __("Replace image", "badegg") :  __("Choose image", "badegg") }
+                    </Button>
+                  )}
+                />
+              </MediaUploadCheck>
+
+              { background_image != 0 && (
+                <Button
+                  onClick={ () => setAttributes({
+                      background_image: 0,
+                      background_url: '',
+                      background_url_lazy: '',
+                  }) }
+                  isDestructive
+                  variant="secondary"
+                >
+                  { __("Remove image", "badegg") }
+                </Button>
+              )}
+            </PanelRow>
+
+          </PanelBody>
+        </Panel>
+      </InspectorControls>
+    </>
+	);
+}

resources/js/blocks/lib/classNames.js

@@ -0,0 +1,59 @@
+export function containerClassNames(attributes, extraClasses = [])
+{
+
+  let classNames = [
+    'container',
+  ];
+
+  if('container_width' in attributes && !['', '0'].includes(attributes.container_width))
+    classNames.push(`container-${attributes.container_width}`);
+
+  if('alignment' in attributes)
+    classNames.push(`align-${attributes.alignment}`);
+
+  // combine arrays
+  classNames = classNames.concat(extraClasses);
+
+  return classNames;
+}
+
+export function sectionClassNames(attributes, defaultClasses = '', extraClasses = [])
+{
+  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');
+
+  if('background_hex' in attributes && attributes.background_hex) {
+    let bg = `bg-${ attributes.background_colour }`;
+
+    if(
+      'background_tint' in attributes &&
+      attributes.background_tint != 0 &&
+      !['white', 'black'].includes(attributes.background_colour)
+    ) {
+      bg += `-${ attributes.background_tint }`;
+    }
+
+    classNames.push(bg);
+  }
+
+  if('background_image' in attributes && attributes.background_image != '0')
+    classNames.push('has-bg-image');
+
+  if('background_contrast' in attributes && attributes.background_contrast)
+    classNames.push('knockout');
+
+  // combine arrays
+  classNames = classNames.concat(defaultClasses).concat(extraClasses);
+
+  // remove duplicate items
+  classNames = [ ...new Set(classNames) ];
+
+  return classNames;
+}

resources/js/editor.js

@@ -1,5 +1,31 @@
 import domReady from '@wordpress/dom-ready';
+import blockParents from '../json/block-parents.json';
+import blockWhitelist from '../json/block-core-whitelist.json';
+import.meta.glob('../views/blocks/**/{index.jsx,index.js}', { eager: true })
 
 domReady(() => {
-  //
+  const restrictEditorParentBlocks = (settings, name) => {
+    if (blockWhitelist.includes(name)) {
+      settings.parent = blockParents;
+    }
+
+    return settings
+  }
+
+  const coreInnerBlocks = (settings, name) => {
+    if (['core/media-text', 'core/details', 'core/quote'].includes(name)) {
+
+      settings.allowedBlocks = [
+        'core/paragraph',
+        'core/heading',
+        'core/list',
+      ];
+    }
+
+    return settings;
+  }
+
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks );
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks );
+
 });

resources/js/lib/BadEggLightbox.js

@@ -0,0 +1,81 @@
+export default function BadEggLightbox()
+{
+  const lightboxes = document.querySelectorAll(".badegg-lightbox");
+
+  if(!lightboxes) return;
+
+  lightboxes.forEach(lightbox => {
+    const fullSize = lightbox.getAttribute('href');
+    const thumbnail = lightbox.querySelector("img");
+
+    lightbox.addEventListener("click", (e) => {
+      e.preventDefault();
+      // console.log(e);
+
+      modal(fullSize, thumbnail);
+    });
+
+  });
+}
+
+function modal(src = '', img = '')
+{
+  if(!src || !img) {
+    alert('Error: No image defined');
+    return;
+  }
+
+  const title = img.getAttribute("title") || '';
+  const alt = img.getAttribute("alt") || '';
+
+  const body = document.querySelector("body");
+
+  let template = `
+    <img id="badegg-lightbox-image" src="${src}" tabindex="0" title="${title}" alt="${alt}" />
+    <button id="badegg-lightbox-close" aria-label="close" aria-expanded="true" tabindex="0">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <line x2="32" y2="32"/>
+        <line x1="32" y2="32"/>
+      </svg>
+    </button>
+    <div id="badegg-lightbox-overlay"></div>
+  `;
+
+  let modal = document.createElement("div");
+
+  modal.setAttribute("id", "badegg-lightbox-modal");
+  modal.setAttribute("aria-modal", "true");
+  modal.innerHTML = template;
+
+  body.appendChild(modal);
+
+  setTimeout(() => modal.classList.add("open"), 100);
+
+  document.getElementById("badegg-lightbox-image").focus();
+
+  modalDeleteListener();
+}
+
+function modalDeleteListener()
+{
+  const modal = document.getElementById("badegg-lightbox-modal");
+
+  if(!modal) return;
+
+  const modalClose = document.getElementById("badegg-lightbox-close");
+  const modalOverlay = document.getElementById("badegg-lightbox-overlay");
+
+  modalClose.addEventListener("click", (e) => {
+    modal.remove();
+  });
+
+  modalOverlay.addEventListener("click", (e) => {
+    modal.remove();
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if(e.key === 'Escape') {
+      modal.remove();
+    }
+  });
+}

resources/js/lib/Lazy.js

@@ -5,29 +5,50 @@ export default function LazyLoadInit()
 
 function LazyLoad() {
 
-  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
+  const lazyElements = [].slice.call(
+    document.querySelectorAll('img.lazy, .lazy-bg')
+  );
 
   if ('IntersectionObserver' in window) {
-    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          let lazyImage = entry.target;
-          lazyImage.src = lazyImage.dataset.src;
+    const lazyObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
 
-          if(lazyImage.dataset.srcset) {
-            lazyImage.srcset = lazyImage.dataset.srcset;
+        const el = entry.target;
+
+        // Handle <img>
+        if (el.tagName === 'IMG') {
+          el.src = el.dataset.src;
+
+          if (el.dataset.srcset) {
+            el.srcset = el.dataset.srcset;
           }
 
-          lazyImage.classList.remove('lazy');
-          lazyImageObserver.unobserve(lazyImage);
+          el.classList.remove('lazy');
         }
+
+        // Handle background images
+        else {
+          if (el.dataset.bg) {
+            el.style.backgroundImage = `url("${el.dataset.bg}")`;
+            el.classList.remove('lazy-bg');
+            el.classList.add('lazy-loaded');
+          }
+        }
+
+        observer.unobserve(el);
       });
     });
 
-    lazyImages.forEach(function(lazyImage) {
-      lazyImageObserver.observe(lazyImage);
-    });
+    lazyElements.forEach(el => lazyObserver.observe(el));
   } else {
-    // Possibly fall back to a more compatible method here
+    // Optional fallback: load everything immediately
+    lazyElements.forEach(el => {
+      if (el.tagName === 'IMG' && el.dataset.src) {
+        el.src = el.dataset.src;
+      } else if (el.dataset.bg) {
+        el.style.backgroundImage = `url("${el.dataset.bg}")`;
+      }
+    });
   }
 }

resources/json/block-attributes.json

@@ -0,0 +1,64 @@
+{
+  "container_width": {
+      "type": "string",
+      "default": ""
+  },
+  "alignment": {
+      "type": "string"
+  },
+  "padding_top": {
+      "type": "boolean",
+      "default": true
+  },
+  "padding_bottom": {
+      "type": "boolean",
+      "default": true
+  },
+  "background_colour": {
+      "type": "string",
+      "default": ""
+  },
+  "background_hex": {
+      "type": "string",
+      "default": ""
+  },
+  "background_tint": {
+      "type": "string",
+      "default": "0"
+  },
+  "background_image": {
+      "type": "integer",
+      "default": 0
+  },
+  "background_url": {
+    "type": "string",
+    "default": ""
+  },
+  "background_url_lazy": {
+    "type": "string",
+    "default": ""
+  },
+  "background_lazy": {
+    "type": "boolean",
+    "default": true
+  },
+  "background_opacity": {
+      "type": "integer",
+      "default": 30
+  },
+  "background_position": {
+      "type": "object",
+      "default": {
+        "x": 0.5,
+        "y": 0.5
+      }
+  },
+  "background_fixed": {
+      "type": "boolean",
+      "default": false
+  },
+  "background_contrast": {
+      "type": "boolean",
+      "default": false
+  }
+}

resources/json/block-core-whitelist.json

@@ -0,0 +1,22 @@
+[
+  "core/separator",
+  "core/spacer",
+
+  "core/gallery",
+  "core/image",
+  "core/media-text",
+  "core/audio",
+  "core/video",
+  "core/embed",
+
+  "core/footnotes",
+  "core/heading",
+  "core/list",
+  "core/details",
+  "core/list-item",
+  "core/missing",
+  "core/paragraph",
+  "core/quote",
+  "core/pullquote",
+  "core/verse"
+]

resources/json/block-parents.json

@@ -0,0 +1,4 @@
+[
+  "acf/badegg-editor",
+  "badegg/article"
+]

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
+      }
+    }
+  }
+}

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;
+}

resources/views/blocks/acfdemo/index.js

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

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

resources/views/blocks/acfdemo/script.js

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

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;
+}

resources/views/blocks/acfdemo/view.js

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

resources/views/blocks/article/README.md

@@ -0,0 +1,25 @@
+# Bad Egg's Article Builder
+
+Designed as a full width component, Article Builder bundles core wordpress blocks commonly used in articles into a classic editor like experience. 
+
+## Features
+- Uses the `<InnerBlocks/>` component with a whitelist defined in `resources/json/core-block-whitelist.json`
+- Provides spacing and background configuration options 
+- Default block attributes are defined in `resources/json/block-attributes.json` so that they are not needed in duplicate in `block.json`
+- A reusable customisation UI is defined in `resources/js/blocks/components/BlockSettings.jsx` so that multiple blocks can rely on the same controls 
+
+## Theme-level changes
+- All core wordpress blocks are disabled at the top level to prevent them from being used alongside full-width blocks designed to craft page layouts
+- Blocks that can use core whitelisted inner blocks are defined in `resources/json/block-parents.json`
+
+## Attributes
+- Top Padding
+- Bottom Padding
+- Container width
+- Background
+  - Colour
+  - Tint
+  - Image
+  - Image opacity
+  - Text contrast toggle
+  - Fixed position toggle

resources/views/blocks/article/block.json

@@ -0,0 +1,18 @@
+{
+  "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,
+    "color": {
+      "background": false,
+      "text": false
+    }
+  }
+}

resources/views/blocks/article/css/_base.scss

@@ -0,0 +1,20 @@
+@use "sass:math";
+
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+@use "../../../../css/global/variables/colours";
+
+.wp-block-badegg-article {
+  container-name: BadEggArticle;
+  container-type: inline-size;
+
+  > .container > [class^="wp-block-"]:not(.wp-block-heading) {
+    margin: spacing.$innerLarge auto;
+  }
+
+  .is-layout-flex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$gap;
+  }
+}

resources/views/blocks/article/css/_details.scss

@@ -0,0 +1,17 @@
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-details {
+  summary {
+    font-family: fonts.$font;
+    font-weight: bold;
+  }
+
+  @media screen {
+    .knockout & {
+      summary {
+        color: colours.$white;
+      }
+    }
+  }
+}

resources/views/blocks/article/css/_embed.scss

@@ -0,0 +1,10 @@
+.wp-block-badegg-article {
+  .is-type-video {
+    iframe {
+      display: block;
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16 / 9;
+    }
+  }
+}

resources/views/blocks/article/css/_gallery.scss

@@ -0,0 +1,12 @@
+@use "sass:math";
+
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  .wp-block-gallery {
+    @for $i from 2 through 8 {
+      &.columns-#{$i} > * { width: calc(math.div(1, $i) * 100% - (spacing.$gap - math.div(spacing.$gap, $i))); }
+    }
+  }
+}

resources/views/blocks/article/css/_image.scss

@@ -0,0 +1,52 @@
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  figure {
+    img {
+      display: block;
+    }
+  }
+
+  .wp-block-image {
+    &.is-style-rounded {
+      img {
+        border-radius: 9999px;
+      }
+    }
+
+    @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) {
+      .alignleft,
+      .alignright {
+        margin-bottom: spacing.$innerSmall;
+      }
+
+      .alignleft {
+        float: left;
+        margin-right: spacing.$innerLarge;
+      }
+
+      .alignright {
+        float: right;
+        margin-left: spacing.$innerLarge;
+      }
+    }
+  }
+
+  .is-image-fill-element,
+  .is-cropped {
+    figure {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+
+      img {
+        flex: 1 0 0%;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+        aspect-ratio: 1;
+      }
+    }
+  }
+}

resources/views/blocks/article/css/_media-text.scss

@@ -0,0 +1,24 @@
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  .wp-block-media-text {
+    display: grid;
+    gap: spacing.$innerLarge;
+
+    @container BadEggArticle (max-width: #{breakpoints.$screen-xs-max}) {
+      &.is-stacked-on-mobile {
+        display: block;
+
+        .wp-block-media-text__media {
+          margin-bottom: spacing.$innerLarge;
+        }
+      }
+    }
+
+    &__content {
+      > *:first-child { margin-top: 0; }
+      > *:last-child { margin-bottom: 0; }
+    }
+  }
+}

resources/views/blocks/article/css/_quote.scss

@@ -0,0 +1,117 @@
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-badegg-article {
+  .wp-block-pullquote blockquote,
+  .wp-block-quote {
+    position: relative;
+    text-align: center;
+    font-size: 1.25em;
+    padding: 0;
+    padding: 1em 0;
+    margin: spacing.$innerLarge auto;
+
+    * {
+      position: relative;
+      z-index: 3;
+    }
+
+    p {
+      font-family: fonts.$blockquote;
+      font-style: italic;
+      margin: 0 0 0.25em;
+      color: colours.$primary;
+    }
+
+    cite {
+      font-size: 0.6em;
+      font-family: fonts.$font;
+      font-style: normal;
+      color: colours.$grey;
+    }
+
+    &::before {
+      content: '\201C';
+      position: absolute;
+      z-index: 2;
+      top: -0.25em;
+      left: calc(50% - 0.5em);
+      display: block;
+      text-align: center;
+      font-size: 1.5em;
+      width: 1em;
+      color: colours.$secondary;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: auto calc(20% - 1em) 0;
+      border-width: 1px 0 0;
+      border-style: solid;
+    }
+
+    > *:first-child {
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: -0.75em;
+        display: block;
+        width: 30%;
+        border-width: 1px 0 0;
+        border-style: solid;
+      }
+
+      &::before {
+        right: calc(50% + 1em);
+      }
+
+      &::after {
+        left: calc(50% + 1em);
+      }
+    }
+
+    &::after,
+    > *:first-child::before,
+    > *:first-child::after {
+      border-color: colours.$grey-lighter;
+    }
+
+    &.is-style-plain {
+      &::before,
+      &::after,
+      > *:first-child::before,
+      > *:first-child::after {
+        content: none;
+      }
+    }
+
+    @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) {
+      font-size: 1.5em;
+    }
+  }
+
+  @media screen {
+  &.knockout {
+    .wp-block-pullquote blockquote,
+    .wp-block-quote {
+      p {
+        color: colours.$primary-light;
+      }
+
+      cite {
+        color: rgba(colours.$white, 0.7);
+      }
+
+      &::after,
+      > *:first-child::before,
+      > *:first-child::after {
+        border-color: rgba(colours.$white,0.2);
+      }
+    }
+  }
+  }
+}

resources/views/blocks/article/css/_verse.scss

@@ -0,0 +1,14 @@
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-verse {
+  font-family: fonts.$font;
+  line-height: 2;
+  word-wrap: normal;
+
+  @media screen {
+    .knockout & {
+      color: colours.$white;
+    }
+  }
+}

resources/views/blocks/article/editor.scss

@@ -0,0 +1,31 @@
+@use "../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  position: relative;
+
+  .wp-block-pullquote {
+    padding: 0;
+    margin: spacing.$innerLarge auto;
+  }
+
+  .badegg-article-select-parent {
+    appearance: none;
+    display: block;
+    position: absolute;
+    inset: 0;
+    background: transparent;
+    border: none;
+  }
+
+  .block-editor-block-list {
+    &__layout {
+      > *:first-child {
+        margin-top: 0;
+      }
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

resources/views/blocks/article/index.jsx

@@ -0,0 +1,73 @@
+// block.json's editorScript, loaded only in the block editor
+
+import metadata from './block.json';
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+
+import {
+  useBlockProps,
+  InnerBlocks,
+} from '@wordpress/block-editor';
+
+import allowedBlocks from '../../../json/block-core-whitelist.json';
+import { containerClassNames, sectionClassNames } from '../../../js/blocks/lib/classNames';
+import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
+import BlockSettings from '../../../js/blocks/components/BlockSettings';
+
+registerBlockType(metadata.name, {
+  edit({ attributes, setAttributes, clientId }) {
+    const blockProps = useBlockProps();
+
+    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
+
+    return (
+      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
+        <BlockSettings
+          attributes={ attributes }
+          setAttributes={ setAttributes }
+        />
+
+        <button
+          className="badegg-article-select-parent"
+          onClick={() => {
+            wp.data.dispatch('core/block-editor').selectBlock(clientId);
+          }}
+        >
+          <span className="visually-hidden">Select Block</span>
+        </button>
+
+        <div { ...blockProps }>
+          <InnerBlocks
+            allowedBlocks={ allowedBlocks }
+            defaultBlock={
+              {
+                name: "core/paragraph",
+                attributes: {
+                  placeholder: "start typing",
+                }
+              }
+            }
+          />
+        </div>
+
+        <BackgroundImage { ...attributes } />
+
+      </div>
+    );
+  },
+  save({ attributes }) {
+    const blockProps = useBlockProps.save();
+    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
+
+    return (
+      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
+        <div { ...blockProps }>
+          <InnerBlocks.Content />
+        </div>
+
+        <BackgroundImage { ...attributes } />
+
+      </div>
+    )
+  }
+});

resources/views/blocks/article/style.scss

@@ -0,0 +1,8 @@
+@use 'css/base';
+@use 'css/image';
+@use 'css/gallery';
+@use 'css/media-text';
+@use 'css/quote';
+@use 'css/embed';
+@use 'css/verse';
+@use 'css/details';

resources/views/blocks/example/README.md

@@ -0,0 +1,40 @@
+# Bad Egg's Native Wordpress Block Example
+
+This block serves as a placeholder that can be copied and extended to build native Wordpress blocks.  
+
+## Features
+- Automatic registration and asset building through the theme's `app/blocks.php` file and `vite.config.js`
+- Automatic enqueueing of block scripts and styles if the correct files are included in the block's directory 
+- Supports Laravel Blade templates if the `render.blade.php` file is present, with access to the `$attributes`, `$block`, and `$content` variables.
+- Default block attributes are defined in `resources/json/block-attributes.json` so that they are not needed in duplicate in `block.json`
+- A reusable customisation UI is defined in `resources/js/blocks/components/BlockSettings.jsx` so that multiple blocks can rely on the same controls 
+
+## Directory Structure
+```
+app
+│   ...
+│
+│   blocks.php  ->  this is where the auto registration functions live
+│
+resources
+│   ...
+│
+└── js
+│   └── editor.js
+│
+└── views
+    │   ...
+    │
+    └── blocks
+        │   ...
+        │
+        └── example
+            │  README.md         ->   this file
+            │  block.json        ->   (required) the block's metadata
+            │  index.jsx         ->   (required) EditorScript
+            │  script.js         ->   (optional) Editor & Front end
+            │  view.js           ->   (optional) Front end
+            │  editor.scss       ->   (optional) Editor
+            │  style.scss        ->   (optional) Editor & Front end
+            │  render.blade.php  ->   (optional) falls back to index.jsx save
+```

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
+  }
+}

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;
+}

resources/views/blocks/example/index.jsx

@@ -0,0 +1,22 @@
+// block.json's editorScript, loaded only in the block editor
+
+import metadata from './block.json';
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import { containerClassNames, sectionClassNames } from '../../../js/blocks/lib/classNames';
+
+registerBlockType(metadata.name, {
+  edit({ attributes }) {
+    const blockProps = useBlockProps();
+
+    blockProps.className = sectionClassNames(attributes, blockProps.className, ['bg-success', 'knockout']).join(' ');
+
+    return (
+      <div { ...blockProps }>
+        <div className="container align-center wysiwyg">
+          <h2>Bad Egg Block Example</h2>
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,7 @@
+<div {!! get_block_wrapper_attributes([
+  'class' => 'section bg-success knockout',
+]) !!}>
+  <div class="container wysiwyg align-center">
+    <h2>Bad Egg Example Block (Blade)</h2>
+  </div>
+</div>

resources/views/blocks/example/script.js

@@ -0,0 +1,2 @@
+// block.json's script, loaded in block editor and front end
+console.log('bad egg example block script.js loaded.');

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;
+}

resources/views/blocks/example/view.js

@@ -0,0 +1,2 @@
+// block.json's viewScript, applied on front end only
+console.log('bad egg example block view.js loaded.');

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

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

resources/views/components/socials.blade.php

@@ -1,12 +1,12 @@
-<ul class="socials nolist">
-  @foreach($socials as $social)
-    <li>
-      <a
-        class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"
-        href="{{ get_field('url', $social) }}"
-        rel="noopener nofollow noreferrer"
-        target="_blank"
-      ><span class="visually-hidden">{{ get_the_title($social) }}</span></a>
-    </li>
-  @endforeach
-</ul>
+@if($socials)
+  <ul class="socials nolist">
+    @foreach($socials as $social)
+      <li>
+        <a href="{{ get_field('url', $social) }}" rel="noopener nofollow noreferrer me" target="_blank">
+          <i class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"></i>
+          <span class="visually-hidden">{{ get_the_title($social) }}</span>
+        </a>
+      </li>
+    @endforeach
+  </ul>
+@endif

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'))

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

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

resources/views/layouts/block.blade.php

@@ -1,34 +1,11 @@
-<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(!$is_preview)
+  <div {!! get_block_wrapper_attributes() !!}>
+@endif
 
-  <div class="section container container-large block-content bg-watermarked-content">
+<div class="wp-block-inner">
     @yield('block-content')
+</div>
+
+@if(!$is_preview)
   </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>
+@endif

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

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

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

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

resources/views/partials/favicon.blade.php

@@ -0,0 +1,6 @@
+<link rel="icon" type="image/png" href="{{ Vite::asset('resources/images/favicon/favicon-96x96.png') }}" sizes="96x96" />
+<link rel="icon" type="image/svg+xml" href="{{ Vite::asset('resources/images/favicon/favicon.svg') }}" />
+<link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon/favicon.ico') }}" />
+<link rel="apple-touch-icon" sizes="180x180" href="{{ Vite::asset('resources/images/favicon/apple-touch-icon.png') }}" />
+<meta name="apple-mobile-web-app-title" content="{!! $siteName !!}" />
+<link rel="manifest" href="{{ Vite::asset('resources/images/favicon/site.webmanifest') }}" />

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>