From 39617d81166021be3c9d3bbf32d09484314fb518 Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Wed, 14 Sep 2022 22:31:19 +0000 Subject: [PATCH] Twenty Twenty-One: Remove WooCommerce related CSS selectors. The selectors for Twenty Twenty-One's default `max-width` have used the `.woocommerce` class since the theme's [https://github.com/WordPress/twentytwentyone/commit/956a3172a41545ca04a133c034b47ae870a4a9cd#diff-b757cb999144a1bc7e14604bc6d4bab7d87ea1a3bf5000c33937e490d75b9d92R3-R9 initial commit]. This changeset removes all WooCommerce CSS selector from the theme, as they would need to be supported forever. The change was tested with WooCommerce installed and no issues were raised. Props sabernhardt, audrasjb, davidbaumwald, tahmidulkarim, mukesh27. Fixes #56366. git-svn-id: https://develop.svn.wordpress.org/trunk@54170 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentytwentyone/assets/css/ie.css | 12 ++++++------ .../assets/sass/05-blocks/utilities/_style.scss | 4 ++-- src/wp-content/themes/twentytwentyone/style-rtl.css | 4 ++-- src/wp-content/themes/twentytwentyone/style.css | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css index 66f010512b758..8ed4b2e29acb5 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -516,38 +516,38 @@ template { } } -.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: calc(100vw - 30px); margin-left: auto; margin-right: auto; } @media only screen and (min-width: 482px) { - .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { + .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: min(calc(100vw - 100px), 610px); } } @media only screen and (min-width: 822px) { - .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { + .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: min(calc(100vw - 200px), 610px); } } -*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { +*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: calc(100vw - 30px); margin-left: auto; margin-right: auto; } @media only screen and (min-width: 482px) { - *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { + *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: min(calc(100vw - 100px), 610px); } } @media only screen and (min-width: 822px) { - *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { + *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: min(calc(100vw - 200px), 610px); } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss index 07d06d2e238aa..b747a2fda0e54 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss @@ -3,8 +3,8 @@ /** * These selectors set the default max width for content appearing inside a post or page. */ -.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), -*[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), +*[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { @extend %responsive-aligndefault-width; } diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css index 62fd8d6008993..d1ae63bd11d8a 100644 --- a/src/wp-content/themes/twentytwentyone/style-rtl.css +++ b/src/wp-content/themes/twentytwentyone/style-rtl.css @@ -693,8 +693,8 @@ template { */ .post-thumbnail, .entry-content .wp-audio-shortcode, -.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), -*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), +*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width { max-width: var(--responsive--aligndefault-width); margin-right: auto; diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css index d48b7a4929266..a6be5688ea82c 100644 --- a/src/wp-content/themes/twentytwentyone/style.css +++ b/src/wp-content/themes/twentytwentyone/style.css @@ -693,8 +693,8 @@ template { */ .post-thumbnail, .entry-content .wp-audio-shortcode, -.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), -*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), +*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width { max-width: var(--responsive--aligndefault-width); margin-left: auto;