[RNMobile] Register VideoPress block

[SiobhyB]

With this PR, the VideoPress block has been registered behind a DEV flag. The block itself is not complete or fully functional, but is intended to serve as a useful placeholder to be iterated on.

Related PRs

• Gutenberg: [RNMobile] Enable new block in Gutenberg Mobile WordPress/gutenberg#47836
• Gutenberg Mobile: Register VideoPress block behind a DEV flag wordpress-mobile/gutenberg-mobile#5459
• iOS: Enable VideoPress block on iOS wordpress-mobile/WordPress-iOS#20100
• Android: Enable VideoPress block on Android wordpress-mobile/WordPress-Android#17928

Proposed changes:

• To enable the VideoPress block to be registered in Gutenberg Mobile, it's necessary to create an editor.native.js file in the VideoPress package that registers the block via the index.native.ts file.
• A native version of the index.ts file, containing the registerBlockType function, has also been created. The native version differs slightly in that it checks for the block's availability before registering it, which is needed due to the way the code is referenced in Gutenberg Mobile.
• Native versions of the block's edit.js and style.scss files have been created, using some of the components found in the native version of the Video block. As mentioned, the code here is purely intended to act as a starting point, and will change as we iterate on the block. The block itself is not functional at this stage.

Screenshot:

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 does not.

Testing instructions:

Please refer to the Gutenberg Mobile PR as the "central PR" with the most up-to-date testing instructions.

[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/add-videopress-support

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]

I followed the same pattern that we're using to check for the availability of other Jetpack blocks on mobile, as seen in the register-jetpack-block.native.js file.

[SiobhyB]

@renatoagds, as we have a native-specific index.ts file now, we could remove these changes. I wanted to check with you before doing that. Is there any reason we should keep these changes for the web?

[renatoagds]

We could keep it, no problem.

[fluiddot]

@SiobhyB I noticed that rendering the block with a VideoPress block displays the warning Trying to load empty source.. This can be dismissed and since the block is under development it shouldn't block the PR, however, we might consider disabling it somehow. A potential workaround would be that instead of rendering the VideoPlayer component, render a temporary placeholder, WDYT?

On a different note, before approving the PR, I'd like to hear from @renatoagds in relation to this comment. If it's ok to proceed with it, from my side the PR is good to go 🎊 .

[SiobhyB]

Thanks @fluiddot! A temporary placeholder makes sense to me, done in beac4dd.

[renatoagds]

LGTM! Approving and merging it, I think we're good to go. Nice work @SiobhyB