Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix inconsistent button styling with TT3 #7516

Merged
merged 4 commits into from
Oct 28, 2022
Merged

Fix inconsistent button styling with TT3 #7516

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d69ee87
fix inconsistent button styling with TT3
gigitux Oct 28, 2022
a00e4e6
use wc_wp_theme_get_element_class_name
gigitux Oct 28, 2022
81f3a2a
add check to be sure that wc_wp_theme_get_element_class_name function…
gigitux Oct 28, 2022
673ff72
Merge branch 'trunk' into fix/add_to_cart_button_TT3
gigitux Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions assets/js/atomic/blocks/product-elements/button/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ const AddToCartButton = ( {
aria-label={ buttonAriaLabel }
className={ classnames(
'wp-block-button__link',
'wp-element-button',
'add_to_cart_button',
'wc-block-components-product-button__button',
colorStyles.className,
Expand Down Expand Up @@ -206,6 +207,7 @@ const AddToCartButtonPlaceholder = ( {
<button
className={ classnames(
'wp-block-button__link',
'wp-element-button',
'add_to_cart_button',
'wc-block-components-product-button__button',
'wc-block-components-product-button__button--placeholder',
Expand Down
2 changes: 1 addition & 1 deletion src/BlockTypes/AbstractProductGrid.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -647,7 +647,7 @@ protected function get_add_to_cart( $product ) {
'data-product_id' => $product->get_id(),
'data-product_sku' => $product->get_sku(),
'rel' => 'nofollow',
'class' => 'wp-block-button__link add_to_cart_button',
'class' => 'wp-block-button__link wp-element-button add_to_cart_button',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, we should use wp_theme_get_element_class_name( 'button' ) to get the correct class name, instead of directly using wp-element-button. Similar to what WC core does here: https://github.com/woocommerce/woocommerce/pull/35306/files#diff-3582a823c079f0c8354f3171ce608961ae6b224dd0182f7e4bb14e82278b05abR527-R543.

I don't know if there is an equivalent one for the JS side, but might be good investigating as well.

Copy link
Contributor Author

@gigitux gigitux Oct 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Thanks for sharing this! I used wc_wp_theme_get_element_class_name to be more consistent with WC core a00e4e6

I searched, but I didn't find any JS equivalent. wp_theme_get_element_class_name reads data from theme.json that isn't accessible on the JS side.
https://github.com/WordPress/WordPress/blob/44881d209b2f37cccdbd1f9a8713ba782bbdb65f/wp-includes/theme.php/#L4231-L4233

);

if (
Expand Down