Mobile gallery draft

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { uniqBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,6 +23,7 @@ import styles from './styles.scss';
 
 function MediaPlaceholder( props ) {
 	const {
+		addToGallery,
 		allowedTypes = [],
 		labels = {},
 		icon,
@@ -30,8 +32,13 @@ function MediaPlaceholder( props ) {
 		disableMediaButtons,
 		getStylesFromColorScheme,
 		multiple,
+		value = [],
 	} = props;
 
+	const setMedia = multiple && addToGallery ?
+		( selected ) => onSelect( uniqBy( [ ...value, ...selected ], 'id' ) ) :
+		onSelect;
+
 	const isOneType = allowedTypes.length === 1;
 	const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
 	const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
@@ -103,7 +110,7 @@ function MediaPlaceholder( props ) {
 		<View style={ { flex: 1 } }>
 			<MediaUpload
 				allowedTypes={ allowedTypes }
-				onSelect={ onSelect }
+				onSelect={ setMedia }
 				multiple={ multiple }
 				render={ ( { open, getMediaOptions } ) => {
 					return (

packages/block-library/src/gallery/edit.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import {
 	every,
 	filter,
@@ -26,19 +25,19 @@ import {
 	BlockIcon,
 	MediaPlaceholder,
 	InspectorControls,
-	RichText,
 } from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { Component, Platform } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { withSelect } from '@wordpress/data';
+import { withViewportMatch } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
  */
-import GalleryImage from './gallery-image';
 import { icon } from './icons';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
+import Gallery from './gallery';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -254,12 +253,9 @@ class GalleryEdit extends Component {
 			className,
 			isSelected,
 			noticeUI,
-			setAttributes,
 		} = this.props;
 		const {
-			align,
 			columns = defaultColumnsNumber( attributes ),
-			caption,
 			imageCrop,
 			images,
 			linkTo,
@@ -268,6 +264,11 @@ class GalleryEdit extends Component {
 		const hasImages = !! images.length;
 		const hasImagesWithId = hasImages && some( images, ( { id } ) => id );
 
+		const instructions = Platform.select( {
+			web: __( 'Drag images, upload new ones or select files from your library.' ),
+			native: __( 'Add media' ),
+		} );
+
 		const mediaPlaceholder = (
 			<MediaPlaceholder
 				addToGallery={ hasImagesWithId }
@@ -277,7 +278,7 @@ class GalleryEdit extends Component {
 				icon={ ! hasImages && <BlockIcon icon={ icon } /> }
 				labels={ {
 					title: ! hasImages && __( 'Gallery' ),
-					instructions: ! hasImages && __( 'Drag images, upload new ones or select files from your library.' ),
+					instructions: ! hasImages && instructions,
 				} }
 				onSelect={ this.onSelectImages }
 				accept="image/*"
@@ -286,25 +287,20 @@ class GalleryEdit extends Component {
 				value={ hasImagesWithId ? images : undefined }
 				onError={ this.onUploadError }
 				notices={ hasImages ? undefined : noticeUI }
+				onFocus={ this.props.onFocus }
 			/>
 		);
 
 		if ( ! hasImages ) {
 			return mediaPlaceholder;
 		}
-
-		const captionClassNames = classnames(
-			'blocks-gallery-caption',
-			{
-				'screen-reader-text': ! isSelected && RichText.isEmpty( caption ),
-			}
-		);
 		return (
 			<>
 				<InspectorControls>
 					<PanelBody title={ __( 'Gallery Settings' ) }>
 						{ images.length > 1 && <RangeControl
 							label={ __( 'Columns' ) }
+							icon={ 'admin-settings' }
 							value={ columns }
 							onChange={ this.setColumnsNumber }
 							min={ 1 }
@@ -326,52 +322,17 @@ class GalleryEdit extends Component {
 					</PanelBody>
 				</InspectorControls>
 				{ noticeUI }
-				<figure className={ classnames(
-					className,
-					{
-						[ `align${ align }` ]: align,
-						[ `columns-${ columns }` ]: columns,
-						'is-cropped': imageCrop,
-					}
-				) }
-				>
-					<ul className="blocks-gallery-grid">
-						{ images.map( ( img, index ) => {
-						/* translators: %1$d is the order number of the image, %2$d is the total number of images. */
-							const ariaLabel = sprintf( __( 'image %1$d of %2$d in gallery' ), ( index + 1 ), images.length );
-
-							return (
-								<li className="blocks-gallery-item" key={ img.id || img.url }>
-									<GalleryImage
-										url={ img.url }
-										alt={ img.alt }
-										id={ img.id }
-										isFirstItem={ index === 0 }
-										isLastItem={ ( index + 1 ) === images.length }
-										isSelected={ isSelected && this.state.selectedImage === index }
-										onMoveBackward={ this.onMoveBackward( index ) }
-										onMoveForward={ this.onMoveForward( index ) }
-										onRemove={ this.onRemoveImage( index ) }
-										onSelect={ this.onSelectImage( index ) }
-										setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
-										caption={ img.caption }
-										aria-label={ ariaLabel }
-									/>
-								</li>
-							);
-						} ) }
-					</ul>
-					{ mediaPlaceholder }
-					<RichText
-						tagName="figcaption"
-						className={ captionClassNames }
-						placeholder={ __( 'Write gallery caption…' ) }
-						value={ caption }
-						unstableOnFocus={ this.onFocusGalleryCaption }
-						onChange={ ( value ) => setAttributes( { caption: value } ) }
-						inlineToolbar
-					/>
-				</figure>
+				<Gallery
+					{ ...this.props }
+					selectedImage={ this.state.selectedImage }
+					mediaPlaceholder={ mediaPlaceholder }
+					onMoveBackward={ this.onMoveBackward }
+					onMoveForward={ this.onMoveForward }
+					onRemoveImage={ this.onRemoveImage }
+					onSelectImage={ this.onSelectImage }
+					onSetImageAttributes={ this.setImageAttributes }
+					onFocusGalleryCaption={ this.onFocusGalleryCaption }
+				/>
 			</>
 		);
 	}
@@ -383,4 +344,5 @@ export default compose( [
 		return { mediaUpload };
 	} ),
 	withNotices,
+	withViewportMatch( { isMobile: '< small' } ),
 ] )( GalleryEdit );

packages/block-library/src/gallery/gallery-button.native.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+const styles = StyleSheet.create( {
+	buttonActive: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+		borderRadius: 6,
+		borderColor: '#2e4453',
+		backgroundColor: '#2e4453',
+		aspectRatio: 1,
+	},
+} );
+
+export function Button( props ) {
+	const {
+		icon,
+		onClick,
+		disabled,
+		'aria-disabled': ariaDisabled,
+		accessibilityLabel = 'button',
+		style,
+	} = props;
+
+	const buttonStyle = StyleSheet.compose( styles.buttonActive, style );
+
+	const isDisabled = disabled || ariaDisabled;
+
+	const fill = isDisabled ? 'gray' : 'white';
+
+	return (
+		<TouchableOpacity
+			activeOpacity={ 0.7 }
+			accessible={ true }
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityRole={ 'button' }
+			onPress={ onClick }
+			disabled={ isDisabled }
+		>
+			<View style={ buttonStyle }>
+				<Icon icon={ icon } fill={ fill } size={ 24 } />
+			</View>
+		</TouchableOpacity>
+	);
+}
+
+export default Button;

packages/block-library/src/gallery/gallery-image-styles.native.scss

@@ -0,0 +1,95 @@
+.container {
+  flex: 1;
+  height: 150px;
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 1;
+}
+
+.imageUploading {
+  opacity: 0.3;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 5px;
+  border-width: 3px;
+  border-color: #00000000;
+}
+
+.overlaySelected {
+  border-color: #0070ff;
+}
+
+.button {
+  width: 30px;
+}
+
+.moverButtons {
+  flex-direction: row;
+  align-items: center;
+  border-radius: 3px;
+  background-color: #2e4453;
+}
+
+.separator {
+  border-right-color: gray;
+  // border-right-width: StyleSheet.hairlineWidth;
+  border-right-width: 1px;
+  height: 20px;
+}
+
+.removeButton {
+  width: 30px;
+  border-radius: 30px;
+}
+
+.toolbar {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.uploadFailedContainer {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.uploadFailed {
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+}
+
+.uploadFailedIcon {
+  fill: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+.uploadFailedText {
+  color: #fff;
+  font-size: 14px;
+  margin-top: 5px;
+}