Editor: backport client side media PHP changes to core.

Bring over the changes required to implement client side media in core. This feature recently graduated from experiments and is ready for testing in beta.

Props adamsilverstein, westonruter, mamaduka, mukesh27, swissspidy, andrewserong, ellatrix, ramonjd.
Fixes #62243.



git-svn-id: https://develop.svn.wordpress.org/trunk@61703 602fd350-edb4-49c9-b593-d223f7449a82

Author: adamsilverstein

package.json

@@ -7,7 +7,7 @@
 		"url": "https://develop.svn.wordpress.org/trunk"
 	},
 	"gutenberg": {
-		"ref": "7a11a53377a95cba4d3786d71cadd4c2f0c5ac52"
+		"ref": "b441348bb7e05af351c250b74283f253acaf9138"
 	},
 	"engines": {
 		"node": ">=20.10.0",

src/wp-admin/edit-form-blocks.php

@@ -92,6 +92,12 @@ static function ( $classes ) {
 			'description',
 			'gmt_offset',
 			'home',
+			'image_sizes',
+			'image_size_threshold',
+			'image_output_formats',
+			'jpeg_interlaced',
+			'png_interlaced',
+			'gif_interlaced',
 			'name',
 			'site_icon',
 			'site_icon_url',

src/wp-admin/site-editor.php

@@ -218,6 +218,12 @@ static function ( $classes ) {
 			'description',
 			'gmt_offset',
 			'home',
+			'image_sizes',
+			'image_size_threshold',
+			'image_output_formats',
+			'jpeg_interlaced',
+			'png_interlaced',
+			'gif_interlaced',
 			'name',
 			'site_icon',
 			'site_icon_url',

src/wp-includes/default-filters.php

@@ -675,6 +675,13 @@
 add_action( 'plugins_loaded', '_wp_add_additional_image_sizes', 0 );
 add_filter( 'plupload_default_settings', 'wp_show_heic_upload_error' );
 
+// Client-side media processing.
+add_action( 'admin_init', 'wp_set_client_side_media_processing_flag' );
+// Cross-origin isolation for client-side media processing.
+add_action( 'load-post.php', 'wp_set_up_cross_origin_isolation' );
+add_action( 'load-post-new.php', 'wp_set_up_cross_origin_isolation' );
+add_action( 'load-site-editor.php', 'wp_set_up_cross_origin_isolation' );
+add_action( 'load-widgets.php', 'wp_set_up_cross_origin_isolation' );
 // Nav menu.
 add_filter( 'nav_menu_item_id', '_nav_menu_item_id_use_once', 10, 2 );
 add_filter( 'nav_menu_css_class', 'wp_nav_menu_remove_menu_item_has_children_class', 10, 4 );

src/wp-includes/media-template.php

@@ -156,6 +156,12 @@ class="wp-video-shortcode {{ classes.join( ' ' ) }}"
 function wp_print_media_templates() {
 	$class = 'media-modal wp-core-ui';
 
+	$is_cross_origin_isolation_enabled = wp_is_client_side_media_processing_enabled();
+
+	if ( $is_cross_origin_isolation_enabled ) {
+		ob_start();
+	}
+
 	$alt_text_description = sprintf(
 		/* translators: 1: Link to tutorial, 2: Additional link attributes, 3: Accessibility text. */
 		__( '<a href="%1$s" %2$s>Learn how to describe the purpose of the image%3$s</a>. Leave empty if the image is purely decorative.' ),
@@ -1582,4 +1588,42 @@ function wp_print_media_templates() {
 	 * @since 3.5.0
 	 */
 	do_action( 'print_media_templates' );
+
+	if ( $is_cross_origin_isolation_enabled ) {
+		$html = (string) ob_get_clean();
+
+		/*
+		 * The media templates are inside <script type="text/html"> tags,
+		 * whose content is treated as raw text by the HTML Tag Processor.
+		 * Extract each script block's content, process it separately,
+		 * then reassemble the full output.
+		 */
+		$script_processor = new WP_HTML_Tag_Processor( $html );
+		while ( $script_processor->next_tag( 'SCRIPT' ) ) {
+			if ( 'text/html' !== $script_processor->get_attribute( 'type' ) ) {
+				continue;
+			}
+			/*
+			 * Unlike wp_add_crossorigin_attributes(), this does not check whether
+			 * URLs are actually cross-origin. Media templates use Underscore.js
+			 * template expressions (e.g. {{ data.url }}) as placeholder URLs,
+			 * so actual URLs are not available at parse time.
+			 * The crossorigin attribute is added unconditionally to all relevant
+			 * media tags to ensure cross-origin isolation works regardless of
+			 * the final URL value at render time.
+			 */
+			$template_processor = new WP_HTML_Tag_Processor( $script_processor->get_modifiable_text() );
+			while ( $template_processor->next_tag() ) {
+				if (
+					in_array( $template_processor->get_tag(), array( 'AUDIO', 'IMG', 'VIDEO' ), true )
+					&& ! is_string( $template_processor->get_attribute( 'crossorigin' ) )
+				) {
+					$template_processor->set_attribute( 'crossorigin', 'anonymous' );
+				}
+			}
+			$script_processor->set_modifiable_text( $template_processor->get_updated_html() );
+		}
+
+		echo $script_processor->get_updated_html();
+	}
 }

src/wp-includes/media.php

@@ -6359,3 +6359,205 @@ function wp_get_image_editor_output_format( $filename, $mime_type ) {
 	 */
 	return apply_filters( 'image_editor_output_format', $output_format, $filename, $mime_type );
 }
+
+/**
+ * Checks whether client-side media processing is enabled.
+ *
+ * Client-side media processing uses the browser's capabilities to handle
+ * tasks like image resizing and compression before uploading to the server.
+ *
+ * @since 7.0.0
+ *
+ * @return bool Whether client-side media processing is enabled.
+ */
+function wp_is_client_side_media_processing_enabled(): bool {
+	/**
+	 * Filters whether client-side media processing is enabled.
+	 *
+	 * @since 7.0.0
+	 *
+	 * @param bool $enabled Whether client-side media processing is enabled. Default true.
+	 */
+	return (bool) apply_filters( 'wp_client_side_media_processing_enabled', true );
+}
+
+/**
+ * Sets a global JS variable to indicate that client-side media processing is enabled.
+ *
+ * @since 7.0.0
+ */
+function wp_set_client_side_media_processing_flag(): void {
+	if ( ! wp_is_client_side_media_processing_enabled() ) {
+		return;
+	}
+
+	wp_add_inline_script( 'wp-block-editor', 'window.__clientSideMediaProcessing = true', 'before' );
+
+	/*
+	 * Register the @wordpress/vips/worker script module as a dynamic dependency
+	 * of the wp-upload-media classic script. This ensures it is included in the
+	 * import map so that the dynamic import() in upload-media.js can resolve it.
+	 */
+	wp_scripts()->add_data(
+		'wp-upload-media',
+		'module_dependencies',
+		array( '@wordpress/vips/worker' )
+	);
+}
+
+/**
+ * Enables cross-origin isolation in the block editor.
+ *
+ * Required for enabling SharedArrayBuffer for WebAssembly-based
+ * media processing in the editor.
+ *
+ * @since 7.0.0
+ *
+ * @link https://web.dev/coop-coep/
+ */
+function wp_set_up_cross_origin_isolation(): void {
+	if ( ! wp_is_client_side_media_processing_enabled() ) {
+		return;
+	}
+
+	$screen = get_current_screen();
+
+	if ( ! $screen ) {
+		return;
+	}
+
+	if ( ! $screen->is_block_editor() && 'site-editor' !== $screen->id && ! ( 'widgets' === $screen->id && wp_use_widgets_block_editor() ) ) {
+		return;
+	}
+
+	// Cross-origin isolation is not needed if users can't upload files anyway.
+	if ( ! current_user_can( 'upload_files' ) ) {
+		return;
+	}
+
+	wp_start_cross_origin_isolation_output_buffer();
+}
+
+/**
+ * Starts an output buffer to send cross-origin isolation headers.
+ *
+ * Sends headers and uses an output buffer to add crossorigin="anonymous"
+ * attributes where needed.
+ *
+ * @since 7.0.0
+ *
+ * @link https://web.dev/coop-coep/
+ *
+ * @global bool $is_safari
+ */
+function wp_start_cross_origin_isolation_output_buffer(): void {
+	global $is_safari;
+
+	$coep = $is_safari ? 'require-corp' : 'credentialless';
+
+	ob_start(
+		static function ( string $output ) use ( $coep ): string {
+			header( 'Cross-Origin-Opener-Policy: same-origin' );
+			header( "Cross-Origin-Embedder-Policy: $coep" );
+
+			return wp_add_crossorigin_attributes( $output );
+		}
+	);
+}
+
+/**
+ * Adds crossorigin="anonymous" to relevant tags in the given HTML string.
+ *
+ * @since 7.0.0
+ *
+ * @param string $html HTML input.
+ * @return string Modified HTML.
+ */
+function wp_add_crossorigin_attributes( string $html ): string {
+	$site_url = site_url();
+
+	$processor = new WP_HTML_Tag_Processor( $html );
+
+	// See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin.
+	$cross_origin_tag_attributes = array(
+		'AUDIO'  => array( 'src' => false ),
+		'IMG'    => array(
+			'src'    => false,
+			'srcset' => true,
+		),
+		'LINK'   => array(
+			'href'        => false,
+			'imagesrcset' => true,
+		),
+		'SCRIPT' => array( 'src' => false ),
+		'VIDEO'  => array(
+			'src'    => false,
+			'poster' => false,
+		),
+		'SOURCE' => array( 'src' => false ),
+	);
+
+	while ( $processor->next_tag() ) {
+		$tag = $processor->get_tag();
+
+		if ( ! isset( $cross_origin_tag_attributes[ $tag ] ) ) {
+			continue;
+		}
+
+		if ( 'AUDIO' === $tag || 'VIDEO' === $tag ) {
+			$processor->set_bookmark( 'audio-video-parent' );
+		}
+
+		$processor->set_bookmark( 'resume' );
+
+		$sought = false;
+
+		$crossorigin = $processor->get_attribute( 'crossorigin' );
+
+		$is_cross_origin = false;
+
+		foreach ( $cross_origin_tag_attributes[ $tag ] as $attr => $is_srcset ) {
+			if ( $is_srcset ) {
+				$srcset = $processor->get_attribute( $attr );
+				if ( is_string( $srcset ) ) {
+					foreach ( explode( ',', $srcset ) as $candidate ) {
+						$candidate_url = strtok( trim( $candidate ), ' ' );
+						if ( is_string( $candidate_url ) && '' !== $candidate_url && ! str_starts_with( $candidate_url, $site_url ) && ! str_starts_with( $candidate_url, '/' ) ) {
+							$is_cross_origin = true;
+							break;
+						}
+					}
+				}
+			} else {
+				$url = $processor->get_attribute( $attr );
+				if ( is_string( $url ) && ! str_starts_with( $url, $site_url ) && ! str_starts_with( $url, '/' ) ) {
+					$is_cross_origin = true;
+				}
+			}
+
+			if ( $is_cross_origin ) {
+				break;
+			}
+		}
+
+		if ( $is_cross_origin && ! is_string( $crossorigin ) ) {
+			if ( 'SOURCE' === $tag ) {
+				$sought = $processor->seek( 'audio-video-parent' );
+
+				if ( $sought ) {
+					$processor->set_attribute( 'crossorigin', 'anonymous' );
+				}
+			} else {
+				$processor->set_attribute( 'crossorigin', 'anonymous' );
+			}
+
+			if ( $sought ) {
+				$processor->seek( 'resume' );
+				$processor->release_bookmark( 'audio-video-parent' );
+			}
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+

src/wp-includes/rest-api/class-wp-rest-server.php

@@ -1368,6 +1368,34 @@ public function get_index( $request ) {
 			'routes'          => $this->get_data_for_routes( $this->get_routes(), $request['context'] ),
 		);
 
+		// Add media processing settings for users who can upload files.
+		if ( wp_is_client_side_media_processing_enabled() && current_user_can( 'upload_files' ) ) {
+			// Image sizes keyed by name for client-side media processing.
+			$available['image_sizes'] = array();
+			foreach ( wp_get_registered_image_subsizes() as $name => $size ) {
+				$available['image_sizes'][ $name ] = $size;
+			}
+
+			/** This filter is documented in wp-admin/includes/image.php */
+			$available['image_size_threshold'] = (int) apply_filters( 'big_image_size_threshold', 2560, array( 0, 0 ), '', 0 );
+
+			// Image output formats.
+			$input_formats  = array( 'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/avif', 'image/heic' );
+			$output_formats = array();
+			foreach ( $input_formats as $mime_type ) {
+				/** This filter is documented in wp-includes/class-wp-image-editor.php */
+				$output_formats = apply_filters( 'image_editor_output_format', $output_formats, '', $mime_type );
+			}
+			$available['image_output_formats'] = (object) $output_formats;
+
+			/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+			$available['jpeg_interlaced'] = (bool) apply_filters( 'image_save_progressive', false, 'image/jpeg' );
+			/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+			$available['png_interlaced']  = (bool) apply_filters( 'image_save_progressive', false, 'image/png' );
+			/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+			$available['gif_interlaced']  = (bool) apply_filters( 'image_save_progressive', false, 'image/gif' );
+		}
+
 		$response = new WP_REST_Response( $available );
 
 		$fields = $request['_fields'] ?? '';