Skip to content

[RNMobile] Audio block capability now enables/disables media upload's media sources#31966

Merged
fluiddot merged 72 commits intotrunkfrom
rnmobile/add/audio-block-capability
Jun 3, 2021
Merged

[RNMobile] Audio block capability now enables/disables media upload's media sources#31966
fluiddot merged 72 commits intotrunkfrom
rnmobile/add/audio-block-capability

Conversation

@jd-alexander
Copy link
Copy Markdown
Contributor

@jd-alexander jd-alexander commented May 19, 2021 •
edited
Loading

WordPress iOS wordpress-mobile/WordPress-iOS#16533
WordPress Android wordpress-mobile/WordPress-Android#14680
Gutenberg Mobile wordpress-mobile/gutenberg-mobile#3523

Description

The Insert from URL functionality that is available on free plans was added in #27817 This PR removes the hook that was showing/hiding the Audio block depending on the value from the Audio block capability that is passed over the bridge. Now that capability is utilized in the main apps to determine which media upload options are shown.

Free Plans Paid Plans Self Hosted
Insert from URL Insert from URL Insert from URL
- Choose from device Choose from device
- WordPress Media Library WordPress Media Library

Manual Testing

WP.com sites

Note:

Support for Audio block audio uploads, and access to the media library is restricted to sites that are on a paid plan.

Free Plan

  1. Create a new post.
  2. Add the Audio block.
  3. Notice that only the Insert from URL option is available as users aren't able to upload audio on free plans.

Paid plan

  1. Create a new post.
  2. Add the Audio block.
  3. Notice that all media options are available as users are able to upload audio on paid plans.
Free Plan Paid Plan

Self hosted sites

  1. Create a new post.
  2. Add the Audio block.
  3. Notice that all media options are available as users are able to upload audio on self hosted sites.

Automated Testing

  1. npm run test-unit:native to verify the media-upload (file) test changes.

  2. I did not add any additional tests in this file since it doesn't seem like we are utilizing enzyme in our newer tests.

Regression

Note

The blocks Cover, File, Gallery, Video, Media & Text all utilise the media-upload component that was modified. Verify that these blocks function as expected and all the relevant options are still shown for them in both paid and free plans.

Types of changes

  1. The hook that would show/hide the Audio block was removed.
  2. The Audio block capability was accessed within the media-upload component and utilized within a filter to determine which media options should be shown whether the capability is enabled or not.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

etoledom and others added 30 commits December 7, 2020 13:22
@etoledom
Basics of Audio block working
0519567
@etoledom
Add audio support to MediaUpload
690224d
@etoledom
Add handling of file uploads and replace
b7965fd
@etoledom
WPMediaLibrary support for Audio block
f2ccb18
@etoledom
Avoid removing media info on error state
2a02b83
@etoledom
Linting
276b07d
@jd-alexander
Added an AUDIO file to the test requestMediaPickFromMediaLibrary func
8a8b550
@jd-alexander
Fixed typo in ToolbarButton of Audio Block.
9e03e63
@jd-alexander
Removed auto help behavior present on web that's not used on mobile.
349aa19
@jd-alexander
Merge branch 'master' into rnmobile/audio-block-I-b
04a39b4
@jd-alexander
[Android] Wired the click of the Audio Media Library button.
32029e0
@jd-alexander
Added Audio media options for choosing audio file locally.
a18b8ac
@ceyhun
[RNMobile] Audio Block: Proper caption field (#27689)
af6cb99
@ceyhun
Add alert prompt to insert from URL
193339f
@ceyhun
Set entered URL in audio block attributes
4ab2988
@jd-alexander
Merge branch 'master' into rnmobile/audio-block-I-b
d9a6041
@jd-alexander
Merge branch 'master' into rnmobile/audio-block-I-b
1a46994
@jd-alexander
Merge branch 'master' into rnmobile/audio-block-I-b
f09c955
@jd-alexander
initial integration with react native prompt.
fff09be
@jd-alexander
updated prompt lib.
d4209e8
@jd-alexander
Merge branch 'rnmobile/audio-block-I-b' into rnmobile/audio-block-IV-…
9d61d49 
…from-url
@jd-alexander
updated commit hash of prompt lib.
f0a1034
@jd-alexander
Updated package-lock.json.
1eb58d2
@jd-alexander
Added RNPromptPackage to Glue Code.
17dea27
@jd-alexander
Merge branch 'master' into rnmobile/audio-block-IV-from-url
c7154d3
@jd-alexander
fixed merge conflicts between the edit.native.js files of the branches
0f597f3
@jd-alexander
added onSelectURL to the media-upload component
e4dec03
@jd-alexander
added onSelectURL to the media-placeholder
f77a861
@jd-alexander
updated onSelectURL support with notice and URL validation
cad8e8a
@jd-alexander
sync package-lock.json
ef478bb
@jd-alexander jd-alexander force-pushed the rnmobile/add/audio-block-capability branch from 66511fa to f4aa392 Compare May 27, 2021 03:26
@jd-alexander
Copy link
Copy Markdown
Contributor Author

jd-alexander commented May 27, 2021

@fluiddot sorry for the long commit history. I had branched from another PR so I think because of the squash and merge the history is still here.

@jd-alexander jd-alexander requested a review from fluiddot May 27, 2021 05:14
@jd-alexander
Copy link
Copy Markdown
Contributor Author

jd-alexander commented May 27, 2021

This is ready for another review @fluiddot Thanks! 🙇🏾

@fluiddot
Copy link
Copy Markdown
Contributor

fluiddot commented May 27, 2021 •
edited
Loading

@jd-alexander I've spotted an error when uploading an audio file via the "Choose from device" option, it happened on the installable builds of both platforms iOS - build 49021 and Android - Build 107449. Here are the steps to reproduce it and video capture.

Steps:

  1. Go to a premium site
  2. Add an Audio block
  3. Tap on "Choose from device" option on Android or "Other Apps" on iOS
  4. Select an audio file
  5. Observe that an error is presented in the generic red error screen
audio-block-device-file-error.mp4

@jd-alexander
Copy link
Copy Markdown
Contributor Author

jd-alexander commented May 27, 2021 •
edited
Loading

@jd-alexander I've spotted an error when uploading an audio file via the "Choose from device" option, it happened on the installable builds of both platforms iOS - build 49021 and Android - Build 107449. Here are the steps to reproduce it and video capture.

Thanks for spotting. I will address this in another PR. It's a simple fix that involves reverting to the current URL parsing logic for the time being and adding a test case for the URLs that caused this issue so they will be covered so there isn't a future occurrence of this.

fluiddot
fluiddot reviewed May 27, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@fluiddot fluiddot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've just added a couple of comments related to formatting, apart from that from my side the PR is ready to go. Nevertheless, before giving the approval, I'd like to run a final test but I won't be able to do that before next Monday, sorry 🙏 .

@jd-alexander
Copy link
Copy Markdown
Contributor Author

jd-alexander commented May 27, 2021

I've just added a couple of comments related to formatting, apart from that from my side the PR is ready to go. Nevertheless, before giving the approval, I'd like to run a final test but I won't be able to do that before next Monday, sorry 🙏 .

No problem @fluiddot . I will update all the PRs so you can do your final tests then. Thanks much for the reviews so far. They have been thorough and helpful 🙇🏾‍♂️

fluiddot
fluiddot approved these changes Jun 1, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@fluiddot fluiddot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎊 !

  • Tested on iPhone 11 (iOS 14.2) with build 49354
  • Tested on Samsung Galaxy S20 FE 5G (Android 10) with build 108007

@fluiddot
Merge branch 'trunk' into rnmobile/add/audio-block-capability
b40012e 
# Conflicts:
#	packages/react-native-editor/CHANGELOG.md
@fluiddot fluiddot self-assigned this Jun 3, 2021
fluiddot added 2 commits June 3, 2021 11:13
@fluiddot
Merge branch 'trunk' into rnmobile/add/audio-block-capability
8422815 
# Conflicts:
#	packages/react-native-editor/CHANGELOG.md
@fluiddot
Merge branch 'trunk' into rnmobile/add/audio-block-capability
1ca8ae2 
# Conflicts:
#	packages/react-native-editor/CHANGELOG.md
@fluiddot fluiddot merged commit 7e360e4 into trunk Jun 3, 2021
@fluiddot fluiddot deleted the rnmobile/add/audio-block-capability branch June 3, 2021 10:32
@github-actions github-actions bot added this to the Gutenberg 10.9 milestone Jun 3, 2021
@thehenrybyrd thehenrybyrd mentioned this pull request Jun 10, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hypest hypest hypest left review comments

@SiobhyB SiobhyB SiobhyB left review comments

@fluiddot fluiddot fluiddot approved these changes

Assignees

@fluiddot fluiddot

Labels

Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)

Projects

None yet

Milestone

Gutenberg 10.9

Development

Successfully merging this pull request may close these issues.

6 participants

@jd-alexander @fluiddot @hypest @SiobhyB @etoledom @ceyhun