Cross Platform MediaUpload component

[pinarol]

We already have MediaUpload for mobile and web but they have different props. We need to refactor the mobile implementation(gutenberg/packages/block-editor/src/components/media-upload/index.native.js) to work with same props with web.

Note that some props might be web specific and not needed by mobile.

We'll also need to update the unittests: gutenberg/packages/block-editor/src/components/media-upload/test/index.native.js

MediaUpload component is currently used by image, video blocks

Here are the mobile side edit implementations for them:

gutenberg/packages/block-library/src/image/edit.native.js
gutenberg/packages/block-library/src/video/edit.native.js

MediaUpload component opens the media options picker on mobile. And then it calls the media picker from the main apps:

To investigate/debug the web part:

cd to gutenberg

npm install
npm run dev
At another terminal:
docker-compose up

This page has more detailed instructions in case you might need.

Keep in mind that mobile unit-tests(yarn test) might fail if gutenberg-mobile/gutenberg/node_modules has modules in it. So the ideal way is checking out another gutenberg repo and running the code from there.

To test

Testing prerequisites

Media upload isn't supported by free sites so if you only have a free site let us know your WordPress.com user names and we can arrange a test site for you.

For WPiOS

Checkout the PRs branch to any arbitrary folder and cd .. to it
run yarn install, yarn start
Open XCode WPiOS on the latest develop
Clean build folder on Xcode, and then run the app

For WPAndroid

open grade.properties at WordPress-Android folder
add wp.BUILD_GUTENBERG_FROM_SOURCE = true to grade.properties
checkout the PRs branch in the subrepo of WordPress-Android repo
cd to WordPress-Android/libs/gutenberg-mobile
run yarn install, yarn start
yarn wpandroid on a separate terminal in the same directory

---

Make sure nothing is broken by running these test cases on WPiOS and WPAndroid main apps:
https://wordpress-mobile.testquality.com/project/6587/plan/11494/run/110694/result/1362089

You can use example app on ios by yarn ios for quick testing, there's a fake upload and upload fail mechanisms available there. If you long press on the ongoing upload it'll turn into a failed upload.

To run unittests simply run 'yarn test'

[pinarol]

Please also check the MediaUpload usage on gallery block(gutenberg/packages/block-library/src/gallery/edit.js). At the end of this work we expect it will work for mobile without changing it.

[dratwas]

Hey @pinarol, thanks for a great description 🥇

Media upload isn't supported by free sites so if you only have a free site let us know your WordPress.com user names and we can arrange a test site for you.

We have a free plan on wordpress.com so probably we would need that :)
My username is callstackdratwas

[pinarol]

I invited you to my test site. After accepting the invitation you should be able to see it under 'My Sites' in the mobile app.

[pinarol]

We can go with 2 iterations:

First we can just focus on video, image blocks. They both allow selecting a single file at once and they are both available for testing.

For the second iteration we can focus on the usage on gallery which allows multiple selection.

[dratwas]

Hey :) I'm looking at possibilities of adding multiple images/videos with MediaUpload component. At this moment the react-native-gutenberg-bridge doesn't have a mechanism to specify if it is multiple or single select from JS side. I tried it in Wordpress-Android app and I'm able to add multiple images or video in image/video block even if multiple is set to false. When I set more than one image it uses a passed callback for the first image and then method called appendNewMediaBlock from react-native-gutenberg-bridge which sends mediaAppend event to JS side with media data. This will not work for the gallery since we need to add all media to one block instead of adding a new block with media. I think we should add the possibility to specify if we want to get an array of media in the callback or single media because at this moment we are not able to get few media in our callback. We could add a param to requestMediaPickFrom which will say to native implementation that we want an array of media passed to the callback instead of sending them by mediaAppend event. This implementation will require changes in native apps (Wordpress-Android)

However, the implementation of iOS is different. We don't have the possibility to select more than one media at one time as on Android. The suggested change will work on iOS as well but also would require changes in native client Wordpress-iOS.

I think that with the current implementation, we are not able to handle multiple props for a gallery component, but I could have missed something.

[pinarol]

@dratwas correct, multiple media selection is not present currently for Gutenberg mobile editor, this task requires to make necessary modifications on bridge and on native side as well. Actually the media picker on iOS is capable of letting user selecting multiple media. If you switch to the old editor by selecting ... on the navigation bar > 'Switch to classic editor' > press the (+) button on the toolbar you can see that multiple selection is allowed. It is just not available for the Gutenberg editor yet.

[pinarol]

It seems automation couldn't close this one, I'll do it.