From 5013715ee940bb4413b47e0c8476fbb7c84e9f50 Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Fri, 23 Sep 2022 12:02:05 +0100 Subject: [PATCH 01/18] use full link for WordPress resources (#7211) Co-authored-by: Niels Lange --- src/AssetsController.php | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/AssetsController.php b/src/AssetsController.php index cf1e3260a3e..85990ba61b8 100644 --- a/src/AssetsController.php +++ b/src/AssetsController.php @@ -163,7 +163,7 @@ private function get_script_dependency_src_array( array $dependencies ) { $dependencies, function( $src, $handle ) use ( $wp_scripts ) { if ( isset( $wp_scripts->registered[ $handle ] ) ) { - $src[] = add_query_arg( 'ver', $wp_scripts->registered[ $handle ]->ver, $wp_scripts->registered[ $handle ]->src ); + $src[] = add_query_arg( 'ver', $wp_scripts->registered[ $handle ]->ver, $this->get_absolute_url( $wp_scripts->registered[ $handle ]->src ) ); $src = array_merge( $src, $this->get_script_dependency_src_array( $wp_scripts->registered[ $handle ]->deps ) ); } return $src; @@ -172,6 +172,20 @@ function( $src, $handle ) use ( $wp_scripts ) { ); } + /** + * Returns an absolute url to relative links for WordPress core scripts. + * + * @param string $src Original src that can be relative. + * @return string Correct full path string. + */ + private function get_absolute_url( $src ) { + $wp_scripts = wp_scripts(); + if ( ! preg_match( '|^(https?:)?//|', $src ) && ! ( $wp_scripts->content_url && 0 === strpos( $src, $wp_scripts->content_url ) ) ) { + $src = $wp_scripts->base_url . $src; + } + return $src; + } + /** * Add body classes to the frontend and within admin. * From 931c32505acc3fecca1c7ef56f8b8da97cd7d642 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 23 Sep 2022 11:35:54 +0000 Subject: [PATCH 02/18] Empty commit for release pull request From 2d98c303862216dca2449ebd33a3ccc77d1ac6d2 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 23 Sep 2022 13:46:06 +0200 Subject: [PATCH 03/18] update readme --- docs/internal-developers/testing/releases/README.md | 1 + readme.txt | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/docs/internal-developers/testing/releases/README.md b/docs/internal-developers/testing/releases/README.md index 436dec217ae..8c1592785f3 100644 --- a/docs/internal-developers/testing/releases/README.md +++ b/docs/internal-developers/testing/releases/README.md @@ -89,6 +89,7 @@ Every release includes specific testing instructions for new features and bug fi - [8.3.1](./831.md) - [8.4.0](./840.md) - [8.5.0](./850.md) + - [8.5.1](./851.md) diff --git a/readme.txt b/readme.txt index 022bd4dbff9..74df7d4fb2d 100644 --- a/readme.txt +++ b/readme.txt @@ -86,6 +86,12 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ == Changelog == += 8.5.1 - 2022-09-23 = + +#### Bug Fixes + +- Fix a bug in which resource hinting was breaking cart in subfolder installs. ([7211](https://github.com/woocommerce/woocommerce-blocks/pull/7211)) + = 8.5.0 - 2022-09-12 = #### Enhancements From b4c2308ee6f34a4a0c8f91d7166df31378c2bf1d Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 23 Sep 2022 13:46:31 +0200 Subject: [PATCH 04/18] add testing instructions --- docs/internal-developers/testing/releases/851.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 docs/internal-developers/testing/releases/851.md diff --git a/docs/internal-developers/testing/releases/851.md b/docs/internal-developers/testing/releases/851.md new file mode 100644 index 00000000000..87c4c93bd54 --- /dev/null +++ b/docs/internal-developers/testing/releases/851.md @@ -0,0 +1,13 @@ +# Testing notes and ZIP for release 8.5.1 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip]() + +## Feature plugin and package inclusion in WooCommerce + +### Fix a bug in which resource hinting was breaking cart in subfolder installs. ([7211](https://github.com/woocommerce/woocommerce-blocks/pull/7211)) + + +1. Add an item to cart. +2. Load any page, open source code. +3. You should not see any scripts loaded with a relative url. + From 29b527df916cf08191b5f265232e430be0cb6863 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 23 Sep 2022 13:50:17 +0200 Subject: [PATCH 05/18] add zip file link --- docs/internal-developers/testing/releases/851.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/internal-developers/testing/releases/851.md b/docs/internal-developers/testing/releases/851.md index 87c4c93bd54..2648a99945d 100644 --- a/docs/internal-developers/testing/releases/851.md +++ b/docs/internal-developers/testing/releases/851.md @@ -1,6 +1,6 @@ # Testing notes and ZIP for release 8.5.1 -Zip file for testing: [woocommerce-gutenberg-products-block.zip]() +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9633294/woocommerce-gutenberg-products-block.zip) ## Feature plugin and package inclusion in WooCommerce From e3262734a10a54b44dcf879451ce35f53b93c184 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 23 Sep 2022 14:19:26 +0200 Subject: [PATCH 06/18] update testing instructions and changelog entry --- docs/internal-developers/testing/releases/851.md | 8 ++++---- readme.txt | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/internal-developers/testing/releases/851.md b/docs/internal-developers/testing/releases/851.md index 2648a99945d..4d02ffc2bdd 100644 --- a/docs/internal-developers/testing/releases/851.md +++ b/docs/internal-developers/testing/releases/851.md @@ -7,7 +7,7 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github. ### Fix a bug in which resource hinting was breaking cart in subfolder installs. ([7211](https://github.com/woocommerce/woocommerce-blocks/pull/7211)) -1. Add an item to cart. -2. Load any page, open source code. -3. You should not see any scripts loaded with a relative url. - +1. Make sure Gutenberg is disabled. +2. Add an item to cart. +3. Go to any frontend page, and view the page source. +4. In that source page, search for scripts starting with `/wp-includes`, you shouldn't see any relative links in them, e.g. /wp-includes/js/dist/vendor/lodash.min.js, but that everything starts with a full link, e.g. . diff --git a/readme.txt b/readme.txt index 74df7d4fb2d..2412ce57f41 100644 --- a/readme.txt +++ b/readme.txt @@ -90,7 +90,7 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ #### Bug Fixes -- Fix a bug in which resource hinting was breaking cart in subfolder installs. ([7211](https://github.com/woocommerce/woocommerce-blocks/pull/7211)) +- Ensure that scripts are loaded using absolute URLs to prevent loading issues with subfolder installs. ([7211](https://github.com/woocommerce/woocommerce-blocks/pull/7211)) = 8.5.0 - 2022-09-12 = From e649177b334e391f087841dcca4ec34d4f24e3f2 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 23 Sep 2022 14:24:31 +0200 Subject: [PATCH 07/18] Bumping version strings to new version. --- package.json | 2 +- readme.txt | 2 +- src/Package.php | 2 +- woocommerce-gutenberg-products-block.php | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d57b8ab35bb..44a58587895 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@woocommerce/block-library", "title": "WooCommerce Blocks", "author": "Automattic", - "version": "8.5.0", + "version": "8.5.1", "description": "WooCommerce blocks for the Gutenberg editor.", "homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/", "keywords": [ diff --git a/readme.txt b/readme.txt index 2412ce57f41..671bfaebc5f 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: gutenberg, woocommerce, woo commerce, products, blocks, woocommerce blocks Requires at least: 6.0 Tested up to: 6.0 Requires PHP: 7.0 -Stable tag: 8.5.0 +Stable tag: 8.5.1 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html diff --git a/src/Package.php b/src/Package.php index 7ff4ce97595..2b195c25643 100644 --- a/src/Package.php +++ b/src/Package.php @@ -115,7 +115,7 @@ public static function container( $reset = false ) { NewPackage::class, function ( $container ) { // leave for automated version bumping. - $version = '8.5.0'; + $version = '8.5.1'; return new NewPackage( $version, dirname( __DIR__ ), diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php index dfd4b47ae3a..70ba3836a7f 100644 --- a/woocommerce-gutenberg-products-block.php +++ b/woocommerce-gutenberg-products-block.php @@ -3,7 +3,7 @@ * Plugin Name: WooCommerce Blocks * Plugin URI: https://github.com/woocommerce/woocommerce-gutenberg-products-block * Description: WooCommerce blocks for the Gutenberg editor. - * Version: 8.5.0 + * Version: 8.5.1 * Author: Automattic * Author URI: https://woocommerce.com * Text Domain: woo-gutenberg-products-block From 01e73c9f5e42226a8aa7b3f33f34ff3b5bb47efe Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 31 Oct 2022 11:11:57 +0000 Subject: [PATCH 08/18] Empty commit for release pull request From 3b9fa55ffe38101389893e2744d6bc2152ae420c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 27 Oct 2022 17:09:02 +0200 Subject: [PATCH 09/18] Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506) --- assets/js/base/components/form-token-field/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/js/base/components/form-token-field/style.scss b/assets/js/base/components/form-token-field/style.scss index 99039401dfb..c7cc77fce68 100644 --- a/assets/js/base/components/form-token-field/style.scss +++ b/assets/js/base/components/form-token-field/style.scss @@ -16,8 +16,10 @@ } .components-form-token-field__input-container { + background-color: #fff; border-radius: 0; box-shadow: none; + color: #000; position: relative; input[type="text"].components-form-token-field__input { @@ -64,6 +66,7 @@ margin-right: 0; position: relative; width: 100%; + z-index: 1; } .components-form-token-field__remove-token.components-button, From dc36fc653ea4ec2a95eb30fa5b44f61eb791b7bc Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 28 Oct 2022 22:30:51 +0700 Subject: [PATCH 10/18] Use theme's body background color as the mini cart contents default background color (#7510) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Albert Juhé Lluveras --- assets/js/blocks/mini-cart/frontend.ts | 21 ++++++++ .../mini-cart/mini-cart-contents/edit.tsx | 54 +++++++++++++++++++ assets/js/blocks/mini-cart/style.scss | 4 +- 3 files changed, 78 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/mini-cart/frontend.ts b/assets/js/blocks/mini-cart/frontend.ts index f2be8c8f6ca..ccc68cdbf3a 100644 --- a/assets/js/blocks/mini-cart/frontend.ts +++ b/assets/js/blocks/mini-cart/frontend.ts @@ -152,4 +152,25 @@ window.addEventListener( 'load', () => { ); } } ); + + /** + * Get the background color of the body then set it as the background color + * of the Mini Cart Contents block. We use :where here to make customized + * background color alway have higher priority. + * + * We only set the background color, instead of the whole background. As + * we only provide the option to customize the background color. + */ + const style = document.createElement( 'style' ); + const backgroundColor = getComputedStyle( document.body ).backgroundColor; + + style.appendChild( + document.createTextNode( + `:where(.wp-block-woocommerce-mini-cart-contents) { + background-color: ${ backgroundColor }; + }` + ) + ); + + document.head.appendChild( style ); } ); diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx index d6350ac23f7..c1d57e09590 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx +++ b/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx @@ -13,6 +13,7 @@ import { filledCart, removeCart } from '@woocommerce/icons'; import { Icon } from '@wordpress/icons'; import { EditorProvider } from '@woocommerce/base-context'; import type { TemplateArray } from '@wordpress/blocks'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -73,6 +74,59 @@ const Edit = ( { clientId }: Props ): ReactElement => { defaultTemplate, } ); + /** + * This is a workaround for the Site Editor to set the correct + * background color of the Mini Cart Contents block base on + * the main background color set by the theme. + */ + useEffect( () => { + const canvasEl = document.querySelector( + '.edit-site-visual-editor__editor-canvas' + ); + if ( ! ( canvasEl instanceof HTMLIFrameElement ) ) { + return; + } + const canvas = + canvasEl.contentDocument || canvasEl.contentWindow?.document; + if ( ! canvas ) { + return; + } + if ( canvas.getElementById( 'mini-cart-contents-background-color' ) ) { + return; + } + const styles = canvas.querySelectorAll( 'style' ); + const [ cssRule ] = Array.from( styles ) + .map( ( style ) => Array.from( style.sheet?.cssRules || [] ) ) + .flatMap( ( style ) => style ) + .filter( Boolean ) + .filter( + ( rule ) => + rule.selectorText === '.editor-styles-wrapper' && + rule.style.backgroundColor + ); + if ( ! cssRule ) { + return; + } + const backgroundColor = cssRule.style.backgroundColor; + if ( ! backgroundColor ) { + return; + } + const style = document.createElement( 'style' ); + style.id = 'mini-cart-contents-background-color'; + style.appendChild( + document.createTextNode( + `:where(.wp-block-woocommerce-mini-cart-contents) { + background-color: ${ backgroundColor }; + }` + ) + ); + const body = canvas.querySelector( '.editor-styles-wrapper' ); + if ( ! body ) { + return; + } + body.appendChild( style ); + }, [] ); + return (
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index a9887467521..5cbee353b43 100644 --- a/assets/js/blocks/mini-cart/style.scss +++ b/assets/js/blocks/mini-cart/style.scss @@ -64,12 +64,14 @@ } .wp-block-woocommerce-mini-cart-contents { - background: #fff; box-sizing: border-box; height: 100vh; padding: 0; justify-content: center; } +:where(.wp-block-woocommerce-mini-cart-contents) { + background: #fff; +} .wp-block-woocommerce-empty-mini-cart-contents-block, .wp-block-woocommerce-filled-mini-cart-contents-block { From c6d8a083b65370e13f759afbdcce8a7715190446 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 28 Oct 2022 17:53:25 +0200 Subject: [PATCH 11/18] 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 <46509186+EmptySet-Exe@users.noreply.github.com> Co-authored-by: Niels Lange --- .../base/components/price-slider/style.scss | 68 +++---------------- 1 file changed, 10 insertions(+), 58 deletions(-) diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss index ef82faa621c..73f9c8b70df 100644 --- a/assets/js/base/components/price-slider/style.scss +++ b/assets/js/base/components/price-slider/style.scss @@ -1,6 +1,6 @@ -/* stylelint-disable */ + @mixin thumb { - background-color: transparent; + background: $white; background-position: 0 0; box-sizing: content-box; width: 12px; @@ -13,12 +13,10 @@ cursor: pointer; z-index: 20; pointer-events: auto; - background: $white; - transition: transform .2s ease-in-out; + transition: transform 0.2s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; - &:hover { @include thumbFocus; } @@ -26,12 +24,14 @@ @mixin thumbFocus { background: $gray-900; + border-color: $white; } -/* stylelint-enable */ + @mixin track { cursor: default; - height: 1px; /* Required for Samsung internet based browsers */ + height: 1px; + /* Required for Samsung internet based browsers */ outline: 0; -webkit-appearance: none; -moz-appearance: none; @@ -54,7 +54,6 @@ .wc-block-components-price-slider { margin-bottom: $gap-large; - &.is-loading.is-disabled { .wc-block-components-price-slider__range-input-wrapper, .wc-block-components-filter-reset-button, @@ -62,12 +61,10 @@ @include placeholder(); box-shadow: none; } - .wc-block-components-price-slider__amount { display: none; } } - &.is-disabled:not(.is-loading) { .wc-block-components-price-slider__range-input-wrapper, .wc-block-components-price-slider__amount, @@ -86,7 +83,6 @@ height: 4px; margin: 15px 0; position: relative; - &.is-loading { @include placeholder(); height: em(9px); @@ -101,7 +97,7 @@ top: 0; width: 100%; --track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%; - --range-color: #{$gray-900}; + --range-color: currentColor; /*rtl:ignore*/ background: var(--track-background); } @@ -112,7 +108,6 @@ gap: $gap-smaller; justify-content: space-between; margin: $gap 0; - .wc-block-components-price-slider__amount { margin: 0; border-radius: 4px; @@ -121,11 +116,9 @@ max-width: 80px; min-width: 0; padding: $gap-smaller; - .wc-block-components-price-slider--is-input-inline & { max-width: 60px; } - &.is-loading { @include placeholder(); border-radius: 0 !important; @@ -146,7 +139,6 @@ display: flex; gap: $gap; justify-content: flex-end; - // The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop. button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button { margin-top: 0; @@ -165,85 +157,66 @@ position: absolute; left: 0; top: 0; - &::-webkit-slider-runnable-track { @include track; } - &::-webkit-slider-thumb { @include thumb; margin: -5px 0 0 0; } - &::-webkit-slider-progress { @include reset; } - &::-moz-focus-outer { border: 0; } - &::-moz-range-track { @include track; } - &::-moz-range-progress { @include reset; } - &::-moz-range-thumb { @include thumb; } - &::-ms-thumb { @include thumb; } - &:focus { &::-webkit-slider-thumb { @include thumbFocus; } - &::-moz-range-thumb { @include thumbFocus; } - &::-ms-thumb { @include thumbFocus; } } - &.wc-block-components-price-slider__range-input--min { z-index: 21; - &::-webkit-slider-thumb { margin-left: -2px; background-position-x: left; } - &::-moz-range-thumb { background-position-x: left; transform: translate(-2px, 2px); } - &::-ms-thumb { background-position-x: left; } } - &.wc-block-components-price-slider__range-input--max { z-index: 20; - &::-webkit-slider-thumb { background-position-x: right; margin-left: 2px; } - &::-moz-range-thumb { background-position-x: right; transform: translate(2px, 2px); } - &::-ms-thumb { background-position-x: right; } @@ -272,32 +245,25 @@ .wc-block-components-price-slider__range-input { height: 24px; pointer-events: auto; - &::-ms-track { /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ background: transparent; - /*leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; border-width: 7px 0; - /*remove default tick marks*/ color: transparent; } - &::-ms-fill-lower { background: #e1e1e1; box-shadow: 0 0 0 1px inset #b8b8b8; } - &::-ms-fill-upper { background: transparent; } - &::-ms-tooltip { display: none; } - &::-ms-thumb { transform: translate(1px, 0); pointer-events: auto; @@ -308,12 +274,10 @@ background: #e1e1e1; box-shadow: 0 0 0 1px inset #b8b8b8; } - &::-ms-fill-lower { background: transparent; } } - .wc-block-components-price-slider { &.is-loading.is-disabled { .wc-block-components-price-slider__range-input-wrapper { @@ -321,7 +285,6 @@ box-shadow: none; } } - &.is-disabled:not(.is-loading) { .wc-block-components-price-slider__range-input-wrapper { animation: none; @@ -330,7 +293,9 @@ } } + /* IE 11 will not support multi-range slider due to poor pointer-events support on the thumb. Reverts to 2 sliders. */ + @include ie11() { @include ie-fixes(); } @@ -342,55 +307,44 @@ .theme-twentytwentyone { $border-width: 3px; - .wc-block-components-price-slider__range-input-wrapper { background: transparent; border: $border-width solid currentColor; box-sizing: border-box; } - .wc-block-components-price-slider__range-input-progress { --range-color: currentColor; margin: -$border-width; } - .wc-block-price-filter__range-input { background: transparent; margin: -$border-width; width: calc(100% + #{$border-width * 2}); - &:hover, &:focus { &::-webkit-slider-thumb { filter: none; } - &::-moz-range-thumb { filter: none; } - &::-ms-thumb { filter: none; } } - &::-webkit-slider-thumb { margin-top: -9px; } - &.wc-block-components-price-slider__range-input--max::-moz-range-thumb { transform: translate(2px, 1px); } - &.wc-block-components-price-slider__range-input--min::-moz-range-thumb { transform: translate(-2px, 1px); } - &::-ms-track { border-color: transparent !important; } } - @include ie11() { .wc-block-components-price-slider__range-input-wrapper { border: 0; @@ -398,11 +352,9 @@ position: relative; height: 50px; } - .wc-block-components-price-slider__range-input-progress { display: none; } - .wc-block-price-filter__range-input { height: 100%; margin: 0; From 652f3db23bf19728a9783664aa10c059be83595b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Fri, 28 Oct 2022 18:39:06 +0200 Subject: [PATCH 12/18] Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525) --- assets/js/base/components/price-slider/style.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss index 73f9c8b70df..4a19905df88 100644 --- a/assets/js/base/components/price-slider/style.scss +++ b/assets/js/base/components/price-slider/style.scss @@ -76,13 +76,25 @@ .wc-block-components-price-slider__range-input-wrapper { @include reset; - background: $gray-300; + background: transparent; border-radius: 4px; clear: both; flex-grow: 1; height: 4px; margin: 15px 0; position: relative; + + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: currentColor; + opacity: 0.2; + } + &.is-loading { @include placeholder(); height: em(9px); From f601de4ee112ee317615fa1d4ec5b9ffa44c702c Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 28 Oct 2022 19:07:56 +0200 Subject: [PATCH 13/18] 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 --- assets/js/atomic/blocks/product-elements/button/block.js | 2 ++ src/BlockTypes/AbstractProductGrid.php | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/js/atomic/blocks/product-elements/button/block.js b/assets/js/atomic/blocks/product-elements/button/block.js index 4283ae68c7d..7bfe716d3e4 100644 --- a/assets/js/atomic/blocks/product-elements/button/block.js +++ b/assets/js/atomic/blocks/product-elements/button/block.js @@ -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, @@ -206,6 +207,7 @@ const AddToCartButtonPlaceholder = ( {