[BUG] 'bootscore_block_buttons_classes' removes required data attributes from WooCommerce clear filters buttons #1124
Description
Describe the bug
I noticed a problem with the "Clear filters" button in the WooCommerce Product Filters widget. It's not working with Bootscore, and the reason is in the inc/blocks/block-buttons.php file.
The 'bootscore_block_buttons_classes' function is acting destructively on the button, removing a important atribute (data-wp-on--click="actions.removeAllActiveFilters") that WooCommerce add for the button to function correctly.
From what I've researched, WooCommerce is using WordPress's block system with the Interactive API.
HTML structure of the button using the Storefront theme:
<button data-wp-on--click="actions.removeAllActiveFilters" class="wp-block-button__link has-text-align-center wp-element-button" style="border-width:1px;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;text-decoration:none">Limpar filtros</button>Button HTML structure using Bootscore theme:
<button class="btn btn-outline-primary has-text-align-center wp-element-button" style="border-width:1px;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;text-decoration:none">Limpar filtros</button>Steps to reproduce
- Create or have a WordPress installation with the WooCommerce plugin installed.
- Add the native 'Product Filters' widget to the sidebar.
- Go to the store/products page, filter by some attribute, and then try clearing the filters using the 'Clear filters' button.
Screenshots and Additional Info
HTML structure of the button using the Storefront theme:
HTML structure of the button using the Bootscore theme:
HTML structure of the button using the Bootscore theme with the solution code:
Solution code in Bootscore-child's functions.php file:
add_action('after_setup_theme', function() {
// Remove default Bootscore buttons filter to apply the fixed version
remove_filter(
'render_block_core/buttons',
'bootscore_block_buttons_classes',
10
);
});
/**
* Buttons — Fixed version
*
* Adds proper btn / btn-primary / btn-outline-primary classes and ensures
* layout wrappers are converted correctly for Bootscore.
*/
function bootscore_block_buttons_classes_fixed($block_content, $block) {
// Process only core/buttons blocks
if ($block['blockName'] !== 'core/buttons') {
return $block_content;
}
// Replace wp-block-buttons-is-layout-flex with gap-1 mb-3
$block_content = str_replace(
'wp-block-buttons-is-layout-flex',
'gap-1 mb-3',
$block_content
);
// Detect if any wrapper contains is-style-outline
$has_outline = (strpos($block_content, 'is-style-outline') !== false);
/**
* Add btn classes only to <a> elements
*
* We avoid modifying wrapper divs, keeping the logic limited to links.
* Existing classes are preserved when possible and only corrected as needed.
*/
$block_content = preg_replace_callback(
'/<a([^>]*)class="([^"]*)"/i',
function ($matches) use ($has_outline) {
$before = $matches[1]; // Attributes before class=""
$classes = $matches[2]; // Existing classes inside class=""
// Ensure base .btn class exists
if (strpos($classes, 'btn') === false) {
$classes .= ' btn';
}
/**
* Determine button style.
*
* If any parent wrapper declares is-style-outline, we switch links
* to btn-outline-primary. Otherwise, default to btn-primary.
*/
if ($has_outline) {
// Outline mode: remove btn-primary, ensure btn-outline-primary
$classes = str_replace('btn-primary', '', $classes);
if (strpos($classes, 'btn-outline-primary') === false) {
$classes .= ' btn-outline-primary';
}
} else {
// Default mode: remove btn-outline-primary, ensure btn-primary
$classes = str_replace('btn-outline-primary', '', $classes);
if (strpos($classes, 'btn-primary') === false) {
$classes .= ' btn-primary';
}
}
// Normalize whitespace inside class=""
$classes = trim(preg_replace('/\s+/', ' ', $classes));
return '<a' . $before . 'class="' . $classes . '"';
},
$block_content
);
return $block_content;
}
add_filter('render_block_core/buttons', 'bootscore_block_buttons_classes_fixed', 10, 2);Website link
No response