use standard block.json method with ACF blocks

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

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

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

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

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

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

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

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

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

@@ -6,6 +6,17 @@
 
 namespace App\Blocks;
 
+add_filter('block_type_metadata', function($metadata){
+    $name = $metadata['name'];
+
+    if (str_starts_with($name, 'core/') ) {
+        unset($metadata['supports']['color']);
+        unset($metadata['supports']['typography']);
+    }
+
+    return $metadata;
+});
+
 // Disable all core blocks except what we need as inner blocks
 // resources/js/editor.js handles hiding the inner blocks at the top level
 add_action('allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2);
@@ -152,14 +163,17 @@ function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $w
     $slug = basename($block['name']);
     $block['slug'] = $slug;
 
-    $blade = \Roots\view("blocks.{$slug}.render", [
+    $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;
@@ -176,7 +190,3 @@ function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $w
         <?php echo ob_get_clean();
     }
 }
-
-add_action('wp_footer', function(){
-    echo '<pre>',print_r(list_allowed()),'</pre>';
-});

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

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

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

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

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

@@ -3,7 +3,7 @@
     "title": "Clone: Block Footer",
     "fields": [
         {
-            "key": "field_67659b49a6db2",
+            "key": "field_694016b164221",
             "label": "Footer",
             "name": "",
             "aria-label": "",
@@ -21,9 +21,25 @@
             "endpoint": 0
         },
         {
-            "key": "field_67659b49a754a",
+            "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_footer",
+                    "name": "blurb",
                     "aria-label": "",
                     "type": "textarea",
                     "instructions": "",
@@ -41,7 +57,7 @@
                     "new_lines": ""
                 },
                 {
-            "key": "field_67659b7502137",
+                    "key": "field_69401a2f06555",
                     "label": "Links",
                     "name": "links",
                     "aria-label": "",
@@ -57,15 +73,15 @@
                     "layout": "block",
                     "pagination": 0,
                     "min": 0,
-            "max": 2,
+                    "max": 0,
                     "collapsed": "",
-            "button_label": "Add Button",
+                    "button_label": "Add Row",
                     "rows_per_page": 20,
                     "sub_fields": [
                         {
-                    "key": "field_67659b8702138",
+                            "key": "field_69401a4006556",
-                    "label": "Button",
+                            "label": "Link",
-                    "name": "button",
+                            "name": "link",
                             "aria-label": "",
                             "type": "clone",
                             "instructions": "",
@@ -83,14 +99,14 @@
                             "layout": "block",
                             "prefix_label": 0,
                             "prefix_name": 0,
-                    "parent_repeater": "field_67659b7502137"
+                            "parent_repeater": "field_69401a2f06555"
                         }
                     ]
                 },
                 {
-            "key": "field_682fb9ff58080",
+                    "key": "field_694016b165337",
                     "label": "Alignment",
-            "name": "footer_alignment",
+                    "name": "align",
                     "aria-label": "",
                     "type": "select",
                     "instructions": "",
@@ -102,8 +118,8 @@
                         "id": ""
                     },
                     "choices": {
-                "centre": "Centre",
                         "left": "Left",
+                        "centre": "Centre",
                         "right": "Right"
                     },
                     "default_value": "centre",
@@ -118,7 +134,42 @@
                     "save_options": 0
                 },
                 {
-            "key": "field_6828dac95eb68",
+                    "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": "",
@@ -154,5 +205,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1747958307
+    "display_title": "",
+    "modified": 1765809897
 }

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

@@ -20,12 +20,28 @@
             "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": "textarea",
+                    "type": "text",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -37,9 +53,9 @@
                     "default_value": "",
                     "maxlength": "",
                     "allow_in_bindings": 0,
-            "rows": 2,
                     "placeholder": "",
-            "new_lines": ""
+                    "prepend": "",
+                    "append": ""
                 },
                 {
                     "key": "field_6765999d4d3cd",
@@ -62,11 +78,11 @@
                     "new_lines": ""
                 },
                 {
-            "key": "field_68bf1126c2760",
+                    "key": "field_69400cbafb964",
-            "label": "Links",
+                    "label": "Alignment",
-            "name": "links",
+                    "name": "align",
                     "aria-label": "",
-            "type": "repeater",
+                    "type": "select",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -75,20 +91,28 @@
                         "class": "",
                         "id": ""
                     },
-            "layout": "block",
+                    "choices": {
-            "pagination": 0,
+                        "left": "Left",
-            "min": 0,
+                        "centre": "Centre",
-            "max": 1,
+                        "right": "Right"
-            "collapsed": "",
+                    },
-            "button_label": "Add Button",
+                    "default_value": "centre",
-            "rows_per_page": 20,
+                    "return_format": "value",
-            "sub_fields": [
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
                 {
-                    "key": "field_68bf1171c2761",
+                    "key": "field_693f3a7fae85e",
-                    "label": "Link",
+                    "label": "Container width",
-                    "name": "link",
+                    "name": "container_width",
                     "aria-label": "",
-                    "type": "clone",
+                    "type": "select",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -97,14 +121,24 @@
                         "class": "",
                         "id": ""
                     },
-                    "clone": [
+                    "choices": {
-                        "group_clone_button"
+                        "0": "Auto",
-                    ],
+                        "narrow": "Narrow",
-                    "display": "seamless",
+                        "small": "Small",
-                    "layout": "block",
+                        "medium": "Medium",
-                    "prefix_label": 0,
+                        "large": "Large",
-                    "prefix_name": 0,
+                        "full": "Edge to edge"
-                    "parent_repeater": "field_68bf1126c2760"
+                    },
+                    "default_value": "narrow",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
                 }
             ]
         },
@@ -145,5 +179,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1757498726
+    "display_title": "",
+    "modified": 1765809893
 }

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

@@ -3,7 +3,7 @@
     "title": "Clone: Block Settings",
     "fields": [
         {
-            "key": "field_673511c31122f",
+            "key": "field_69403228d2637",
             "label": "Settings",
             "name": "",
             "aria-label": "",
@@ -21,11 +21,11 @@
             "endpoint": 0
         },
         {
-            "key": "field_680016e0fac24",
+            "key": "field_694031b513e66",
-            "label": "Anchor ID",
+            "label": "",
-            "name": "section_anchor_id",
+            "name": "settings",
             "aria-label": "",
-            "type": "text",
+            "type": "group",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -34,44 +34,8 @@
                 "class": "",
                 "id": ""
             },
-            "default_value": "",
+            "layout": "block",
-            "maxlength": "",
+            "sub_fields": [
-            "placeholder": "",
-            "prepend": "#",
-            "append": ""
-        },
-        {
-            "key": "field_6800097e61765",
-            "label": "Container Width",
-            "name": "container_width",
-            "aria-label": "",
-            "type": "select",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "choices": {
-                "full": "Full Width",
-                "large": "Large",
-                "medium": "Medium",
-                "small": "Small",
-                "narrow": "Narrow"
-            },
-            "default_value": "medium",
-            "return_format": "value",
-            "multiple": 0,
-            "allow_null": 0,
-            "allow_in_bindings": 1,
-            "ui": 0,
-            "ajax": 0,
-            "placeholder": "",
-            "create_options": 0,
-            "save_options": 0
-        },
                 {
                     "key": "field_67350eb62cdf9",
                     "label": "Top Padding",
@@ -123,11 +87,11 @@
                     "save_other_choice": 0
                 },
                 {
-            "key": "field_6735258c2d9ff",
+                    "key": "field_6800097e61765",
-            "label": "Background",
+                    "label": "Container Width",
-            "name": "",
+                    "name": "container_width",
                     "aria-label": "",
-            "type": "accordion",
+                    "type": "select",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -136,9 +100,24 @@
                         "class": "",
                         "id": ""
                     },
-            "open": 1,
+                    "choices": {
-            "multi_expand": 1,
+                        "0": "Auto",
-            "endpoint": 0
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": 0,
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 1,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
                 },
                 {
                     "key": "field_67350aeb146ca",
@@ -161,9 +140,11 @@
                     "layout": "block",
                     "prefix_label": 0,
                     "prefix_name": 0
+                }
+            ]
         },
         {
-            "key": "field_6828da67543fc",
+            "key": "field_69403239d2638",
             "label": "Settings (end)",
             "name": "",
             "aria-label": "",
@@ -199,5 +180,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1764247227
+    "display_title": "",
+    "modified": 1765815052
 }

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

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

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

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

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

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

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

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

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

@@ -6,12 +6,6 @@
   "description": "An example block powered by ACF",
   "keywords": ["acf", "demo"],
 
-  "editorScript": "acfdemo-editor-script",
-  "editorStyle": "acfdemo-editor-style",
-  "script": "acfdemo-script",
-  "style": "acfdemo-style",
-  "viewScript": "acfdemo-view-script",
-
   "acf": {
       "mode": "preview",
       "validate": "false",

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

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

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

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

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

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

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

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

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

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

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

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

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

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