Add isAppender functionality on mobile

WordPress · Aug 26, 2019 · 302c905 · 302c905
1 parent ab70dc2
commit 302c905
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 48 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md
@@ -80,6 +80,15 @@ If false the default placeholder style is used.
 - Type: `Boolean`
 - Required: No
 - Default: `false`
+- Platform: Web | Mobile
+
+### isSelected
+
+Whether the block is selected or not.
+
+- Type: `Boolean`
+- Required: No
+- Platform: Mobile
 
 ### labels
 

diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -8,14 +8,15 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
+import { Dashicon } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
 function MediaPlaceholder( props ) {
-	const { mediaType, labels = {}, icon, onSelectURL } = props;
+	const { mediaType, labels = {}, icon, onSelectURL, isAppender, isSelected } = props;
 
 	const isImage = MEDIA_TYPE_IMAGE === mediaType;
 	const isVideo = MEDIA_TYPE_VIDEO === mediaType;
@@ -46,41 +47,53 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select a video' );
 	}
 
+	if ( isAppender !== undefined && ! isSelected ) {
+		return null;
+	}
+
 	return (
-		<MediaUpload
-			mediaType={ mediaType }
-			onSelectURL={ onSelectURL }
-			render={ ( { open, getMediaOptions } ) => {
-				return (
-					<TouchableWithoutFeedback
-						accessibilityLabel={ sprintf(
+		<View style={ { flex: 1 } }>
+			<MediaUpload
+				mediaType={ mediaType }
+				onSelectURL={ onSelectURL }
+				render={ ( { open, getMediaOptions } ) => {
+					return (
+						<TouchableWithoutFeedback
+							accessibilityLabel={ sprintf(
 							/* translators: accessibility text for the media block empty state. %s: media type */
-							__( '%s block. Empty' ),
-							placeholderTitle
-						) }
-						accessibilityRole={ 'button' }
-						accessibilityHint={ accessibilityHint }
-						onPress={ ( event ) => {
-							props.onFocus( event );
-							open();
-						} }
-					>
-						<View style={ styles.emptyStateContainer }>
-							{ getMediaOptions() }
-							<View style={ styles.modalIcon }>
-								{ icon }
+								__( '%s block. Empty' ),
+								placeholderTitle
+							) }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ accessibilityHint }
+							onPress={ ( event ) => {
+								props.onFocus( event );
+								open();
+							} }
+						>
+							<View style={ [ styles.emptyStateContainer, isAppender && styles.isAppender ] }>
+								{ getMediaOptions() }
+								{	isAppender ?
+									<Dashicon icon="plus-alt" style={ styles.addBlockButton } color={ styles.addBlockButton.color } size={ styles.addBlockButton.size } /> :
+									<>
+										<View style={ styles.modalIcon }>
+											{ icon }
+										</View>
+										<Text style={ styles.emptyStateTitle }>
+											{ placeholderTitle }
+										</Text>
+										<Text style={ styles.emptyStateDescription }>
+											{ instructions }
+										</Text>
+									</> }
 							</View>
-							<Text style={ styles.emptyStateTitle }>
-								{ placeholderTitle }
-							</Text>
-							<Text style={ styles.emptyStateDescription }>
-								{ instructions }
-							</Text>
-						</View>
-					</TouchableWithoutFeedback>
-				);
-			} } />
+						</TouchableWithoutFeedback>
+					);
+				} } />
+		</View>
+
 	);
 }
 
 export default MediaPlaceholder;
+
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -33,3 +33,18 @@
 	align-items: center;
 	fill: $gray-dark;
 }
+
+.isAppender {
+	height: auto;
+	background-color: $white;
+	border: $border-width solid $light-gray-500;
+	border-radius: 4px;
+}
+
+.addBlockButton {
+	color: $white;
+	background-color: $dark-gray-500;
+	border-radius: $icon-button-size-small / 2;
+	overflow: hidden;
+	size: $icon-button-size-small;
+}
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -258,14 +258,12 @@ class ImageEdit extends React.Component {
 
 		if ( ! url ) {
 			return (
-				<View style={ { flex: 1 } } >
-					<MediaPlaceholder
-						mediaType={ MEDIA_TYPE_IMAGE }
-						onSelectURL={ this.onSelectMediaUploadOption }
-						icon={ this.getIcon( false ) }
-						onFocus={ this.props.onFocus }
-					/>
-				</View>
+				<MediaPlaceholder
+					mediaType={ MEDIA_TYPE_IMAGE }
+					onSelectURL={ this.onSelectMediaUploadOption }
+					icon={ this.getIcon( false ) }
+					onFocus={ this.props.onFocus }
+				/>
 			);
 		}
 

diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -179,14 +179,12 @@ class VideoEdit extends React.Component {
 
 		if ( ! id ) {
 			return (
-				<View style={ { flex: 1 } } >
-					<MediaPlaceholder
-						mediaType={ MEDIA_TYPE_VIDEO }
-						onSelectURL={ this.onSelectMediaUploadOption }
-						icon={ this.getIcon( false, true ) }
-						onFocus={ this.props.onFocus }
-					/>
-				</View>
+				<MediaPlaceholder
+					mediaType={ MEDIA_TYPE_VIDEO }
+					onSelectURL={ this.onSelectMediaUploadOption }
+					icon={ this.getIcon( false, true ) }
+					onFocus={ this.props.onFocus }
+				/>
 			);
 		}