Ideas for 64845

babel.config.js

@@ -3,7 +3,11 @@ module.exports = ( api ) => {
 
 	return {
 		presets: [ '@wordpress/babel-preset-default' ],
-		plugins: [ '@emotion/babel-plugin', 'babel-plugin-inline-json-import' ],
+		plugins: [
+			'@emotion/babel-plugin',
+			'babel-plugin-inline-json-import',
+			require.resolve( '@shopify/web-worker/babel' ),
+		],
 		overrides: [
 			{
 				test: 'packages/block-library/src/index.js',

lib/client-assets.php

@@ -598,6 +598,25 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		array( 'react' ),
 		'18'
 	);
+
+	wp_register_script_module(
+		'@wordpress/vips/vips',
+		gutenberg_url( 'build/vendors/vips.wasm' ),
+		array(),
+		'vips-version-not-this-string'
+	);
+	wp_register_script_module(
+		'@wordpress/vips/vips-heif',
+		gutenberg_url( 'build/vendors/vips-heif.wasm' ),
+		array(),
+		'vips-version-not-this-string'
+	);
+	wp_register_script_module(
+		'@wordpress/vips/vips-jxl',
+		gutenberg_url( 'build/vendors/vips-jxl.wasm' ),
+		array(),
+		'vips-version-not-this-string'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 

lib/experimental/media/load.php

@@ -186,6 +186,24 @@
 	return null;
 }
 
+/**
+ * Filters the list of rewrite rules formatted for output to an .htaccess file.
+ *
+ * Adds support for serving wasm-vips locally.
+ *
+ * @param string $rules mod_rewrite Rewrite rules formatted for .htaccess.
+ * @return string Filtered rewrite rules.
+ */
+function gutenberg_filter_mod_rewrite_rules( string $rules ): string {
+	$rules .= "\n# BEGIN Gutenberg client-side media processing experiment\n" .
+	          "AddType application/wasm wasm\n" .
+	          "# END Gutenberg client-side media processing experiment\n";
+
+	return $rules;
+}
+
+add_filter( 'mod_rewrite_rules', 'gutenberg_filter_mod_rewrite_rules' );
+
 /**
  * Enables cross-origin isolation in the block editor.
  *
@@ -236,16 +254,11 @@
 	$coep = $is_safari ? 'require-corp' : 'credentialless';
 
 	ob_start(
 		function ( string $output, ?int $phase ) use ( $coep ): string {
-			// Only send the header when the buffer is not being cleaned.
-			if ( ( $phase & PHP_OUTPUT_HANDLER_CLEAN ) === 0 ) {
-				header( 'Cross-Origin-Opener-Policy: same-origin' );
-				header( "Cross-Origin-Embedder-Policy: $coep" );
-
-				$output = gutenberg_add_crossorigin_attributes( $output );
-			}
+			header( 'Cross-Origin-Opener-Policy: same-origin' );
+			header( "Cross-Origin-Embedder-Policy: $coep" );
 
-			return $output;
+			return gutenberg_add_crossorigin_attributes( $output );
 		}
 	);
 }

package.json

@@ -89,6 +89,7 @@
 		"@wordpress/undo-manager": "file:packages/undo-manager",
 		"@wordpress/url": "file:packages/url",
 		"@wordpress/viewport": "file:packages/viewport",
+		"@wordpress/vips": "file:packages/vips",
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount",
@@ -116,6 +117,7 @@
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",
 		"@react-native/metro-config": "0.73.4",
+		"@shopify/web-worker": "6.3.0",
 		"@storybook/addon-a11y": "7.6.15",
 		"@storybook/addon-actions": "7.6.15",
 		"@storybook/addon-controls": "7.6.15",

packages/media-utils/package.json

@@ -28,10 +28,12 @@
 	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@shopify/web-worker": "^6.3.0",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n"
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/vips": "file:../vips"
 	},
 	"publishConfig": {
 		"access": "public"

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { createWorkerFactory } from '@shopify/web-worker';
+
 /**
  * WordPress dependencies
  */
@@ -10,11 +15,33 @@
 import { transformAttachment } from './transform-attachment';
 import type { CreateRestAttachment, RestAttachment } from './types';
 
+/*
+ ! FOR TESTING PURPOSES ONLY !
+
+ __webpack_public_path__ will be something like
+ https://example/wp-content/plugins/gutenberg/build/media-utils/../../
+ */
+const createVipsWorker = createWorkerFactory(
+	() => import( /* webpackChunkName: 'vips' */ '@wordpress/vips' )
+);
+const vipsWorker = createVipsWorker();
+
+//void vipsWorker.setLocation( __webpack_public_path__ );
+
 export async function uploadToServer(
 	file: File,
 	additionalData: CreateRestAttachment = {},
 	signal?: AbortSignal
 ) {
+	// FOR TESTING PURPOSES ONLY!
+	const outBuffer = await vipsWorker.compressImage(
+		'foo',
+		await file.arrayBuffer(),
+		file.type
+	);
+	const blob = new Blob( [ outBuffer ], { type: file.type } );
+	file = new File( [ blob ], file.name, { type: file.type } );
+
 	// Create upload payload.
 	const data = new FormData();
 	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );

packages/media-utils/tsconfig.json

@@ -12,6 +12,7 @@
 		{ "path": "../api-fetch" },
 		{ "path": "../blob" },
 		{ "path": "../element" },
-		{ "path": "../i18n" }
+		{ "path": "../i18n" },
+		{ "path": "../vips" }
 	]
 }

packages/vips/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/vips/CHANGELOG.md

@@ -0,0 +1,7 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+### New Features
+
+-   Initial public release.