[RNMobile] Video block: Fix logic for displaying empty state based on…

… source presence (#58015)

* Avoid displaying Video block empty state when a source is present

* Add tests to cover empty state visibility logic

* Update `react-native-editor` changelog

* Remove unneeded `await` statements from Video block unit tests

* Update `react-native-editor` changelog

packages/block-library/src/video/edit.native.js

@@ -212,7 +212,7 @@ class VideoEdit extends Component {
 	render() {
 		const { setAttributes, attributes, isSelected, wasBlockJustInserted } =
 			this.props;
-		const { id, src } = attributes;
+		const { id, src, guid } = attributes;
 		const { videoContainerHeight } = this.state;
 
 		const toolbarEditButton = (
@@ -236,7 +236,10 @@ class VideoEdit extends Component {
 			></MediaUpload>
 		);
 
-		if ( ! src ) {
+		// NOTE: `guid` is not part of the block's attribute definition. This case
+		// handled here is a temporary fix until a we find a better approach.
+		const isSourcePresent = src || ( guid && id );
+		if ( ! isSourcePresent ) {
 			return (
 				<View style={ { flex: 1 } }>
 					<MediaPlaceholder

packages/block-library/src/video/test/edit.native.js

@@ -26,4 +26,42 @@ describe( 'Video block', () => {
 
 		expect( screen.getByText( 'Invalid URL.' ) ).toBeVisible();
 	} );
+
+	it( 'should render empty state when source is not present', async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video -->
+<figure class="wp-block-video"></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeVisible();
+	} );
+
+	it( 'should not render empty state when video source is present', async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video {"id":1234} -->
+<figure class="wp-block-video"><video controls src="https://VIDEO_URL.mp4"></video></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeNull();
+	} );
+
+	it( `should not render empty state when 'guid' and 'id' attributes are present`, async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video {"guid":"ABCD1234","id":1234 -->
+<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><div class="wp-block-embed__wrapper">
+https://videopress.com/<VIDEO_ID>
+</div></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeNull();
+	} );
 } );

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [**] Video block: Fix logic for displaying empty state based on source presence [#58015]
 
 ## 1.111.0
 -   [**] Image block media uploads display a custom error message when there is no internet connection [#56937]