Skip to main content

Yabe Bricks Plain Classes compatibility

Yabe Bricks Plain Classes adds a searchable autocomplete for typing plain CSS classes by hand in Bricks. It doesn't know about Fancy Animations' own classes out of the box — add the snippet below (in your theme's functions.php, or your preferred code-snippets plugin) to make them show up in its search too:

<?php

add_action('wp_enqueue_scripts', static function () {
if (!function_exists('bricks_is_builder_main') || !bricks_is_builder_main()) {
return;
}

if (!defined('FANCY_ANIMATIONS')) {
return;
}

$selectors = file_get_contents(dirname(FANCY_ANIMATIONS::FILE) . '/build/builder-selectors.json');
$selectors = json_decode($selectors, true, 512, JSON_THROW_ON_ERROR)['classes'];

$classes = json_encode($selectors);

wp_add_inline_script('yos-brx-plain-classes', <<<JS
document.addEventListener('DOMContentLoaded', function () {
wp.hooks.addFilter('yos-brx-plain-classes-autocomplete-items', 'yos_brx_plain_classes_fancy_animations', function (items) {
return [...items, ...Object.values({$classes}).map((value) => ({ value: value }))];
});
});
JS, 'after');
}, 1_000_002);

This reads the full list of Fancy Animations class names straight from the plugin's own build output, so it stays correct across updates without needing to edit the snippet.