Skip to content

Commit

Permalink
Add breakpoint-specific min-heights to account for responsive embeds
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter committed Oct 4, 2024
1 parent 29d4383 commit a529218
Show file tree
Hide file tree
Showing 11 changed files with 113 additions and 30 deletions.
54 changes: 39 additions & 15 deletions plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,27 +84,51 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {

$embed_wrapper_xpath = $processor->get_xpath() . '/*[1][self::DIV]';

// TODO: This should be cached.
$minimum_height = null;
foreach ( $context->url_metric_group_collection->get_all_url_metrics_groups_elements() as $element ) {
if ( $embed_wrapper_xpath === $element['xpath'] && isset( $element['resizedBoundingClientRect'] ) ) {
if ( null === $minimum_height ) {
$minimum_height = $element['resizedBoundingClientRect']['height'];
/**
* Array of tuples of groups and their minimum heights keyed by the minimum viewport width.
*
* @var array<int, array{OD_URL_Metric_Group, int}> $group_minimum_heights
*/
$group_minimum_heights = array();
// TODO: This can be made more efficient if the get_all_url_metrics_groups_elements return value included an elements_by_xpath key.
foreach ( $context->url_metric_group_collection->get_all_url_metrics_groups_elements() as list( $group, $element ) ) {
if ( isset( $element['resizedBoundingClientRect'] ) && $embed_wrapper_xpath === $element['xpath'] ) {
$group_min_width = $group->get_minimum_viewport_width();
if ( ! isset( $group_minimum_heights[ $group_min_width ] ) ) {
$group_minimum_heights[ $group_min_width ] = array( $group, $element['resizedBoundingClientRect']['height'] );
} else {
$minimum_height = min( $minimum_height, $element['resizedBoundingClientRect']['height'] );
$group_minimum_heights[ $group_min_width ][1] = min(
$group_minimum_heights[ $group_min_width ][1],
$element['resizedBoundingClientRect']['height']
);
}
}
}

if ( is_float( $minimum_height ) ) {
$min_height_style = sprintf( 'min-height: %dpx;', $minimum_height );
$style = $processor->get_attribute( 'style' );
if ( is_string( $style ) ) {
$style = $min_height_style . ' ' . $style;
} else {
$style = $min_height_style;
// Add style rules to set the min-height for each viewport group.
if ( count( $group_minimum_heights ) > 0 ) {
$element_id = $processor->get_attribute( 'id' );
if ( ! is_string( $element_id ) ) {
$element_id = 'embed-optimizer-' . md5( $processor->get_xpath() );
$processor->set_attribute( 'id', $element_id );
}

$style_rules = array();
foreach ( $group_minimum_heights as list( $group, $minimum_height ) ) {
// TODO: The following media query logic can be added to a method on the group class.
$media_query = sprintf( 'screen and (min-width: %dpx)', $group->get_minimum_viewport_width() );
if ( $group->get_maximum_viewport_width() !== PHP_INT_MAX ) {
$media_query .= sprintf( ' and (max-width: %dpx)', $group->get_maximum_viewport_width() );
}
$style_rules[] = sprintf(
'@media %s { #%s { min-height: %dpx; } }',
$media_query,
$element_id,
$minimum_height
);
}
$processor->set_attribute( 'style', $style );

$processor->append_head_html( sprintf( "<style>\n%s\n</style>\n", join( "\n", $style_rules ) ) );
}

$max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( $embed_wrapper_xpath );
Expand Down
18 changes: 15 additions & 3 deletions plugins/embed-optimizer/tests/test-cases/nested-figure-embed.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ static function ( OD_Tag_Visitor_Context $context ) use ( $test_case ): bool {
<video src="https://example.com/video1.mp4" poster="https://example.com/poster1.jpg" width="640" height="480"></video>
</div>
</figure>
<figure style="background: black; color: white;" class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<figure id="existing-figurine-id" 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 @@ -111,15 +111,27 @@ static function ( OD_Tag_Visitor_Context $context ) use ( $test_case ): bool {
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #existing-figurine-id { min-height: 654px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #existing-figurine-id { min-height: 654px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #existing-figurine-id { min-height: 654px; } }
@media screen and (min-width: 783px) { #existing-figurine-id { min-height: 654px; } }
</style>
<link data-od-added-tag rel="preload" as="image" href="https://example.com/poster1.jpg">
</head>
<body>
<figure data-od-replaced-style="background: black; color:gray" style="min-height: 500px; background: black; color:gray" class="wp-block-embed is-type-video">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" style="background: black; color:gray" class="wp-block-embed is-type-video">
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::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-replaced-style="background: black; color: white;" style="min-height: 654px; background: black; color: white;" class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<figure id="existing-figurine-id" class="wp-block-embed is-type-rich is-provider-figurine wp-block-embed-figurine">
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[2][self::FIGURE]/*[1][self::DIV]" class="wp-block-embed__wrapper">
<figure>
<p>So I heard you like <code>FIGURE</code>?</p>
Expand Down
8 changes: 7 additions & 1 deletion ...timizer/tests/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,15 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
</head>
<body>
<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">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio">
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::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
8 changes: 7 additions & 1 deletion plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,17 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com">
</head>
<body>
<figure data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" 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
8 changes: 7 additions & 1 deletion plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,15 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
</head>
<body>
<figure data-od-added-style style="min-height: 500px;" class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" 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
8 changes: 7 additions & 1 deletion plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,19 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://public-api.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://v0.wordpress.com">
</head>
<body>
<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">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" 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 data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::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
8 changes: 7 additions & 1 deletion plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,15 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
</head>
<body>
<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">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" 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 data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::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
8 changes: 7 additions & 1 deletion plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,17 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com">
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com">
</head>
<body>
<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">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" 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
8 changes: 7 additions & 1 deletion plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,15 @@
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media screen and (min-width: 0px) and (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media screen and (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
</head>
<body>
<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">
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" 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
13 changes: 8 additions & 5 deletions plugins/optimization-detective/class-od-url-metric-group-collection.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,18 +404,21 @@ public function get_common_lcp_element(): ?array {
* (the default sample size). Therefore, given the number (n) of visited elements on the page this will only
* end up running n*4*3 times.
*
* @todo This should be cached.
* @since n.e.x.t
*
* @return Generator<ElementData>
* @return array<int, array{OD_URL_Metric_Group, ElementData}>
*/
public function get_all_url_metrics_groups_elements(): Generator {
public function get_all_url_metrics_groups_elements(): array {
$elements_and_groups = array();
foreach ( $this->groups as $group ) {
foreach ( $group as $url_metric ) {
foreach ( $url_metric->get_elements() as $element ) {
yield $element;
$elements_and_groups[] = array( $group, $element );
}
}
}
return $elements_and_groups;
}

/**
Expand All @@ -430,7 +433,7 @@ public function get_all_element_max_intersection_ratios(): array {

$result = ( function () {
$element_max_intersection_ratios = array();
foreach ( $this->get_all_url_metrics_groups_elements() as $element ) {
foreach ( $this->get_all_url_metrics_groups_elements() as list( $group, $element ) ) {
$element_max_intersection_ratios[ $element['xpath'] ] = array_key_exists( $element['xpath'], $element_max_intersection_ratios )
? max( $element_max_intersection_ratios[ $element['xpath'] ], $element['intersectionRatio'] )
: $element['intersectionRatio'];
Expand All @@ -457,7 +460,7 @@ public function get_all_element_minimum_heights(): array {
$result = ( function () {
$element_min_heights = array();

foreach ( $this->get_all_url_metrics_groups_elements() as $element ) {
foreach ( $this->get_all_url_metrics_groups_elements() as list( $group, $element ) ) {
$element_min_heights[ $element['xpath'] ] = array_key_exists( $element['xpath'], $element_min_heights )
? min( $element_min_heights[ $element['xpath'] ], $element['boundingClientRect']['height'] )
: $element['boundingClientRect']['height'];
Expand Down
Loading

0 comments on commit a529218

Please sign in to comment.