Skip to content

Feature branch for testing client side media#74568

Closed
adamsilverstein wants to merge 236 commits into
trunkfrom
feature/client-side-media-dev
Closed

Feature branch for testing client side media#74568
adamsilverstein wants to merge 236 commits into
trunkfrom
feature/client-side-media-dev

Conversation

@adamsilverstein

@adamsilverstein adamsilverstein commented Jan 13, 2026

Copy link
Copy Markdown
Member

This is the dev branch,

For the testing branch see #75189

What?

This branch includes all Client Side Media work, including in-progress PRs that are not yet merged. It is for testing purposes only.

See #74822

Debugging

  • This PR includes extensive debug logging in the console for each part of the media handling pipeline.

Included code

Rebased on trunk on Feb 2.

  • 74355-create-subsized-images
  • 74554-save-button-remains-disabled-with-use-upload-save-lock

Do not merge

DO NOT MERGE - testing branch only.

@github-actions github-actions Bot added [Package] Editor /packages/editor [Package] Block editor /packages/block-editor [Package] Date /packages/date [Package] Components /packages/components [Package] Block library /packages/block-library [Package] Theme /packages/theme labels Jan 13, 2026
@adamsilverstein adamsilverstein added [Feature] Client Side Media Media processing in the browser with WASM and removed [Package] Date /packages/date [Package] Components /packages/components [Package] Editor /packages/editor [Package] Block library /packages/block-library [Package] Block editor /packages/block-editor [Package] Theme /packages/theme labels Jan 13, 2026
@github-project-automation github-project-automation Bot moved this to 🔎 Needs Review in WordPress 7.0 Editor Tasks Jan 13, 2026
@adamsilverstein adamsilverstein self-assigned this Jan 13, 2026
@adamsilverstein adamsilverstein added the [Type] Enhancement A suggestion for improvement. label Jan 13, 2026
adamsilverstein and others added 6 commits February 2, 2026 11:52
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit implements output format conversion for client-side media
processing, enabling generation of modern image formats (AVIF, WebP)
and modern JPEG codecs (MozJPEG) during upload.

Key changes:

- Add TranscodeImage operation type for format conversion
- Add imageOutputFormats, jpegInterlaced, pngInterlaced, gifInterlaced
  settings that flow from PHP REST API through the settings stack
- Implement transcodeImageItem action using vipsConvertImageFormat
- Update prepareItem to check format mapping and add TranscodeImage
  operations when needed
- Add transparency check for PNG->JPEG to preserve alpha channels
- Apply format conversion to generated thumbnails
- Add MozJPEG optimizations (optimize_coding, quant_table) for JPEG
  output, providing ~10-15% smaller file sizes

The implementation respects WordPress's image_editor_output_format
filter for format mapping configuration.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix blob URL memory leak using try/finally pattern for transparency check
- Add format validation before ImageFormat type assertion
- Improve JSDoc for Settings interface properties
- Add clarifying comment for empty filename in image_editor_output_format filter

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The preload filter was using str_replace to insert media fields after
"home,", but this pattern-based approach could fail if WordPress's
preload path had a different field order. This caused an extra REST
API request to the root endpoint in the site editor.

Replace the entire _fields parameter with the complete list expected by
packages/core-data/src/entities.js to ensure exact URL match for preloading.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@adamsilverstein adamsilverstein force-pushed the feature/client-side-media-dev branch from 1fb78d7 to 89e2a02 Compare February 2, 2026 20:04
adamsilverstein and others added 13 commits February 2, 2026 12:11
…-lock-trunk' into feature/client-side-media-dev
The ES6 version of wasm-vips uses import.meta for path resolution,
which requires the worker to be created as a module worker.
Classic script workers (the default) don't support import.meta,
causing the WASM module to fail loading with an undefined error.

By adding { type: 'module' } to the Worker constructor, import.meta
becomes available, and the ES6 version's locateFile callback works
correctly with our base64 data URL approach.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Merges the module worker type fix while keeping the preload paths function.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add esbuild plugin to redirect wasm-vips ES module (vips-es6.js) to
CommonJS version (vips.js) which doesn't use import.meta.url that fails
in Blob URL Worker context.

Also:
- Upgrade wasm-vips from ^0.0.10 to ^0.0.16
- Add vips-heif.wasm inline import and locateFile handler

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@adamsilverstein

Copy link
Copy Markdown
Member Author

Note: uploading working again as of b13a717

adamsilverstein and others added 3 commits February 2, 2026 19:47
- Remove vips-heif.wasm import
- Add dynamicLibraries config to only load JXL module
- Remove HEIF handler from locateFile callback

HEIC/HEIF input support is removed, but JPEG, PNG, WebP, GIF,
AVIF output and JXL support remain unaffected.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Set DEBUG_ENABLED to false to prevent unexpected console.log
calls that cause test failures with @wordpress/jest-console.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move media processing fields (image_output_formats, jpeg_interlaced,
png_interlaced, gif_interlaced) from a filter in load.php to the
template files directly. This simplifies the code path and ensures
the preload paths match exactly with entities.js.

- Add fields to page.php.template and page-wp-admin.php.template
- Remove gutenberg_media_processing_preload_paths filter from load.php
- Update @see references in entities.js

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix prettier formatting in worker-build.mjs (multiline .replace and template literal)
- Add missing fields to preload.php: image_output_formats, jpeg_interlaced, png_interlaced, gif_interlaced

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@adamsilverstein adamsilverstein added the No Core Sync Required Indicates that any changes do not need to be synced to WordPress Core label Feb 3, 2026
@github-project-automation github-project-automation Bot moved this from 🔎 Needs Review to ✅ Done in WordPress 7.0 Editor Tasks May 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Client Side Media Media processing in the browser with WASM No Core Sync Required Indicates that any changes do not need to be synced to WordPress Core [Package] Block editor /packages/block-editor [Package] Core data /packages/core-data [Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement.

Projects

Development

Successfully merging this pull request may close these issues.

4 participants