Mobile stories block #17140
Merged
Mobile stories block #17140
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mzorz
added
[Type] Enhancement
This was referenced Sep 11, 2020
|
Scheduled Jetpack release: November 10, 2020. E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-17140 Thank you for the great PR description! When this PR is ready for review, please apply the |
3 tasks
…lientId over the bridge
mzorz
commented
Sep 11, 2020
20 tasks
…is branch This reverts commit 86fb956.
* Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * Mobile Stories block (part 3): rename using BlockMediaUpdateProgress (#17456) * using BlockMediaUpdateProgress * method rename
jeherve
added
[Status] Needs Team Review
|
This is now ready for final review and merge. As noted in the description, the code has already been reviewed and merged in several other PRs feeding this feature branch. Climate issues observed in this PR can be omitted given they're not really relevant. |
kraftbj
added
[Status] Needs Review
|
Caution: This PR has changes that must be merged to WordPress.com |
jeherve
added
[Status] Ready to Merge
Thank you @jeherve ! :D 🎉 |
matticbot
added
[Status] Needs Changelog
and removed
[Status] Ready to Merge
|
r216657-wpcom |
cameronvoell
pushed a commit
that referenced
this pull request
Nov 14, 2020
* basic scaffolding for the Story block on mobile editor * added flex alignment and actual mediaFiles attribute rendering * applying styles to stories block view * removed unused alignment * added StoryEditingButton and showing it when the story block is selected * connecting StoryEditingButton with bridge's requestStoryCreatorLoad * updated requestStoryCreatorLoad call to pass block's mediaFiles and clientId over the bridge * added new component StoryUpdateProgress * Revert "added new component StoryUpdateProgress", not belonging to this branch This reverts commit 86fb956. * fixed lint warnings * changed the no longer existing color dark-gray-500 removed in WordPress/gutenberg@162bc50 with gray-700 * added package-lock.json * Mobile Stories block (part 2): introduce StoryUpdateProgress (#17222) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * Mobile Stories block (part 3): rename using BlockMediaUpdateProgress (#17456) * using BlockMediaUpdateProgress * method rename * updated (automatically modified) package-lock.json * removed package-lock.json * moved condition check for http or https to helper method isUrlRemote() * calling mediaUploadSync and mediaSaveSync regardless of ids, we always will want to receive updates on all 3 stages * fixed spelling * Mobile Stories block (part 4): error handling (#17458) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * using BlockMediaUpdateProgress * method rename * updated story block to represent error state * added cancel and retry bridge methods specific for mediaFiles collection based blocks * using a deep copy of mediaFiles when replacing ids and mediaUrl, given mediaFiles attribute needs to be replaced again and cannot be modified in place as per React conventions * added requestMediaFilesSaveCancelDialog bridge method * changed props name onMediaModelCreated to more generic onMediaIdChanged * removed commented code * replaced for loops with map * Mobile Stories block (part 5): add empty placeholder (#17539) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * using BlockMediaUpdateProgress * method rename * updated story block to represent error state * added cancel and retry bridge methods specific for mediaFiles collection based blocks * using a deep copy of mediaFiles when replacing ids and mediaUrl, given mediaFiles attribute needs to be replaced again and cannot be modified in place as per React conventions * added requestMediaFilesSaveCancelDialog bridge method * changed props name onMediaModelCreated to more generic onMediaIdChanged * removed commented code * added MediaPlaceholder, wrapped in a pointerEvents=none View so we can handle media picking from the StoryComposer * replaced for loops with map * importing defined const MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO instead of re-defining * made placeholder container look as per any other media placeholder, reservign the Story style container for populated Story blocks * Mobile Stories block (part 6): rewrote StoryEdit class as a function (#17549) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * using BlockMediaUpdateProgress * method rename * updated story block to represent error state * added cancel and retry bridge methods specific for mediaFiles collection based blocks * using a deep copy of mediaFiles when replacing ids and mediaUrl, given mediaFiles attribute needs to be replaced again and cannot be modified in place as per React conventions * added requestMediaFilesSaveCancelDialog bridge method * changed props name onMediaModelCreated to more generic onMediaIdChanged * removed commented code * added MediaPlaceholder, wrapped in a pointerEvents=none View so we can handle media picking from the StoryComposer * replaced for loops with map * rewrote StoryEdit class as a function * removed unused imports * removed unused function * story block: set inserter support to false for web, but keep it for mobile (#17690) * renamed params to avoid name shadowing
mzorz
added a commit
that referenced
this pull request
Nov 14, 2020
* basic scaffolding for the Story block on mobile editor * added flex alignment and actual mediaFiles attribute rendering * applying styles to stories block view * removed unused alignment * added StoryEditingButton and showing it when the story block is selected * connecting StoryEditingButton with bridge's requestStoryCreatorLoad * updated requestStoryCreatorLoad call to pass block's mediaFiles and clientId over the bridge * added new component StoryUpdateProgress * Revert "added new component StoryUpdateProgress", not belonging to this branch This reverts commit 86fb956. * fixed lint warnings * changed the no longer existing color dark-gray-500 removed in WordPress/gutenberg@162bc50 with gray-700 * added package-lock.json * Mobile Stories block (part 2): introduce StoryUpdateProgress (#17222) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * Mobile Stories block (part 3): rename using BlockMediaUpdateProgress (#17456) * using BlockMediaUpdateProgress * method rename * updated (automatically modified) package-lock.json * removed package-lock.json * moved condition check for http or https to helper method isUrlRemote() * calling mediaUploadSync and mediaSaveSync regardless of ids, we always will want to receive updates on all 3 stages * fixed spelling * Mobile Stories block (part 4): error handling (#17458) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * using BlockMediaUpdateProgress * method rename * updated story block to represent error state * added cancel and retry bridge methods specific for mediaFiles collection based blocks * using a deep copy of mediaFiles when replacing ids and mediaUrl, given mediaFiles attribute needs to be replaced again and cannot be modified in place as per React conventions * added requestMediaFilesSaveCancelDialog bridge method * changed props name onMediaModelCreated to more generic onMediaIdChanged * removed commented code * replaced for loops with map * Mobile Stories block (part 5): add empty placeholder (#17539) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * using BlockMediaUpdateProgress * method rename * updated story block to represent error state * added cancel and retry bridge methods specific for mediaFiles collection based blocks * using a deep copy of mediaFiles when replacing ids and mediaUrl, given mediaFiles attribute needs to be replaced again and cannot be modified in place as per React conventions * added requestMediaFilesSaveCancelDialog bridge method * changed props name onMediaModelCreated to more generic onMediaIdChanged * removed commented code * added MediaPlaceholder, wrapped in a pointerEvents=none View so we can handle media picking from the StoryComposer * replaced for loops with map * importing defined const MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO instead of re-defining * made placeholder container look as per any other media placeholder, reservign the Story style container for populated Story blocks * Mobile Stories block (part 6): rewrote StoryEdit class as a function (#17549) * Revert "Revert "added new component StoryUpdateProgress", not belonging to this branch" This reverts commit 34349b1. * added mediaSave statuses listeners definitions * moved StoryEdit to a React.Component class and implemented StoryUpdateProgress overlay * added onStorySaveResult handling to Story block * edit mode: replacing urls by id for saving process * added onMediaModelCreated() callback so we can re-assign the mediaID to the mediaFiles attribute of a Story block once such a mediaModel is created * update the mediaFile id and URL of a given story frame when finished uploading succesfully * removed commented imports * added explicit TODO comments to make sure to follow up on them for error handling * make sure to call mediaUploadSync and storySaveSync if any of the mediaFiles contained in this block is not a remote url - also call onRemoveBlockCheckUpload() action under the same conditions in componentWillUnmount() * using BlockMediaUpdateProgress * method rename * updated story block to represent error state * added cancel and retry bridge methods specific for mediaFiles collection based blocks * using a deep copy of mediaFiles when replacing ids and mediaUrl, given mediaFiles attribute needs to be replaced again and cannot be modified in place as per React conventions * added requestMediaFilesSaveCancelDialog bridge method * changed props name onMediaModelCreated to more generic onMediaIdChanged * removed commented code * added MediaPlaceholder, wrapped in a pointerEvents=none View so we can handle media picking from the StoryComposer * replaced for loops with map * rewrote StoryEdit class as a function * removed unused imports * removed unused function * story block: set inserter support to false for web, but keep it for mobile (#17690) * renamed params to avoid name shadowing Co-authored-by: mzorz <mariozorz@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed in this Pull Request:
This PR adds
.native.*files to support the Story block rendering on the gutenberg-mobile editor used by the WordPress Android and iOS apps.Related Gutenberg PR: WordPress/gutenberg#26721
Related Gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#2611
Related WPAndroid PR: wordpress-mobile/WordPress-Android#12939 and wordpress-mobile/WordPress-Android#13130
Related WPiOS PR: WordPress/gutenberg#26704
NOTE: the code has already been reviewed and merged in several other PRs feeding this feature branch. Omiting climate issues in this PR for now given they're not really relevant.
Jetpack product discussion
See pbD5rk-m7 and other links from there.
Test instructions:
@brbrr had a few interesting questions to complete the description of the PR that I'll try to address here:
You can also use an emulator. This will come with Android Studio (see below for instructions to download and install Android Studio)
Technically yes, but for the goals of this set of PRs the short answer is no.
We have CI build APKs for testing if you'd prefer to skip the native steps. You can download the CI-built APK corresponding to the WPAndroid PR here.
Yes, with an emulator. Do all of the following. YMMV but this is basically what you'll need to get it running.
Setup (SKIP to "Actual testing..." below if you don't intend to do any sort of debugging)
git clone --recurse-submodules git@github.com:wordpress-mobile/WordPress-Android.gitReact native part
cd libs/gutenberg-mobilenvm install --latest-npm.npm run start:reset. You will have to make a change in the WAndroid project'sgradle.propertiesfile as well.WordPress for Android part
gradle.propertiesfile:Actual Stories functionality testing:
a. tap on the main screen's "+" floating action button, then choose
Story.b. Take a picture or select from the media picker to create some story slides.
c. Then, tap on the "->" icon on the top-right of the screen in the visual story composer, and give your Story a name, then hit the big PUBLISH button at the bottom.
d. Wait for it to upload.
e. Now go to your Posts list, and look for the post you just created
f. open it by tapping on it
g. the Gutenberg editor should load and the Story block should render.
h. tap on it and your story should be loaded in the Story creator again for editing.
Here's a GIF file showing all of these steps and a few more.
Proposed changelog entry for your changes:
no changes visible to the web side of things, this PR only affects the WordPress mobile apps