Improvments: Use more $tag property and set_attribute method on Elements

Feature Requests / Improvements
1

Bricks has a lot of great features to extend it’s native elements through various filters, but on some elements it doesn’t work because they are not written “correctly”. It would be a great improvment for developers if you could do a pass over existing elements and improve the code for these elements, so we can correctly use the hooks provided in the documentation.

use set_attribute method to set attributes of HTML-Elements within a Bricks Element

Use Cases

GDPR:

To make elements like the Instagram Feed GDPR Compliant we have to block all external request until permission is given. This is our responsibility as developers and not the job of the bricks team but it would be nice if we could have more tools to do just that.

example: instagram-feed.php:630

$output .= '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $caption ) . '">';

If the attributes on this element weren’t hardcoded but rather useing the set_attribute method, we could easily modify the src-attribute via the bricks/element/render_attributes filter before consent and even add e.g. data-src Attribute to reinitialize these images upon consent via javascript.

More granular Styling

Writing CSS-Selectors for Elements without a class can be really annoying, espcially if we are talking about menu’s with different states that can be nested inside each other. The Dropdown element is a perfect example, where useing the set_attribute method would help developers programmatically add classes and attributes to more granular style their (nested) menu items, especially if we are talking about the button or span HTML-Elements that are quite hard coded.

example: dropdown.php:777

if ( $text !== null ) {
	if ( $link ) {
		$this->set_link_attributes( 'link', $link );
		$text = "<a {$this->render_attributes( 'link' )}>$text</a>";
	} else {
		$text = '<span>' . $text . '</span>';
	}
}

// Dropdown toggle (contains text & icon)
$output .= is_string( $text ) && strpos( $text, 'aria-current' ) !== false || ( ! empty( $children_html ) && strpos( $children_html, 'aria-current="page"' ) !== false ) ? '<div class="brx-submenu-toggle aria-current">' : '<div class="brx-submenu-toggle">';

if ( $text ) {
	$output .= $text;
}

if ( $icon ) {
	$aria_label = ! empty( $settings['ariaLabel'] ) ? $settings['ariaLabel'] : esc_html__( 'Toggle dropdown', 'bricks' );

	$output .= '<button aria-expanded="false" aria-label="' . esc_attr( $aria_label ) . '">';
	$output .= $icon;
	$output .= '</button>';
}

		$output .= '</div>';

use $tag property for Root HTML-Tag

example: icon-box.php:399

A lot of elements use hardcoded HTML-Tags for the root HTML-Tag of the element, despite there being a $tag property on the abstract class that claims to define it and we are supposed to be able to modify it through the bricks/element/settings filter.

$output = "<div {$this->render_attributes( '_root' )}>";

There is even a inconsistency within the same element since the VUE-Template is useing the tag property to set the root HTML-Tag of that Element inside the Builder.

example: icon-box.php:436

<component :is="tag" :class="[settings.iconPosition ? settings.iconPosition : null]">

If there are any questions or you need more usecases for convincing, please let me know :wink:

Best Regards
Suat