Media: Graduate client-side media processing from experimental

backport-changelog/7.0/10868.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/10868
 
 * https://github.com/WordPress/gutenberg/pull/74909
+* https://github.com/WordPress/gutenberg/pull/75112

lib/compat/wordpress-6.9/rest-api.php

@@ -42,7 +42,7 @@ function gutenberg_rest_theme_export_link_rel( $response, $theme ) {
  * @return array Modified array of arguments.
  */
 function gutenberg_override_attachments_rest_controller( $args, $post_type ) {
-	if ( 'attachment' === $post_type && ! gutenberg_is_experiment_enabled( 'gutenberg-media-processing' ) ) {
+	if ( 'attachment' === $post_type && ! gutenberg_is_client_side_media_processing_enabled() ) {
 		$args['rest_controller_class'] = 'Gutenberg_REST_Attachments_Controller_6_9';
 	}
 	return $args;

lib/compat/wordpress-7.0/media.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Client-side media processing functions.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * 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 20.8.0
+ *
+ * @return bool Whether client-side media processing is enabled.
+ */
+function gutenberg_is_client_side_media_processing_enabled() {
+	/**
+	 * Filters whether client-side media processing is enabled.
+	 *
+	 * @since 20.8.0
+	 *
+	 * @param bool $enabled Whether client-side media processing is enabled. Default true.
+	 */
+	return apply_filters( 'wp_client_side_media_processing_enabled', true );
+}

lib/experimental/editor-settings.php

@@ -22,9 +22,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-dataviews-media-modal', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalDataViewsMediaModal = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-content-only-inspector-fields', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalContentOnlyInspectorFields = true', 'before' );
 	}

lib/experiments-page.php

@@ -113,18 +113,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-media-processing',
-		__( 'Client-side media processing', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Enables client-side media processing to leverage the browser\'s capabilities to handle tasks like image resizing and compression.', 'gutenberg' ),
-			'id'    => 'gutenberg-media-processing',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-color-randomizer',
 		__( 'Color randomizer', 'gutenberg' ),

lib/load.php

@@ -108,6 +108,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-7.0/auto-register.php';
 require __DIR__ . '/compat/wordpress-7.0/blocks.php';
 require __DIR__ . '/compat/wordpress-7.0/kses.php';
+require __DIR__ . '/compat/wordpress-7.0/media.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
@@ -189,9 +190,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/custom-css.php';
 
 // Client-side media processing.
-if ( gutenberg_is_experiment_enabled( 'gutenberg-media-processing' ) ) {
-	require_once __DIR__ . '/experimental/media/load.php';
-}
+require_once __DIR__ . '/media/load.php';
 
 // Interactivity API full-page client-side navigation.
 if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {

lib/experimental/media/class-gutenberg-rest-attachments-controller.php → lib/media/class-gutenberg-rest-attachments-controller.php

@@ -2,11 +2,14 @@
 /**
  * Class Gutenberg_REST_Attachments_Controller.
  *
- * @package MediaExperiments
+ * @package gutenberg
  */
 
 /**
- * Class Gutenberg_REST_Attachments_Controller.
+ * REST API controller for media attachments.
+ *
+ * Extends the core attachments controller to add client-side media processing
+ * functionality including sideload support and sub-size generation control.
  */
 class Gutenberg_REST_Attachments_Controller extends WP_REST_Attachments_Controller {
 	/**

lib/experimental/media/load.php → lib/media/load.php

@@ -1,10 +1,25 @@
 <?php
 /**
- * Adds media-related experimental functionality.
+ * Adds media-related functionality for client-side media processing.
  *
  * @package gutenberg
  */
 
+if ( ! gutenberg_is_client_side_media_processing_enabled() ) {
+	return;
+}
+
+/**
+ * Sets a global JS variable to indicate that client-side media processing is enabled.
+ */
+function gutenberg_set_client_side_media_processing_flag() {
+	if ( ! gutenberg_is_client_side_media_processing_enabled() ) {
+		return;
+	}
+	wp_add_inline_script( 'wp-block-editor', 'window.__clientSideMediaProcessing = true', 'before' );
+}
+add_action( 'admin_init', 'gutenberg_set_client_side_media_processing_flag' );
+
 /**
  * Returns a list of all available image sizes.
  *
@@ -195,9 +210,9 @@ function gutenberg_rest_get_attachment_filesize( array $post ): ?int {
  * @return string Filtered rewrite rules.
  */
 function gutenberg_filter_mod_rewrite_rules( string $rules ): string {
-	$rules .= "\n# BEGIN Gutenberg client-side media processing experiment\n" .
+	$rules .= "\n# BEGIN Gutenberg client-side media processing\n" .
 				"AddType application/wasm wasm\n" .
-				"# END Gutenberg client-side media processing experiment\n";
+				"# END Gutenberg client-side media processing\n";
 
 	return $rules;
 }
@@ -213,6 +228,12 @@ function gutenberg_filter_mod_rewrite_rules( string $rules ): string {
  * @link https://web.dev/coop-coep/
  */
 function gutenberg_set_up_cross_origin_isolation() {
+	// Re-check the filter at action time, since other plugins (loaded after Gutenberg)
+	// may have added a filter to disable client-side media processing.
+	if ( ! gutenberg_is_client_side_media_processing_enabled() ) {
+		return;
+	}
+
 	$screen = get_current_screen();
 
 	if ( ! $screen ) {

packages/block-editor/src/components/provider/index.js

@@ -41,7 +41,7 @@ let isClientSideMediaEnabledCache = null;
  * Checks if client-side media processing should be enabled.
  *
  * Returns true only if:
- * 1. The experimental media processing flag is enabled
+ * 1. The client-side media processing flag is enabled
  * 2. The browser supports WebAssembly, SharedArrayBuffer, cross-origin isolation, and CSP allows blob workers
  *
  * The result is cached for the session to ensure stability during React renders.
@@ -54,8 +54,8 @@ function shouldEnableClientSideMediaProcessing() {
 		return isClientSideMediaEnabledCache;
 	}
 
-	// Check if experimental flag is enabled first.
-	if ( ! window.__experimentalMediaProcessing ) {
+	// Check if the client-side media processing flag is enabled first.
+	if ( ! window.__clientSideMediaProcessing ) {
 		isClientSideMediaEnabledCache = false;
 		return false;
 	}

packages/block-library/src/image/edit.js

@@ -348,7 +348,7 @@ export function ImageEdit( {
 
 	const isSideloading = useSelect(
 		( select ) => {
-			if ( ! window.__experimentalMediaProcessing || ! id ) {
+			if ( ! window.__clientSideMediaProcessing || ! id ) {
 				return false;
 			}
 			return select( uploadStore ).isUploadingById( id );

packages/e2e-tests/plugins/disable-client-side-media-processing.php

@@ -0,0 +1,10 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin: Disable Client-Side Media Processing
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-disable-client-side-media-processing
+ */
+
+add_filter( 'wp_client_side_media_processing_enabled', '__return_false' );

packages/edit-post/src/index.js

@@ -74,7 +74,7 @@ export function initializeEditor(
 		isPublishSidebarEnabled: true,
 	} );
 
-	if ( window.__experimentalMediaProcessing ) {
+	if ( window.__clientSideMediaProcessing ) {
 		dispatch( preferencesStore ).setDefaults( 'core/media', {
 			requireApproval: true,
 			optimizeOnUpload: true,

packages/edit-site/src/index.js

@@ -75,7 +75,7 @@ export function initializeEditor( id, settings ) {
 		enableChoosePatternModal: true,
 	} );
 
-	if ( window.__experimentalMediaProcessing ) {
+	if ( window.__clientSideMediaProcessing ) {
 		dispatch( preferencesStore ).setDefaults( 'core/media', {
 			requireApproval: true,
 			optimizeOnUpload: true,

packages/editor/src/components/preferences-modal/index.js

@@ -298,7 +298,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 						</>
 					),
 				},
-				window.__experimentalMediaProcessing && {
+				window.__clientSideMediaProcessing && {
 					name: 'media',
 					tabLabel: __( 'Media' ),
 					content: (

packages/editor/src/components/provider/use-upload-save-lock.js

@@ -16,19 +16,20 @@ const LOCK_NAME = 'upload-in-progress';
  * A hook that locks post saving and autosaving while media uploads are in progress.
  * This prevents users from publishing or saving while files are still uploading.
  *
- * Only active when the experimental media processing feature is enabled.
+ * Only active when client-side media processing is enabled.
  */
 export default function useUploadSaveLock() {
-	const isExperimentEnabled = window.__experimentalMediaProcessing;
+	const isClientSideMediaProcessingEnabled =
+		window.__clientSideMediaProcessing;
 
 	const isUploading = useSelect(
 		( select ) => {
-			if ( ! isExperimentEnabled ) {
+			if ( ! isClientSideMediaProcessingEnabled ) {
 				return false;
 			}
 			return select( uploadStore ).isUploading();
 		},
-		[ isExperimentEnabled ]
+		[ isClientSideMediaProcessingEnabled ]
 	);
 
 	const {
@@ -39,7 +40,7 @@ export default function useUploadSaveLock() {
 	} = useDispatch( editorStore );
 
 	useEffect( () => {
-		if ( ! isExperimentEnabled ) {
+		if ( ! isClientSideMediaProcessingEnabled ) {
 			return;
 		}
 
@@ -56,7 +57,7 @@ export default function useUploadSaveLock() {
 			unlockPostAutosaving( LOCK_NAME );
 		};
 	}, [
-		isExperimentEnabled,
+		isClientSideMediaProcessingEnabled,
 		isUploading,
 		lockPostSaving,
 		unlockPostSaving,

packages/editor/src/utils/media-upload/index.js

@@ -62,13 +62,19 @@ export default function mediaUpload( {
 			? currentPost.id
 			: currentPost?.wp_id;
 	const setSaveLock = () => {
+		if ( window.__clientSideMediaProcessing ) {
+			return; // Skip - handled by useUploadSaveLock in editor provider
+		}
 		lockPostSaving( lockKey );
 		lockPostAutosaving( lockKey );
 		imageIsUploading = true;
 	};
 
 	const postData = currentPostId ? { post: currentPostId } : {};
 	const clearSaveLock = () => {
+		if ( window.__clientSideMediaProcessing ) {
+			return; // Skip - handled by useUploadSaveLock in editor provider
+		}
 		unlockPostSaving( lockKey );
 		unlockPostAutosaving( lockKey );
 		imageIsUploading = false;
@@ -80,7 +86,7 @@ export default function mediaUpload( {
 		onFileChange: ( file ) => {
 			// When client-side media processing is enabled, save locking
 			// is handled by useUploadSaveLock in the editor provider.
-			if ( ! window.__experimentalMediaProcessing ) {
+			if ( ! window.__clientSideMediaProcessing ) {
 				if ( ! imageIsUploading ) {
 					setSaveLock();
 				} else {
@@ -111,7 +117,7 @@ export default function mediaUpload( {
 		},
 		maxUploadFileSize,
 		onError: ( { message } ) => {
-			if ( ! window.__experimentalMediaProcessing ) {
+			if ( ! window.__clientSideMediaProcessing ) {
 				clearSaveLock();
 			}
 			onError( message );

packages/media-utils/src/utils/upload-media.ts

@@ -21,7 +21,7 @@ import { UploadError } from './upload-error';
 
 declare global {
 	interface Window {
-		__experimentalMediaProcessing?: boolean;
+		__clientSideMediaProcessing?: boolean;
 	}
 }
 
@@ -82,7 +82,7 @@ export function uploadMedia( {
 	const filesSet: Array< Partial< Attachment > | null > = [];
 	const setAndUpdateFiles = ( index: number, value: Attachment | null ) => {
 		// For client-side media processing, this is handled by the upload-media package.
-		if ( ! window.__experimentalMediaProcessing ) {
+		if ( ! window.__clientSideMediaProcessing ) {
 			if ( filesSet[ index ]?.url ) {
 				revokeBlobURL( filesSet[ index ].url );
 			}
@@ -123,7 +123,7 @@ export function uploadMedia( {
 		validFiles.push( mediaFile );
 
 		// For client-side media processing, this is handled by the upload-media package.
-		if ( ! window.__experimentalMediaProcessing ) {
+		if ( ! window.__clientSideMediaProcessing ) {
 			// Set temporary URL to create placeholder media file, this is replaced
 			// with final file from media gallery when upload is `done` below.
 			filesSet.push( { url: createBlobURL( mediaFile ) } );

phpunit/bootstrap.php

@@ -90,7 +90,6 @@ function fail_if_died( $message ) {
 		'gutenberg-full-site-editing'  => 1,
 		'gutenberg-form-blocks'        => 1,
 		'gutenberg-block-experiments'  => 1,
-		'gutenberg-media-processing'   => 1,
 	),
 );
 

phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php → phpunit/media/class-gutenberg-rest-attachments-controller-test.php

@@ -1,4 +1,11 @@
 <?php
+/**
+ * Tests for Gutenberg_REST_Attachments_Controller.
+ *
+ * Tests the REST API controller for media attachments which provides
+ * client-side media processing functionality including sideload support
+ * and sub-size generation control.
+ */
 
 /**
  * @coversDefaultClass \Gutenberg_REST_Attachments_Controller