Field slug in bricks filters instead of field name for attributes

Feature Requests / Improvements
5

Thanks!

In order to help people in the same situation, i did the following:

Create a new API endopoint:

add_action('rest_api_init', function () {
    register_rest_route('acme/v1', '/attribute-labels', [
        'methods'  => 'GET',
        'callback' => function () {
            $taxonomies = get_object_taxonomies('product', 'names');
            $output = [];

            foreach ($taxonomies as $taxonomy) {
                if (strpos($taxonomy, 'pa_') !== 0) {
                    continue; 
                }

                $terms = get_terms([
                    'taxonomy'   => $taxonomy,
                    'hide_empty' => false,
                ]);

                foreach ($terms as $term) {
                    $output[$term->slug] = $term->name;
                }
            }

            return rest_ensure_response($output);
        },
        'permission_callback' => '__return_true',
    ]);
});

And then replace slugs with field name:

fetch('/wp-json/acme/v1/attribute-labels')
  .then(response => response.json())
  .then(replacements => {
    const applyReplacements = () => {
      document.querySelectorAll('span.brx-option-text.bricks-button').forEach(el => {
        const txt = el.textContent.trim();
        if (replacements[txt] && el.innerText !== replacements[txt]) {
          el.innerText = replacements[txt];
        }
      });
    };

    // Aplicar la primera vez al cargar
    applyReplacements();

    // Crear observer pero sin riesgo de bucle
    const observer = new MutationObserver((mutations) => {
      observer.disconnect(); // Detener para evitar loops

      // Solo si hay cambios relevantes
      let hasRelevantChange = mutations.some(m =>
        m.addedNodes.length || m.removedNodes.length
      );

      if (hasRelevantChange) {
        applyReplacements();
      }

      observer.observe(document.body, {
        childList: true,
        subtree: true
      }); 
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  })
  .catch(err => {
    console.warn('⚠️ ', err);
  });

Cheers!