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

extensions/blocks/story/edit.native.js

@@ -7,7 +7,13 @@ import { Text, View, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 import { Image } from '@wordpress/components';
-import { BlockMediaUpdateProgress } from '@wordpress/block-editor';
+import {
+	BlockIcon,
+	MediaPlaceholder,
+	BlockMediaUpdateProgress,
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
@@ -23,6 +29,7 @@ import {
 /**
  * Internal dependencies
  */
+import { icon } from '.';
 import styles from './editor.scss';
 import StoryEditingButton from './story-editing-button';
 
@@ -227,20 +234,32 @@ class StoryEdit extends React.Component {
 		const hasContent = !! mediaFiles.length;
 		const { isUploadInProgress, isSaveInProgress, didUploadFail, didSaveFail } = this.state;
 
+		const mediaPlaceholder = (
+			// TODO this we are wrapping in a pointerEvents=none because we don't want to
+			// trigger the ADD MEDIA bottom sheet just yet, but only give the placedholder the right appearance.
+			<View pointerEvents="none" style={ styles[ 'content-placeholder' ] }>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					labels={ {
+						title: __( 'Story' ),
+						instructions: __( 'ADD MEDIA' ),
+					} }
+					allowedTypes={ [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ] }
+					onFocus={ this.props.onFocus }
+				/>
+			</View>
+		);
+
 		return (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
 				onPress={ this.onStoryPressed }
 				disabled={ ! isSelected }
 			>
-				<View style={ styles[ 'wp-story-container' ] }>
-					{ ! hasContent && (
-						<Text style={ styles[ 'wp-story-wrapper' ] }>
-							This Story is empty. Tap to add media.
-						</Text>
-					) }
+				<View style={ styles[ 'content-placeholder' ] }>
+					{ ! hasContent && mediaPlaceholder }
 					{ hasContent && (
-						<View style={ { flex: 1 } }>
+						<View style={ styles[ 'wp-story-container' ] }>
 							{ ! isUploadInProgress && ! isSaveInProgress && isSelected && (
 								<StoryEditingButton onEditButtonTapped={ this.onEditButtonTapped } />
 							) }

extensions/blocks/story/editor.native.scss

@@ -91,3 +91,7 @@
 	top: 7px;
 	left: 7px;
 }
+
+.content-placeholder {
+	flex: 1;
+}