Add Alpine JS Attributes In Bricks Element

Set x-on:click as attribute key, open = ! open as attribute value, when inspect in front end, the attribute key becomes x-onclick.

Update: In Bricks v1.5.4, the colon will not be removed anymore, because Bricks changed sanitize_title to esc_attr. This article just act as reference.

Problem

Question raised by a friend in Bricks forum. Was trying to add some Alpine JS attributes into certain element custom attribute area. However, some special characters will be removed by Bricks when rendering in front end.

Solution

Bricks using sanitize_title method on custom attributes before rendering the element’s HTML in front end. We can use sanitize_title filter to exclude certain attributes from being sanitized.

add_filter( 'sanitize_title', 'do_not_sanitize_alpine_attr', 10, 3);

function do_not_sanitize_alpine_attr($title, $raw_title, $context ) {

  // List out all possible attributes you may put on the custom attributes

  $alpine_attributes = ['x-on', 'x-data', 'x-show'];

  // Use PHP array_filter to check if the current sanitizing $raw_text is one of $alpine_attributes  

  $match = array_filter( $alpine_attributes, function( $value ) use ( $raw_title ) {

    return (strpos($raw_title, $value) !== false) ;

  } );

  // If array_filter result is not empty, then do not filter it. Return the original $raw_title

  if( !empty($match) ) {

    return $raw_title;

  }

  return $title;

}

Forum thread link: Click Here