Render attributes

The function is used to render custom attributes on an element such as classes and data-attrbiutes. It supports the following properties:

Name	Type	Default	Description
tag_id	String	‘wrapper’	Creates render attribute for tag id if doesn’t exists
attribute	String	‘class’	Adds an attribute to the tag_id
value	String		Adds the value to the mentioned attribute

In php files, render attributes function is used in the following examples:

In options function

public function options( $options ) {
$options->add_option(
     'icon_position',
            [
                'type'             => 'custom_selector',
                'title'            => __( 'Icon position', 'zionbuilder' ),
                'description'      => __( 'Choose icon position.' ),
                'default'          => 'left',
                'columns'          => 2,
                'options'          => [
                    [
                        'id'   => 'left',
                        'name' => 'left',
                    ],
                    [
                        'id'   => __( 'right', 'zionbuilder' ),
                        'name' => 'right',
                    ],                   
                ],
                'render_attribute' => [
                    [
                        'tag_id'    => 'button_styles',
                        'attribute' => 'class',
                        'value'     => 'zb-el-button--icon-{{VALUE}}',
                    ],
                ],
            ]
}

In render function

it combines the inherited attributes styles such as custom global classes with other classes attributes:

/**
 * Get style elements
 *
 * Returns a list of elements/tags that for which you
 * want to show style options
 *
  * @return void
 */
    public function on_register_styles() {
        $this->register_style_options_element(
            'button_styles',
            [
                'title'      => esc_html__( 'Button styles', 'zionbuilder' ),
                'selector'   => '{{ELEMENT}} .zb-el-button',
                'render_tag' => 'button_styles',
            ]
        );        
    }

public function render( $options ) {
/**
* gets the combined attributes from registered styles with classes attributes
*/
$combined_button_attr = $this->render_attributes->get_combined_attributes( 'button_styles', [ 'class' => 'zb-el-button' ] );

$button_text = 'link text';
$this->render_tag(
            'a,
            'button',
            [ $button_text ],
            $combined_button_attr
        );
}

In vue component

In vue component, to render the cstom attributes and classes, the following functions are used:

v-bind="api.getAttributesForTag('tag_id')"

:class="api.getStyleClasses('tag_id')"

<component
       v-bind="api.getAttributesForTag('button_styles')"
       :class="api.getStyleClasses('button_styles')"
></component>