Create sub-sized images

.eslintignore

@@ -7,5 +7,6 @@ node_modules
 packages/block-serialization-spec-parser/parser.js
 packages/icons/src/library/*.tsx
 packages/react-native-editor/bundle
+packages/vips/src/worker-code.ts
 vendor
 !.*.js

lib/client-assets.php

@@ -439,6 +439,20 @@ function gutenberg_enqueue_latex_to_mathml_loader() {
 	wp_enqueue_script_module( '@wordpress/latex-to-mathml/loader' );
 }
 
+/**
+ * Enqueue the vips loader script module in the block editor.
+ *
+ * This registers @wordpress/vips/worker as a dynamic dependency in the import map,
+ * enabling on-demand loading of the ~3.8MB WASM-based image processing module
+ * when client-side media processing is triggered via @wordpress/upload-media.
+ *
+ * @see packages/vips/src/loader.ts
+ */
+add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_vips_loader' );
+function gutenberg_enqueue_vips_loader() {
+	wp_enqueue_script_module( '@wordpress/vips/loader' );
+}
+
 add_action( 'admin_enqueue_scripts', 'gutenberg_enqueue_core_abilities' );
 function gutenberg_enqueue_core_abilities() {
 	wp_enqueue_script_module( '@wordpress/core-abilities' );

lib/compat/wordpress-7.0/preload.php

@@ -26,3 +26,34 @@ static function ( $path ) {
 	return $paths;
 }
 add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_9', 10, 2 );
+
+/**
+ * Filters the block editor preload paths to include media processing fields.
+ *
+ * The packages/core-data/src/entities.js file requests additional fields
+ * (image_sizes, image_size_threshold) on the root endpoint that are not
+ * included in WordPress Core's default preload paths. This filter ensures
+ * the preloaded URL matches exactly what the JavaScript requests.
+ *
+ * @since 20.1.0
+ *
+ * @param array $paths REST API paths to preload.
+ * @return array Filtered preload paths.
+ */
+function gutenberg_block_editor_preload_paths_root_fields( $paths ) {
+	// Complete list of fields expected by packages/core-data/src/entities.js.
+	// This must match exactly for preloading to work (same fields, same order).
+	// @see packages/core-data/src/entities.js rootEntitiesConfig.__unstableBase
+	$root_fields = 'description,gmt_offset,home,image_sizes,image_size_threshold,image_output_formats,jpeg_interlaced,png_interlaced,gif_interlaced,name,site_icon,site_icon_url,site_logo,timezone_string,url,page_for_posts,page_on_front,show_on_front';
+
+	foreach ( $paths as $key => $path ) {
+		if ( is_string( $path ) && str_starts_with( $path, '/?_fields=' ) ) {
+			// Replace with the complete fields list to ensure exact match.
+			$paths[ $key ] = '/?_fields=' . $root_fields;
+			break;
+		}
+	}
+
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_root_fields' );

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

@@ -78,10 +78,31 @@ public function get_endpoint_args_for_item_schema( $method = WP_REST_Server::CRE
 		return $args;
 	}
 
+	/**
+	 * Retrieves the attachment's schema, conforming to JSON Schema.
+	 *
+	 * Adds exif_orientation field to the schema.
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		$schema = parent::get_item_schema();
+
+		$schema['properties']['exif_orientation'] = array(
+			'description' => __( 'EXIF orientation value from the original image. Values 1-8 follow the EXIF specification. A value other than 1 indicates the image needs rotation.', 'gutenberg' ),
+			'type'        => 'integer',
+			'context'     => array( 'edit' ),
+			'readonly'    => true,
+		);
+
+		return $schema;
+	}
+
 	/**
 	 * Prepares a single attachment output for response.
 	 *
 	 * Ensures 'missing_image_sizes' is set for PDFs and not just images.
+	 * Adds 'exif_orientation' for images that need client-side rotation.
 	 *
 	 * @param WP_Post         $item    Attachment object.
 	 * @param WP_REST_Request $request Request object.
@@ -92,10 +113,27 @@ public function prepare_item_for_response( $item, $request ): WP_REST_Response {
 
 		$data = $response->get_data();
 
-		// Handle missing image sizes for PDFs.
-
 		$fields = $this->get_fields_for_response( $request );
 
+		// Add EXIF orientation for images.
+		if ( rest_is_field_included( 'exif_orientation', $fields ) ) {
+			if ( wp_attachment_is_image( $item ) ) {
+				$metadata = wp_get_attachment_metadata( $item->ID, true );
+
+				// Get the EXIF orientation from the image metadata.
+				// This is stored by wp_read_image_metadata() during upload.
+				$orientation = 1; // Default: no rotation needed.
+				if (
+					is_array( $metadata ) &&
+					isset( $metadata['image_meta']['orientation'] )
+				) {
+					$orientation = (int) $metadata['image_meta']['orientation'];
+				}
+
+				$data['exif_orientation'] = $orientation;
+			}
+		}
+
 		if (
 			rest_is_field_included( 'missing_image_sizes', $fields ) &&
 			empty( $data['missing_image_sizes'] )
@@ -158,7 +196,9 @@ public function create_item( $request ) {
 		if ( ! $request['generate_sub_sizes'] ) {
 			add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array', 100 );
 			add_filter( 'fallback_intermediate_image_sizes', '__return_empty_array', 100 );
-
+			// Disable server-side EXIF rotation so the client can handle it.
+			// This preserves the original orientation value in the metadata.
+			add_filter( 'wp_image_maybe_exif_rotate', '__return_false', 100 );
 		}
 
 		if ( ! $request['convert_format'] ) {
@@ -169,6 +209,7 @@ public function create_item( $request ) {
 
 		remove_filter( 'intermediate_image_sizes_advanced', '__return_empty_array', 100 );
 		remove_filter( 'fallback_intermediate_image_sizes', '__return_empty_array', 100 );
+		remove_filter( 'wp_image_maybe_exif_rotate', '__return_false', 100 );
 		remove_filter( 'image_editor_output_format', '__return_empty_array', 100 );
 
 		return $response;

package.json

@@ -60,6 +60,7 @@
 		"@types/uuid": "8.3.1",
 		"@vitejs/plugin-react": "5.1.2",
 		"@wordpress/build": "file:./packages/wp-build",
+		"@wordpress/vips": "1.0.0-prerelease",
 		"ajv": "8.17.1",
 		"babel-jest": "29.7.0",
 		"babel-loader": "9.2.1",

packages/block-editor/src/components/provider/use-media-upload-settings.js

@@ -17,6 +17,8 @@ function useMediaUploadSettings( settings = {} ) {
 			mediaSideload: settings.mediaSideload,
 			maxUploadFileSize: settings.maxUploadFileSize,
 			allowedMimeTypes: settings.allowedMimeTypes,
+			allImageSizes: settings.allImageSizes,
+			bigImageSizeThreshold: settings.bigImageSizeThreshold,
 		} ),
 		[ settings ]
 	);

packages/block-library/package.json

@@ -126,6 +126,7 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
+		"@wordpress/upload-media": "file:../upload-media",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",

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

@@ -25,6 +25,7 @@ import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { useResizeObserver } from '@wordpress/compose';
 import { getProtocol, prependHTTPS } from '@wordpress/url';
+import { store as uploadStore } from '@wordpress/upload-media';
 
 /**
  * Internal dependencies
@@ -344,6 +345,17 @@ export function ImageEdit( {
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;
+
+	const isSideloading = useSelect(
+		( select ) => {
+			if ( ! window.__experimentalMediaProcessing || ! id ) {
+				return false;
+			}
+			return select( uploadStore ).isUploadingById( id );
+		},
+		[ id ]
+	);
+
 	const mediaPreview = !! url && (
 		<img
 			alt={ __( 'Edit image' ) }
@@ -357,7 +369,7 @@ export function ImageEdit( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = clsx( className, {
-		'is-transient': !! temporaryURL,
+		'is-transient': !! temporaryURL || isSideloading,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'has-custom-border':
@@ -448,6 +460,7 @@ export function ImageEdit( {
 			<figure { ...blockProps }>
 				<Image
 					temporaryURL={ temporaryURL }
+					isSideloading={ isSideloading }
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 					isSingleSelected={ isSingleSelected }

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

@@ -258,6 +258,7 @@ function ContentOnlyControls( {
 
 export default function Image( {
 	temporaryURL,
+	isSideloading,
 	attributes,
 	setAttributes,
 	isSingleSelected,
@@ -874,7 +875,9 @@ export default function Image( {
 									onSelectURL={ onSelectURL }
 									onError={ onUploadError }
 									onReset={ () => onSelectImage( undefined ) }
-									isUploading={ !! temporaryURL }
+									isUploading={
+										!! temporaryURL || isSideloading
+									}
 									emptyLabel={ __( 'Add image' ) }
 								/>
 							</ToolsPanelItem>
@@ -1065,7 +1068,7 @@ export default function Image( {
 						...shadowProps.style,
 					} }
 				/>
-				{ temporaryURL && <Spinner /> }
+				{ ( temporaryURL || isSideloading ) && <Spinner /> }
 			</>
 		);
 

packages/block-library/tsconfig.json

@@ -32,6 +32,7 @@
 		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
 		{ "path": "../rich-text" },
+		{ "path": "../upload-media" },
 		{ "path": "../url" },
 		{ "path": "../wordcount" }
 	],

packages/core-data/src/entities.js

@@ -42,11 +42,17 @@ export const rootEntitiesConfig = [
 		baseURL: '/',
 		baseURLParams: {
 			// Please also change the preload path when changing this.
-			// @see lib/compat/wordpress-6.8/preload.php
+			// @see lib/compat/wordpress-7.0/preload.php
 			_fields: [
 				'description',
 				'gmt_offset',
 				'home',
+				'image_sizes',
+				'image_size_threshold',
+				'image_output_formats',
+				'jpeg_interlaced',
+				'png_interlaced',
+				'gif_interlaced',
 				'name',
 				'site_icon',
 				'site_icon_url',

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -45,6 +45,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalDiscussionSettings',
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
+	'allImageSizes',
 	'alignWide',
 	'blockInspectorTabs',
 	'maxUploadFileSize',
@@ -116,6 +117,8 @@ const {
 function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		allImageSizes,
+		bigImageSizeThreshold,
 		allowRightClickOverrides,
 		blockTypes,
 		focusMode,
@@ -154,6 +157,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
+			// Fetch image sizes from REST API index for client-side media processing.
+			const baseData = getEntityRecord( 'root', '__unstableBase' );
+
 			function getSectionRootBlock() {
 				if ( renderingMode === 'template-locked' ) {
 					return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';
@@ -168,6 +174,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			}
 
 			return {
+				allImageSizes: baseData?.image_sizes,
+				bigImageSizeThreshold: baseData?.image_size_threshold,
 				allowRightClickOverrides: get(
 					'core',
 					'allowRightClickOverrides'
@@ -328,6 +336,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			),
 			[ globalStylesDataKey ]: globalStylesData,
 			[ globalStylesLinksDataKey ]: globalStylesLinksData,
+			allImageSizes,
+			bigImageSizeThreshold,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
@@ -431,6 +441,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		editMediaEntity,
 		wrappedOnNavigateToEntityRecord,
 		deviceType,
+		allImageSizes,
+		bigImageSizeThreshold,
 		isNavigationOverlayContext,
 	] );
 }