Skip to content

Cross Platform MediaUpload component #1298

@pinarol

Description

@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:

Screen Shot 2019-08-19 at 15 55 03

media-upload

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'

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions