Changeset 54170

Timestamp:

09/14/2022 10:31:19 PM (4 years ago)

Author:

audrasjb

Message:

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 ​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.

Location:

trunk/src/wp-content/themes/twentytwentyone

Files:

• assets/css/ie.css (modified) (5 diffs)
• assets/sass/05-blocks/utilities/_style.scss (modified) (1 diff)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -517 +517 @@
 }
 
-.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;
@@ -524 +524 @@
 @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);
         }
@@ -530 +530 @@
 @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;
@@ -542 +542 @@
 @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);
         }
@@ -548 +548 @@
 @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);
         }

trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss

@@ -4 +4 @@
  * 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;
 }

trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

@@ -694 +694 @@
 .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);

trunk/src/wp-content/themes/twentytwentyone/style.css

@@ -694 +694 @@
 .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);