Fix: prevent block-buttons from removing WooCommerce interactive attributes #1125
Conversation
|
Thank you! Confirm that this one works with the WC filter widget button. Unfortunately, the core buttons are not rendered correctly anymore. Any idea?
|
|
I'll check that out. Do you know if it's only apparent? Has it affected any functionality? |
I honestly do not know where WC or any other plugin this type of button uses. But while we are here, maybe adding general support to the WC product filter block seems a good idea. In that case we can add a new clear filter button. I have a made rough sketch, not everything can be replaced with PHP filters, there are some Just an idea, see it in action on the right sidebar https://themes.bootscore.me/boilerplate/shop/ Let me know what you think. /**
* Product Filters Block
*/
if (!function_exists('bootscore_wc_block_widget_product_filter_classes')) {
/**
* Adds Bootstrap classes to WC product filter block
*
* @param string $block_content The block content.
* @param array $block The full block, including name and attributes.
* @return string The filtered block content.
*/
function bootscore_wc_block_widget_product_filter_classes($block_content, $block) {
$search = array(
// Remove Moblie overlay
'wc-block-product-filters__open-overlay',
'wc-block-product-filters__overlay',
'wc-block-product-filters__overlay-wrapper',
'wc-block-product-filters__overlay-dialog',
// Chips
'wc-block-product-filter-removable-chips__items',
'wc-block-product-filter-removable-chips__item',
'wc-block-product-filter-removable-chips__remove',
'btn-close-icon',
// Clear filters button
'class="btn btn-outline-primary has-text-align-center wp-element-button"',
// Range
// form-control seems not working
//'wp-block-woocommerce-product-filter-price',
//'min',
//'max',
// Checks
'wc-block-product-filter-checkbox-list__item',
'wc-block-product-filter-checkbox-list__label',
'wc-block-product-filter-checkbox-list__input',
'wc-block-product-filter-checkbox-list__text-wrapper'
);
$replace = array(
// Remove Moblie overlay
'',
'',
'',
'',
// Chips
'list-unstyled d-flex flex-wrap gap-2',
'badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill text-decoration-none d-flex align-items-center',
'btn-close ms-1',
'btn-close-icon d-none',
// Clear filters button
'class="btn btn-sm btn-outline-danger w-100" data-wp-on--click="actions.removeAllActiveFilters" ',
// Range
// form-control seems not working
//'wp-block-woocommerce-product-filter-price',
//'min form-control',
//'max form-control',
// Checks
'form-check',
'form-check-label',
'form-check-input',
''
);
$block_content = str_replace($search, $replace, $block_content);
return apply_filters('bootscore/block/product/filters/content', $block_content, $block);
}
}
add_filter('render_block_woocommerce/product-filters', 'bootscore_wc_block_widget_product_filter_classes', 10, 2);.wc-block-product-filters {
// Hide the mobile dialog stuff
.-header,
.-footer,
[data-wp-on--click="actions.openOverlay"] {
display: none;
}
// Chips
.badge {
.btn-close {
font-size: 0.75em;
}
}
}
.wc-block-product-filter-price-slider {
// Fake Range
&__range .range-bar {
background: var(--#{$prefix}secondary-bg) !important;
border-radius: $form-range-track-border-radius !important;
height: $form-range-track-height;
}
&__range input[type=range]::-webkit-slider-thumb {
width: $form-range-thumb-width !important;
height: $form-range-thumb-height !important;
background: $form-range-thumb-bg !important;
border: none !important;
}
// Fake form-control
.text input[type=text] {
border: 1px solid;
border-color: var(--#{$prefix}border-color) !important;
border-radius: $input-border-radius !important;
background-color: $input-bg !important;
font-size: $input-font-size !important;
padding: $input-padding-y $input-padding-x !important;
&:focus {
box-shadow: $input-focus-box-shadow;
outline: 0;
border-color: $input-focus-border-color;
}
}
} |
|
I tried to analyze as many scenarios as possible and came to the following conclusions: The problem with the button appearance is due to CSS hierarchy. In my code suggestion, the Furthermore, after closer analysis, I saw that it's this replacement ( https://github.com/bootscore/bootscore/blob/main/inc/blocks/block-buttons.php#L29) that prevents WooCommerce from adding
Asking ChatGPT, he explained that this This makes me think that we need a solution for Regarding your suggestion to add general support, I thought it was a great idea. I wasn't aware of this filtering possibility; I tried to find it in the files, and then ChatGPT also explained that it's created automatically using some name field from block.json, and I actually found the name: woocommerce/product-filters. That seemed quite interesting. My only concern is that you need to declare everything explicitly, including I analyzed my code suggestion more carefully and realized I missed some details. Here's a new suggestion: /**
* Buttons
*
* Adds btn and btn-primary or btn-outline-primary classes to the block buttons
*/
if (!function_exists('bootscore_block_buttons_classes')) {
function bootscore_block_buttons_classes($block_content, $block) {
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 outline wrapper
$has_outline = (strpos($block_content, 'is-style-outline') !== false);
// Use regex to rebuild the button
$block_content = preg_replace_callback(
'/<a([^>]*)class="([^"]*)"/i',
function ($matches) use ($has_outline) {
$before = $matches[1]; // previous attributes
$classes = $matches[2]; // classes
// Add classes btn btn-primary
if (strpos($classes, 'btn btn-primary') === false) {
$classes .= ' btn btn-primary';
}
/**
* If any parent wrapper declares is-style-outline
* we switch btn-primary to btn-outline-primary
* Otherwise, default to btn-primary
*/
if ($has_outline) {
$classes = str_replace('btn-primary', '', $classes);
if (strpos($classes, 'btn-outline-primary') === false) {
$classes .= ' btn-outline-primary';
}
} else {
$classes = str_replace('btn-outline-primary', '', $classes);
if (strpos($classes, 'btn-primary') === false) {
$classes .= ' btn-primary';
}
}
// Normalize spaces
$classes = trim(preg_replace('/\s+/', ' ', $classes));
return '<button' . $before . 'class="' . $classes . '"';
},
$block_content
);
return apply_filters('bootscore/block/buttons/content', $block_content, $block);
}
}
add_filter('render_block_core/buttons', 'bootscore_block_buttons_classes', 10, 2);The Initially I thought it was responsible for preventing the In the image, I've marked the style that contains Since we'll be forced to use One last observation about the inline style Sorry for any issues with my English, I'm using a translator. Thank you! |
|
Where would this CSS be applied? .wc-block-product-filters {
// Hide the mobile dialog stuff
.-header,
.-footer,
[data-wp-on--click="actions.openOverlay"] {
display: none;
}
// Chips
.badge {
.btn-close {
font-size: 0.75em;
}
}
}
.wc-block-product-filter-price-slider {
// Fake Range
&__range .range-bar {
background: var(--#{$prefix}secondary-bg) !important;
border-radius: $form-range-track-border-radius !important;
height: $form-range-track-height;
}
&__range input[type=range]::-webkit-slider-thumb {
width: $form-range-thumb-width !important;
height: $form-range-thumb-height !important;
background: $form-range-thumb-bg !important;
border: none !important;
}
// Fake form-control
.text input[type=text] {
border: 1px solid;
border-color: var(--#{$prefix}border-color) !important;
border-radius: $input-border-radius !important;
background-color: $input-bg !important;
font-size: $input-font-size !important;
padding: $input-padding-y $input-padding-x !important;
&:focus {
box-shadow: $input-focus-box-shadow;
outline: 0;
border-color: $input-focus-border-color;
}
}
}I also don't know much about how to format the answers here, so if you have any tips, that would be great. 😅 |
I quickly opened e new PR to support the filter block #1126. So you can download, install and play around with this branch https://github.com/bootscore/bootscore/tree/Add-support-to-WC-product-filter-block. Let me know what you think. |
|
Thank you very much for the link! Regarding the PR you opened, I now have some questions:
Sorry if some of my questions are silly, I'm a little lost now. Should I continue editing my PR or will you take over now? |
All good here, nothing is silly. Yes please, if you can work on the button fix in your PR would be great. Maybe we have to wait/recheck on WP 6.9 (coming December 02), because they change the block But in general, the current button code seems too complicated. I am sure we can fix this much more simpler by just changing the classes.
No, this must be fixed.
At best, there is no additional attribute needed for the filter block. #1126 is just a rough sketch and must be fine tuned. We can continue work here after the core buttons block is fixed. I didnt checked your code yet, can you push this to your PR? |
…buttons-removes-wc-attributes
|
Hi, I reviewed your code. I merged your branch 'Add-support-to-WC-product-filter-block' into my branch 'Fix-block-buttons-removes-wc-attributes'. I'm not sure if that's correct. The main problem is that using The chips contain the class affects the The class in the svg that was With the help of ChatGPT, I made a modification. Let me know what you think. With my code in the Just to remind you, this attribute |
…er' with '' to prevent a style from being added in the ::before
|
I just realized that the problem I mentioned also occurred with |
|
Unfortunately, the content buttons are still rendered wrong: Go in backend to a page and add two block buttons. Mark one in the style tab as outlined and view in the frontend. However, add support to the WC product filter block is a different story and we should not mix them together. So, Let's first fix only the buttons that they rendered correct in frontend and do not remove the attribute in the filter block. If this one is good and merged, then we can open another PR and make the filter block look nice. This PR has already too many changed files, the only one which is important here is the |
|
Although I can see that the code still needs modifications, the problem is no longer the Bootstrap class assignment, but rather the CSS hierarchy issue I mentioned before. I think we'll need to resort to some Or we need to make the paths The WordPress core adds the class But notice that the HTML structure is correct now. I have an updated code here, tell me what I should do now. |
|
I think we finally did it: /**
* Buttons
*
* Add the classes btn and btn-primary or btn-outline-primary to the block buttons.
*/
if (!function_exists('bootscore_block_buttons_classes')) {
function bootscore_block_buttons_classes($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
);
/**
* Use preg_replace_callback to process each individual button <div> in the block.
* The regex matches:
* 1. <div class="wp-block-button"> and captures any additional classes in $matches[1]
* 2. The <a> tag inside the div, capturing attributes before class="" in $matches[2]
* 3. The classes of the <a> element in $matches[3]
* This allows us to manipulate each button individually, detect outline styles,
* and apply Bootstrap btn classes appropriately.
*/
$block_content = preg_replace_callback(
'/<div class="wp-block-button\b([^"]*)">\s*<a([^>]*)class="([^"]*)"/i',
function ($matches) {
// Classes of the wp-block-button div.
$div_classes = trim($matches[1]);
// Remove any is-style-outline--<number> class from the div.
$div_classes = preg_replace('/\bis-style-outline--\d+\b/', '', $div_classes);
// Normalize whitespace in div classes.
$div_classes = trim(preg_replace('/\s+/', ' ', $div_classes));
// Attributes of <a> before class="".
$a_before = $matches[2];
// Classes of the <a> element.
$a_classes = $matches[3];
// Detect if this p-block-button div has the outline style.
$has_outline = (strpos($div_classes, 'is-style-outline') !== false);
// Ensure base .btn class exists.
if (strpos($a_classes, 'btn') === false) {
$a_classes .= ' btn';
}
/**
* Determine the correct button style:
* If the parent div has is-style-outline, use btn-outline-primary.
* Otherwise, use btn-primary as default.
*/
if ($has_outline) {
$a_classes = str_replace('btn-primary', '', $a_classes);
if (strpos($a_classes, 'btn-outline-primary') === false) {
$a_classes .= ' btn-outline-primary';
}
} else {
$a_classes = str_replace('btn-outline-primary', '', $a_classes);
if (strpos($a_classes, 'btn-primary') === false) {
$a_classes .= ' btn-primary';
}
}
// Normalize whitespace in <a> classes.
$a_classes = trim(preg_replace('/\s+/', ' ', $a_classes));
// Reconstruct the div + <a> with updated classes.
return '<div class="wp-block-button' . ($div_classes ? ' ' . $div_classes : '') . '"><a' . $a_before . 'class="' . $a_classes . '"';
},
$block_content
);
return apply_filters('bootscore/block/buttons/content', $block_content, $block);
}
}
add_filter('render_block_core/buttons', 'bootscore_block_buttons_classes', 10, 2); |
|
Yes! Tested it with upcoming WP 6.9 and seems to work well. If:
Then we can merge this PR immediately and step into a new PR which adds support for the WC filter block. Agree? |
|
Okay, just give me a little help because this is my biggest interaction with GitHub/Contributing. What's smarter? Deleting the files that came from your branch or saving the current code and reverting the commits (to the point of deleting them from the history)? |
|
Not so complicated...
In your branch:
When done, I will merge that immediately and we can open a new PR with product filter support. |
|
Sorry for the delay, I've been busy. I think I did everything right. Let me know how it goes. |
crftwrk
left a comment
There was a problem hiding this comment.
That's it! 👍 Let's open now a new PR to add support to the filter block.
Fixes #1124