Add isAppender functionality on mobile (#17195)

* Add isAppender functionality on mobile * refactor isAppender conditions * Replace dropZoneUIOnly in favour of showMediaSelectionUI * deprecate dropZoneUIOnly and add disableMediaSelection prop * Update test * Refactor tests and change prop name * Remove redundant empty lines * Refactor conditions inside MediaPlaceholder * Update block-editor CHANGELOG * Update packages/block-editor/CHANGELOG.md Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>
WordPress · Sep 25, 2019 · e99d365 · e99d365
1 parent 648a1b9
commit e99d365
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 39 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Master
+
+### Deprecation
+
+- `dropZoneUIOnly` prop in `MediaPlaceholder` component has been deprecated in favor of `disableMediaButtons` prop.
+
 ## 3.0.0 (2019-08-05)
 
 ### New Features

diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md
@@ -85,7 +85,16 @@ If false the default placeholder style is used.
 - Type: `Boolean`
 - Required: No
 - Default: `false`
-- Platform: Web
+- Platform: Web | Mobile
+
+### disableMediaButtons
+
+If true, only the Drop Zone will be rendered. No UI controls to upload the media will be shown
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+- Platform: Web | Mobile
 
 ### labels
 

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -25,6 +25,7 @@ import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -387,10 +388,17 @@ export class MediaPlaceholder extends Component {
 
 	render() {
 		const {
+			disableMediaButtons,
 			dropZoneUIOnly,
 		} = this.props;
 
-		if ( dropZoneUIOnly ) {
+		if ( dropZoneUIOnly || disableMediaButtons ) {
+			if ( dropZoneUIOnly ) {
+				deprecated( 'wp.blockEditor.MediaPlaceholder dropZoneUIOnly prop', {
+					alternative: 'disableMediaButtons',
+				} );
+			}
+
 			return (
 				<MediaUploadCheck>
 					{ this.renderDropZone() }

diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -7,16 +7,28 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
-import { withTheme } from '@wordpress/components';
+import {
+	MediaUpload,
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+} from '@wordpress/block-editor';
+import { Dashicon, withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
 function MediaPlaceholder( props ) {
-	const { allowedTypes = [], labels = {}, icon, onSelect, useStyle } = props;
+	const {
+		allowedTypes = [],
+		labels = {},
+		icon,
+		onSelect,
+		isAppender,
+		disableMediaButtons,
+		useStyle,
+	} = props;
 
 	const isOneType = allowedTypes.length === 1;
 	const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
@@ -51,40 +63,69 @@ function MediaPlaceholder( props ) {
 	const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark );
 	const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark );
 
+	const renderContent = () => {
+		if ( isAppender === undefined || ! isAppender ) {
+			return (
+				<>
+					<View style={ styles.modalIcon }>
+						{ icon }
+					</View>
+					<Text style={ emptyStateTitleStyle }>
+						{ placeholderTitle }
+					</Text>
+					<Text style={ styles.emptyStateDescription }>
+						{ instructions }
+					</Text>
+				</>
+			);
+		} else if ( isAppender && ! disableMediaButtons ) {
+			return (
+				<Dashicon
+					icon="plus-alt"
+					style={ styles.addBlockButton }
+					color={ styles.addBlockButton.color }
+					size={ styles.addBlockButton.size }
+				/>
+			);
+		}
+	};
+
+	if ( isAppender && disableMediaButtons ) {
+		return null;
+	}
+
 	return (
-		<MediaUpload
-			allowedTypes={ allowedTypes }
-			onSelect={ onSelect }
-			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={ emptyStateContainerStyle }>
-							{ getMediaOptions() }
-							<View style={ styles.modalIcon }>
-								{ icon }
+		<View style={ { flex: 1 } }>
+			<MediaUpload
+				allowedTypes={ allowedTypes }
+				onSelect={ onSelect }
+				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={ [
+									emptyStateContainerStyle,
+									isAppender && styles.isAppender,
+								] }>
+								{ getMediaOptions() }
+								{ renderContent() }
 							</View>
-							<Text style={ emptyStateTitleStyle }>
-								{ placeholderTitle }
-							</Text>
-							<Text style={ styles.emptyStateDescription }>
-								{ instructions }
-							</Text>
-						</View>
-					</TouchableWithoutFeedback>
-				);
-			} } />
+						</TouchableWithoutFeedback>
+					);
+				} }
+			/>
+		</View>
 	);
 }
 

diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -41,3 +41,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/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -244,7 +244,7 @@ class GalleryEdit extends Component {
 				addToGallery={ hasImages }
 				isAppender={ hasImages }
 				className={ className }
-				dropZoneUIOnly={ hasImages && ! isSelected }
+				disableMediaButtons={ hasImages && ! isSelected }
 				icon={ ! hasImages && <BlockIcon icon={ icon } /> }
 				labels={ {
 					title: ! hasImages && __( 'Gallery' ),

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -673,7 +673,7 @@ export class ImageEdit extends Component {
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }
 				mediaPreview={ mediaPreview }
-				dropZoneUIOnly={ ! isEditing && url }
+				disableMediaButtons={ ! isEditing && url }
 			/>
 		);
 		if ( isEditing || ! url ) {