Skip to content

Instantly share code, notes, and snippets.

@mwhiteley16

mwhiteley16/block.json

Created September 1, 2026 12:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mwhiteley16/02a08224e4c947f2ea86127f599323f1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mwhiteley16/02a08224e4c947f2ea86127f599323f1 to your computer and use it in GitHub Desktop.
Download ZIP
ACF Block Testing
Raw
block.json
{
"name": "wd/acf-icon-button",
"title": "Icon Button Block",
"description": "",
"style": "block-icon-button",
"category": "wd-blocks",
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.5 22.5'><defs><style>.a{fill:#222;}.b{fill:#1fa8af;}</style></defs><path class='a' d='M20.17,4a10.17,10.17,0,0,0-7-3.5L11.91.38h-.18a.64.64,0,0,0-.47.13A.68.68,0,0,0,11,.93L10.6,3.79a.48.48,0,0,0,.12.43.54.54,0,0,0,.44.18h.11l1.44.17c3.94.45,6.12,2.69,5.84,6a8.37,8.37,0,0,1-2.49,5.12A8.14,8.14,0,0,1,10,18.06l-.65,0H9.15a.8.8,0,0,0-.5.17.68.68,0,0,0-.25.44L8,21.5a.49.49,0,0,0,.12.42.57.57,0,0,0,.45.18h.17l1,0h.34a11.61,11.61,0,0,0,8.21-3.39,12.76,12.76,0,0,0,3.77-7.92A9.49,9.49,0,0,0,20.17,4Z'/><path class='b' d='M9.2,17h.15L10,17a7.61,7.61,0,0,0,3.64-.77L15,6.15a8.65,8.65,0,0,0-2.33-.57l-1-.12-1,7.35L9.23,7c-.11-.45-.33-.67-.65-.67H7.16c-.29,0-.5.22-.65.67L5.1,12.81,3.82,3a.55.55,0,0,0-.61-.55H.78a.36.36,0,0,0-.29.16A.6.6,0,0,0,.37,3a.5.5,0,0,0,0,.18L2.53,19.22a1.07,1.07,0,0,0,.23.6.64.64,0,0,0,.53.23H5.16c.37,0,.61-.21.73-.65l2-7.19Z'/></svg>",
"apiVersion": 3,
"keywords": [
],
"acf": {
"blockVersion": 3,
"renderTemplate": "render.php"
},
"styles": [
],
"supports": {
"align": false,
"alignContent": false,
"alignText": false,
"anchor": true,
"color": {
"background": false,
"gradients": false,
"link": false,
"text": false
},
"fullHeight": false,
"jsx": true,
"spacing": {
"margin": true,
"padding": true
},
"typography": {
"lineHeight": false,
"fontSize": false
}
}
}
Raw
block.php
<?php
/**
* Load blocks.
*/
function load_blocks() {
$blocks = scandir( get_template_directory() . '/blocks/' );
$blocks = array_values( array_diff( $blocks, array( '_base', '.DS_Store' ) ) );
if ( ! empty( $blocks ) ) {
foreach ( $blocks as $block ) {
// Empty scripts array.
$scripts = [];
// Regsiter block scripts if they exist (must register script before block).
if ( file_exists( get_template_directory() . '/blocks/' . $block . '/block.js' ) ) {
// Set proper dependencies.
$deps = [
'acf',
'jquery',
];
// Additional dependencies per block.
if ( $block === 'slideshow' ) {
$deps[] = 'wd-flickity';
}
// Register script.
wp_register_script(
'block-' . $block . '-js',
get_stylesheet_directory_uri() . '/blocks/' . $block . '/block-min.js',
$deps,
WD_THEME_VERSION,
false
);
// Populate scripts array.
$scripts = [
'script' => 'block-' . $block . '-js',
];
}
// Register the block.
register_block_type(
get_template_directory() . '/blocks/' . $block,
$scripts
);
// Register block styles if they exist.
if ( file_exists( get_template_directory() . '/blocks/' . $block . '/style.css' ) ) {
wp_register_style(
'block-' . $block,
get_stylesheet_directory_uri() . '/blocks/' . $block . '/style.css',
null,
WD_THEME_VERSION
);
}
}
}
}
add_action( 'init', __NAMESPACE__ . '\load_blocks', 5 );
Raw
group_6a91c65adf502.json
{
"key": "group_6a91c65adf502",
"title": "Block - Icon Button",
"fields": [
{
"key": "field_6a91c65bca9c0",
"label": "Icon",
"name": "wd_block_icon_button_icon",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 0,
"preview_size": "medium"
},
{
"key": "field_6a91c688ca9c1",
"label": "Link",
"name": "wd_block_icon_button_link",
"aria-label": "",
"type": "link",
"instructions": "",
"required": 1,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"allow_in_bindings": 0
}
],
"location": [
[
{
"param": "block",
"operator": "==",
"value": "wd\/acf-icon-button"
}
]
],
"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": "",
"allow_ai_access": false,
"ai_description": "",
"modified": 1787938468
}
Raw
render.php
<?php
/**
* Icon Button Block
*
* @package ShredRight
* @author Matt Whiteley
* @since 1.0.0
* @license GPL-2.0+
*/
// ACF meta.
$wd_block_icon_button_icon = get_field( 'wd_block_icon_button_icon' );
$wd_block_icon_button_link = get_field( 'wd_block_icon_button_link' );
// Block ID.
$block_id = str_replace( '_', '-', $block['id'] );
// Add anchor if present.
if ( ! empty( $block['anchor'] ) ) {
$block_id = $block['anchor'];
}
// Block Classes.
$block_classes = 'acf-block block-icon-button';
// Custom CSS class.
if ( ! empty( $block['className'] ) ) {
$block_classes .= ' ' . $block['className'];
}
// Optionally disable pointer events (prevent clicking links within block editor).
$disable_pointer_events = true;
if ( $disable_pointer_events === true && is_admin() ) {
$block_classes .= ' disable-pointer-events';
}
// Set up the wrapper attributes.
$wrapper_attributes = get_block_wrapper_attributes(
[
'id' => $block_id,
'class' => $block_classes,
'style' => '',
]
);
// Create innerBlocks template to use when block is inserted.
$inner_template = [
[
'core/group',
[
'style' => [
'spacing' => [
'blockGap' => '8px',
'padding' => [
'right' => 'var:preset|spacing|0',
'left' => 'var:preset|spacing|0',
],
],
],
'layout' => [
'type' => 'constrained',
],
],
[
[
'core/heading',
[
'level' => 2,
'placeholder' => 'Header here',
'style' => [
'elements' => [
'link' => [
'color' => [
'text' => 'var:preset|color|background',
],
],
],
'typography' => [
'fontStyle' => 'normal',
'fontWeight' => '500',
],
],
'textColor' => 'background',
'fontSize' => 'font-size-5',
],
],
[
'core/paragraph',
[
'placeholder' => 'Placeholder text here.',
'style' => [
'elements' => [
'link' => [
'color' => [
'text' => 'var:preset|color|background',
],
],
],
],
'textColor' => 'background',
],
],
],
],
];
?>
<?php if ( ! $is_preview ) : ?>
<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
<?php else : ?>
<div id="<?php echo esc_attr( $block_id ); ?>" class="<?php echo wp_kses_post( $block_classes ); ?>">
<?php endif; ?>
<?php if ( ! empty( $wd_block_icon_button_link ) ) : ?>
<?php
$target = ! empty( $wd_block_icon_button_link['target'] ) ? ' target="' . $wd_block_icon_button_link['target'] . '"' : '';
if ( $wd_block_icon_button_link['target'] === '_blank' ) {
$target .= ' rel="noopener noreferrer"';
}
?>
<a class="block-icon-button__link" href="<?php echo esc_url( $wd_block_icon_button_link['url'] ); ?>" aria-label="<?php echo esc_html( $wd_block_icon_button_link['title'] ); ?>"<?php echo wp_kses_post( $target ); ?>>
<?php if ( ! empty( $wd_block_icon_button_icon ) ) : ?>
<div class="block-icon-button__icon">
<img src="<?php echo esc_url( $wd_block_icon_button_icon['url'] ); ?>" alt="<?php echo esc_attr( $wd_block_icon_button_icon['alt'] ); ?>" />
</div>
<?php endif; ?>
<InnerBlocks class="block-icon-button__innerBlocks acf-inner-blocks-container is-layout-constrained" template="<?php echo esc_attr( wp_json_encode( $inner_template ) ); ?>" />
<div class="block-icon-button__right-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M7.5 18H28.5" stroke="#F6CB3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 7.5L28.5 18L18 28.5" stroke="#F6CB3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</a>
<?php endif; ?>
</div>
Raw
style.css
/**
* /assets/scss/partials/base/mixins.scss
*
* Let's define our universal mixins for use throughout the theme
*/
/**
* Base text styles
*/
/**
* Base button styles
*/
/**
* Button reset
*/
/**
* Label styles
*/
/**
* Transitions
*/
/**
* Placeholder Color
*/
/**
* Media queries
*/
.block-icon-button {
display: block;
width: 100%;
}
.block-icon-button__link {
display: flex;
width: 100%;
min-height: clamp(80px, 60.909px + 5.091vw, 122px);
background-color: #000;
padding-right: var(--wp--preset--spacing--300);
border-left: 4px solid var(--wp--preset--color--primary);
text-decoration: none;
}
.block-icon-button__link:hover {
text-decoration: none;
opacity: 0.75;
}
.block-icon-button__icon {
display: flex;
width: clamp(80px, 60.909px + 5.091vw, 122px);
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.block-icon-button__innerBlocks {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
padding: 12px var(--wp--preset--spacing--400);
}
.block-icon-button__innerBlocks > * {
width: 100%;
}
.block-icon-button__right-arrow {
display: flex;
align-items: center;
padding: 7px;
}
@media (max-width: 600px) {
.block-icon-button__right-arrow {
padding: 7px 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment