Changeset 64588

Timestamp:

10/20/2026 05:02:48 AM (8 hours ago)

Author:

adamsilverstein

Message:

Media: Enable client-side uploads in the Media Library and modal.

Enable client-side media processing for Uploads from the Media Library grid, the Add New Media File screen and the media modal in the block editor (in supported browsers).

These screens now use the same pipeline as block editor uploads: the original is uploaded through the REST API, sub-sizes are generated in the browser and sideloaded, then the attachment is finalized. wp_set_up_cross_origin_isolation() now also isolates the Media Library grid and the Add New Media File screen using Document Isolation Policy. Uploads huse the client-side processing still use the existing progress, tile and error UI.

When client-side processing is disabled, uploads fall back to the classic flow unchanged. Audio files, uploaders that do not post attachments, and JPEG/PNG files while plupload resizing is enabled also stay on the classic path, and a HEIC the browser cannot decode is handed to the server when its image editor supports HEIC. The Customizer, Site Icon picker and classic editor are not isolated and keep classic uploads.

See ​https://github.com/WordPress/gutenberg/issues/82409.

Props adamsilverstein, westonruter, andrewserong, sanayasir, arkaprabhachowdhury, logicrays.
Fixes #65661. See #66220.

Location:

trunk

Files:

• Gruntfile.js (modified) (2 diffs)
• package-lock.json (modified) (2 diffs)
• package.json (modified) (1 diff)
• src/js/_enqueues/admin/media-frame-upload.js (added)
• src/js/_enqueues/admin/media-new-upload.js (added)
• src/js/_enqueues/admin/media-upload-pipeline.js (added)
• src/wp-admin/media-new.php (modified) (1 diff)
• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/functions.php (modified) (6 diffs)
• src/wp-includes/media.php (modified) (9 diffs)
• src/wp-includes/rest-api/class-wp-rest-server.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/e2e/assets/test-audio.wav (added)
• tests/e2e/assets/test-image.jpg (added)
• tests/e2e/specs/media-library-client-side-upload.test.js (added)
• tests/e2e/specs/media-modal-client-side-upload.test.js (added)
• tests/e2e/specs/media-new-client-side-upload.test.js (added)
• tests/phpunit/tests/media/wpEnqueueMediaFrameUpload.php (added)
• tests/phpunit/tests/media/wpEnqueueMediaNewUpload.php (added)
• tests/phpunit/tests/media/wpIsDocumentIsolationPolicySupported.php (added)
• tests/phpunit/tests/media/wpMediaLibraryCrossOriginIsolation.php (added)
• tests/phpunit/tests/media/wpMediaNewCrossOriginIsolation.php (added)
• tsconfig.json (modified) (2 diffs)
• typings/media-uploads (added)
• typings/media-uploads/index.d.ts (added)
• typings/wp-globals/index.d.ts (modified) (1 diff)

trunk/Gruntfile.js

@@ -532 +532 @@
                                         [ WORKING_DIR + 'wp-admin/js/link.js' ]: [ './src/js/_enqueues/admin/link.js' ],
                                         [ WORKING_DIR + 'wp-admin/js/media-gallery.js' ]: [ './src/js/_enqueues/deprecated/media-gallery.js' ],
+                                        [ WORKING_DIR + 'wp-admin/js/media-frame-upload.js' ]: [ './src/js/_enqueues/admin/media-frame-upload.js' ],
+                                        [ WORKING_DIR + 'wp-admin/js/media-new-upload.js' ]: [ './src/js/_enqueues/admin/media-new-upload.js' ],
+                                        [ WORKING_DIR + 'wp-admin/js/media-upload-pipeline.js' ]: [ './src/js/_enqueues/admin/media-upload-pipeline.js' ],
                                         [ WORKING_DIR + 'wp-admin/js/media-upload.js' ]: [ './src/js/_enqueues/admin/media-upload.js' ],
                                         [ WORKING_DIR + 'wp-admin/js/media.js' ]: [ './src/js/_enqueues/admin/media.js' ],
@@ -1326 +1329 @@
                                         'src/wp-admin/js/link.js': 'src/js/_enqueues/admin/link.js',
                                         'src/wp-admin/js/media-gallery.js': 'src/js/_enqueues/deprecated/media-gallery.js',
+                                        'src/wp-admin/js/media-frame-upload.js': 'src/js/_enqueues/admin/media-frame-upload.js',
+                                        'src/wp-admin/js/media-new-upload.js': 'src/js/_enqueues/admin/media-new-upload.js',
+                                        'src/wp-admin/js/media-upload-pipeline.js': 'src/js/_enqueues/admin/media-upload-pipeline.js',
                                         'src/wp-admin/js/media-upload.js': 'src/js/_enqueues/admin/media-upload.js',
                                         'src/wp-admin/js/media.js': 'src/js/_enqueues/admin/media.js',

trunk/package-lock.json

@@ -47 +47 @@
                                 "@playwright/test": "1.61.1",
                                 "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
+                                "@types/backbone": "1.4.23",
                                 "@types/codemirror": "5.60.17",
                                 "@types/espree": "10.1.0",
@@ -5876 +5877 @@
                         }
                 },
+                "node_modules/@types/backbone": {
+                        "version": "1.4.23",
+                        "resolved": "https://registry.npmjs.org/@types/backbone/-/backbone-1.4.23.tgz",
+                        "integrity": "sha512-B/hN/DAJdWFOusEkEoa5xgfVuxJJPOR/6JQ2uwURPDyKL24PuC76IR6EcSRJ6lvGWtxHRQYMJQhJYm6KpMDtGQ==",
+                        "dev": true,
+                        "license": "MIT",
+                        "dependencies": {
+                                "@types/jquery": "*",
+                                "@types/underscore": "*"
+                        }
+                },
                 "node_modules/@types/body-parser": {
                         "version": "1.19.5",

trunk/package.json

@@ -45 +45 @@
                 "@playwright/test": "1.61.1",
                 "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
+                "@types/backbone": "1.4.23",
                 "@types/codemirror": "5.60.17",
                 "@types/espree": "10.1.0",

trunk/src/wp-admin/media-new.php

@@ -18 +18 @@
 
 wp_enqueue_script( 'plupload-handlers' );
+wp_enqueue_media_new_upload();
 
 $post_id = 0;

trunk/src/wp-includes/default-filters.php

@@ -719 +719 @@
 add_action( 'load-site-editor.php', 'wp_set_up_cross_origin_isolation' );
 add_action( 'load-widgets.php', 'wp_set_up_cross_origin_isolation' );
+add_action( 'load-upload.php', 'wp_set_up_cross_origin_isolation' );
+add_action( 'load-media-new.php', 'wp_set_up_cross_origin_isolation' );
 // Nav menu.
 add_filter( 'nav_menu_item_id', '_nav_menu_item_id_use_once', 10, 2 );

trunk/src/wp-includes/functions.php

@@ -3510 +3510 @@
  * @since 6.8.0 Support was added for `audio/x-wav`.
  *
- * @return string[] Array of mime types keyed by the file extension regex corresponding to those types.
+ * @return array<string, string> Array of mime types keyed by the file extension regex corresponding to those types.
  */
 function wp_get_mime_types() {
@@ -3521 +3521 @@
          * @since 3.5.0
          *
-         * @param string[] $wp_get_mime_types Mime types keyed by the file extension regex
-         *                                    corresponding to those types.
+         * @param array<string, string> $wp_get_mime_types Mime types keyed by the file extension regex
+         *                                                 corresponding to those types.
          */
         return apply_filters(
@@ -3646 +3646 @@
  * @since 4.6.0
  *
- * @return array[] Multi-dimensional array of file extensions types keyed by the type of file.
+ * @return array<string, string[]> Multi-dimensional array of file extensions types keyed by the type of file.
  */
 function wp_get_ext_types() {
@@ -3657 +3657 @@
          * @see wp_ext2type()
          *
-         * @param array[] $ext2type Multi-dimensional array of file extensions types keyed by the type of file.
+         * @param array<string, string[]> $ext2type Multi-dimensional array of file extensions types keyed by the type of file.
          */
         return apply_filters(
@@ -3731 +3731 @@
  *
  * @param int|WP_User $user Optional. User to check. Defaults to current user.
- * @return string[] Array of mime types keyed by the file extension regex corresponding
- *                  to those types.
+ * @return array<string, string> Array of mime types keyed by the file extension regex corresponding to those types.
  */
 function get_allowed_mime_types( $user = null ) {
@@ -3751 +3750 @@
          * @since 2.0.0
          *
-         * @param array            $t    Mime types keyed by the file extension regex corresponding to those types.
-         * @param int|WP_User|null $user User ID, User object or null if not provided (indicates current user).
+         * @param array<string, string> $t    Mime types keyed by the file extension regex corresponding to those types.
+         * @param int|WP_User|null      $user User ID, User object or null if not provided (indicates current user).
          */
         return apply_filters( 'upload_mimes', $t, $user );

trunk/src/wp-includes/media.php

@@ -4914 +4914 @@
  *
  * @since 3.5.0
+ * @since 7.2.0 Also enqueues the client-side upload integration for the media frame on cross-origin isolated screens.
  *
  * @global int       $content_width
@@ -5303 +5304 @@
          */
         wp_enqueue_script( 'media-editor' );
+        wp_enqueue_media_frame_upload();
         wp_localize_script( 'media-views', '_wpMediaViewsL10n', $strings );
 
@@ -6611 +6613 @@
         wp_add_inline_script( 'wp-block-editor', 'window.__clientSideMediaProcessing = true;', 'before' );
 
-        $chromium_version = wp_get_chromium_major_version();
-
-        if ( null !== $chromium_version && $chromium_version >= 137 ) {
+        if ( wp_is_document_isolation_policy_supported() ) {
                 wp_add_inline_script( 'wp-block-editor', 'window.__documentIsolationPolicy = true;', 'before' );
         }
@@ -6638 +6638 @@
 
 /**
- * Enables cross-origin isolation in the block editor.
+ * Determines whether the current request's browser honors the
+ * Document-Isolation-Policy header.
+ *
+ * Document-Isolation-Policy is how WordPress makes a page cross-origin
+ * isolated for client-side media processing. Chromium 137+ is the only
+ * engine that implements it; other browsers ignore the header, so the
+ * page never becomes isolated and the client-side pipeline cannot run.
+ *
+ * @since 7.2.0
+ *
+ * @return bool True when the browser is Chromium 137 or newer.
+ */
+function wp_is_document_isolation_policy_supported(): bool {
+        $chromium_version = wp_get_chromium_major_version();
+
+        return null !== $chromium_version && $chromium_version >= 137;
+}
+
+/**
+ * Enables cross-origin isolation on screens that upload media client-side.
  *
  * Required for enabling SharedArrayBuffer for WebAssembly-based
- * media processing in the editor. Uses Document-Isolation-Policy
+ * media processing in the block editor, the Media Library grid, and
+ * the "Add New Media File" screen. Uses Document-Isolation-Policy
  * on supported browsers (Chromium 137+).
+ *
+ * The Media Library is only isolated in grid mode: list mode has no
+ * client-side pipeline integration, its uploads go through the
+ * "Add New Media File" screen.
  *
  * Skips setup when a third-party page builder overrides the block
@@ -6649 +6673 @@
  *
  * @since 7.1.0
- * @since 7.2.0 Returns whether the header was sent.
+ * @since 7.2.0 Also isolates the Media Library grid and the "Add New Media File" screen.
+ *              Returns whether the header was sent.
  *
  * @return bool Whether the Document-Isolation-Policy header was sent.
@@ -6664 +6689 @@
         }
 
-        if ( ! $screen->is_block_editor() && 'site-editor' !== $screen->id && ! ( 'widgets' === $screen->id && wp_use_widgets_block_editor() ) ) {
+        $is_media_screen = 'media' === $screen->id || ( 'upload' === $screen->id && 'grid' === wp_get_media_library_mode() );
+
+        if (
+                ! $is_media_screen &&
+                ! $screen->is_block_editor() &&
+                'site-editor' !== $screen->id &&
+                ! ( 'widgets' === $screen->id && wp_use_widgets_block_editor() )
+        ) {
                 return false;
         }
@@ -6689 +6721 @@
          * which blocks same-origin iframe access that these editors rely on.
          */
-        if ( isset( $_GET['action'] ) && 'edit' !== $_GET['action'] ) {
+        if ( ! $is_media_screen && isset( $_GET['action'] ) && 'edit' !== $_GET['action'] ) {
                 return false;
         }
@@ -6699 +6731 @@
 
         return wp_send_document_isolation_policy_header();
+}
+
+/**
+ * Returns the current Media Library mode (grid or list).
+ *
+ * Replicates the mode resolution in wp-admin/upload.php, which runs after
+ * the `load-upload.php` hook, without updating the saved user option.
+ *
+ * upload.php falls back to grid mode for any falsey saved value and renders
+ * grid mode only for the exact value 'grid'. A truthy saved value outside the
+ * two known modes - one a plugin stored, say - therefore renders list mode
+ * there and resolves to 'list' here, so callers do not isolate a page that
+ * the Media Library renders in list mode.
+ *
+ * @since 7.2.0
+ *
+ * @return string The Media Library mode, 'grid' when none is saved.
+ * @phpstan-return 'grid'|'list'
+ */
+function wp_get_media_library_mode(): string {
+        $valid_modes = array( 'grid', 'list' );
+
+        // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+        if ( isset( $_GET['mode'] ) && in_array( $_GET['mode'], $valid_modes, true ) ) {
+                // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+                return $_GET['mode'];
+        }
+
+        $mode = get_user_option( 'media_library_mode', get_current_user_id() );
+
+        if ( in_array( $mode, $valid_modes, true ) ) {
+                return $mode;
+        }
+
+        // As in upload.php: nothing saved renders the grid, any other value the list.
+        return $mode ? 'list' : 'grid';
+}
+
+/**
+ * Returns the image processing settings for client-side media processing.
+ *
+ * Shared by the REST API index, which the block editor reads, and
+ * wp_get_media_library_upload_settings(), so both pipelines apply the
+ * same filters.
+ *
+ * @since 7.2.0
+ * @access private
+ *
+ * @return array<string, mixed> Image processing settings.
+ *
+ * @phpstan-return array{
+ *     image_sizes: array<string, array{
+ *         width: non-negative-int,
+ *         height: non-negative-int,
+ *         crop: array{ 'left'|'center'|'right', 'top'|'center'|'bottom' }|bool,
+ *     }>,
+ *     image_size_threshold: non-negative-int,
+ *     image_strip_meta: bool,
+ *     image_max_bit_depth: non-negative-int,
+ *     generate_animated_image_subsizes: bool,
+ * }
+ */
+function _wp_get_client_side_media_image_settings(): array {
+        /** This filter is documented in wp-admin/includes/image.php */
+        $image_size_threshold = max( 0, (int) apply_filters( 'big_image_size_threshold', 2560, array( 0, 0 ), '', 0 ) );
+
+        /** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+        $image_strip_meta = (bool) apply_filters( 'image_strip_meta', true );
+
+        /*
+         * On the server, this filter receives the decoded image's actual bit depth.
+         * The client path never decodes the image on the server, so the filter is
+         * applied with 16 (the maximum depth the client encoder can produce) as
+         * both the value and the current depth. The client caps its output bit
+         * depth at the filtered value, so a plugin lowering it (e.g. to 8) takes
+         * effect on client-generated images too.
+         */
+        /** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+        $image_max_bit_depth = max( 0, (int) apply_filters( 'image_max_bit_depth', 16, 16 ) );
+
+        /**
+         * Filters whether client-side media processing preserves animation in image sub-sizes.
+         *
+         * By default, sub-sizes of animated GIF and WebP images retain animation,
+         * including cropped sizes. Return false to generate static sub-sizes using
+         * only the first frame, reducing processing time in the browser.
+         *
+         * This setting applies only to client-side media processing. Server-side
+         * processing continues to generate static sub-sizes.
+         *
+         * @since 7.2.0
+         *
+         * @param bool $generate_animated_image_subsizes Whether to preserve animation in image sub-sizes.
+         *                                               Default true.
+         */
+        $generate_animated_image_subsizes = (bool) apply_filters( 'wp_generate_animated_image_subsizes', true );
+
+        return array(
+                'image_sizes'                      => wp_get_registered_image_subsizes(),
+                'image_size_threshold'             => $image_size_threshold,
+                'image_strip_meta'                 => $image_strip_meta,
+                'image_max_bit_depth'              => $image_max_bit_depth,
+                'generate_animated_image_subsizes' => $generate_animated_image_subsizes,
+        );
+}
+
+/**
+ * Returns the settings for the client-side media processing pipeline
+ * in the Media Library.
+ *
+ * These mirror the values the block editor consumes for the same
+ * pipeline: the REST index (the image processing settings, shared through
+ * _wp_get_client_side_media_image_settings()) and get_block_editor_settings()
+ * (max upload size and allowed mime types).
+ *
+ * @since 7.2.0
+ *
+ * @return array<string, mixed> Settings for the client-side media processing pipeline.
+ *
+ * @phpstan-return array{
+ *     maxUploadFileSize: non-negative-int,     // Maximum upload file size in bytes.
+ *     allowedMimeTypes: array<string, string>, // Allowed mime types keyed by file extension.
+ *     allImageSizes: array<string, array{      // All registered image sub-sizes.
+ *                        width: non-negative-int,
+ *                        height: non-negative-int,
+ *                        crop: array{ 'left'|'center'|'right', 'top'|'center'|'bottom' }|bool,
+ *                    }>,
+ *     bigImageSizeThreshold: non-negative-int, // Threshold above which originals are scaled down.
+ *     imageStripMeta: bool,                    // Whether metadata is stripped from generated images.
+ *     imageMaxBitDepth: non-negative-int,      // Maximum bit depth for generated images.
+ *     generateAnimatedImageSubsizes: bool,     // Whether sub-sizes of animated images stay animated.
+ * }
+ */
+function wp_get_media_library_upload_settings(): array {
+        $image_settings = _wp_get_client_side_media_image_settings();
+
+        return array(
+                'maxUploadFileSize'             => max( 0, (int) wp_max_upload_size() ),
+                'allowedMimeTypes'              => get_allowed_mime_types(),
+                'allImageSizes'                 => $image_settings['image_sizes'],
+                'bigImageSizeThreshold'         => $image_settings['image_size_threshold'],
+                'imageStripMeta'                => $image_settings['image_strip_meta'],
+                'imageMaxBitDepth'              => $image_settings['image_max_bit_depth'],
+                'generateAnimatedImageSubsizes' => $image_settings['generate_animated_image_subsizes'],
+        );
+}
+
+/**
+ * Enqueues a screen's client-side upload integration script along with the
+ * shared pipeline glue and its settings.
+ *
+ * Nothing is enqueued unless client-side media processing is enabled and the
+ * browser honors Document-Isolation-Policy: without isolation the page never
+ * becomes cross-origin isolated, the script would no-op, and the whole
+ * wp-upload-media dependency chain would be loaded for nothing. The same
+ * goes for a screen wp_set_up_cross_origin_isolation() did not isolate,
+ * such as the Customizer or the Site Icon picker: the media frame loads
+ * there too, but its uploads stay on the classic path.
+ *
+ * The screen script self-guards at runtime too: when the browser turns out
+ * not to be isolated or lacks client-side media support, it no-ops and the
+ * classic plupload flow keeps handling uploads.
+ *
+ * @since 7.2.0
+ * @access private
+ *
+ * @param string $handle The screen script to enqueue.
+ *
+ * @phpstan-param non-empty-string $handle
+ */
+function _wp_enqueue_media_upload_pipeline_script( string $handle ): void {
+        if (
+                ! wp_is_client_side_media_processing_enabled() ||
+                ! wp_is_document_isolation_policy_supported() ||
+                ! wp_is_cross_origin_isolated_request()
+        ) {
+                return;
+        }
+
+        wp_enqueue_script( $handle );
+
+        // Both screen scripts share the pipeline script, so add its settings once.
+        if ( wp_scripts()->get_data( 'media-upload-pipeline', 'settings_added' ) ) {
+                return;
+        }
+        wp_scripts()->add_data( 'media-upload-pipeline', 'settings_added', true );
+
+        $settings = wp_get_media_library_upload_settings();
+
+        // wp_enqueue_media() can run on the front end, where there is no screen.
+        $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
+
+        // The block editor configures the upload-media store itself; the pipeline waits for it.
+        $settings['isBlockEditor'] = $screen && $screen->is_block_editor();
+
+        $js_function = <<<'JS'
+                ( settings ) => {
+                        window._wpMediaUploadPipelineSettings = settings;
+                }
+                JS;
+
+        wp_add_inline_script(
+                'media-upload-pipeline',
+                sprintf( '( %s )( %s );', $js_function, wp_json_encode( $settings, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) ),
+                'before'
+        );
+}
+
+/**
+ * Enqueues the script that routes uploads started from a media frame
+ * through the client-side media processing pipeline.
+ *
+ * Covers every `wp.media` frame that uploads through `wp.Uploader`: the
+ * Media Library grid and the media modal the block editor, the site editor
+ * and the block widgets screen open. wp_enqueue_media() calls this on any
+ * screen that was cross-origin isolated, so it rarely needs calling directly.
+ *
+ * @since 7.2.0
+ */
+function wp_enqueue_media_frame_upload(): void {
+        _wp_enqueue_media_upload_pipeline_script( 'media-frame-upload' );
+}
+
+/**
+ * Enqueues the script that routes "Add New Media File" screen uploads
+ * through the client-side media processing pipeline.
+ *
+ * @since 7.2.0
+ */
+function wp_enqueue_media_new_upload(): void {
+        _wp_enqueue_media_upload_pipeline_script( 'media-new-upload' );
 }
 
@@ -6712 +6975 @@
  * @since 7.2.0
  *
+ * @global bool $_wp_cross_origin_isolated Whether the Document-Isolation-Policy header was sent.
+ *
  * @return bool Whether the header was sent. False if the browser does not
  *              support Document-Isolation-Policy or headers were already sent.
  */
 function wp_send_document_isolation_policy_header(): bool {
-        if ( headers_sent() ) {
+        global $_wp_cross_origin_isolated;
+
+        if ( headers_sent() || ! wp_is_document_isolation_policy_supported() ) {
                 return false;
         }
 
-        $chromium_version = wp_get_chromium_major_version();
-
-        if ( null === $chromium_version || $chromium_version < 137 ) {
-                return false;
-        }
-
         header( 'Document-Isolation-Policy: isolate-and-credentialless' );
 
+        $_wp_cross_origin_isolated = true;
+
         return true;
 }
 
+/**
+ * Whether the current request has been set up for cross-origin isolation.
+ *
+ * True once wp_set_up_cross_origin_isolation() has sent the
+ * Document-Isolation-Policy header for the screen being rendered, which is
+ * what lets scripts that need a cross-origin isolated page, such as the
+ * client-side media upload integration, decide whether to load at all.
+ *
+ * A plugin can isolate a screen on its own by sending the header directly,
+ * as the Gutenberg plugin does on the block editor screens, so a header
+ * already queued for the response counts too.
+ *
+ * @since 7.2.0
+ *
+ * @global bool $_wp_cross_origin_isolated Whether the Document-Isolation-Policy header was sent.
+ *
+ * @return bool True when the response will be cross-origin isolated.
+ */
+function wp_is_cross_origin_isolated_request(): bool {
+        global $_wp_cross_origin_isolated;
+
+        if ( true === $_wp_cross_origin_isolated ) {
+                return true;
+        }
+
+        foreach ( headers_list() as $header ) {
+                if ( 0 === stripos( $header, 'Document-Isolation-Policy:' ) ) {
+                        return true;
+                }
+        }
+
+        return false;
+}
+

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

@@ -1466 +1466 @@
                 // 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 );
-
-                        /** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
-                        $available['image_strip_meta'] = (bool) apply_filters( 'image_strip_meta', true );
-
-                        /*
-                         * On the server, this filter receives the decoded image's actual bit depth.
-                         * The client path never decodes the image on the server, so the filter is
-                         * applied with 16 (the maximum depth the client encoder can produce) as
-                         * both the value and the current depth. The client caps its output bit
-                         * depth at the filtered value, so a plugin lowering it (e.g. to 8) takes
-                         * effect on client-generated images too.
-                         */
-                        /** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
-                        $available['image_max_bit_depth'] = (int) apply_filters( 'image_max_bit_depth', 16, 16 );
-
-                        /**
-                         * Filters whether client-side media processing preserves animation in image sub-sizes.
-                         *
-                         * By default, sub-sizes of animated GIF and WebP images retain animation,
-                         * including cropped sizes. Return false to generate static sub-sizes using
-                         * only the first frame, reducing processing time in the browser.
-                         *
-                         * This setting applies only to client-side media processing. Server-side
-                         * processing continues to generate static sub-sizes.
-                         *
-                         * @since 7.2.0
-                         *
-                         * @param bool $generate_animated_image_subsizes Whether to preserve animation in image sub-sizes.
-                         *                                               Default true.
-                         */
-                        $available['generate_animated_image_subsizes'] = (bool) apply_filters( 'wp_generate_animated_image_subsizes', true );
+                        $available = array_merge( $available, _wp_get_client_side_media_image_settings() );
                 }
 

trunk/src/wp-includes/script-loader.php

@@ -1496 +1496 @@
                 $scripts->set_translations( 'media' );
 
+                $scripts->add( 'media-upload-pipeline', "/wp-admin/js/media-upload-pipeline$suffix.js", array( 'plupload', 'wp-upload-media', 'wp-media-utils', 'wp-api-fetch', 'wp-data', 'wp-element', 'wp-i18n' ), false, 1 );
+                $scripts->set_translations( 'media-upload-pipeline' );
+
+                $scripts->add( 'media-frame-upload', "/wp-admin/js/media-frame-upload$suffix.js", array( 'media-views', 'media-upload-pipeline' ), false, 1 );
+
+                $scripts->add( 'media-new-upload', "/wp-admin/js/media-new-upload$suffix.js", array( 'plupload-handlers', 'media-upload-pipeline', 'wp-a11y', 'wp-i18n' ), false, 1 );
+                $scripts->set_translations( 'media-new-upload' );
+
                 $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'imgareaselect', 'wp-a11y' ), false, 1 );
                 $scripts->set_translations( 'image-edit' );

trunk/tsconfig.json

@@ -22 +22 @@
                 "types": [
                         "node",
+                        "backbone",
                         "wp-globals",
+                        "media-uploads",
                         "browser-globals",
                         "wp-emoji",
@@ -31 +33 @@
         "include": [],
         "files": [
+                "src/js/_enqueues/admin/media-frame-upload.js",
+                "src/js/_enqueues/admin/media-new-upload.js",
+                "src/js/_enqueues/admin/media-upload-pipeline.js",
                 "src/js/_enqueues/lib/accordion.js",
                 "src/js/_enqueues/lib/codemirror/htmlhint-kses.js",

trunk/typings/wp-globals/index.d.ts

@@ -2 +2 @@
 declare var jQuery: import('jquery').JQueryStatic;
 declare var _: import('underscore');
-declare var Backbone: any;
 declare var HTMLHint: import('htmlhint').HTMLHint;