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>