Add: Auto Sizes for Lazy-loaded Images

.github/CODEOWNERS

@@ -53,3 +53,7 @@
 /modules/images/dominant-color-images                                       @pbearne @spacedmonkey
 /tests/modules/images/dominant-color-images                                 @pbearne @spacedmonkey
 /tests/testdata/modules/images/dominant-color-images                        @pbearne @spacedmonkey
+
+# Plugin: Auto-sizes for Lazy-Loaded Images
+/plugins/auto-sizes                         @joemcgill
+/tests/plugins/auto-sizes                   @joemcgill

.github/workflows/php-test-plugins.yml

@@ -1,4 +1,4 @@
-name: Unit Testing for Test Plugin
+name: Unit Testing for Plugins
 
 on:
   push:
@@ -8,7 +8,7 @@ on:
     # Only run if PHP-related files changed.
     paths:
       - '.github/workflows/php-test-plugins.yml'
-      - '**.php'
+      - 'plugins/**.php'
       - '.wp-env.json'
       - '**/package.json'
       - 'package-lock.json'
@@ -24,7 +24,7 @@ on:
     # Only run if PHP-related files changed.
     paths:
       - '.github/workflows/php-test-plugins.yml'
-      - '**.php'
+      - 'plugins/**.php'
       - '.wp-env.json'
       - '**/package.json'
       - 'package-lock.json'
@@ -72,7 +72,7 @@ jobs:
         # PHP that the composer.lock was created for.
       - name: Composer update
         run: npm run wp-env run tests-cli -- --env-cwd="wp-content/plugins/$(basename $(pwd))" composer update --no-interaction
-      - name: Running single site unit tests
-        run: npm run test-php -- -- -- --testsuite test-plugin
-      - name: Running multisite unit tests
-        run: npm run test-php-multisite -- -- -- --testsuite test-plugin
+      - name: Running single site unit tests for Auto-sizes for Lazy-Loaded Images Plugin
+        run: npm run test-php -- -- -- --testsuite auto-sizes
+      - name: Running multisite unit tests for Auto-sizes for Lazy-Loaded Images Plugin
+        run: npm run test-php-multisite -- -- -- --testsuite auto-sizes

phpcs.xml.dist

@@ -8,7 +8,7 @@
 	<rule ref="WordPress-Docs"/>
 	<rule ref="WordPress-Extra" />
 	<rule ref="WordPress.WP.I18n"/>
-	<config name="text_domain" value="performance-lab,default"/>
+	<config name="text_domain" value="performance-lab,default,auto-sizes"/>
 
 	<arg value="ps"/>
 	<arg name="extensions" value="php"/>

phpunit.xml.dist

@@ -12,8 +12,8 @@
 			<exclude>./tests/utils</exclude>
 			<exclude>./tests/plugins</exclude>
 		</testsuite>
-		<testsuite name="test-plugin">
-			<directory suffix=".php">./tests/plugins/test-plugin</directory>
+		<testsuite name="auto-sizes">
+			<directory suffix=".php">./tests/plugins/auto-sizes</directory>
 		</testsuite>
 	</testsuites>
 	<groups>

plugins.json

@@ -9,5 +9,5 @@
       "version": "1.0.5"
     }
   },
-  "plugins": []
+  "plugins": [ "auto-sizes" ]
 }

plugins/auto-sizes/auto-sizes.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Plugin Name: Auto-sizes for Lazy-loaded Images
+ * Plugin URI: https://github.com/WordPress/performance/tree/trunk/modules/images/auto-sizes
+ * Description: This plugin implements the HTML spec for adding `sizes="auto"` to lazy-loaded images.
+ * Requires at least: 6.3
+ * Requires PHP: 7.0
+ * Version: 1.0.0
+ * Author: WordPress Performance Team
+ * Author URI: https://make.wordpress.org/performance/
+ * License: GPLv2 or later
+ * License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
+ * Text Domain: auto-sizes
+ *
+ * @package auto-sizes
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+// Define the constant.
+if ( defined( 'IMAGE_AUTO_SIZES_VERSION' ) ) {
+	return;
+}
+
+define( 'IMAGE_AUTO_SIZES_VERSION', '1.0.0' );
+
+require_once __DIR__ . '/hooks.php';

plugins/auto-sizes/hooks.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Hook callbacks used for Auto-sizes for Lazy-loaded Images.
+ *
+ * @package auto-sizes
+ * @since 1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Adds auto to the sizes attribute to the image, if applicable.
+ *
+ * @since 1.0.0
+ *
+ * @param array $attr Attributes for the image markup.
+ * @return array The filtered attributes for the image markup.
+ */
+function auto_sizes_update_image_attributes( $attr ) {
+	// Bail early if the image is not lazy-loaded.
+	if ( ! isset( $attr['loading'] ) || 'lazy' !== $attr['loading'] ) {
+		return $attr;
+	}
+
+	// Bail early if the image is not responsive.
+	if ( ! isset( $attr['sizes'] ) ) {
+		return $attr;
+	}
+
+	// Don't add 'auto' to the sizes attribute if it already exists.
+	if ( false !== strpos( $attr['sizes'], 'auto,' ) ) {
+		return $attr;
+	}
+
+	$attr['sizes'] = 'auto, ' . $attr['sizes'];
+
+	return $attr;
+}
+add_filter( 'wp_get_attachment_image_attributes', 'auto_sizes_update_image_attributes' );
+
+/**
+ * Adds auto to the sizes attribute to the image, if applicable.
+ *
+ * @since 1.0.0
+ *
+ * @param string $html The HTML image tag markup being filtered.
+ * @return string The filtered HTML image tag markup.
+ */
+function auto_sizes_update_content_img_tag( $html ) {
+	// Bail early if the image is not lazy-loaded.
+	if ( false === strpos( $html, 'loading="lazy"' ) ) {
+		return $html;
+	}
+
+	// Bail early if the image is not responsive.
+	if ( false === strpos( $html, 'sizes="' ) ) {
+		return $html;
+	}
+
+	// Don't double process content images.
+	if ( false !== strpos( $html, 'sizes="auto,' ) ) {
+		return $html;
+	}
+
+	$html = str_replace( 'sizes="', 'sizes="auto, ', $html );
+
+	return $html;
+}
+add_filter( 'wp_content_img_tag', 'auto_sizes_update_content_img_tag' );

plugins/auto-sizes/readme.txt

@@ -0,0 +1,53 @@
+=== Auto-sizes for Lazy-loaded Images ===
+
+Contributors:      wordpressdotorg
+Requires at least: 6.4
+Tested up to:      6.4
+Requires PHP:      7.0
+Stable tag:        1.0.0
+License:           GPLv2 or later
+License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+Tags:              performance, images, auto-sizes
+
+Adds support for automatically calculating the sizes attribute for lazy-loaded images.
+
+== Description ==
+
+This plugin implements the HTML spec for adding `sizes="auto"` to lazy-loaded images.
+For background, see: https://github.com/whatwg/html/issues/4654.
+
+== Installation ==
+
+= Installation from within WordPress =
+
+1. Visit **Plugins > Add New**.
+2. Search for **Auto-sizes for Lazy-loaded Images**.
+3. Install and activate the **Auto-sizes for Lazy-loaded Images** plugin.
+
+= Manual installation =
+
+1. Upload the entire `auto-sizes` folder to the `/wp-content/plugins/` directory.
+2. Visit **Plugins**.
+3. Activate the **Auto-sizes for Lazy-loaded Images** plugin.
+
+== Frequently Asked Questions ==
+
+= Where can I submit my plugin feedback? =
+
+Feedback is encouraged and much appreciated, especially since this plugin may contain future WordPress core features. If you have suggestions or requests for new features, you can [submit them as an issue in the WordPress Performance Team's GitHub repository](https://github.com/WordPress/performance/issues/new/choose). If you need help with troubleshooting or have a question about the plugin, please [create a new topic on our support forum](https://wordpress.org/support/plugin/auto-sizes/#new-topic-0).
+
+= Where can I report security bugs? =
+
+The Performance team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, please visit the [WordPress HackerOne](https://hackerone.com/wordpress) program.
+
+= How can I contribute to the plugin? =
+
+Contributions are always welcome! Learn more about how to get involved in the [Core Performance Team Handbook](https://make.wordpress.org/performance/handbook/get-involved/).
+
+== Changelog ==
+
+= 1.0.0 =
+
+* Initial release of the Auto-sizes for Lazy-loaded Images plugin as a standalone plugin. ([904](https://github.com/WordPress/performance/pull/904))

tests/bootstrap.php

@@ -32,28 +32,62 @@
 	$_test_root = '/tmp/wordpress-tests-lib';
 }
 
-// Force plugin to be active.
-$GLOBALS['wp_tests_options'] = array(
-	'active_plugins' => array( basename( TESTS_PLUGIN_DIR ) . '/load.php' ),
-);
-
-// Add filter to ensure the plugin's admin integration and all modules are loaded for tests.
 require_once $_test_root . '/includes/functions.php';
-tests_add_filter(
-	'plugins_loaded',
-	static function () {
-		require_once TESTS_PLUGIN_DIR . '/admin/load.php';
-		require_once TESTS_PLUGIN_DIR . '/admin/server-timing.php';
-		require_once TESTS_PLUGIN_DIR . '/admin/plugins.php';
-		$module_files = glob( TESTS_PLUGIN_DIR . '/modules/*/*/load.php' );
-		if ( $module_files ) {
-			foreach ( $module_files as $module_file ) {
-				require_once $module_file;
+
+// Check if we use the plugin's test suite. If so, disable the PL plugin and only load the requested plugin.
+$plugin_name = '';
+foreach ( $_SERVER['argv'] as $index => $arg ) {
+	if (
+		'--testsuite' === $arg &&
+		isset( $_SERVER['argv'][ $index + 1 ] ) &&
+		'performance-lab' !== $_SERVER['argv'][ $index + 1 ] &&
+		file_exists( TESTS_PLUGIN_DIR . '/plugins/' . $_SERVER['argv'][ $index + 1 ] )
+	) {
+		$plugin_name = $_SERVER['argv'][ $index + 1 ];
+	}
+}
+
+if ( $plugin_name ) {
+	$plugin_test_path = TESTS_PLUGIN_DIR . '/plugins/' . $plugin_name;
+	tests_add_filter(
+		'plugins_loaded',
+		static function () use ( $plugin_test_path, $plugin_name ) {
+			// Check if plugin has a "plugin/plugin.php" file.
+			if ( file_exists( $plugin_test_path . '/' . $plugin_name . '.php' ) ) {
+				require_once $plugin_test_path . '/' . $plugin_name . '.php';
+			} elseif ( file_exists( $plugin_test_path . '/load.php' ) ) {
+				// Check if plugin has a "plugin/load.php" file.
+				require_once $plugin_test_path . '/load.php';
+			} else {
+				echo "Unable to locate standalone plugin bootstrap file in $plugin_test_path.";
+				exit( 1 );
 			}
-		}
-	},
-	1
-);
+		},
+		1
+	);
+} else {
+	// Force plugin to be active.
+	$GLOBALS['wp_tests_options'] = array(
+		'active_plugins' => array( basename( TESTS_PLUGIN_DIR ) . '/load.php' ),
+	);
+
+	// Add filter to ensure the plugin's admin integration and all modules are loaded for tests.
+	tests_add_filter(
+		'plugins_loaded',
+		static function () {
+			require_once TESTS_PLUGIN_DIR . '/admin/load.php';
+			require_once TESTS_PLUGIN_DIR . '/admin/server-timing.php';
+			require_once TESTS_PLUGIN_DIR . '/admin/plugins.php';
+			$module_files = glob( TESTS_PLUGIN_DIR . '/modules/*/*/load.php' );
+			if ( $module_files ) {
+				foreach ( $module_files as $module_file ) {
+					require_once $module_file;
+				}
+			}
+		},
+		1
+	);
+}
 
 // Start up the WP testing environment.
 require $_test_root . '/includes/bootstrap.php';