2, 'title' => __('Step Layout', 'kadence-child'), 'description' => __('A responsive step layout block with three cards', 'kadence-child'), 'category' => 'design', 'icon' => 'layout', 'keywords' => array('step', 'cards', 'layout'), 'supports' => array( 'align' => array('wide', 'full'), 'html' => false, 'customClassName' => true, ), 'attributes' => array( 'stepDirection' => array( 'type' => 'string', 'default' => 'low-to-high', ), 'cards' => array( 'type' => 'array', 'default' => array( array( 'title' => 'Card 1', 'description' => 'Description for card 1', 'buttonText' => 'EXPLORE', 'buttonUrl' => '#', 'backgroundImage' => '', ), array( 'title' => 'Card 2', 'description' => 'Description for card 2', 'buttonText' => 'EXPLORE', 'buttonUrl' => '#', 'backgroundImage' => '', ), array( 'title' => 'Card 3', 'description' => 'Description for card 3', 'buttonText' => 'EXPLORE', 'buttonUrl' => '#', 'backgroundImage' => '', ), ), ), ), 'render_callback' => 'bw_render_step_layout_block', 'style' => 'bw-step-layout-style', 'editor_style' => 'bw-step-layout-editor', )); } add_action('init', 'bw_register_step_layout_block'); // Render callback function bw_render_step_layout_block($attributes, $content) { $step_direction = isset($attributes['stepDirection']) ? $attributes['stepDirection'] : 'low-to-high'; $cards = isset($attributes['cards']) ? $attributes['cards'] : array(); // Get alignment class $align_class = ''; if (isset($attributes['align'])) { $align_class = 'align' . $attributes['align']; } $wrapper_class = 'wp-block-bw-step-layout bw-step-layout bw-step-layout--' . esc_attr($step_direction); if ($align_class) { $wrapper_class .= ' ' . $align_class; } ob_start(); ?>
$card) : $card_class = 'bw-step-layout__card bw-step-layout__card--' . ($index + 1); $has_image = !empty($card['backgroundImage']); ?>
data-has-image="true">