Merge pull request #1833 from SohamPatel46/feat/use-media-queries-in-…

…range Use CSS range syntax in media queries
WordPress · Feb 4, 2025 · 2fa59f0 · 2fa59f0
2 parents 5a1e472 + 4c01373
commit 2fa59f0
Show file tree

Hide file tree

Showing 39 changed files with 217 additions and 156 deletions.
diff --git a/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php b/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php
@@ -185,12 +185,21 @@ private function reduce_layout_shifts( OD_Tag_Visitor_Context $context ): void {
 
 			$style_rules = array();
 			foreach ( $minimums as $minimum ) {
-				$style_rules[] = sprintf(
-					'@media %s { #%s { min-height: %dpx; } }',
-					od_generate_media_query( $minimum['group']->get_minimum_viewport_width(), $minimum['group']->get_maximum_viewport_width() ),
+				$style_rule = sprintf(
+					'#%s { min-height: %dpx; }',
 					$element_id,
 					$minimum['height']
 				);
+
+				$media_feature = od_generate_media_query( $minimum['group']->get_minimum_viewport_width(), $minimum['group']->get_maximum_viewport_width() );
+				if ( null !== $media_feature ) {
+					$style_rule = sprintf(
+						'@media %s { %s }',
+						$media_feature,
+						$style_rule
+					);
+				}
+				$style_rules[] = $style_rule;
 			}
 
 			$processor->append_head_html( sprintf( "<style>\n%s\n</style>\n", join( "\n", $style_rules ) ) );

diff --git a/plugins/embed-optimizer/tests/test-cases/all-embeds-inside-viewport/expected.html b/plugins/embed-optimizer/tests/test-cases/all-embeds-inside-viewport/expected.html
diff --git a/plugins/embed-optimizer/tests/test-cases/nested-figure-embed/expected.html b/plugins/embed-optimizer/tests/test-cases/nested-figure-embed/expected.html
diff --git a/...sts/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script/expected.html b/...sts/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script/expected.html
diff --git a/...bed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-one-group/buffer.html b/...bed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-one-group/buffer.html
@@ -0,0 +1,16 @@
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>...</title>
+	</head>
+	<body>
+		<div class="wp-site-blocks">
+			<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
+				<div class="wp-block-embed__wrapper">
+					<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">We want your feedback for the Privacy Sandbox 📨<br><br>Learn why your feedback is critical through real examples and learn how to provide it ↓ <a href="https://t.co/anGk6gWkbc">https://t.co/anGk6gWkbc</a></p>&mdash; Chrome for Developers (@ChromiumDev) <a href="https://twitter.com/ChromiumDev/status/1636796541368139777?ref_src=twsrc%5Etfw">March 17, 2023</a></blockquote>
+					<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+				</div>
+			</figure>
+		</div>
+	</body>
+</html>
diff --git a/...d-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-one-group/expected.html b/...d-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-one-group/expected.html
diff --git a/...mbed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-one-group/set-up.php b/...mbed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-one-group/set-up.php
@@ -0,0 +1,15 @@
+<?php
+return static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
+	add_filter( 'od_breakpoint_max_widths', '__return_empty_array' );
+
+	$test_case->populate_url_metrics(
+		array(
+			array(
+				'xpath'                     => '/HTML/BODY/DIV[@class=\'wp-site-blocks\']/*[1][self::FIGURE]/*[1][self::DIV]',
+				'isLCP'                     => true,
+				'intersectionRatio'         => 1,
+				'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ),
+			),
+		)
+	);
+};
diff --git a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport/expected.html b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport/expected.html
diff --git a/...-optimizer/tests/test-cases/single-twitter-embed-outside-viewport-on-mobile/expected.html b/...-optimizer/tests/test-cases/single-twitter-embed-outside-viewport-on-mobile/expected.html
diff --git a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport/expected.html b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport/expected.html
diff --git a/.../embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport/expected.html b/.../embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport/expected.html