Commit 3c7a082ae6 for woocommerce
commit 3c7a082ae6a5451ca24a11a50943a136d4cafc94
Author: Luigi Teschio <gigitux@gmail.com>
Date: Thu Apr 24 09:46:38 2025 +0200
Product Button Block: increase CSS specificity (#57481)
* Product Button Block: increase CSS specificity
* Add changefile(s) from automation for the following project(s): woocommerce
* fix lint error
* lint code
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Vladimir Reznichenko <kalessil@gmail.com>
diff --git a/plugins/woocommerce/changelog/57481-wooplug-4047-product-button-block-styles-include-styles-that-affect-all b/plugins/woocommerce/changelog/57481-wooplug-4047-product-button-block-styles-include-styles-that-affect-all
new file mode 100644
index 0000000000..5c30d4b326
--- /dev/null
+++ b/plugins/woocommerce/changelog/57481-wooplug-4047-product-button-block-styles-include-styles-that-affect-all
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Product Button Block: increase CSS specificity.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/style.scss b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/style.scss
index ad860d5bf0..0ea6494b88 100644
--- a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/style.scss
@@ -7,6 +7,37 @@
align-items: center;
gap: $gap-small;
+ // Style: Fill & Outline
+ &.is-style-outline {
+ .wp-block-button__link {
+ border: 2px solid currentColor;
+
+ &:not(.has-text-color) {
+ color: currentColor;
+ }
+
+ &:not(.has-background) {
+ background-color: transparent;
+ background-image: none;
+ }
+ }
+ }
+
+ // Width setting
+ &.has-custom-width {
+ .wp-block-button__link {
+ box-sizing: border-box;
+ }
+ }
+
+ @for $i from 1 through 4 {
+ &.wp-block-button__width-#{$i * 25} {
+ .wp-block-button__link {
+ width: $i * 25%; // 25%, 50%, 75%, 100%
+ }
+ }
+ }
+
.wp-block-button__link {
word-break: break-word;
white-space: normal;
@@ -91,36 +122,3 @@
border-color: var(--button--color-background);
}
}
-
-// Style: Fill & Outline
-.wp-block-button.is-style-outline {
- .wp-block-button__link {
- border: 2px solid currentColor;
-
- &:not(.has-text-color) {
- color: currentColor;
- }
-
- &:not(.has-background) {
- background-color: transparent;
- background-image: none;
- }
- }
-}
-
-// Width setting
-.wp-block-button {
- &.has-custom-width {
- .wp-block-button__link {
- box-sizing: border-box;
- }
- }
-
- @for $i from 1 through 4 {
- &.wp-block-button__width-#{$i * 25} {
- .wp-block-button__link {
- width: $i * 25%; // 25%, 50%, 75%, 100%
- }
- }
- }
-}