# b-blocks/1.5.2/inc/button-group.php

bBlocks – Essential Gutenberg Blocks & Patterns Collection, version 1.5.2. 123 lines.

- Page: https://pluginprobe.com/plugins/b-blocks/1.5.2/code/inc/button-group.php
- Raw: https://pluginprobe.com/plugins/b-blocks/1.5.2/raw/inc/button-group.php
- Modified: 2021-10-18T14:05:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/b-blocks/1.5.2/code/inc/button-group.php#L10-L20`.

```php
<?php
class BBlocksButtonGroup extends BBlocks{
    public function __construct(){
        add_action( 'init', [$this, 'register'] );
    }

    function register(){
        $this::registerScripts( 'button-group', array(
            'render_callback' => [$this, 'render']
        ) );
    }

    function render( $attributes ){
        extract( $attributes );
        $align = $align ?? '';
        $cId = $cId ?? '';
        $width = $width ?? '0px';
        $btnAlign = $btnAlign ?? 'center';
        $btnType = $btnType ?? 'fill';
        $btnTypo = $btnTypo ?? array( 'fontSize' => 16 );
        $btnPadding = $btnPadding ?? array( 'vertical' => '12px', 'horizontal' => '30px' );
        $btnOne = $btnOne ?? 'First Button';
        $btnOneLink = $btnOneLink ?? '#';
        $btnOneBorder = $btnOneBorder ?? array( 'radius' => '50px' );
        $btnOneColors = $btnOneColors ?? array( 'color' => '#fff', 'bg' => '#4527a4' );
        $btnOneHovColors = $btnOneHovColors ?? array( 'color' => '#fff', 'bg' => '#8344c5' );
        $btnTwo = $btnTwo ?? 'Second Button';
        $btnTwoLink = $btnTwoLink ?? '#';
        $btnTwoBorder = $btnTwoBorder ?? array( 'radius' => '50px' );
        $btnTwoColors = $btnTwoColors ?? array( 'color' => '#fff', 'bg' => '#8344c5' );
        $btnTwoHovColors = $btnTwoHovColors ?? array( 'color' => '#fff', 'bg' => '#4527a4' );
        $isSep = $isSep ?? true;
        $sepType = $sepType ?? 'icon';
        $sepText = $sepText ?? 'or';
        $sepTextTypo = $sepTextTypo ?? array( 'fontSize' => 15 );
        $sepTextColor = $sepTextColor ?? '#333';
        $sepIcon = $sepIcon ?? array( 'class' => 'fa fa fa-arrows-alt-h', 'fontSize' => 20, 'color' => '#333' );
        $sepBGColor = $sepBGColor ?? '#fff';

        // Generate Styles
        $btnBorderRadiusCSS = $btnBorder['radius'] ?? '50px';

        $buttonGroupStyle = new BBlocksStyleGenerator();
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId", array(
            'text-align' => $btnAlign,
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup", array(
            'width' => '0px' !== $width && '0%' !== $width && '0em' !== $width ? $width : 'auto'
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .bBlocksBtn", array(
            'min-width' => '0px' !== $width && '0%' !== $width && '0em' !== $width ? '50%' : 'auto'
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .bBlocksBtn a", array(
            $btnTypo['styles'] ?? 'font-size: 16px;' => '',
            'padding' => $btnPadding['styles'] ?? '12px 30px',
        ) );

        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnOne", array(
            $btnOneBorder['styles'] ?? 'border-radius: 50px;' => '',
            $btnOneColors['styles'] ?? 'color: #fff; background: #4527a4;' => '',
            'border-radius' => "$btnBorderRadiusCSS 0 0 $btnBorderRadiusCSS"
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnOne:hover", array(
            $btnOneHovColors['styles'] ?? 'color: #fff; background: #8344c5;' => ''
        ) );

        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnTwo", array(
            $btnTwoBorder['styles'] ?? 'border-radius: 50px;' => '',
            $btnTwoColors['styles'] ?? 'color: #fff; background: #8344c5;' => '',
            'border-radius' => "0 $btnBorderRadiusCSS $btnBorderRadiusCSS 0"
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnTwo:hover", array(
            $btnTwoHovColors['styles'] ?? 'color: #fff; background: #4527a4;' => ''
        ) );

        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnSeparator", array(
            'width' => 'text' === $sepType ? $sepTextTypo['fontSize'] * 1.75 .'px' : $sepIcon['fontSize'] * 1.65 .'px',
            'height' => 'text' === $sepType ? $sepTextTypo['fontSize'] * 1.75 .'px' : $sepIcon['fontSize'] * 1.65 .'px',
            'background-color' => $sepBGColor
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnSeparator span", array(
            $sepTextTypo['styles'] ?? 'font-size: 15px;' => '',
            'color' => $sepTextColor
        ) );
        $buttonGroupStyle::addStyle( "#bBlocksButtonGroup-$cId .bBlocksButtonGroup .btnSeparator i", array(
            $sepIcon['styles'] ?? 'font-size: 20px; color: #333;' => ''
        ) );

        // Components
        $sepIconEl = 'icon' === $sepType && $sepIcon['class'] ? "<i class='". $sepIcon['class'] ."'></i>" : '';
        $sepTextEl = 'text' === $sepType ? "<span>$sepText</span>" : '';
        $sepContainerEl = $isSep ? "<div class='btnSeparator'>$sepIconEl $sepTextEl</div>" : '';

        ob_start(); ?>
        <div class='wp-block-b-blocks-button-group <?php echo 'align' . esc_attr( $align ); ?>' id='bBlocksButtonGroup-<?php echo esc_attr( $cId ); ?>'>
            <style>
                @import url(<?php echo esc_url( $btnTypo['googleFontLink'] ?? '' ); ?>);
                @import url(<?php echo esc_url( $sepTextTypo['googleFontLink'] ?? '' ); ?>);
                <?php echo wp_kses( $buttonGroupStyle::renderStyle(), array() ); ?>
            </style>

            <div class='bBlocksButtonGroup'>
                <div class='bBlocksBtn firstBtn'>
                    <?php echo $btnOne ? "<a class='btnOne btn-". esc_attr( $btnType ) ."' href='". esc_url( $btnOneLink ) ."'>". wp_kses_post( $btnOne ) ."</a>" : ''; ?>

                    <?php echo wp_kses( $sepContainerEl, array(
                        'div' => array( 'class' => array() ),
                        'i' => array( 'class' => array() ),
                        'span' => array()
                    ) ); ?>
                </div>

                <div class='bBlocksBtn secondBtn'>
                    <?php echo $btnTwo ? "<a class='btnTwo btn-". esc_attr( $btnType ) ."' href='". esc_url( $btnTwoLink ) ."'>". wp_kses_post( $btnTwo ) ."</a>" : ''; ?>
                </div>
            </div>
        </div>

        <?php $buttonGroupStyle::$styles = array(); // Empty styles
        return ob_get_clean();
    }
}
new BBlocksButtonGroup();
```