[Gutenberg] Add metadata on media upload success event

[fluiddot]

Related PRs:

• WordPress-Android
• WordPress-Utils-Android
• Gutenberg Mobile
• Gutenberg

Fixes wordpress-mobile/gutenberg-mobile#5470

Add metadata parameter to the media upload success event that is passed to the Gutenberg editor. This parameter is open to any information around the media that can be useful to have when the upload finishes successfully.

This PR also includes the VideoPress GUID to the metadata parameter as it's needed to render the VideoPress block.

To test

NOTE: This change can only be tested on development using a patch file in Gutenberg.

1. Apply the following patch in Gutenberg codebase:

diff --git forkSrcPrefix/packages/block-library/src/video/edit.native.js forkDstPrefix/packages/block-library/src/video/edit.native.js
index 99225ba5d5c569d19a158f5b1a203c68aa353c33..da4e3418c46305386a68ceaec618f818dc0ffb4a 100644
--- forkSrcPrefix/packages/block-library/src/video/edit.native.js
+++ forkDstPrefix/packages/block-library/src/video/edit.native.js
@@ -138,6 +138,9 @@ class VideoEdit extends Component {
 
 	finishMediaUploadWithSuccess( payload ) {
 		const { setAttributes } = this.props;
+
+		console.log( 'finishMediaUploadWithSuccess', payload );
+
 		setAttributes( { src: payload.mediaUrl, id: payload.mediaServerId } );
 		this.setState( { isUploadInProgress: false } );
 	}

1. Build the app and connect it with your Metro local server.
2. Open a post/page in a simple site.
3. Insert a Video block.
4. Upload a video from the device.
5. Once the upload finishes, check the console logs and observe an entry that displays the metadata and VideoPress GUID, e.g.:

finishMediaUploadWithSuccess:
{
    "mediaServerId": <MEDIA_SERVER_ID>,
    "progress": 1,
    "state": 2,
    "mediaUrl": "https://videos.files.wordpress.com/<VIDEOPRESS_GUID>/file_example_mp4_480_1_5mg-23.mp4",
    "metadata": {
        "videopressGUID": "<VIDEOPRESS_GUID"
    },
    "mediaId": <MEDIA_ID>
}

Regression Notes

1. Potential unintended areas of impact
   This change shouldn't produce any side effects but if any, it would affect the media uploads in the editor.

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Tested uploads on the different media blocks:

   • Image block ✅
   • Video block ✅
   • Cover block ✅
   • Media & Text block ✅
   • File block ✅
   • Gallery block ✅

3. What automated tests I added (or what prevented me from doing so)
   N/A

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the changes in WordPress from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr20144-dbe75d8 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[wpmobilebot]

You can test the changes in Jetpack from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr20144-dbe75d8 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[jhnstn]

Test plan works as expected and changes look good.