Merge branch 'fix/935-update-workflow' of github.com:WordPress/perfor…

…mance into fix/935-update-workflow

.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/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';

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

@@ -0,0 +1,90 @@
+<?php
+/**
+ * Tests for the Auto-sizes for Lazy-loaded Images module.
+ *
+ * @package auto-sizes
+ * @group   auto-sizes
+ */
+
+class AutoSizesTests extends WP_UnitTestCase {
+
+	/**
+	 * Attachment ID.
+	 *
+	 * @var int
+	 */
+	public static $image_id;
+
+	/**
+	 * Setup shared fixtures.
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$image_id = $factory->attachment->create_upload_object( TESTS_PLUGIN_DIR . '/tests/testdata/modules/images/leaves.jpg' );
+	}
+
+	/**
+	 * Helper function to create image markup from a given attachment ID.
+	 *
+	 * @param int $attachment_id Attachment ID.
+	 * @return string Image markup.
+	 */
+	public function get_image_tag( $attachment_id ) {
+		return get_image_tag( $attachment_id, '', '', '', 'large' );
+	}
+
+	/**
+	 * Test generated markup for an image with lazy loading gets auto-sizes.
+	 *
+	 * @covers ::auto_sizes_update_image_attributes
+	 */
+	public function test_image_with_lazy_loading_has_auto_sizes() {
+		$this->assertStringContainsString(
+			'sizes="auto, ',
+			wp_get_attachment_image( self::$image_id, 'large', null, array( 'loading' => 'lazy' ) )
+		);
+	}
+
+	/**
+	 * Test generated markup for an image without lazy loading does not get auto-sizes.
+	 *
+	 * @covers ::auto_sizes_update_image_attributes
+	 */
+	public function test_image_without_lazy_loading_does_not_have_auto_sizes() {
+		$this->assertStringContainsString(
+			'sizes="(max-width: 1024px) 100vw, 1024px"',
+			wp_get_attachment_image( self::$image_id, 'large', null, array( 'loading' => '' ) )
+		);
+	}
+
+	/**
+	 * Test content filtered markup with lazy loading gets auto-sizes.
+	 *
+	 * @covers ::auto_sizes_update_content_img_tag
+	 */
+	public function test_content_image_with_lazy_loading_has_auto_sizes() {
+		// Force lazy loading attribute.
+		add_filter( 'wp_img_tag_add_loading_attr', '__return_true' );
+
+		$image_tag = $this->get_image_tag( self::$image_id );
+
+		$this->assertStringContainsString(
+			'sizes="auto, (max-width: 1024px) 100vw, 1024px"',
+			wp_filter_content_tags( $this->get_image_tag( self::$image_id ) )
+		);
+	}
+
+	/**
+	 * Test content filtered markup without lazy loading does not get auto-sizes.
+	 *
+	 * @covers ::auto_sizes_update_content_img_tag
+	 */
+	public function test_content_image_without_lazy_loading_does_not_have_auto_sizes() {
+		// Disable lazy loading attribute.
+		add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
+
+		$this->assertStringContainsString(
+			'sizes="(max-width: 1024px) 100vw, 1024px"',
+			wp_filter_content_tags( $this->get_image_tag( self::$image_id ) )
+		);
+	}
+}