Merge pull request #1476 from WordPress/update/auto-sizes-code-reuse

Move Auto Sizes logic from Enhanced Responsive Images to Image Prioritizer

Author: westonruter

plugins/auto-sizes/auto-sizes.php

@@ -28,5 +28,3 @@
 define( 'IMAGE_AUTO_SIZES_VERSION', '1.2.0' );
 
 require_once __DIR__ . '/hooks.php';
-
-require_once __DIR__ . '/optimization-detective.php';

plugins/auto-sizes/hooks.php

@@ -98,8 +98,8 @@ function auto_sizes_update_content_img_tag( $html ): string {
  * @return bool True if the 'auto' keyword is present, false otherwise.
  */
 function auto_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
-$token = strtok( strtolower( $sizes_attr ), ',' );
-return false !== $token && 'auto' === trim( $token, " \t\f\r\n" );
+list( $first_size ) = explode( ',', $sizes_attr, 2 );
+return 'auto' === strtolower( trim( $first_size, " \t\f\r\n" ) );
 }
 
 /**

plugins/auto-sizes/optimization-detective.php

@@ -262,6 +262,10 @@ public function data_provider_to_test_auto_sizes_update_content_img_tag(): array
 'input' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
 'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
 ),
+'expected_when_auto_size_preceded_by_extra_commas' => array(
+'input' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=",,,,,,,,,auto, (max-width: 650px) 100vw, 650px" loading="lazy">',
+'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, ,,,,,,,,,auto, (max-width: 650px) 100vw, 650px" loading="lazy">',
+),
 );
 }
 

plugins/auto-sizes/tests/test-auto-sizes.php

@@ -40,14 +40,28 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 
 $xpath = $processor->get_xpath();
 
+/**
+ * Gets attribute value.
+ *
+ * @param string $attribute_name Attribute name.
+ * @return string|true|null Normalized attribute value.
+ */
+$get_attribute_value = static function ( string $attribute_name ) use ( $processor ) {
+$value = $processor->get_attribute( $attribute_name );
+if ( is_string( $value ) ) {
+$value = strtolower( trim( $value, " \t\f\r\n" ) );
+}
+return $value;
+};
+
 /*
  * When the same LCP element is common/shared among all viewport groups, make sure that the element has
  * fetchpriority=high, even though it won't really be needed because a preload link with fetchpriority=high
  * will also be added. Additionally, ensure that this common LCP element is never lazy-loaded.
  */
 $common_lcp_element = $context->url_metrics_group_collection->get_common_lcp_element();
 if ( ! is_null( $common_lcp_element ) && $xpath === $common_lcp_element['xpath'] ) {
-if ( 'high' === $processor->get_attribute( 'fetchpriority' ) ) {
+if ( 'high' === $get_attribute_value( 'fetchpriority' ) ) {
 $processor->set_meta_attribute( 'fetchpriority-already-added', true );
 } else {
 $processor->set_attribute( 'fetchpriority', 'high' );
@@ -81,7 +95,7 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 } else {
 // Otherwise, make sure visible elements omit the loading attribute, and hidden elements include loading=lazy.
 $is_visible = $element_max_intersection_ratio > 0.0;
-$loading = (string) $processor->get_attribute( 'loading' );
+$loading = $get_attribute_value( 'loading' );
 if ( $is_visible && 'lazy' === $loading ) {
 $processor->remove_attribute( 'loading' );
 } elseif ( ! $is_visible && 'lazy' !== $loading ) {
@@ -90,6 +104,23 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 }
 // TODO: If an image is visible in one breakpoint but not another, add loading=lazy AND add a regular-priority preload link with media queries (unless LCP in which case it should already have a fetchpriority=high link) so that the image won't be eagerly-loaded for viewports on which it is not shown.
 
+// Ensure that sizes=auto is set properly.
+$sizes = $processor->get_attribute( 'sizes' );
+if ( is_string( $sizes ) ) {
+$is_lazy = 'lazy' === $get_attribute_value( 'loading' );
+$has_auto = $this->sizes_attribute_includes_valid_auto( $sizes );
+
+if ( $is_lazy && ! $has_auto ) {
+$processor->set_attribute( 'sizes', "auto, $sizes" );
+} elseif ( ! $is_lazy && $has_auto ) {
+// Remove auto from the beginning of the list.
+$processor->set_attribute(
+'sizes',
+(string) preg_replace( '/^[ \t\f\r\n]*auto[ \t\f\r\n]*(,[ \t\f\r\n]*)?/i', '', $sizes )
+);
+}
+}
+
 // If this element is the LCP (for a breakpoint group), add a preload link for it.
 foreach ( $context->url_metrics_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {
 $link_attributes = array_merge(
@@ -110,8 +141,8 @@ static function ( string $value ): bool {
 )
 );
 
-$crossorigin = $processor->get_attribute( 'crossorigin' );
-if ( is_string( $crossorigin ) ) {
+$crossorigin = $get_attribute_value( 'crossorigin' );
+if ( null !== $crossorigin ) {
 $link_attributes['crossorigin'] = 'use-credentials' === $crossorigin ? 'use-credentials' : 'anonymous';
 }
 
@@ -126,4 +157,24 @@ static function ( string $value ): bool {
 
 return true;
 }
+
+/**
+ * Checks whether the given 'sizes' attribute includes the 'auto' keyword as the first item in the list.
+ *
+ * Per the HTML spec, if present it must be the first entry.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $sizes_attr The 'sizes' attribute value.
+ * @return bool True if the 'auto' keyword is present, false otherwise.
+ */
+private function sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
+if ( function_exists( 'wp_sizes_attribute_includes_valid_auto' ) ) {
+return wp_sizes_attribute_includes_valid_auto( $sizes_attr );
+} elseif ( function_exists( 'auto_sizes_attribute_includes_valid_auto' ) ) {
+return auto_sizes_attribute_includes_valid_auto( $sizes_attr );
+} else {
+return 'auto' === $sizes_attr || str_starts_with( $sizes_attr, 'auto,' );
+}
+}
 }

plugins/auto-sizes/tests/test-optimization-detective.php

@@ -55,7 +55,7 @@
 <p>Now the following image is definitely outside the initial viewport.</p>
 <img src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" fetchpriority="high">
 <img src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" fetchpriority="high" loading="eager">
-<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->
+<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="LAZY"><!-- This one is all good. -->
 </body>
 </html>
 ',
@@ -73,7 +73,7 @@
 <p>Now the following image is definitely outside the initial viewport.</p>
 <img data-od-added-loading data-od-removed-fetchpriority="high" loading="lazy" src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" >
 <img data-od-removed-fetchpriority="high" data-od-replaced-loading="eager" src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" loading="lazy">
-<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->
+<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="LAZY"><!-- This one is all good. -->
 </body>
 </html>
 ',