Advanced Patterns: Button Attributes and Class Builders

Blocks with buttons must expose all four button controls per variant and build button classes consistently in both JS (canvas) and PHP (render.php).

Required Button Attributes in block.json

"primaryBtnStyle":        { "type": "string", "default": "filled"    },
"primaryBtnColor":        { "type": "string", "default": "primary"   },
"primaryBtnSize":         { "type": "string", "default": "md"        },
"primaryBtnBorderRadius": { "type": "string", "default": "md"        },

"secondaryBtnStyle":        { "type": "string", "default": "outline"   },
"secondaryBtnColor":        { "type": "string", "default": "secondary" },
"secondaryBtnSize":         { "type": "string", "default": "md"        },
"secondaryBtnBorderRadius": { "type": "string", "default": "md"        }

JavaScript Button Class Builder

function buildPrimaryBtnClass( attr ) {
    var elemClasses = window.wptElements
        ? window.wptElements.buildElementClasses( 'button', 'primary', attr.elementOverrides )
        : '';
    return [
        'wpt-btn',
        'wpt-btn--primary',
        'wpt-btn--style-'  + ( attr.primaryBtnStyle        || 'filled'   ),
        'wpt-btn--color-'  + ( attr.primaryBtnColor        || 'primary'  ),
        'wpt-btn--size-'   + ( attr.primaryBtnSize         || 'md'       ),
        'wpt-btn--radius-' + ( attr.primaryBtnBorderRadius || 'md'       ),
        elemClasses,
    ].filter( Boolean ).join( ' ' );
}

function buildSecondaryBtnClass( attr ) {
    var elemClasses = window.wptElements
        ? window.wptElements.buildElementClasses( 'button', 'secondary', attr.elementOverrides )
        : '';
    return [
        'wpt-btn',
        'wpt-btn--secondary',
        'wpt-btn--style-'  + ( attr.secondaryBtnStyle        || 'outline'   ),
        'wpt-btn--color-'  + ( attr.secondaryBtnColor        || 'secondary' ),
        'wpt-btn--size-'   + ( attr.secondaryBtnSize         || 'md'        ),
        'wpt-btn--radius-' + ( attr.secondaryBtnBorderRadius || 'md'        ),
        elemClasses,
    ].filter( Boolean ).join( ' ' );
}

Use on the canvas: “js el( 'span', { className: buildPrimaryBtnClass( attr ) }, attr.primaryBtnText || 'Get Started' ), el( 'span', { className: buildSecondaryBtnClass( attr ) }, attr.secondaryBtnText || 'Learn More' ) “

PHP Button Class Builder in render.php

Mirror the JS builder exactly in PHP:

function wpt_btn_class( $prefix, $style, $color, $size, $radius ) {
    return implode( ' ', array(
        'wpt-btn',
        'wpt-btn--' . $prefix,
        'wpt-btn--style-'  . sanitize_html_class( $style  ),
        'wpt-btn--color-'  . sanitize_html_class( $color  ),
        'wpt-btn--size-'   . sanitize_html_class( $size   ),
        'wpt-btn--radius-' . sanitize_html_class( $radius ),
    ));
}

$pri_cls = wpt_btn_class(
    'primary',
    $attributes['primaryBtnStyle']        ?? 'filled',
    $attributes['primaryBtnColor']        ?? 'primary',
    $attributes['primaryBtnSize']         ?? 'md',
    $attributes['primaryBtnBorderRadius'] ?? 'md'
);

$sec_cls = wpt_btn_class(
    'secondary',
    $attributes['secondaryBtnStyle']        ?? 'outline',
    $attributes['secondaryBtnColor']        ?? 'secondary',
    $attributes['secondaryBtnSize']         ?? 'md',
    $attributes['secondaryBtnBorderRadius'] ?? 'md'
);