Extract Gallery component for semi-cross-platform Gallery block

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

@@ -86,7 +86,15 @@ export class MediaUpload extends React.Component {
 	}
 
 	getMediaOptionsItems() {
-		const { allowedTypes = [] } = this.props;
+		const { allowedTypes = [], multiple = false } = this.props;
+
+		// disable upload sources for now when multiple flag is set
+		// eslint-disable-next-line no-undef
+		if ( ! __DEV__ ) {
+			if ( allowedTypes.includes( MEDIA_TYPE_IMAGE ) && multiple ) {
+				return [ siteLibrarySource ];
+			}
+		}
 
 		return this.getAllSources().filter( ( source ) => {
 			return allowedTypes.filter( ( allowedType ) => source.types.includes( allowedType ) ).length > 0;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import {
 	every,
 	filter,
@@ -23,22 +22,21 @@ import {
 	withNotices,
 } from '@wordpress/components';
 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 { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
+import Gallery from './gallery';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -48,6 +46,18 @@ const linkOptions = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
+const PLACEHOLDER_TEXT = Platform.select( {
+	web: __( 'Drag images, upload new ones or select files from your library.' ),
+	native: __( 'ADD MEDIA' ),
+} );
+
+// currently this is needed for consistent controls UI on mobile
+// this can be removed after control components settle on consistent defaults
+const MOBILE_CONTROL_PROPS = Platform.select( {
+	web: {},
+	native: { separatorType: 'fullWidth' },
+} );
+
 class GalleryEdit extends Component {
 	constructor() {
 		super( ...arguments );
@@ -227,7 +237,7 @@ class GalleryEdit extends Component {
 	componentDidMount() {
 		const { attributes, mediaUpload } = this.props;
 		const { images } = attributes;
-		if ( every( images, ( { url } ) => isBlobURL( url ) ) ) {
+		if ( images.length && every( images, ( { url } ) => isBlobURL( url ) ) ) {
 			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
 			forEach( images, ( { url } ) => revokeBlobURL( url ) );
 			mediaUpload( {
@@ -254,12 +264,9 @@ class GalleryEdit extends Component {
 			className,
 			isSelected,
 			noticeUI,
-			setAttributes,
 		} = this.props;
 		const {
-			align,
 			columns = defaultColumnsNumber( attributes ),
-			caption,
 			imageCrop,
 			images,
 			linkTo,
@@ -274,10 +281,10 @@ class GalleryEdit extends Component {
 				isAppender={ hasImages }
 				className={ className }
 				disableMediaButtons={ hasImages && ! isSelected }
-				icon={ ! hasImages && <BlockIcon icon={ icon } /> }
+				icon={ ! hasImages && sharedIcon }
 				labels={ {
 					title: ! hasImages && __( 'Gallery' ),
-					instructions: ! hasImages && __( 'Drag images, upload new ones or select files from your library.' ),
+					instructions: ! hasImages && PLACEHOLDER_TEXT,
 				} }
 				onSelect={ this.onSelectImages }
 				accept="image/*"
@@ -286,25 +293,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' ) }
+							{ ...MOBILE_CONTROL_PROPS }
 							value={ columns }
 							onChange={ this.setColumnsNumber }
 							min={ 1 }
@@ -313,65 +315,32 @@ class GalleryEdit extends Component {
 						/> }
 						<ToggleControl
 							label={ __( 'Crop Images' ) }
+							{ ...MOBILE_CONTROL_PROPS }
 							checked={ !! imageCrop }
 							onChange={ this.toggleImageCrop }
 							help={ this.getImageCropHelp }
 						/>
 						<SelectControl
 							label={ __( 'Link To' ) }
+							{ ...MOBILE_CONTROL_PROPS }
 							value={ linkTo }
 							onChange={ this.setLinkTo }
 							options={ linkOptions }
 						/>
 					</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 +352,5 @@ export default compose( [
 		return { mediaUpload };
 	} ),
 	withNotices,
+	withViewportMatch( { isNarrow: '< small' } ),
 ] )( GalleryEdit );

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

@@ -6,13 +6,14 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from 'react-native-gutenberg-bridge';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { RichText, MediaUploadProgress } from '@wordpress/block-editor';
 import { isURL } from '@wordpress/url';
 import { withPreferredColorScheme } from '@wordpress/compose';
@@ -258,14 +259,17 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const { id, onRemove, getStylesFromColorScheme } = this.props;
+		const { id, onRemove, getStylesFromColorScheme, isSelected } = this.props;
 
 		const containerStyle = getStylesFromColorScheme( style.galleryImageContainer,
 			style.galleryImageContainerDark );
 
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.onMediaPressed }
+				accessible={ ! isSelected } // We need only child views to be accessible after the selection
+				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
+				accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
 			>
 				<View style={ containerStyle }>
 					<MediaUploadProgress
@@ -280,6 +284,15 @@ class GalleryImage extends Component {
 			</TouchableWithoutFeedback>
 		);
 	}
+
+	accessibilityLabelImageContainer() {
+		const { caption, 'aria-label': ariaLabel } = this.props;
+
+		return isEmpty( caption ) ? ariaLabel : ( ariaLabel + '. ' + sprintf(
+			/* translators: accessibility text. %s: image caption. */
+			__( 'Image caption. %s' ), caption
+		) );
+	}
 }
 
 export default withPreferredColorScheme( GalleryImage );

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

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+} from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import GalleryImage from './gallery-image';
+import { defaultColumnsNumber } from './shared';
+
+export const Gallery = ( props ) => {
+	const {
+		attributes,
+		className,
+		isSelected,
+		setAttributes,
+		selectedImage,
+		mediaPlaceholder,
+		onMoveBackward,
+		onMoveForward,
+		onRemoveImage,
+		onSelectImage,
+		onSetImageAttributes,
+		onFocusGalleryCaption,
+	} = props;
+
+	const {
+		align,
+		columns = defaultColumnsNumber( attributes ),
+		caption,
+		imageCrop,
+		images,
+	} = attributes;
+
+	const captionClassNames = classnames(
+		'blocks-gallery-caption',
+		{
+			'screen-reader-text': ! isSelected && RichText.isEmpty( caption ),
+		}
+	);
+
+	return (
+		<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 && selectedImage === index }
+								onMoveBackward={ onMoveBackward( index ) }
+								onMoveForward={ onMoveForward( index ) }
+								onRemove={ onRemoveImage( index ) }
+								onSelect={ onSelectImage( index ) }
+								setAttributes={ ( attrs ) => onSetImageAttributes( index, attrs ) }
+								caption={ img.caption }
+								aria-label={ ariaLabel }
+							/>
+						</li>
+					);
+				} ) }
+			</ul>
+			{ mediaPlaceholder }
+			<RichText
+				tagName="figcaption"
+				className={ captionClassNames }
+				placeholder={ __( 'Write gallery caption…' ) }
+				value={ caption }
+				unstableOnFocus={ onFocusGalleryCaption }
+				onChange={ ( value ) => setAttributes( { caption: value } ) }
+				inlineToolbar
+			/>
+		</figure>
+	);
+};
+
+export default Gallery;

packages/block-library/src/gallery/shared-icon.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockIcon } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { icon } from './icons.js';
+
+export const sharedIcon = <BlockIcon icon={ icon } />;