From f0d8cb2065420c43420e52f1a5f6f90f128210e7 Mon Sep 17 00:00:00 2001 From: Steve Ross Date: Mon, 15 Dec 2025 18:10:06 +0000 Subject: [PATCH] use standard block.json method with ACF blocks --- app/ACF/Dynamic.php | 35 ++- app/Utilities/Colour.php | 2 +- app/Utilities/CssClasses.php | 110 +++++--- app/View/Composers/Blocks.php | 31 +++ app/blocks.php | 34 ++- resources/acf/group_block_acfdemo.json | 131 +++++++++ .../acf/group_clone_background_settings.json | 30 ++- resources/acf/group_clone_block_footer.json | 200 ++++++++------ resources/acf/group_clone_block_intro.json | 163 +++++++----- resources/acf/group_clone_block_settings.json | 248 ++++++++---------- resources/css/components/_button.scss | 8 +- resources/css/components/_forms.scss | 4 - resources/css/global/framework/_spacing.scss | 3 +- .../mixins/_generate-button-classes.scss | 2 +- resources/views/blocks/acfdemo/block.json | 6 - .../views/blocks/acfdemo/render.blade.php | 13 +- resources/views/blocks/article/index.jsx | 8 +- .../views/blocks/example/render.blade.php | 4 +- resources/views/layouts/block-acf.blade.php | 23 ++ resources/views/layouts/block.blade.php | 53 +--- .../views/partials/block-acf-footer.blade.php | 30 +++ .../views/partials/block-acf-intro.blade.php | 17 ++ 22 files changed, 752 insertions(+), 403 deletions(-) create mode 100644 app/View/Composers/Blocks.php create mode 100644 resources/acf/group_block_acfdemo.json create mode 100644 resources/views/layouts/block-acf.blade.php create mode 100644 resources/views/partials/block-acf-footer.blade.php create mode 100644 resources/views/partials/block-acf-intro.blade.php diff --git a/app/ACF/Dynamic.php b/app/ACF/Dynamic.php index b839ae3..be760d7 100644 --- a/app/ACF/Dynamic.php +++ b/app/ACF/Dynamic.php @@ -8,14 +8,15 @@ class Dynamic { public function __construct() { - add_filter('acf/load_field/name=colour', [ $this, 'load_colours' ]); - add_filter('acf/load_field/name=bg_colour', [ $this, 'load_colours' ]); - add_filter('acf/load_field/name=tint', [ $this, 'load_tints' ]); - add_filter('acf/load_field/name=bg_tint', [ $this, 'load_tints' ]); + add_filter('acf/load_field/name=colour', [ $this, 'load_colours' ]); + add_filter('acf/load_field/name=bg_colour', [ $this, 'load_colours' ]); + add_filter('acf/load_field/name=tint', [ $this, 'load_tints' ]); + add_filter('acf/load_field/name=bg_tint', [ $this, 'load_tints' ]); + add_filter('acf/load_field/name=container_width', [ $this, 'container_width' ]); add_filter('acf/load_field/name=fontawesome_regular', [ $this, 'load_fontawesome_regular_icons' ]); - add_filter('acf/load_field/name=fontawesome_solid', [ $this, 'load_fontawesome_solid_icons' ]); - add_filter('acf/load_field/name=fontawesome_brands', [ $this, 'load_fontawesome_brand_icons' ]); - add_action('acf/input/admin_footer', [$this, 'colour_ui'] ); + add_filter('acf/load_field/name=fontawesome_solid', [ $this, 'load_fontawesome_solid_icons' ]); + add_filter('acf/load_field/name=fontawesome_brands', [ $this, 'load_fontawesome_brand_icons' ]); + add_action('acf/input/admin_footer', [ $this, 'colour_ui' ]); } public function load_colours( $field ) @@ -25,7 +26,9 @@ class Dynamic $colours = $colour->values(); - $field['choices'] = []; + $field['choices'] = [ + '0' => __('None', 'badegg'), + ]; foreach($colours as $slug => $hex): $field['choices'][$slug] = ' ' . @$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'] = []; diff --git a/app/Utilities/Colour.php b/app/Utilities/Colour.php index 7072062..b8a0d55 100644 --- a/app/Utilities/Colour.php +++ b/app/Utilities/Colour.php @@ -40,7 +40,7 @@ class Colour endforeach; endif; - $values['0'] = '#FFFFFF'; + $values['white'] = '#FFFFFF'; $values['black'] = '#000000'; return $values; diff --git a/app/Utilities/CssClasses.php b/app/Utilities/CssClasses.php index 04dd80f..a71f2aa 100644 --- a/app/Utilities/CssClasses.php +++ b/app/Utilities/CssClasses.php @@ -3,56 +3,94 @@ namespace App\Utilities; class CssClasses { - public function section($props = []) + public function section($props = [], $name = 'unnamed', $knockout = false) { - $Colour = new Colour; - $hex = $Colour->name2hex(@$props['bg_colour'], @$props['bg_tint']); + $defaults = [ + 'padding_top' => null, + 'padding_bottom' => null, + 'bg_colour' => null, + 'bg_tint' => null, + 'contrast' => null, + 'bg_image' => null, + ]; - $pattern = @$props['pattern']; - $pattern_top = @$props['pattern_top']; - $pattern_bottom = @$props['pattern_bottom']; + $props = wp_parse_args($props, $defaults); + + $Colour = new Colour; + $hex = $Colour->name2hex($props['bg_colour'], $props['bg_tint']); $classes = [ 'section', - 'section-' . $props['name'], - // 'section-' . str_replace('acf/', '', $props['name']), - 'bg-' . $this->colourTint([ - 'colour' => @$props['bg_colour'], - 'tint' => @$props['bg_tint'], - ]), + 'section-' . str_replace('/', '-', $name), ]; - if($Colour->is_dark($hex) && $this->is_knockout_block($props['name'])) + if($props['bg_colour']) + $classes[] = 'bg-' . $this->colourTint([ + 'colour' => $props['bg_colour'], + 'tint' => $props['bg_tint'], + ]); + + if(($knockout && $Colour->is_dark($hex) || $props['contrast'] == 'light')) $classes[] = 'knockout'; - if(@$props['padding_top']) + if($props['padding_top']) $classes[] = 'section-zero-top'; - if(@$props['padding_bottom']) + if($props['padding_bottom']) $classes[] = 'section-zero-bottom'; - if($pattern): - if($pattern == 'both'): - $classes[] = 'pattern-top'; - $classes[] = 'pattern-bottom'; - - else: - $classes[] = 'pattern-' . $pattern; - - endif; - - if(in_array($pattern, ['top', 'both'])) - $classes[] = 'pattern-top-' . $this->colourTint($pattern_top); - - if(in_array($pattern, ['bottom', 'both'])) - $classes[] = 'pattern-bottom-' . $this->colourTint($pattern_bottom); - - endif; - - if(@$props['bg_image']) + if($props['bg_image']) $classes[] = "bg-watermarked"; - if(@$props['className']) $args = array_merge($classes, explode(' ', $props['className'])); + return $classes; + } + + public function container($args = [], $bg_props = []) + { + $args = wp_parse_args($args, [ + 'width' => null, + 'location' => null, + 'section' => false, + 'align' => null, + 'wysiwyg' => false, + ]); + + $bg_props = wp_parse_args($bg_props, [ + 'bg_colour' => null, + 'bg_tint' => null, + 'contrast' => null, + ]); + + $Colour = new Colour; + $hex = $Colour->name2hex($bg_props['bg_colour'], $bg_props['bg_tint']); + + $classes = [ + 'container', + ]; + + if($args['width']) + $classes[] = 'container-' . $args['width']; + + if($args['location']) + $classes[] = $args['location']; + + if($args['section']) + $classes[] = 'section'; + + if(str_contains($args['location'], 'intro')) + $classes[] = 'section-zero-top'; + + if(str_contains($args['location'], 'footer')) + $classes[] = 'section-zero-bottom'; + + if($args['wysiwyg']) + $classes[] = 'wysiwyg'; + + if($args['align']) + $classes[] = 'align-' . $args['align']; + + if(($Colour->is_dark($hex) || $bg_props['contrast'] == 'light')) + $classes[] = 'knockout'; return $classes; } @@ -94,7 +132,7 @@ class CssClasses { public function is_knockout_block($name = null) { $blacklist = [ - 'bad-example', + 'badegg/acfdemo', ]; if(in_array($name, $blacklist)): diff --git a/app/View/Composers/Blocks.php b/app/View/Composers/Blocks.php new file mode 100644 index 0000000..7fce940 --- /dev/null +++ b/app/View/Composers/Blocks.php @@ -0,0 +1,31 @@ + new Utilities\CssClasses, + ]; + } +} diff --git a/app/blocks.php b/app/blocks.php index 6a9b762..4607d8e 100644 --- a/app/blocks.php +++ b/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", [ - 'block' => $block, - 'content' => $content, - 'is_preview' => $is_preview, - 'post_id' => $post_id, - 'wp_block' => $wp_block, - 'context' => $context, - ]); + $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 ',print_r(list_allowed()),''; -}); diff --git a/resources/acf/group_block_acfdemo.json b/resources/acf/group_block_acfdemo.json new file mode 100644 index 0000000..aee5318 --- /dev/null +++ b/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 +} diff --git a/resources/acf/group_clone_background_settings.json b/resources/acf/group_clone_background_settings.json index db90b08..56dd612 100644 --- a/resources/acf/group_clone_background_settings.json +++ b/resources/acf/group_clone_background_settings.json @@ -17,7 +17,9 @@ "id": "" }, "choices": { - "0": "<\/i> White", + "0": "auto", + "primary": "<\/i> Punch", + "white": "<\/i> White", "black": "<\/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 } diff --git a/resources/acf/group_clone_block_footer.json b/resources/acf/group_clone_block_footer.json index aa0605d..abb5267 100644 --- a/resources/acf/group_clone_block_footer.json +++ b/resources/acf/group_clone_block_footer.json @@ -3,7 +3,7 @@ "title": "Clone: Block Footer", "fields": [ { - "key": "field_67659b49a6db2", + "key": "field_694016b164221", "label": "Footer", "name": "", "aria-label": "", @@ -21,31 +21,11 @@ "endpoint": 0 }, { - "key": "field_67659b49a754a", - "label": "Blurb", - "name": "blurb_footer", + "key": "field_694016b164272", + "label": "", + "name": "footer", "aria-label": "", - "type": "textarea", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "default_value": "", - "maxlength": "", - "rows": 3, - "placeholder": "", - "new_lines": "" - }, - { - "key": "field_67659b7502137", - "label": "Links", - "name": "links", - "aria-label": "", - "type": "repeater", + "type": "group", "instructions": "", "required": 0, "conditional_logic": 0, @@ -55,19 +35,33 @@ "id": "" }, "layout": "block", - "pagination": 0, - "min": 0, - "max": 2, - "collapsed": "", - "button_label": "Add Button", - "rows_per_page": 20, "sub_fields": [ { - "key": "field_67659b8702138", - "label": "Button", - "name": "button", + "key": "field_694016b165315", + "label": "Blurb", + "name": "blurb", "aria-label": "", - "type": "clone", + "type": "textarea", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "rows": 3, + "placeholder": "", + "new_lines": "" + }, + { + "key": "field_69401a2f06555", + "label": "Links", + "name": "links", + "aria-label": "", + "type": "repeater", "instructions": "", "required": 0, "conditional_logic": 0, @@ -76,49 +70,106 @@ "class": "", "id": "" }, - "clone": [ - "group_clone_button" - ], - "display": "seamless", "layout": "block", - "prefix_label": 0, - "prefix_name": 0, - "parent_repeater": "field_67659b7502137" + "pagination": 0, + "min": 0, + "max": 0, + "collapsed": "", + "button_label": "Add Row", + "rows_per_page": 20, + "sub_fields": [ + { + "key": "field_69401a4006556", + "label": "Link", + "name": "link", + "aria-label": "", + "type": "clone", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "clone": [ + "group_clone_button" + ], + "display": "seamless", + "layout": "block", + "prefix_label": 0, + "prefix_name": 0, + "parent_repeater": "field_69401a2f06555" + } + ] + }, + { + "key": "field_694016b165337", + "label": "Alignment", + "name": "align", + "aria-label": "", + "type": "select", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "choices": { + "left": "Left", + "centre": "Centre", + "right": "Right" + }, + "default_value": "centre", + "return_format": "value", + "multiple": 0, + "allow_null": 0, + "allow_in_bindings": 0, + "ui": 0, + "ajax": 0, + "placeholder": "", + "create_options": 0, + "save_options": 0 + }, + { + "key": "field_694016b16537f", + "label": "Container width", + "name": "container_width", + "aria-label": "", + "type": "select", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "choices": { + "0": "Auto", + "narrow": "Narrow", + "small": "Small", + "medium": "Medium", + "large": "Large", + "full": "Edge to edge" + }, + "default_value": "narrow", + "return_format": "value", + "multiple": 0, + "allow_null": 0, + "allow_in_bindings": 0, + "ui": 0, + "ajax": 0, + "placeholder": "", + "create_options": 0, + "save_options": 0 } ] }, { - "key": "field_682fb9ff58080", - "label": "Alignment", - "name": "footer_alignment", - "aria-label": "", - "type": "select", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "choices": { - "centre": "Centre", - "left": "Left", - "right": "Right" - }, - "default_value": "centre", - "return_format": "value", - "multiple": 0, - "allow_null": 0, - "allow_in_bindings": 0, - "ui": 0, - "ajax": 0, - "placeholder": "", - "create_options": 0, - "save_options": 0 - }, - { - "key": "field_6828dac95eb68", + "key": "field_694016b1642c5", "label": "Footer (end)", "name": "", "aria-label": "", @@ -154,5 +205,6 @@ "active": true, "description": "", "show_in_rest": 0, - "modified": 1747958307 + "display_title": "", + "modified": 1765809897 } diff --git a/resources/acf/group_clone_block_intro.json b/resources/acf/group_clone_block_intro.json index db466f5..806e8b3 100644 --- a/resources/acf/group_clone_block_intro.json +++ b/resources/acf/group_clone_block_intro.json @@ -21,52 +21,11 @@ "endpoint": 0 }, { - "key": "field_676599964d3cc", - "label": "Heading", - "name": "heading", + "key": "field_693f37ad7fa70", + "label": "", + "name": "intro", "aria-label": "", - "type": "textarea", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "hfont", - "id": "" - }, - "default_value": "", - "maxlength": "", - "allow_in_bindings": 0, - "rows": 2, - "placeholder": "", - "new_lines": "" - }, - { - "key": "field_6765999d4d3cd", - "label": "Blurb", - "name": "blurb", - "aria-label": "", - "type": "textarea", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "default_value": "", - "maxlength": "", - "rows": 3, - "placeholder": "", - "new_lines": "" - }, - { - "key": "field_68bf1126c2760", - "label": "Links", - "name": "links", - "aria-label": "", - "type": "repeater", + "type": "group", "instructions": "", "required": 0, "conditional_logic": 0, @@ -76,19 +35,34 @@ "id": "" }, "layout": "block", - "pagination": 0, - "min": 0, - "max": 1, - "collapsed": "", - "button_label": "Add Button", - "rows_per_page": 20, "sub_fields": [ { - "key": "field_68bf1171c2761", - "label": "Link", - "name": "link", + "key": "field_676599964d3cc", + "label": "Heading", + "name": "heading", "aria-label": "", - "type": "clone", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "hfont", + "id": "" + }, + "default_value": "", + "maxlength": "", + "allow_in_bindings": 0, + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_6765999d4d3cd", + "label": "Blurb", + "name": "blurb", + "aria-label": "", + "type": "textarea", "instructions": "", "required": 0, "conditional_logic": 0, @@ -97,14 +71,74 @@ "class": "", "id": "" }, - "clone": [ - "group_clone_button" - ], - "display": "seamless", - "layout": "block", - "prefix_label": 0, - "prefix_name": 0, - "parent_repeater": "field_68bf1126c2760" + "default_value": "", + "maxlength": "", + "rows": 3, + "placeholder": "", + "new_lines": "" + }, + { + "key": "field_69400cbafb964", + "label": "Alignment", + "name": "align", + "aria-label": "", + "type": "select", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "choices": { + "left": "Left", + "centre": "Centre", + "right": "Right" + }, + "default_value": "centre", + "return_format": "value", + "multiple": 0, + "allow_null": 0, + "allow_in_bindings": 0, + "ui": 0, + "ajax": 0, + "placeholder": "", + "create_options": 0, + "save_options": 0 + }, + { + "key": "field_693f3a7fae85e", + "label": "Container width", + "name": "container_width", + "aria-label": "", + "type": "select", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "choices": { + "0": "Auto", + "narrow": "Narrow", + "small": "Small", + "medium": "Medium", + "large": "Large", + "full": "Edge to edge" + }, + "default_value": "narrow", + "return_format": "value", + "multiple": 0, + "allow_null": 0, + "allow_in_bindings": 0, + "ui": 0, + "ajax": 0, + "placeholder": "", + "create_options": 0, + "save_options": 0 } ] }, @@ -145,5 +179,6 @@ "active": true, "description": "", "show_in_rest": 0, - "modified": 1757498726 + "display_title": "", + "modified": 1765809893 } diff --git a/resources/acf/group_clone_block_settings.json b/resources/acf/group_clone_block_settings.json index 426eeaf..3ee386f 100644 --- a/resources/acf/group_clone_block_settings.json +++ b/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", - "label": "Anchor ID", - "name": "section_anchor_id", + "key": "field_694031b513e66", + "label": "", + "name": "settings", "aria-label": "", - "type": "text", + "type": "group", "instructions": "", "required": 0, "conditional_logic": 0, @@ -34,136 +34,117 @@ "class": "", "id": "" }, - "default_value": "", - "maxlength": "", - "placeholder": "", - "prepend": "#", - "append": "" - }, - { - "key": "field_6800097e61765", - "label": "Container Width", - "name": "container_width", - "aria-label": "", - "type": "select", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "choices": { - "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", - "name": "padding_top", - "aria-label": "", - "type": "radio", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "50", - "class": "", - "id": "" - }, - "choices": [ - "On", - "Off" - ], - "default_value": "", - "return_format": "value", - "allow_null": 0, - "other_choice": 0, - "layout": "horizontal", - "save_other_choice": 0 - }, - { - "key": "field_673510c1dc830", - "label": "Bottom Padding", - "name": "padding_bottom", - "aria-label": "", - "type": "radio", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "50", - "class": "", - "id": "" - }, - "choices": [ - "On", - "Off" - ], - "default_value": "", - "return_format": "value", - "allow_null": 0, - "other_choice": 0, - "layout": "horizontal", - "save_other_choice": 0 - }, - { - "key": "field_6735258c2d9ff", - "label": "Background", - "name": "", - "aria-label": "", - "type": "accordion", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "open": 1, - "multi_expand": 1, - "endpoint": 0 - }, - { - "key": "field_67350aeb146ca", - "label": "Background", - "name": "background", - "aria-label": "", - "type": "clone", - "instructions": "", - "required": 0, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "clone": [ - "group_clone_background_settings" - ], - "display": "seamless", "layout": "block", - "prefix_label": 0, - "prefix_name": 0 + "sub_fields": [ + { + "key": "field_67350eb62cdf9", + "label": "Top Padding", + "name": "padding_top", + "aria-label": "", + "type": "radio", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "50", + "class": "", + "id": "" + }, + "choices": [ + "On", + "Off" + ], + "default_value": "", + "return_format": "value", + "allow_null": 0, + "other_choice": 0, + "layout": "horizontal", + "save_other_choice": 0 + }, + { + "key": "field_673510c1dc830", + "label": "Bottom Padding", + "name": "padding_bottom", + "aria-label": "", + "type": "radio", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "50", + "class": "", + "id": "" + }, + "choices": [ + "On", + "Off" + ], + "default_value": "", + "return_format": "value", + "allow_null": 0, + "other_choice": 0, + "layout": "horizontal", + "save_other_choice": 0 + }, + { + "key": "field_6800097e61765", + "label": "Container Width", + "name": "container_width", + "aria-label": "", + "type": "select", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "choices": { + "0": "Auto", + "narrow": "Narrow", + "small": "Small", + "medium": "Medium", + "large": "Large", + "full": "Edge to edge" + }, + "default_value": 0, + "return_format": "value", + "multiple": 0, + "allow_null": 0, + "allow_in_bindings": 1, + "ui": 0, + "ajax": 0, + "placeholder": "", + "create_options": 0, + "save_options": 0 + }, + { + "key": "field_67350aeb146ca", + "label": "Background", + "name": "background", + "aria-label": "", + "type": "clone", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "clone": [ + "group_clone_background_settings" + ], + "display": "seamless", + "layout": "block", + "prefix_label": 0, + "prefix_name": 0 + } + ] }, { - "key": "field_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 } diff --git a/resources/css/components/_button.scss b/resources/css/components/_button.scss index bde9eb3..95eed34 100644 --- a/resources/css/components/_button.scss +++ b/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; } } diff --git a/resources/css/components/_forms.scss b/resources/css/components/_forms.scss index 8387554..40dbb46 100644 --- a/resources/css/components/_forms.scss +++ b/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; diff --git a/resources/css/global/framework/_spacing.scss b/resources/css/global/framework/_spacing.scss index 62b0de3..2823fa5 100644 --- a/resources/css/global/framework/_spacing.scss +++ b/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; } diff --git a/resources/css/global/mixins/_generate-button-classes.scss b/resources/css/global/mixins/_generate-button-classes.scss index e563727..1c997d8 100644 --- a/resources/css/global/mixins/_generate-button-classes.scss +++ b/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]", ); diff --git a/resources/views/blocks/acfdemo/block.json b/resources/views/blocks/acfdemo/block.json index 006dfa3..90d48f6 100644 --- a/resources/views/blocks/acfdemo/block.json +++ b/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", diff --git a/resources/views/blocks/acfdemo/render.blade.php b/resources/views/blocks/acfdemo/render.blade.php index 13c123f..951c21c 100644 --- a/resources/views/blocks/acfdemo/render.blade.php +++ b/resources/views/blocks/acfdemo/render.blade.php @@ -1,3 +1,10 @@ -
-

ACF Example

-
+@extends('layouts.block-acf', [ + 'block' => $block, + 'is_preview' => $is_preview, + 'context' => $context, + 'knockout' => true, +]) + +@section('block-content') + {!! the_field('content') !!} +@overwrite diff --git a/resources/views/blocks/article/index.jsx b/resources/views/blocks/article/index.jsx index 7309c93..4d7f2dc 100644 --- a/resources/views/blocks/article/index.jsx +++ b/resources/views/blocks/article/index.jsx @@ -10,7 +10,7 @@ registerBlockType(metadata.name, { const blockProps = useBlockProps(); return ( -
+
-
+ ); }, save() { return ( -
+
-
+ ) } }); diff --git a/resources/views/blocks/example/render.blade.php b/resources/views/blocks/example/render.blade.php index aac89b8..3d3f715 100644 --- a/resources/views/blocks/example/render.blade.php +++ b/resources/views/blocks/example/render.blade.php @@ -1,3 +1,3 @@ -
+

Bad Egg Example Block (Blade)

-
+ diff --git a/resources/views/layouts/block-acf.blade.php b/resources/views/layouts/block-acf.blade.php new file mode 100644 index 0000000..6d06058 --- /dev/null +++ b/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 + +
+ + @include('partials.block-acf-intro', ['props' => get_field('intro'), 'settings' => $settings]) + +
+ @yield('block-content') +
+ + @include('partials.block-acf-footer', ['props' => get_field('footer'), 'settings' => $settings]) + +
diff --git a/resources/views/layouts/block.blade.php b/resources/views/layouts/block.blade.php index 4cb5a0d..3017a4a 100644 --- a/resources/views/layouts/block.blade.php +++ b/resources/views/layouts/block.blade.php @@ -1,50 +1,11 @@ -@if(@$data['section_anchor_id']) -
+@if(!$is_preview) +
@endif -
- -
- @if(@$data['heading'] || @$data['blurb']) -
-
-
-

{{ @$data['heading'] }}

-

{{ @$data['blurb'] }}

-
- - @if(@$data['links']) -
- @foreach($data['links'] as $link) - @include('components.button', $link) - @endforeach -
- @endif -
-
- @endif - -
- @yield('block-content') -
- - @if(@$data['links']) -
-
-
- @foreach($data['links'] as $link) - @include('components.button', $link) - @endforeach -
-
-
- @endif +
+ @yield('block-content') +
+@if(!$is_preview)
- -
+@endif diff --git a/resources/views/partials/block-acf-footer.blade.php b/resources/views/partials/block-acf-footer.blade.php new file mode 100644 index 0000000..f75687d --- /dev/null +++ b/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 + +
+ @if($props['blurb'])

{{ $props['blurb'] }}

@endif + + @if(@$props['links']) +
+
+
+ @foreach($props['links'] as $link) + @include('components.button', $link) + @endforeach +
+
+
+ @endif +
+ +@endif + + diff --git a/resources/views/partials/block-acf-intro.blade.php b/resources/views/partials/block-acf-intro.blade.php new file mode 100644 index 0000000..3b01146 --- /dev/null +++ b/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 + +
+ @if($props['heading'])

{{ $props['heading'] }}

@endif + @if($props['blurb'])

{{ $props['blurb'] }}

@endif +
+ +@endif