framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use standard block.json method with ACF blocks

Browse Source
This commit is contained in:
Steve Ross
2025-12-15 18:10:06 +00:00
parent d47b3fdb07
commit f0d8cb2065
22 changed files with 752 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/ACF/Dynamic.php
View File

@@ -8,14 +8,15 @@ class Dynamic
{ {
public function __construct() public function __construct()
{ {
add_filter('acf/load_field/name=colour', [ $this, 'load_colours' ]); 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=bg_colour', [ $this, 'load_colours' ]);
add_filter('acf/load_field/name=tint', [ $this, 'load_tints' ]); 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=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_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_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_brands', [ $this, 'load_fontawesome_brand_icons' ]);
add_action('acf/input/admin_footer', [$this, 'colour_ui'] ); add_action('acf/input/admin_footer', [ $this, 'colour_ui' ]);
} }
public function load_colours( $field ) public function load_colours( $field )
@@ -25,7 +26,9 @@ class Dynamic
$colours = $colour->values(); $colours = $colour->values();
$field['choices'] = []; $field['choices'] = [
'0' => __('None', 'badegg'),
];
foreach($colours as $slug => $hex): foreach($colours as $slug => $hex):
$field['choices'][$slug] = '<i class="fas fa-circle" style="color: '. $hex .'"></i> ' . @$NameThatColour->name($hex)['name']; $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); $field['choices'][$slug] = ucfirst($slug);
else: else:
$field['choices'][0] = 'None'; $field['choices'][0] = __('None', 'badegg');
endif; endif;
endforeach; endforeach;
return $field; 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 ) public function load_fontawesome_regular_icons( $field )
{ {
$field['choices'] = []; $field['choices'] = [];

2
app/Utilities/Colour.php
View File

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

110
app/Utilities/CssClasses.php
View File

@@ -3,56 +3,94 @@
namespace App\Utilities; namespace App\Utilities;
class CssClasses { 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 = [ $classes = [
'section', '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'; $classes[] = 'knockout';
if(@$props['padding_top']) if($props['padding_top'])
$classes[] = 'section-zero-top'; $classes[] = 'section-zero-top';
if(@$props['padding_bottom']) if($props['padding_bottom'])
$classes[] = 'section-zero-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"; $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; return $classes;
} }
@@ -94,7 +132,7 @@ class CssClasses {
public function is_knockout_block($name = null) public function is_knockout_block($name = null)
{ {
$blacklist = [ $blacklist = [
'bad-example', 'badegg/acfdemo',
]; ];
if(in_array($name, $blacklist)): if(in_array($name, $blacklist)):

31
app/View/Composers/Blocks.php Normal file
View File

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

34
app/blocks.php
View File

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

131
resources/acf/group_block_acfdemo.json Normal file
View File

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

30
resources/acf/group_clone_background_settings.json
View File

@@ -17,7 +17,9 @@
"id": "" "id": ""
}, },
"choices": { "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" "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
}, },
"default_value": 0, "default_value": 0,
@@ -39,7 +41,29 @@
"type": "select", "type": "select",
"instructions": "", "instructions": "",
"required": 0, "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": { "wrapper": {
"width": "50", "width": "50",
"class": "", "class": "",
@@ -113,5 +137,5 @@
"active": true, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1764224358 "modified": 1765746167
} }

200
resources/acf/group_clone_block_footer.json
View File

@@ -3,7 +3,7 @@
"title": "Clone: Block Footer", "title": "Clone: Block Footer",
"fields": [ "fields": [
{ {
"key": "field_67659b49a6db2", "key": "field_694016b164221",
"label": "Footer", "label": "Footer",
"name": "", "name": "",
"aria-label": "", "aria-label": "",
@@ -21,31 +21,11 @@
"endpoint": 0 "endpoint": 0
}, },
{ {
"key": "field_67659b49a754a", "key": "field_694016b164272",
"label": "Blurb", "label": "",
"name": "blurb_footer", "name": "footer",
"aria-label": "", "aria-label": "",
"type": "textarea", "type": "group",
"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": "", "instructions": "",
"required": 0, "required": 0,
"conditional_logic": 0, "conditional_logic": 0,
@@ -55,19 +35,33 @@
"id": "" "id": ""
}, },
"layout": "block", "layout": "block",
"pagination": 0,
"min": 0,
"max": 2,
"collapsed": "",
"button_label": "Add Button",
"rows_per_page": 20,
"sub_fields": [ "sub_fields": [
{ {
"key": "field_67659b8702138", "key": "field_694016b165315",
"label": "Button", "label": "Blurb",
"name": "button", "name": "blurb",
"aria-label": "", "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": "", "instructions": "",
"required": 0, "required": 0,
"conditional_logic": 0, "conditional_logic": 0,
@@ -76,49 +70,106 @@
"class": "", "class": "",
"id": "" "id": ""
}, },
"clone": [
"group_clone_button"
],
"display": "seamless",
"layout": "block", "layout": "block",
"prefix_label": 0, "pagination": 0,
"prefix_name": 0, "min": 0,
"parent_repeater": "field_67659b7502137" "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", "key": "field_694016b1642c5",
"label": "Alignment",
"name": "footer_alignment",
"aria-label": "",
"type": "select",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"choices": {
"centre": "Centre",
"left": "Left",
"right": "Right"
},
"default_value": "centre",
"return_format": "value",
"multiple": 0,
"allow_null": 0,
"allow_in_bindings": 0,
"ui": 0,
"ajax": 0,
"placeholder": "",
"create_options": 0,
"save_options": 0
},
{
"key": "field_6828dac95eb68",
"label": "Footer (end)", "label": "Footer (end)",
"name": "", "name": "",
"aria-label": "", "aria-label": "",
@@ -154,5 +205,6 @@
"active": true, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1747958307 "display_title": "",
"modified": 1765809897
} }

163
resources/acf/group_clone_block_intro.json
View File

@@ -21,52 +21,11 @@
"endpoint": 0 "endpoint": 0
}, },
{ {
"key": "field_676599964d3cc", "key": "field_693f37ad7fa70",
"label": "Heading", "label": "",
"name": "heading", "name": "intro",
"aria-label": "", "aria-label": "",
"type": "textarea", "type": "group",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "hfont",
"id": ""
},
"default_value": "",
"maxlength": "",
"allow_in_bindings": 0,
"rows": 2,
"placeholder": "",
"new_lines": ""
},
{
"key": "field_6765999d4d3cd",
"label": "Blurb",
"name": "blurb",
"aria-label": "",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"maxlength": "",
"rows": 3,
"placeholder": "",
"new_lines": ""
},
{
"key": "field_68bf1126c2760",
"label": "Links",
"name": "links",
"aria-label": "",
"type": "repeater",
"instructions": "", "instructions": "",
"required": 0, "required": 0,
"conditional_logic": 0, "conditional_logic": 0,
@@ -76,19 +35,34 @@
"id": "" "id": ""
}, },
"layout": "block", "layout": "block",
"pagination": 0,
"min": 0,
"max": 1,
"collapsed": "",
"button_label": "Add Button",
"rows_per_page": 20,
"sub_fields": [ "sub_fields": [
{ {
"key": "field_68bf1171c2761", "key": "field_676599964d3cc",
"label": "Link", "label": "Heading",
"name": "link", "name": "heading",
"aria-label": "", "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": "", "instructions": "",
"required": 0, "required": 0,
"conditional_logic": 0, "conditional_logic": 0,
@@ -97,14 +71,74 @@
"class": "", "class": "",
"id": "" "id": ""
}, },
"clone": [ "default_value": "",
"group_clone_button" "maxlength": "",
], "rows": 3,
"display": "seamless", "placeholder": "",
"layout": "block", "new_lines": ""
"prefix_label": 0, },
"prefix_name": 0, {
"parent_repeater": "field_68bf1126c2760" "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, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1757498726 "display_title": "",
"modified": 1765809893
} }

248
resources/acf/group_clone_block_settings.json
View File

@@ -3,7 +3,7 @@
"title": "Clone: Block Settings", "title": "Clone: Block Settings",
"fields": [ "fields": [
{ {
"key": "field_673511c31122f", "key": "field_69403228d2637",
"label": "Settings", "label": "Settings",
"name": "", "name": "",
"aria-label": "", "aria-label": "",
@@ -21,11 +21,11 @@
"endpoint": 0 "endpoint": 0
}, },
{ {
"key": "field_680016e0fac24", "key": "field_694031b513e66",
"label": "Anchor ID", "label": "",
"name": "section_anchor_id", "name": "settings",
"aria-label": "", "aria-label": "",
"type": "text", "type": "group",
"instructions": "", "instructions": "",
"required": 0, "required": 0,
"conditional_logic": 0, "conditional_logic": 0,
@@ -34,136 +34,117 @@
"class": "", "class": "",
"id": "" "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", "layout": "block",
"prefix_label": 0, "sub_fields": [
"prefix_name": 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_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)", "label": "Settings (end)",
"name": "", "name": "",
"aria-label": "", "aria-label": "",
@@ -199,5 +180,6 @@
"active": true, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1764247227 "display_title": "",
"modified": 1765815052
} }

8
resources/css/components/_button.scss
View File

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

4
resources/css/components/_forms.scss
View File

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

3
resources/css/global/framework/_spacing.scss
View File

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

2
resources/css/global/mixins/_generate-button-classes.scss
View File

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

6
resources/views/blocks/acfdemo/block.json
View File

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

13
resources/views/blocks/acfdemo/render.blade.php
View File

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

8
resources/views/blocks/article/index.jsx
View File

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

4
resources/views/blocks/example/render.blade.php
View File

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

23
resources/views/layouts/block-acf.blade.php Normal file
View File

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

53
resources/views/layouts/block.blade.php
View File

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

30
resources/views/partials/block-acf-footer.blade.php Normal file
View File

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

17
resources/views/partials/block-acf-intro.blade.php Normal file
View File

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