Twenty Twenty-One: Reverse logic for `prefers-reduced-motion` media query.

Reverse the logic of the `prefers-reduced-motion` to enable transitions based on `no-preference` rather than disable them based on the `reduce` preference. This removes the need to disable transitions with the `! important` tag and unintended interactions with plugins as a result.

Props gregoiresailland, sabernhardt, ryokuhi.
Fixes #54174.


Built from https://develop.svn.wordpress.org/trunk@52835


git-svn-id: http://core.svn.wordpress.org/trunk@52424 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -5964,9 +5964,14 @@ h1.page-title {
 	padding-right: 20px;
 	padding-bottom: 25px;
 	background-color: #d1e4dd;
-	transition: all 0.15s ease-in-out;
 	transform: translateY(30px);
 }
+@media (prefers-reduced-motion: no-preference) {
+
+	.primary-navigation > .primary-menu-container {
+		transition: all 0.15s ease-in-out;
+	}
+}
 @media only screen and (max-width: 481px) {
 
 	.primary-navigation > .primary-menu-container {
@@ -6148,6 +6153,12 @@ h1.page-title {
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
+@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
+
+	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
+		transition: all 0.5s ease;
+	}
+}
 @media only screen and (min-width: 482px) {
 
 	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@@ -6157,7 +6168,6 @@ h1.page-title {
 		position: absolute;
 		top: 100%;
 		padding-top: 3px;
-		transition: all 0.5s ease;
 		z-index: 88888;
 	}
 
@@ -6438,7 +6448,6 @@ h1.page-title {
 
 .footer-navigation-wrapper li a {
 	padding: 17px 13px;
-	transition: transform 0.1s ease;
 	color: #28303d;
 }
 
@@ -6477,6 +6486,12 @@ h1.page-title {
 .footer-navigation-wrapper li .svg-icon:hover {
 	transform: scale(1.1);
 }
+@media (prefers-reduced-motion: no-preference) {
+
+	.footer-navigation-wrapper li .svg-icon {
+		transition: transform 0.1s ease;
+	}
+}
 
 .footer-navigation-wrapper .sub-menu-toggle,
 .footer-navigation-wrapper .menu-item-description {
@@ -6986,14 +7001,6 @@ h1.page-title {
 	outline: 0;
 }
 
-@media (prefers-reduced-motion) {
-
-	* {
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
-}
-
 .has-black-color[class] {
 	color: #000;
 }

wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

@@ -49,7 +49,6 @@
 		position: fixed;
 		bottom: 5px;
 		left: 5px;
-		transition: bottom 0.5s;
 	}
 
 	#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
@@ -106,3 +105,9 @@
 		display: none;
 	}
 }
+@media only screen and (prefers-reduced-motion: no-preference) {
+
+	#dark-mode-toggler.fixed-bottom {
+		transition: bottom 0.5s;
+	}
+}

wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

@@ -49,7 +49,6 @@
 		position: fixed;
 		bottom: 5px;
 		right: 5px;
-		transition: bottom 0.5s;
 	}
 
 	#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
@@ -106,3 +105,9 @@
 		display: none;
 	}
 }
+@media only screen and (prefers-reduced-motion: no-preference) {
+
+	#dark-mode-toggler.fixed-bottom {
+		transition: bottom 0.5s;
+	}
+}

wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss

@@ -21,7 +21,6 @@
 
 		a {
 			padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
-			transition: transform 0.1s ease;
 			color: var(--footer--color-link);
 
 			&:link,
@@ -63,6 +62,10 @@
 			&:hover {
 				transform: scale(1.1);
 			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform 0.1s ease;
+			}
 		}
 	}
 

wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss

@@ -101,9 +101,12 @@
 		padding-right: var(--global--spacing-unit);
 		padding-bottom: var(--global--spacing-horizontal);
 		background-color: var(--global--color-background);
-		transition: all .15s ease-in-out;
 		transform: translateY(var(--global--spacing-vertical));
 
+		@media (prefers-reduced-motion: no-preference) {
+			transition: all .15s ease-in-out;
+		}
+
 		@include media(mobile-only) {
 			height: 100vh;
 			z-index: 499;
@@ -278,6 +281,12 @@
 
 			position: relative;
 
+			@include media(mobile) {
+				@media (prefers-reduced-motion: no-preference) {
+					transition: all 0.5s ease;
+				}
+			}
+
 			@include media(mobile) {
 				left: 0;
 				margin: 0;
@@ -285,7 +294,6 @@
 				position: absolute;
 				top: 100%;
 				padding-top: 3px;
-				transition: all 0.5s ease;
 				z-index: 88888;
 
 				&:before,

wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss

@@ -38,11 +38,3 @@
 #content[tabindex="-1"]:focus {
 	outline: 0;
 }
-
-@media (prefers-reduced-motion) {
-
-	* {
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
-}

wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

@@ -46,9 +46,8 @@
 
 		&.fixed-bottom {
 			position: fixed;
-			bottom: 5px;
+			bottom: 5px; // The bottom property has transition (see below).
 			right: 5px;
-			transition: bottom 0.5s;
 
 			&.hide:not(:focus) {
 				bottom: -80px;
@@ -97,5 +96,11 @@
 		.is-IE & {
 			display: none;
 		}
+
+		&.fixed-bottom {
+			@media (prefers-reduced-motion: no-preference) {
+				transition: bottom 0.5s;
+			}
+		}
 	}
 }

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

@@ -4692,9 +4692,14 @@ h1.page-title {
 	padding-left: var(--global--spacing-unit);
 	padding-bottom: var(--global--spacing-horizontal);
 	background-color: var(--global--color-background);
-	transition: all 0.15s ease-in-out;
 	transform: translateY(var(--global--spacing-vertical));
 }
+@media (prefers-reduced-motion: no-preference) {
+
+	.primary-navigation > .primary-menu-container {
+		transition: all 0.15s ease-in-out;
+	}
+}
 @media only screen and (max-width: 481px) {
 
 	.primary-navigation > .primary-menu-container {
@@ -4864,6 +4869,12 @@ h1.page-title {
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
+@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
+
+	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
+		transition: all 0.5s ease;
+	}
+}
 @media only screen and (min-width: 482px) {
 
 	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@@ -4873,7 +4884,6 @@ h1.page-title {
 		position: absolute;
 		top: 100%;
 		padding-top: 3px;
-		transition: all 0.5s ease;
 		z-index: 88888;
 	}
 
@@ -5105,7 +5115,6 @@ h1.page-title {
 
 .footer-navigation-wrapper li a {
 	padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
-	transition: transform 0.1s ease;
 	color: var(--footer--color-link);
 }
 
@@ -5138,6 +5147,12 @@ h1.page-title {
 .footer-navigation-wrapper li .svg-icon:hover {
 	transform: scale(1.1);
 }
+@media (prefers-reduced-motion: no-preference) {
+
+	.footer-navigation-wrapper li .svg-icon {
+		transition: transform 0.1s ease;
+	}
+}
 
 .footer-navigation-wrapper .sub-menu-toggle,
 .footer-navigation-wrapper .menu-item-description {
@@ -5594,14 +5609,6 @@ h1.page-title {
 	outline: 0;
 }
 
-@media (prefers-reduced-motion) {
-
-	* {
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
-}
-
 .has-black-color[class] {
 	color: var(--global--color-black);
 }

wp-content/themes/twentytwentyone/style.css

@@ -4712,9 +4712,14 @@ h1.page-title {
 	padding-right: var(--global--spacing-unit);
 	padding-bottom: var(--global--spacing-horizontal);
 	background-color: var(--global--color-background);
-	transition: all 0.15s ease-in-out;
 	transform: translateY(var(--global--spacing-vertical));
 }
+@media (prefers-reduced-motion: no-preference) {
+
+	.primary-navigation > .primary-menu-container {
+		transition: all 0.15s ease-in-out;
+	}
+}
 @media only screen and (max-width: 481px) {
 
 	.primary-navigation > .primary-menu-container {
@@ -4884,6 +4889,12 @@ h1.page-title {
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
+@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
+
+	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
+		transition: all 0.5s ease;
+	}
+}
 @media only screen and (min-width: 482px) {
 
 	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@@ -4893,7 +4904,6 @@ h1.page-title {
 		position: absolute;
 		top: 100%;
 		padding-top: 3px;
-		transition: all 0.5s ease;
 		z-index: 88888;
 	}
 
@@ -5141,7 +5151,6 @@ h1.page-title {
 
 .footer-navigation-wrapper li a {
 	padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
-	transition: transform 0.1s ease;
 	color: var(--footer--color-link);
 }
 
@@ -5174,6 +5183,12 @@ h1.page-title {
 .footer-navigation-wrapper li .svg-icon:hover {
 	transform: scale(1.1);
 }
+@media (prefers-reduced-motion: no-preference) {
+
+	.footer-navigation-wrapper li .svg-icon {
+		transition: transform 0.1s ease;
+	}
+}
 
 .footer-navigation-wrapper .sub-menu-toggle,
 .footer-navigation-wrapper .menu-item-description {
@@ -5630,14 +5645,6 @@ h1.page-title {
 	outline: 0;
 }
 
-@media (prefers-reduced-motion) {
-
-	* {
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
-}
-
 .has-black-color[class] {
 	color: var(--global--color-black);
 }

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.0-alpha-52834';
+$wp_version = '6.0-alpha-52835';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.