Skip to content

Commit

Permalink
Set the min-height of an embed prior to it loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter committed Jul 26, 2024
1 parent 4779d27 commit 947ca41
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 15 deletions.
12 changes: 12 additions & 0 deletions plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,18 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
return false;
}

$minimum_height = $context->url_metrics_group_collection->get_element_minimum_height( $processor->get_xpath() );
if ( is_int( $minimum_height ) ) {
$style = $processor->get_attribute( 'style' );
if ( is_string( $style ) ) {
$style = rtrim( trim( $style ), ';' ) . '; ';
} else {
$style = '';
}
$style .= sprintf( 'min-height: %dpx;', $minimum_height );
$processor->set_attribute( 'style', $style );
}

$max_intersection_ratio = $context->url_metrics_group_collection->get_element_max_intersection_ratio( $processor->get_xpath() );

if ( $max_intersection_ratio > 0 ) {
Expand Down
30 changes: 15 additions & 15 deletions plugins/embed-optimizer/tests/test-optimization-detective.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com">
</head>
<body>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<figure data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe title="Matt Mullenweg: State of the Word 2023" width="750" height="422" src="https://www.youtube.com/embed/c7M4mBVgP3Y?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
Expand Down Expand Up @@ -118,7 +118,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<title>...</title>
</head>
<body>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<figure data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe data-od-added-loading loading="lazy" title="Matt Mullenweg: State of the Word 2023" width="750" height="422" src="https://www.youtube.com/embed/c7M4mBVgP3Y?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
Expand Down Expand Up @@ -165,7 +165,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com">
</head>
<body>
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
<figure data-od-added-style style="min-height: 500px;" 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>
Expand Down Expand Up @@ -211,7 +211,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<title>...</title>
</head>
<body>
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
<figure data-od-added-style style="min-height: 500px;" 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 data-od-added-type type="application/vnd.embed-optimizer.javascript" async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Expand Down Expand Up @@ -263,7 +263,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<link data-od-added-tag rel="preconnect" href="https://v0.wordpress.com">
</head>
<body>
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe title="VideoPress Video Player" aria-label=\'VideoPress Video Player\' width=\'750\' height=\'422\' src=\'https://video.wordpress.com/embed/vaWm9zO6?hd=1&amp;cover=1\' frameborder=\'0\' allowfullscreen allow=\'clipboard-write\'></iframe>
<script src=\'https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142\'></script>
Expand Down Expand Up @@ -311,7 +311,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<title>...</title>
</head>
<body>
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe data-od-added-loading loading="lazy" title="VideoPress Video Player" aria-label=\'VideoPress Video Player\' width=\'750\' height=\'422\' src=\'https://video.wordpress.com/embed/vaWm9zO6?hd=1&amp;cover=1\' frameborder=\'0\' allowfullscreen allow=\'clipboard-write\'></iframe>
<script data-od-added-type type="application/vnd.embed-optimizer.javascript" src=\'https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142\'></script>
Expand Down Expand Up @@ -360,7 +360,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
<title>...</title>
</head>
<body>
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" class="wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio">
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe data-od-added-loading loading="lazy" title="Spotify Embed: Deep Focus" style="border-radius: 12px" width="100%" height="352" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" src="https://open.spotify.com/embed/playlist/37i9dQZF1DWZeKCadgRdKQ?utm_source=oembed"></iframe>
</div>
Expand Down Expand Up @@ -447,12 +447,12 @@ function ( OD_Tag_Visitor_Context $context ): bool {
<title>...</title>
</head>
<body>
<figure class="wp-block-embed is-type-video">
<figure style="background: black; color:gray" class="wp-block-embed is-type-video">
<div class="wp-block-embed__wrapper">
<video src="https://example.com/video1.mp4" poster="https://example.com/poster1.jpg" width="640" height="480"></video>
</div>
</figure>
<figure class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<figure style="background: black; color: white;" class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<div class="wp-block-embed__wrapper">
<figure>
<p>So I heard you like <code>FIGURE</code>?</p>
Expand All @@ -474,12 +474,12 @@ function ( OD_Tag_Visitor_Context $context ): bool {
<link data-od-added-tag rel="preload" as="image" href="https://example.com/poster1.jpg">
</head>
<body>
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" class="wp-block-embed is-type-video">
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]" data-od-replaced-style="background: black; color:gray" style="background: black; color:gray; min-height: 500px;" class="wp-block-embed is-type-video">
<div class="wp-block-embed__wrapper">
<video data-od-added-preload data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]/*[1][self::VIDEO]" preload="auto" src="https://example.com/video1.mp4" poster="https://example.com/poster1.jpg" width="640" height="480"></video>
</div>
</figure>
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[2][self::FIGURE]" class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<figure data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[2][self::FIGURE]" data-od-replaced-style="background: black; color: white;" style="background: black; color: white; min-height: 500px;" class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<div class="wp-block-embed__wrapper">
<figure>
<p>So I heard you like <code>FIGURE</code>?</p>
Expand Down Expand Up @@ -654,12 +654,12 @@ static function ( array $element ): array {
'isLCPCandidate' => true,
'intersectionRatio' => 1,
'intersectionRect' => array(
'width' => 100,
'height' => 100,
'width' => 500,
'height' => 500,
),
'boundingClientRect' => array(
'width' => 100,
'height' => 100,
'width' => 500,
'height' => 500,
),
),
$element
Expand Down

0 comments on commit 947ca41

Please sign in to comment.