Options helpers

When rendering attributes, the following parameters will be replaced with the saved value.

{{ELEMENT}}

{{ELEMENT}} will register the style options for the wrapper

For example, when adding css_style, {{ELEMENT}} will be replaced by the generated ID :

$options->add_option(
            'title_border_color',
            [
                'type'      => 'colorpicker',
                'width'     => 50,
                'title'     => __( 'Title border color', 'zionbuilder' ),
                'css_style' => [
                    [
                        'selector' => '{{ELEMENT}} .zb-el-alert__title',
                        'value'    => 'border-color: {{VALUE}}',
                    ],
                ],
            ]
        );

This code will compile the following css:

#uid680420617611 .zb-el-alert__title {
border-color: hsl(53, 99%, 65%);
}  

{{VALUE}}

{{VALUE}} will add the saved option value to the tag id

{{INDEX}}

{{INDEX}} will render the index of the saved value in a repeater option

{{RESPONSIVE_DEVICE_CSS}}

{{RESPONSIVE_DEVICE_CSS}} will render the corresponding device values:

default: '',
laptop: '--lg',
tablet: '--md',
mobile: '--sm'

In example, if responsive options are set to true the following code

public function options( $options ) {
        $options->add_option(
            'button_position',
            [
                'type'               => 'custom_selector',
                'title'              => __( 'Button position', 'zionbuilder' ),
                'description'        => __( 'Choose button position.' ),
                'columns'            => 3,
                'options'            => [
                    [
                        'id'   => 'left',
                        'icon' => 'align--left',
                    ],
                    [
                        'id'   => 'center',
                        'icon' => 'align--center',
                    ],
                    [
                        'id'   => __( 'right', 'zionbuilder' ),
                        'icon' => 'align--right',
                    ],
                ],
                'responsive_options' => true,               
                'render_attribute'   => [
                    [
                        'tag_id'    => 'wrapper',
                        'attribute' => 'class',
                        'value'     => 'zb-el-zionButton{{RESPONSIVE_DEVICE_CSS}}--align--{{VALUE}}',
                    ],
                ],
            ]
        );
}

will render:

<div class="znpb-element__wrapper zb-element zb-el-zionButton--md--align--center"></div>