Merge branch 'trunk' into fix/wrong-image-size-picture-element

Author: b1ink0

package-lock.json

@@ -13,10 +13,10 @@
   "devDependencies": {
     "@octokit/rest": "^21.1.1",
     "@wordpress/env": "^10.18.0",
-    "@wordpress/prettier-config": "^4.18.0",
-    "@wordpress/scripts": "^30.11.0",
+    "@wordpress/prettier-config": "^4.19.0",
+    "@wordpress/scripts": "^30.12.0",
     "commander": "13.1.0",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "fast-glob": "^3.3.3",
     "fs-extra": "^11.3.0",
@@ -25,7 +25,7 @@
     "lodash": "4.17.21",
     "micromatch": "^4.0.8",
     "npm-run-all": "^4.1.5",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "webpackbar": "^7.0.0"
   },
   "scripts": {

package.json

@@ -6,7 +6,7 @@
  * when it is submitted for storage.
  */
 
-const consoleLogPrefix = '[Embed Optimizer]';
+export const name = 'Embed Optimizer';
 
 /**
  * @typedef {import("../optimization-detective/types.ts").URLMetric} URLMetric
@@ -16,28 +16,9 @@ const consoleLogPrefix = '[Embed Optimizer]';
  * @typedef {import("../optimization-detective/types.ts").FinalizeArgs} FinalizeArgs
  * @typedef {import("../optimization-detective/types.ts").FinalizeCallback} FinalizeCallback
  * @typedef {import("../optimization-detective/types.ts").ExtendedElementData} ExtendedElementData
+ * @typedef {import("../optimization-detective/types.ts").LogFunction} LogFunction
  */
 
-/**
- * Logs a message.
- *
- * @param {...*} message
- */
-function log( ...message ) {
-	// eslint-disable-next-line no-console
-	console.log( consoleLogPrefix, ...message );
-}
-
-/**
- * Logs an error.
- *
- * @param {...*} message
- */
-function error( ...message ) {
-	// eslint-disable-next-line no-console
-	console.error( consoleLogPrefix, ...message );
-}
-
 /**
  * Embed element heights.
  *
@@ -51,19 +32,20 @@ const loadedElementContentRects = new Map();
  * @type {InitializeCallback}
  * @param {InitializeArgs} args Args.
  */
-export async function initialize( { isDebug } ) {
+export async function initialize( { log: _log } ) {
+	// eslint-disable-next-line no-console
+	const log = _log || console.log; // TODO: Remove once Optimization Detective likely updated, or when strict version requirement added in od_init action.
+
 	/** @type NodeListOf<HTMLDivElement> */
 	const embedWrappers = document.querySelectorAll(
 		'.wp-block-embed > .wp-block-embed__wrapper[data-od-xpath]'
 	);
 
 	for ( /** @type {HTMLElement} */ const embedWrapper of embedWrappers ) {
-		monitorEmbedWrapperForResizes( embedWrapper, isDebug );
+		monitorEmbedWrapperForResizes( embedWrapper, log );
 	}
 
-	if ( isDebug ) {
-		log( 'Loaded embed content rects:', loadedElementContentRects );
-	}
+	log( 'Loaded embed content rects:', loadedElementContentRects );
 }
 
 /**
@@ -73,24 +55,29 @@ export async function initialize( { isDebug } ) {
  * @param {FinalizeArgs} args Args.
  */
 export async function finalize( {
-	isDebug,
+	log: _log,
+	error: _error,
 	getElementData,
 	extendElementData,
 } ) {
+	/* eslint-disable no-console */
+	// TODO: Remove once Optimization Detective likely updated, or when strict version requirement added in od_init action.
+	const log = _log || console.log;
+	const error = _error || console.error;
+	/* eslint-enable no-console */
+
 	for ( const [ xpath, domRect ] of loadedElementContentRects.entries() ) {
 		try {
 			extendElementData( xpath, {
 				resizedBoundingClientRect: domRect,
 			} );
-			if ( isDebug ) {
-				const elementData = getElementData( xpath );
-				log(
-					`boundingClientRect for ${ xpath } resized:`,
-					elementData.boundingClientRect,
-					'=>',
-					domRect
-				);
-			}
+			const elementData = getElementData( xpath );
+			log(
+				`boundingClientRect for ${ xpath } resized:`,
+				elementData.boundingClientRect,
+				'=>',
+				domRect
+			);
 		} catch ( err ) {
 			error(
 				`Failed to extend element data for ${ xpath } with resizedBoundingClientRect:`,
@@ -105,19 +92,17 @@ export async function finalize( {
  * Monitors embed wrapper for resizes.
  *
  * @param {HTMLDivElement} embedWrapper Embed wrapper DIV.
- * @param {boolean}        isDebug      Whether debug.
+ * @param {LogFunction}    log          The function to call with log messages.
  */
-function monitorEmbedWrapperForResizes( embedWrapper, isDebug ) {
+function monitorEmbedWrapperForResizes( embedWrapper, log ) {
 	if ( ! ( 'odXpath' in embedWrapper.dataset ) ) {
 		throw new Error( 'Embed wrapper missing data-od-xpath attribute.' );
 	}
 	const xpath = embedWrapper.dataset.odXpath;
 	const observer = new ResizeObserver( ( entries ) => {
 		const [ entry ] = entries;
 		loadedElementContentRects.set( xpath, entry.contentRect );
-		if ( isDebug ) {
-			log( `Resized element ${ xpath }:`, entry.contentRect );
-		}
+		log( `Resized element ${ xpath }:`, entry.contentRect );
 	} );
 	observer.observe( embedWrapper, { box: 'content-box' } );
 }

plugins/embed-optimizer/detect.js

@@ -187,6 +187,11 @@ function embed_optimizer_update_markup( WP_HTML_Tag_Processor $html_processor, b
 	$trigger_error  = static function ( string $message ) use ( $function_name ): void {
 		wp_trigger_error( $function_name, esc_html( $message ) );
 	};
+
+	// As of 1.0.0-beta3, next_tag() allows $query and is beginning to migrate to skip tag closers by default.
+	// In versions prior to this, the method always visited closers and passing a $query actually threw an exception.
+	$tag_query = version_compare( OPTIMIZATION_DETECTIVE_VERSION, '1.0.0-beta3', '>=' )
+		? array( 'tag_closers' => 'visit' ) : null;
 	try {
 		/*
 		 * Determine how to lazy load the embed.
@@ -253,7 +258,7 @@ function embed_optimizer_update_markup( WP_HTML_Tag_Processor $html_processor, b
 					}
 				}
 			}
-		} while ( $html_processor->next_tag() );
+		} while ( $html_processor->next_tag( $tag_query ) );
 		// If there was only one non-inline script, make it lazy.
 		if ( 1 === $script_count && ! $has_inline_script && $html_processor->has_bookmark( $bookmark_names['script'] ) ) {
 			$needs_lazy_script = true;

plugins/embed-optimizer/hooks.php

@@ -17,7 +17,7 @@
 
 		$sample_size = od_get_url_metrics_breakpoint_sample_size();
 		for ( $j = 0; $j < $sample_size; $j++ ) {
-			OD_URL_Metrics_Post_Type::store_url_metric(
+			$test_case->store_url_metric(
 				od_get_url_metrics_slug( od_get_normalized_query_vars() ),
 				$test_case->get_sample_url_metric(
 					array(

plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport-on-mobile/set-up.php

@@ -15,7 +15,7 @@
 			$elements[0]['isLCP']             = false;
 		}
 
-		OD_URL_Metrics_Post_Type::store_url_metric(
+		$test_case->store_url_metric(
 			od_get_url_metrics_slug( od_get_normalized_query_vars() ),
 			$test_case->get_sample_url_metric(
 				array(

plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport-on-mobile/set-up.php

@@ -1,6 +1,6 @@
 <?php
 return static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
-	OD_URL_Metrics_Post_Type::store_url_metric(
+	$test_case->store_url_metric(
 		od_get_url_metrics_slug( od_get_normalized_query_vars() ),
 		$test_case->get_sample_url_metric(
 			array(

plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport-with-only-mobile-url-metrics/set-up.php

@@ -17,7 +17,7 @@
 
 		$sample_size = od_get_url_metrics_breakpoint_sample_size();
 		for ( $i = 0; $i < $sample_size; $i++ ) {
-			OD_URL_Metrics_Post_Type::store_url_metric(
+			$test_case->store_url_metric(
 				od_get_url_metrics_slug( od_get_normalized_query_vars() ),
 				$test_case->get_sample_url_metric(
 					array(

plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-on-mobile/set-up.php

@@ -1,6 +1,6 @@
 <?php
 return static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
-	OD_URL_Metrics_Post_Type::store_url_metric(
+	$test_case->store_url_metric(
 		od_get_url_metrics_slug( od_get_normalized_query_vars() ),
 		$test_case->get_sample_url_metric(
 			array(

plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-with-only-mobile-url-metrics/set-up.php

@@ -226,7 +226,11 @@ private function process_picture( OD_HTML_Tag_Processor $processor, OD_Tag_Visit
 		$crossorigin    = null;
 
 		// Loop through child tags until we reach the closing PICTURE tag.
-		while ( $processor->next_tag() ) {
+		// As of 1.0.0-beta3, next_tag() allows $query and is beginning to migrate to skip tag closers by default.
+		// In versions prior to this, the method always visited closers and passing a $query actually threw an exception.
+		$tag_query = version_compare( OPTIMIZATION_DETECTIVE_VERSION, '1.0.0-beta3', '>=' )
+			? array( 'tag_closers' => 'visit' ) : null;
+		while ( $processor->next_tag( $tag_query ) ) {
 			$tag = $processor->get_tag();
 
 			// If we reached the closing PICTURE tag, break.