[RNMobile] Sync VideoPress metadata when post is manually saved

[SiobhyB]

Fixes wordpress-mobile/gutenberg-mobile#5666

Related PRs

• Gutenberg: [RNMobile] Listen for post save events WordPress/gutenberg#49781
• Gutenberg Mobile: [RNMobile] Listen for post save events wordpress-mobile/gutenberg-mobile#5663
• iOS: [Gutenberg] Emit editor save events wordpress-mobile/WordPress-iOS#20522
• Android: [Gutenberg] Emit editor save events wordpress-mobile/WordPress-Android#18279

Proposed changes:

• 43ba414: The temporary "Save Settings" button (added in [RNMobile] Fetch VideoPress metadata for native block #29997) has been removed.
• 8588166: A listener has been set up to listener for "save events" that come when a user manually saves a post in the native apps. Data will now only be synced from the app to the web when a save event has been detected.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

p9ugOq-3mV-p2

Does this pull request change what data or activity we track or use?

No, it doesn't.

Testing instructions:

• In the app, either add a new VideoPress block or navigate to an existing one.
• Tweak the block's settings. It's particularly important to change the settings in the Details and Privacy and Rating panels, as these are the settings that are not currently being synced as expected.
• Manually save your changes in the app. You can find different flows for manually saving on both Android and iOS below.
• Confirm that you see the expected logs in the console, showing that the settings have been synced.
• Navigate to the block on the web and verify that the block's settings have been correctly synced there.
• Go through a few tries of editing the block on the app then returning the web, and vice versa, to ensure syncing is working as expected.

Android flows

Flows for saving a draft ⤵️

• Tap the three dots to the upper right and then Save.
• Tap the back button.
• Tap the Publish button.
• The the three dots to the upper right to get to Post Settings. From here, set the post's publish date and then Schedule.

Flows for saving a published post ⤵️

• Tap the Update button.
• Tap the back button.
• The the three dots to the upper right to get to Post Settings. From here, change the post's publish date and then Schedule.

Flows for saving a scheduled post ⤵️

• Tap the Schedule button.
• Tap the back button.
• The the three dots to the upper right to get to Post Settings. From here, change the post's publish date and then Schedule.

iOS flows

Flows for saving a draft ⤵️

• Tap the Update button.
• Tap the X icon to exit the post and Update Draft.
• Tap the three dots to the upper right and then Publish.
• The the three dots to the upper right to get to Post Settings. From here, set the post's publish date and then Schedule.

Flows for saving a published post ⤵️

• Tap the Update button.
• Tap the X icon to exit the post and Update Post.
• The the three dots to the upper right to get to Post Settings. From here, set the post's publish date and then Schedule.

Flows for saving a scheduled post ⤵️

• Tap the Update button.
• Tap the X icon to exit the post and Update Post.
• The the three dots to the upper right to get to Post Settings. From here, set the post's publish date and then Schedule.

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack rnmobile/detect-when-post-is-saved

to get started. More details: p9dueE-5Nn-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

[SiobhyB]

These changes are brought in from #30134, in order to avoid a regression that prevented this PR from being built. #30134 should be merged before this one.

[fluiddot]

Tested different flows in both platforms and confirmed that VideoPress metadata is saved in the below cases:

iOS:

• Published post - Tap Update button and then close the editor. ✅
• Published post - Close editor and save unsaved changes. ✅
• Draft post - Tap Update button and then close the editor. ✅
• Draft post - Close editor and save unsaved changes. ✅
• Draft post - Tap Three dots button/Publish and open the post again. ✅
• Scheduled post - Tap Update button and then close the editor. ✅
• Scheduled post - Close the editor and save unsaved changes. ✅

Android:

• Published post - Tap Update button and open the post again. ✅
• Published post - Close the editor with unsaved changes. ✅
• Published post - Tap Schedule button and open the post again. ✅
• Draft post - Tap Three dots button/Save and open the post again. ✅
• Draft post - Close the editor and save unsaved changes. ✅
• Draft post - Tap Publish and open the post again. ✅
• Scheduled post - Tap Schedule and open the post again. ✅
• Scheduled post - Close the editor and save unsaved changes. ✅
• Scheduled post - Tap Publish Now and open the post again. ✅

However, I noticed an issue when previewing a post or switching to HTML mode. It seems unrelated to these changes, so I wouldn't block the PR, but we'd need to track it.

Preview a post

1. Having a VideoPress block with a video.
2. Change some of the settings that will be synced (e.g. title).
3. Tap on the three dots button.
4. Tap on Preview.
5. Close the preview.
6. Open the block settings and observe that the settings changes were discarded.

Switch to HTML mode

1. Having a VideoPress block with a video.
2. Change some of the settings that will be synced (e.g. title).
3. Tap on the three dots button.
4. Tap on HTML Mode.
5. Switch back to Visual Mode.
6. Open the block settings and observe that the settings changes were discarded.

Apart from the above-unrelated issue, the PR looks great to me. I only added a comment that would be great to tackle before approving it.

[SiobhyB]

@fluiddot, thank you for catching those issues with preview and toggle mode! I've gone ahead to create an issue in wordpress-mobile/gutenberg-mobile#5677 and have added it to our project board. 🙇‍♀️

[fluiddot]

I re-tested some of the cases shared in my last review. However, I'm trying to test the web version but I'm having trouble to have the VideoPress block registered 🤔.

[fluiddot]

As internally discussed (p1681833498706689/1681831906.251289-slack-C03TA48NSUX), we'd need to move this import to a native file because the package is only available in the native version.

[SiobhyB]

I've gone ahead to move the native functionality to a new .native.js file. Note, I opted to go with js file as we're making some changes to the web's types. In addition, although we're not currently using any strings in this file on native, the fact we can't import translations from .ts files swayed my decision. It felt that using a .js version would be the most straightforward and future-proof approach. Open to different opinions, though.

The removal of native-specific functionality from the main file can be found in f050d65. For the new native file, it was possible to remove a bunch of (currently) unused functionality, as shown in 321d343.

[fluiddot]

LGTM 🎊 !

I tested the web version and worked as expected ✅ . Nevertheless, it would be great to request a second review from web folks to confirm no regressions are introduced.

Regarding the native version, I re-tested some of the cases shared here in both platforms and worked as expected ✅.

[dhasilva]

No regressions on web version. Nice work!