SOLVED: Is there a way to add AlpineJS directive attributes?

How To
4

Let me give a help.
Bricks will use WordPress sanitize_title to clean the custom attribute keys before rendering.

You could use sanitize_title filter to put possible alpine attributes into exclude list.

Example:

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;

}

You should put in more conditions like only if current page is homepage etc., to avoid your logic accidently allowed unwanted string being escape in other places.

Good luck.

4 Likes