-
Notifications
You must be signed in to change notification settings - Fork 218
Use theme's body background color as the mini cart contents default background color #7510
Use theme's body background color as the mini cart contents default background color #7510
Conversation
… body background color
The release ZIP for this PR is accessible via:
|
Size Change: +456 B (0%) Total Size: 993 kB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oooh, I love this approach. It feels a bit hacky, but it works wonderfully and it seems to be the only approach we have right now that works cross-theme.
I left several questions below, but none of them is really blocking.
Co-authored-by: Albert Juhé Lluveras <[email protected]>
…ide a useEffect call
Script Dependencies ReportThe
This comment was automatically generated by the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested and it works great. Thanks for working on this, @dinhtungdu!
Btw, heads-up that I marked the WooCommerce Core
option under WooCommerce Visibility.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
New changes are testing well and LGTM. 🚢
Failed tests relate to checkout and Gutenberg. Merging... |
…ackground color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]>
…ackground color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]>
…ackground color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]>
* Empty commit for release pull request * Added readme.txt changelog entry * Update HPOS compatibility snippet (#7395) * 8.7.2 Testing notes * Update testing notes * Update testing notes * Bumped version * Refactor force billing: remove forcedBillingAddress from conditions for showBillingFields (#7393) Co-authored-by: Niels Lange <[email protected]> * Updated testing instructions and changelog to include #7393 * Updated testing zip * Bumping version strings to new version. * Empty commit for release pull request * Fix wrong keys being sent in `canMakePayment` and customer data showing in the Checkout block in the editor (#7434) * Construct args for canMakePayment with correct keys * When the CheckoutEventsContext mounts, initialize payment store * Destructure useSelect correctly * Dispatch __internalInitializePaymentStore in selector tests * Update selector name to __internalUpdateAvailablePaymentMethods * Remove check for editor when registering checkout store * Add check for when express payment methods have updated too * Ensure billingAddress key exists in canMakePayment arg * Use editor context to know if we're in editor * Updated readme.txt * Reverted stable tag change on readme.txt * Testing instructions * Cleaned out testing instructions * Bumping version strings to new version. * Empty commit for release pull request * Testing instructions * package-lock.json version bump * Revert "Fix `useForcedLayout` to re-select inner blocks after we manually insert one (#6676)" (#7447) This reverts commit 1564de2. * Testing zip * Bumping version strings to new version. * add testing instructions * upload a new zip file * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506) * Use theme's body background color as the mini cart contents default background color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525) * Fix inconsistent button styling with TT3 (#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles #7379 (#7515) * Fix Mini Cart Block global styles #7379 Fix Mini Cart Block global styles * add font_size * upload a new build Co-authored-by: github-actions <[email protected]> Co-authored-by: Paulo Arromba <[email protected]> Co-authored-by: Alex Florisca <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
* Empty commit for release pull request * Calculate cart totals after running extensions (#7490) * calculate cart totals afer running extensions * update totlas call in CartUpdateCustomer * test that cart is recalcing * Update changelog in readme * Add release testing notes * Update release date in readme * Bumping version strings to new version. * update readme * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506) * Use theme's body background color as the mini cart contents default background color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525) * Fix inconsistent button styling with TT3 (#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles #7379 (#7515) * Fix Mini Cart Block global styles #7379 Fix Mini Cart Block global styles * add font_size * upload a new build * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]>
* use full link for WordPress resources (#7211) Co-authored-by: Niels Lange <[email protected]> * Empty commit for release pull request * update readme * add testing instructions * add zip file link * update testing instructions and changelog entry * Bumping version strings to new version. * Empty commit for release pull request * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506) * Use theme's body background color as the mini cart contents default background color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525) * Fix inconsistent button styling with TT3 (#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles #7379 (#7515) * Fix Mini Cart Block global styles #7379 Fix Mini Cart Block global styles * add font_size * Empty commit for release pull request * add changelog and testing instructions * add zip link for testing * Bumping version strings to new version. Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
…ackground color (woocommerce#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]>
* Empty commit for release pull request * Added readme.txt changelog entry * Update HPOS compatibility snippet (woocommerce#7395) * 8.7.2 Testing notes * Update testing notes * Update testing notes * Bumped version * Refactor force billing: remove forcedBillingAddress from conditions for showBillingFields (woocommerce#7393) Co-authored-by: Niels Lange <[email protected]> * Updated testing instructions and changelog to include woocommerce#7393 * Updated testing zip * Bumping version strings to new version. * Empty commit for release pull request * Fix wrong keys being sent in `canMakePayment` and customer data showing in the Checkout block in the editor (woocommerce#7434) * Construct args for canMakePayment with correct keys * When the CheckoutEventsContext mounts, initialize payment store * Destructure useSelect correctly * Dispatch __internalInitializePaymentStore in selector tests * Update selector name to __internalUpdateAvailablePaymentMethods * Remove check for editor when registering checkout store * Add check for when express payment methods have updated too * Ensure billingAddress key exists in canMakePayment arg * Use editor context to know if we're in editor * Updated readme.txt * Reverted stable tag change on readme.txt * Testing instructions * Cleaned out testing instructions * Bumping version strings to new version. * Empty commit for release pull request * Testing instructions * package-lock.json version bump * Revert "Fix `useForcedLayout` to re-select inner blocks after we manually insert one (woocommerce#6676)" (woocommerce#7447) This reverts commit 1564de2. * Testing zip * Bumping version strings to new version. * add testing instructions * upload a new zip file * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506) * Use theme's body background color as the mini cart contents default background color (woocommerce#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (woocommerce#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525) * Fix inconsistent button styling with TT3 (woocommerce#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515) * Fix Mini Cart Block global styles woocommerce#7379 Fix Mini Cart Block global styles * add font_size * upload a new build Co-authored-by: github-actions <[email protected]> Co-authored-by: Paulo Arromba <[email protected]> Co-authored-by: Alex Florisca <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
* use full link for WordPress resources (woocommerce#7211) Co-authored-by: Niels Lange <[email protected]> * Empty commit for release pull request * update readme * add testing instructions * add zip file link * update testing instructions and changelog entry * Bumping version strings to new version. * Empty commit for release pull request * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506) * Use theme's body background color as the mini cart contents default background color (woocommerce#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (woocommerce#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525) * Fix inconsistent button styling with TT3 (woocommerce#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515) * Fix Mini Cart Block global styles woocommerce#7379 Fix Mini Cart Block global styles * add font_size * Empty commit for release pull request * add changelog and testing instructions * add zip link for testing * Bumping version strings to new version. Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
* Empty commit for release pull request * Calculate cart totals after running extensions (woocommerce#7490) * calculate cart totals afer running extensions * update totlas call in CartUpdateCustomer * test that cart is recalcing * Update changelog in readme * Add release testing notes * Update release date in readme * Bumping version strings to new version. * update readme * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506) * Use theme's body background color as the mini cart contents default background color (woocommerce#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (woocommerce#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525) * Fix inconsistent button styling with TT3 (woocommerce#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515) * Fix Mini Cart Block global styles woocommerce#7379 Fix Mini Cart Block global styles * add font_size * upload a new build * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]>
* use full link for WordPress resources (woocommerce#7211) Co-authored-by: Niels Lange <[email protected]> * Empty commit for release pull request * update readme * add testing instructions * add zip file link * update testing instructions and changelog entry * Bumping version strings to new version. * Empty commit for release pull request * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506) * Use theme's body background color as the mini cart contents default background color (woocommerce#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (woocommerce#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525) * Fix inconsistent button styling with TT3 (woocommerce#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515) * Fix Mini Cart Block global styles woocommerce#7379 Fix Mini Cart Block global styles * add font_size * Empty commit for release pull request * add changelog and testing instructions * add zip link for testing * Bumping version strings to new version. Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
* use full link for WordPress resources (woocommerce#7211) Co-authored-by: Niels Lange <[email protected]> * Empty commit for release pull request * update readme * add testing instructions * add zip file link * update testing instructions and changelog entry * Bumping version strings to new version. * Empty commit for release pull request * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506) * Use theme's body background color as the mini cart contents default background color (woocommerce#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (woocommerce#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525) * Fix inconsistent button styling with TT3 (woocommerce#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515) * Fix Mini Cart Block global styles woocommerce#7379 Fix Mini Cart Block global styles * add font_size * Empty commit for release pull request * add changelog and testing instructions * add zip link for testing * Bumping version strings to new version. Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
* Empty commit for release pull request * Added readme.txt changelog entry * Update HPOS compatibility snippet (#7395) * 8.7.2 Testing notes * Update testing notes * Update testing notes * Bumped version * Refactor force billing: remove forcedBillingAddress from conditions for showBillingFields (#7393) Co-authored-by: Niels Lange <[email protected]> * Updated testing instructions and changelog to include #7393 * Updated testing zip * Bumping version strings to new version. * Empty commit for release pull request * Fix wrong keys being sent in `canMakePayment` and customer data showing in the Checkout block in the editor (#7434) * Construct args for canMakePayment with correct keys * When the CheckoutEventsContext mounts, initialize payment store * Destructure useSelect correctly * Dispatch __internalInitializePaymentStore in selector tests * Update selector name to __internalUpdateAvailablePaymentMethods * Remove check for editor when registering checkout store * Add check for when express payment methods have updated too * Ensure billingAddress key exists in canMakePayment arg * Use editor context to know if we're in editor * Updated readme.txt * Reverted stable tag change on readme.txt * Testing instructions * Cleaned out testing instructions * Bumping version strings to new version. * Empty commit for release pull request * Testing instructions * package-lock.json version bump * Revert "Fix `useForcedLayout` to re-select inner blocks after we manually insert one (#6676)" (#7447) This reverts commit 1564de2. * Testing zip * Bumping version strings to new version. * add testing instructions * upload a new zip file * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506) * Use theme's body background color as the mini cart contents default background color (#7510) Co-authored-by: Albert Juhé Lluveras <[email protected]> * Price Slider: use `currentColor` for the slider (#7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]> * Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525) * Fix inconsistent button styling with TT3 (#7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles #7379 (#7515) * Fix Mini Cart Block global styles #7379 Fix Mini Cart Block global styles * add font_size * upload a new build * Bumping version strings to new version. * update changelog * Empty commit for release pull request * add testing instructions * update zip file link * Prevent Mini Cart loading the same script twice (#7794) Co-authored-by: github-actions <[email protected]> Co-authored-by: Paulo Arromba <[email protected]> Co-authored-by: Alex Florisca <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Niels Lange <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: EmptySet-Exe <[email protected]>
Fixes #7501
This PR introduces an alternative approach to #7503. Instead of fixing the mini cart contents background per theme basis, we get the background color of the body element and use it as the default background color:
getComputedStyle
..editor-styles-wrapper
element. By doing so, the Mini Cart Contents background works when users change the preset style.Screenshots
Screen.Recording.2022-10-28.at.10.58.35.mov
Testing
Automated Tests
User Facing Testing
Edit Mini Cart template part
in the sidebar. That will open the template editor.WooCommerce Visibility
Changelog