Cover block: fix CSS to avoid braking legacy blocks with fixed backgr…

…ound
WordPress · Apr 22, 2022 · d491a14 · d491a14
1 parent 12ef2e0
commit d491a14
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -192,28 +192,33 @@
 		outline: none;
 		border: none;
 		box-shadow: none;
+	}
+}
 
-		&.has-parallax {
-			background-attachment: fixed;
-
-			// Mobile Safari does not support fixed background attachment properly.
-			// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
-			// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-			@supports (-webkit-overflow-scrolling: touch) {
-				background-attachment: scroll;
-			}
+.wp-block-cover-image,
+.wp-block-cover,
+.wp-block-cover__image-background,
+video.wp-block-cover__video-background {
+	&.has-parallax {
+		background-attachment: fixed;
 
-			// Remove the appearance of scrolling based on OS-level animation preferences.
-			@media (prefers-reduced-motion: reduce) {
-				background-attachment: scroll;
-			}
+		// Mobile Safari does not support fixed background attachment properly.
+		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
+		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
+		@supports (-webkit-overflow-scrolling: touch) {
+			background-attachment: scroll;
 		}
 
-		&.is-repeated {
-			background-repeat: repeat;
-			background-size: auto;
+		// Remove the appearance of scrolling based on OS-level animation preferences.
+		@media (prefers-reduced-motion: reduce) {
+			background-attachment: scroll;
 		}
 	}
+
+	&.is-repeated {
+		background-repeat: repeat;
+		background-size: auto;
+	}
 }
 
 .wp-block-cover__video-background {