Add/client side media uploads by adamsilverstein · Pull Request #70623 · WordPress/gutenberg

adamsilverstein · 2025-07-05T20:32:30Z

What?

Follow up to #64278, this PR aims to provide only the minimal changes required to move media processing (eg. sub-sized image generation when users upload images) to the client from the server.

See #61447 for full context.

Follow up tasks to align with core

All of these features are already handled in the media-experiments plugins and only need to be ported/polished for Gutenberg.

Support core output mapping (from the image_editor_output_format filter)
Support for all types including video, PDF, WebP, HEIF and AVIF.
Handle image auto-rotation based on exif data (similar to core)
Scale down images according to big image size threshold
Ensure correct handling of PNGs: Indexed, true color, transparencies, grayscale.
Support for UltraHDR

Also, this will work out of the box and be a great addition:

Use MozJPEG for JPEG image saves - this will provide near WebP like sizes with 100% backwards compatibility

Why?

#64278 was no longer building correctly and has many conflicting files in trunk. Reviewers mentioned several times reducing the scope of the PR to to reduce review effort.

How?

This PR starts with #64278, brings it current with trunk and removes changes unrelated to initial task: "Client-side sub-size image generation". Files changed are reduced to 116 to 52, although some additional changes may be required. It removes the @wordpress/mime package as requested and doesn't make changes to the image block.

Testing Instructions

Ensure experiments->client side media is enabled
Upload an image in the block editor
Monitor the network panel for activity as each image is updated. Check the files saved to the server and compare them to the files generated when the feature is not enabled.

Todo

Switch to loading wasm-vips locally, instead of from the CDN. @swissspidy has already worked out a potential solution in Load wasm files as inline base64 data urls swissspidy/media-experiments#753.
Switch from the deprecated "@shopify/web-worker" package (previously Remove @shopify/web-worker Dependency in @wordpress/upload-media #69254)
Fix failing tests

also: - complete mime removal, inlining code where it is used or as a local helper function - complete removal of approval requirement feature - add back pause action and resume action their absence was causing test failures. They seem useful to include although I don’t think they are strictly required for this PR - ensure testing uses images not videos for urls (is video technically supported already?) - make expects declarations more narrow and explicit in `optimizeExistingItem` test - complete timings removal (was still in reducer test)

adamsilverstein · 2025-07-10T22:45:30Z

Switch from the deprecated "@shopify/web-worker" package (previously #69254)

I started a try on this in adamsilverstein#25

Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org>

) * Experimental: Enable Command Palette in admin dashboard * Update lib/experimental/commands.php Co-authored-by: Shail Mehta <shailmehta25@gmail.com> * Remove experimental setting * Update docs --------- Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org> Co-authored-by: mtias <matveb@git.wordpress.org>

…theming support (WordPress#71248) * DateCalendar, DateRangeCalendar: switch from rem to px for some internal sizes * CHANGELOG * Use variables when possible * Use theme-aware variables

…1212) Co-authored-by: mikejolley <mikejolley@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>

* MenuItem: make accessible when disabled * CHANGELOG * Update tests to account for different way to disable menu item

* Fix: Guard drag-and-drop against missing block DOM nodes * Fix: Ensure Post Comments Link always renders block wrapper ---- Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: fluiddot <carlosgprim@git.wordpress.org> Co-authored-by: gturpin-dev <guillaumeturpin@git.wordpress.org>

* Fix typo in comments.js * Remove period from `more replies..` Co-authored-by: mrleemon <leemon@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: akasunil <sunil25393@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

* Rename Accordions to Accordion * Rename accordion-item * Update block descriptions * Tweak block descriptions Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: alexandrebuffet <alexandrebuffet@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

Co-authored-by: oandregal <oandregal@git.wordpress.org>

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: bph <bph@git.wordpress.org>

Co-authored-by: USERSATOSHI <tusharbharti@git.wordpress.org> Co-authored-by: karthick-murugan <karthickmurugan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jordesign <jordesign@git.wordpress.org>

…s#71274) * Fix DataViews actions horizontal layout consistency * Update changelog with this fix

- @wordpress/a11y@4.29.0 - @wordpress/annotations@3.29.0 - @wordpress/api-fetch@7.29.0 - @wordpress/autop@4.29.0 - @wordpress/babel-plugin-import-jsx-pragma@5.29.0 - @wordpress/babel-plugin-makepot@6.29.0 - @wordpress/babel-preset-default@8.29.0 - @wordpress/base-styles@6.5.0 - @wordpress/blob@4.29.0 - @wordpress/block-directory@5.29.0 - @wordpress/block-editor@15.2.0 - @wordpress/block-library@9.29.0 - @wordpress/block-serialization-default-parser@5.29.0 - @wordpress/block-serialization-spec-parser@5.29.0 - @wordpress/blocks@15.2.0 - @wordpress/browserslist-config@6.29.0 - @wordpress/commands@1.29.0 - @wordpress/components@30.2.0 - @wordpress/compose@7.29.0 - @wordpress/core-commands@1.29.0 - @wordpress/core-data@7.29.0 - @wordpress/create-block@4.72.0 - @wordpress/create-block-interactive-template@2.29.0 - @wordpress/create-block-tutorial-template@4.29.0 - @wordpress/customize-widgets@5.29.0 - @wordpress/data@10.29.0 - @wordpress/data-controls@4.29.0 - @wordpress/dataviews@7.0.0 - @wordpress/date@5.29.0 - @wordpress/dependency-extraction-webpack-plugin@6.29.0 - @wordpress/deprecated@4.29.0 - @wordpress/docgen@2.29.0 - @wordpress/dom@4.29.0 - @wordpress/dom-ready@4.29.0 - @wordpress/e2e-test-utils@11.29.0 - @wordpress/e2e-test-utils-playwright@1.29.0 - @wordpress/e2e-tests@8.29.0 - @wordpress/edit-post@8.29.0 - @wordpress/edit-site@6.29.0 - @wordpress/edit-widgets@6.29.0 - @wordpress/editor@14.29.0 - @wordpress/element@6.29.0 - @wordpress/env@10.29.0 - @wordpress/escape-html@3.29.0 - @wordpress/eslint-plugin@22.15.0 - @wordpress/fields@0.21.0 - @wordpress/format-library@5.29.0 - @wordpress/hooks@4.29.0 - @wordpress/html-entities@4.29.0 - @wordpress/i18n@6.2.0 - @wordpress/icons@10.29.0 - @wordpress/interactivity@6.29.0 - @wordpress/interactivity-router@2.29.0 - @wordpress/interface@9.14.0 - @wordpress/is-shallow-equal@5.29.0 - @wordpress/jest-console@8.29.0 - @wordpress/jest-preset-default@12.29.0 - @wordpress/jest-puppeteer-axe@7.29.0 - @wordpress/keyboard-shortcuts@5.29.0 - @wordpress/keycodes@4.29.0 - @wordpress/lazy-import@2.29.0 - @wordpress/list-reusable-blocks@5.29.0 - @wordpress/media-utils@5.29.0 - @wordpress/notices@5.29.0 - @wordpress/npm-package-json-lint-config@5.29.0 - @wordpress/nux@9.29.0 - @wordpress/patterns@2.29.0 - @wordpress/plugins@7.29.0 - @wordpress/postcss-plugins-preset@5.29.0 - @wordpress/postcss-themes@6.29.0 - @wordpress/preferences@4.29.0 - @wordpress/preferences-persistence@2.29.0 - @wordpress/prettier-config@4.29.0 - @wordpress/primitives@4.29.0 - @wordpress/priority-queue@3.29.0 - @wordpress/private-apis@1.29.0 - @wordpress/project-management-automation@2.29.0 - @wordpress/react-i18n@4.29.0 - @wordpress/readable-js-assets-webpack-plugin@3.29.0 - @wordpress/redux-routine@5.29.0 - @wordpress/reusable-blocks@5.29.0 - @wordpress/rich-text@7.29.0 - @wordpress/router@1.29.0 - @wordpress/scripts@30.22.0 - @wordpress/server-side-render@6.5.0 - @wordpress/shortcode@4.29.0 - @wordpress/style-engine@2.29.0 - @wordpress/stylelint-config@23.21.0 - @wordpress/sync@1.29.0 - @wordpress/token-list@3.29.0 - @wordpress/undo-manager@1.29.0 - @wordpress/upload-media@0.14.0 - @wordpress/url@4.29.0 - @wordpress/viewport@6.29.0 - @wordpress/warning@3.29.0 - @wordpress/widgets@4.29.0 - @wordpress/wordcount@4.29.0

adamsilverstein · 2025-09-09T21:15:31Z

I'm going to rework this into smaller steps that can be more easily reviewed. I'll use the more developed code in the media experiments plugin this time.

swissspidy and others added 13 commits August 8, 2024 12:53

First pass at porting over code

0e754c0

Merge branch 'trunk' into add/client-side-media-uploads

d80baa1

remove wordpress/mime package

2a0caa8

types fix

5e895d8

Fix build after merge; remove timings (sans docs)

8850e5b

cleanup

ea54d27

remove unused styles

1acd08a

remove duplcate change

542a451

remove duplcate change

d1bf653

remove unneeded change

c8b46a4

cleanup

803ecda

Cleanup

cb3e8bc

cleanup

f9dad1c

adamsilverstein commented Jul 5, 2025

View reviewed changes

Comment thread packages/upload-media/package.json

adamsilverstein added 10 commits July 5, 2025 14:51

Add note about @shopify/web-worker deprecation

f7e8007

Doc updates

a4eea67

update block editor actions and settings

8ffd2ce

remove duplicate files

560ea3f

vips load cleanup

3ef6959

more vips cleanup

b7e7933

mime data fixes

2216402

Merge branch 'trunk' into add/client-side-media-uploads

04b6183

test and type fixes

02f4574

adamsilverstein mentioned this pull request Jul 10, 2025

Try: switch from shopify/web-worker to comlink adamsilverstein/gutenberg#25

Draft

adamsilverstein added 4 commits July 10, 2025 16:55

complete mime removal

63eb608

linting

0dbe5f0

more linting/test fixes

7411c49

more linting/test fixes, remove unused files

7573e06

adamsilverstein and others added 18 commits August 18, 2025 17:14

remove unused defaults, fix errors

6347a79

Accordion Blocks: Make block icons internal (WordPress#71229)

394a172

Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org>

DateCalendar, DateRangeCalendar: use px instead of rem units, better …

34a46ad

…theming support (WordPress#71248) * DateCalendar, DateRangeCalendar: switch from rem to px for some internal sizes * CHANGELOG * Use variables when possible * Use theme-aware variables

DataForm: panel layout can open as dropdown or modal (WordPress#7…

8095bfc

…1212) Co-authored-by: mikejolley <mikejolley@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>

MenuItem: make accessible when disabled (WordPress#71251)

7029819

* MenuItem: make accessible when disabled * CHANGELOG * Update tests to account for different way to disable menu item

DataForm: update stories (WordPress#71268)

e2f66c2

Co-authored-by: oandregal <oandregal@git.wordpress.org>

Social: Include developer blog tutorial in README (WordPress#71266)

412f3a4

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: bph <bph@git.wordpress.org>

Fix DataViews primary actions horizontal layout consistency (WordPres…

cc65ba5

…s#71274) * Fix DataViews actions horizontal layout consistency * Update changelog with this fix

Bump plugin version to 21.5.0-rc.1

6f21c9f

Update changelog files

888e79b

Update Changelog for 21.5.0-rc.1

5f63e46

adamsilverstein requested review from ObliviousHarmony, atimmer, dmsnell, mmtr, peterwilsoncc and t-hamano as code owners August 20, 2025 23:38

adamsilverstein added 2 commits August 20, 2025 17:41

Merge branch 'trunk' into add/client-side-media-uploads

787aae9

Queueitem is an interface

33c9f60

adamsilverstein closed this Sep 10, 2025

ramonjd mentioned this pull request Sep 24, 2025

Media / Attachments REST API endpoint: update attachments controller to support flip and to customize attachment fields. #71861

Closed

adamsilverstein mentioned this pull request Jan 2, 2026

Client Side Media iteration for WordPress 7.0 #74333

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add/client side media uploads#70623

Add/client side media uploads#70623
adamsilverstein wants to merge 156 commits into
WordPress:trunkfrom
adamsilverstein:add/client-side-media-uploads

adamsilverstein commented Jul 5, 2025 •

edited

Loading

Uh oh!

Uh oh!

adamsilverstein commented Jul 10, 2025

Uh oh!

adamsilverstein commented Sep 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

Uh oh!

Conversation

adamsilverstein commented Jul 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Follow up tasks to align with core

Why?

How?

Testing Instructions

Todo

Uh oh!

Uh oh!

adamsilverstein commented Jul 10, 2025

Uh oh!

adamsilverstein commented Sep 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

adamsilverstein commented Jul 5, 2025 •

edited

Loading