@wordpress/block-library 5.0.1 → 6.0.1

package/src/gallery/edit.js

@@ -1,279 +1,290 @@
 /**
  * External dependencies
  */
-import {
-	every,
-	filter,
-	find,
-	forEach,
-	get,
-	isEmpty,
-	map,
-	reduce,
-	some,
-	toString,
-} from 'lodash';
+import classnames from 'classnames';
+import { concat, find } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose';
 import {
+	BaseControl,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
 	withNotices,
 	RangeControl,
+	Spinner,
 } from '@wordpress/components';
 import {
+	store as blockEditorStore,
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Platform, useEffect, useState, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { Platform, useEffect, useMemo } from '@wordpress/element';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
-import { store as coreStore } from '@wordpress/core-data';
+import { createBlock } from '@wordpress/blocks';
+import { createBlobURL } from '@wordpress/blob';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
+import { getHrefAndDestination } from './utils';
+import {
+	getUpdatedLinkTargetSettings,
+	getImageSizeAttributes,
+} from '../image/utils';
 import Gallery from './gallery';
 import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 } from './constants';
+import useImageSizes from './use-image-sizes';
+import useShortCodeTransform from './use-short-code-transform';
+import useGetNewImages from './use-get-new-images';
+import useGetMedia from './use-get-media';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
 	{ value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) },
-	{ value: LINK_DESTINATION_NONE, label: __( 'None' ) },
+	{
+		value: LINK_DESTINATION_NONE,
+		label: _x( 'None', 'Media item link option' ),
+	},
 ];
 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' ),
-} );
+const PLACEHOLDER_TEXT = Platform.isNative
+	? __( 'ADD MEDIA' )
+	: __( 'Drag images, upload new ones or select files from your library.' );
 
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
-	web: {},
-	native: { type: 'stepper' },
-} );
+const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
+	? { type: 'stepper' }
+	: {};
 
 function GalleryEdit( props ) {
 	const {
+		setAttributes,
 		attributes,
+		className,
 		clientId,
+		noticeOperations,
 		isSelected,
 		noticeUI,
-		noticeOperations,
-		onFocus,
+		insertBlocksAfter,
 	} = props;
+
 	const {
-		columns = defaultColumnsNumber( attributes ),
+		columns,
 		imageCrop,
-		images,
+		linkTarget,
 		linkTo,
+		shortCodeTransforms,
 		sizeSlug,
 	} = attributes;
-	const [ selectedImage, setSelectedImage ] = useState();
-	const [ attachmentCaptions, setAttachmentCaptions ] = useState();
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
 
 	const {
-		imageSizes,
-		mediaUpload,
-		getMedia,
-		wasBlockJustInserted,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceInnerBlocks,
+		updateBlockAttributes,
+	} = useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
 
+	const { getBlock, getSettings, preferredStyle } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		const preferredStyleVariations =
+			settings.__experimentalPreferredStyleVariations;
 		return {
-			imageSizes: settings.imageSizes,
-			mediaUpload: settings.mediaUpload,
-			getMedia: select( coreStore ).getMedia,
-			wasBlockJustInserted: select(
-				blockEditorStore
-			).wasBlockJustInserted( clientId, 'inserter_menu' ),
+			getBlock: select( blockEditorStore ).getBlock,
+			getSettings: select( blockEditorStore ).getSettings,
+			preferredStyle: preferredStyleVariations?.value?.[ 'core/image' ],
 		};
-	} );
+	}, [] );
 
-	const resizedImages = useMemo( () => {
-		if ( isSelected ) {
-			return reduce(
-				attributes.ids,
-				( currentResizedImages, id ) => {
-					if ( ! id ) {
-						return currentResizedImages;
-					}
-					const image = getMedia( id );
-					const sizes = reduce(
-						imageSizes,
-						( currentSizes, size ) => {
-							const defaultUrl = get( image, [
-								'sizes',
-								size.slug,
-								'url',
-							] );
-							const mediaDetailsUrl = get( image, [
-								'media_details',
-								'sizes',
-								size.slug,
-								'source_url',
-							] );
-							return {
-								...currentSizes,
-								[ size.slug ]: defaultUrl || mediaDetailsUrl,
-							};
-						},
-						{}
-					);
-					return {
-						...currentResizedImages,
-						[ parseInt( id, 10 ) ]: sizes,
-					};
-				},
-				{}
-			);
-		}
-		return {};
-	}, [ isSelected, attributes.ids, imageSizes ] );
+	const innerBlockImages = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
+		},
+		[ clientId ]
+	);
 
-	function onFocusGalleryCaption() {
-		setSelectedImage();
-	}
+	const images = useMemo(
+		() =>
+			innerBlockImages?.map( ( block ) => ( {
+				clientId: block.clientId,
+				id: block.attributes.id,
+				url: block.attributes.url,
+				attributes: block.attributes,
+				fromSavedContent: Boolean( block.originalContent ),
+			} ) ),
+		[ innerBlockImages ]
+	);
 
-	function setAttributes( newAttrs ) {
-		if ( newAttrs.ids ) {
-			throw new Error(
-				'The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes'
-			);
-		}
+	const imageData = useGetMedia( innerBlockImages );
 
-		if ( newAttrs.images ) {
-			newAttrs = {
-				...newAttrs,
-				// Unlike images[ n ].id which is a string, always ensure the
-				// ids array contains numbers as per its attribute type.
-				ids: map( newAttrs.images, ( { id } ) => parseInt( id, 10 ) ),
-			};
-		}
+	const newImages = useGetNewImages( images, imageData );
 
-		props.setAttributes( newAttrs );
-	}
+	useEffect( () => {
+		newImages?.forEach( ( newImage ) => {
+			updateBlockAttributes( newImage.clientId, {
+				...buildImageAttributes( false, newImage.attributes ),
+				id: newImage.id,
+				align: undefined,
+			} );
+		} );
+	}, [ newImages ] );
 
-	function onSelectImage( index ) {
-		return () => {
-			setSelectedImage( index );
-		};
-	}
+	const shortCodeImages = useShortCodeTransform( shortCodeTransforms );
 
-	function onDeselectImage() {
-		return () => {
-			setSelectedImage();
-		};
-	}
+	useEffect( () => {
+		if ( ! shortCodeTransforms || ! shortCodeImages ) {
+			return;
+		}
+		updateImages( shortCodeImages );
+		setAttributes( { shortCodeTransforms: undefined } );
+	}, [ shortCodeTransforms, shortCodeImages ] );
 
-	function onMove( oldIndex, newIndex ) {
-		const newImages = [ ...images ];
-		newImages.splice( newIndex, 1, images[ oldIndex ] );
-		newImages.splice( oldIndex, 1, images[ newIndex ] );
-		setSelectedImage( newIndex );
-		setAttributes( { images: newImages } );
-	}
+	const imageSizeOptions = useImageSizes(
+		imageData,
+		isSelected,
+		getSettings
+	);
 
-	function onMoveForward( oldIndex ) {
-		return () => {
-			if ( oldIndex === images.length - 1 ) {
-				return;
-			}
-			onMove( oldIndex, oldIndex + 1 );
-		};
-	}
+	/**
+	 * Determines the image attributes that should be applied to an image block
+	 * after the gallery updates.
+	 *
+	 * The gallery will receive the full collection of images when a new image
+	 * is added. As a result we need to reapply the image's original settings if
+	 * it already existed in the gallery. If the image is in fact new, we need
+	 * to apply the gallery's current settings to the image.
+	 *
+	 * @param {Object} existingBlock Existing Image block that still exists after gallery update.
+	 * @param {Object} image         Media object for the actual image.
+	 * @return {Object}               Attributes to set on the new image block.
+	 */
+	function buildImageAttributes( existingBlock, image ) {
+		if ( existingBlock ) {
+			return existingBlock.attributes;
+		}
 
-	function onMoveBackward( oldIndex ) {
-		return () => {
-			if ( oldIndex === 0 ) {
-				return;
-			}
-			onMove( oldIndex, oldIndex - 1 );
+		let newClassName;
+		if ( image.className && image.className !== '' ) {
+			newClassName = image.className;
+		} else {
+			newClassName = preferredStyle
+				? `is-style-${ preferredStyle }`
+				: undefined;
+		}
+
+		return {
+			...pickRelevantMediaFiles( image, sizeSlug ),
+			...getHrefAndDestination( image, linkTo ),
+			...getUpdatedLinkTargetSettings( linkTarget, attributes ),
+			className: newClassName,
+			sizeSlug,
 		};
 	}
 
-	function onRemoveImage( index ) {
-		return () => {
-			const newImages = filter( images, ( img, i ) => index !== i );
-			setSelectedImage();
-			setAttributes( {
-				images: newImages,
-				columns: attributes.columns
-					? Math.min( newImages.length, attributes.columns )
-					: attributes.columns,
-			} );
-		};
+	function isValidFileType( file ) {
+		return (
+			ALLOWED_MEDIA_TYPES.some(
+				( mediaType ) => file.type?.indexOf( mediaType ) === 0
+			) || file.url?.indexOf( 'blob:' ) === 0
+		);
 	}
 
-	function selectCaption( newImage ) {
-		// The image id in both the images and attachmentCaptions arrays is a
-		// string, so ensure comparison works correctly by converting the
-		// newImage.id to a string.
-		const newImageId = toString( newImage.id );
-		const currentImage = find( images, { id: newImageId } );
-		const currentImageCaption = currentImage
-			? currentImage.caption
-			: newImage.caption;
-
-		if ( ! attachmentCaptions ) {
-			return currentImageCaption;
+	function updateImages( selectedImages ) {
+		const newFileUploads =
+			Object.prototype.toString.call( selectedImages ) ===
+			'[object FileList]';
+
+		const imageArray = newFileUploads
+			? Array.from( selectedImages ).map( ( file ) => {
+					if ( ! file.url ) {
+						return pickRelevantMediaFiles( {
+							url: createBlobURL( file ),
+						} );
+					}
+
+					return file;
+			  } )
+			: selectedImages;
+
+		if ( ! imageArray.every( isValidFileType ) ) {
+			noticeOperations.removeAllNotices();
+			noticeOperations.createErrorNotice(
+				__(
+					'If uploading to a gallery all files need to be image formats'
+				),
+				{ id: 'gallery-upload-invalid-file' }
+			);
 		}
 
-		const attachment = find( attachmentCaptions, {
-			id: newImageId,
-		} );
+		const processedImages = imageArray
+			.filter( ( file ) => file.url || isValidFileType( file ) )
+			.map( ( file ) => {
+				if ( ! file.url ) {
+					return pickRelevantMediaFiles( {
+						url: createBlobURL( file ),
+					} );
+				}
 
-		// if the attachment caption is updated
-		if ( attachment && attachment.caption !== newImage.caption ) {
-			return newImage.caption;
-		}
+				return file;
+			} );
 
-		return currentImageCaption;
-	}
+		// Because we are reusing existing innerImage blocks any reordering
+		// done in the media library will be lost so we need to reapply that ordering
+		// once the new image blocks are merged in with existing.
+		const newOrderMap = processedImages.reduce(
+			( result, image, index ) => (
+				( result[ image.id ] = index ), result
+			),
+			{}
+		);
 
-	function onSelectImages( newImages ) {
-		setAttachmentCaptions(
-			newImages.map( ( newImage ) => ( {
-				// Store the attachmentCaption id as a string for consistency
-				// with the type of the id in the images attribute.
-				id: toString( newImage.id ),
-				caption: newImage.caption,
-			} ) )
+		const existingImageBlocks = ! newFileUploads
+			? innerBlockImages.filter( ( block ) =>
+					processedImages.find(
+						( img ) => img.id === block.attributes.id
+					)
+			  )
+			: innerBlockImages;
+
+		const newImageList = processedImages.filter(
+			( img ) =>
+				! existingImageBlocks.find(
+					( existingImg ) => img.id === existingImg.attributes.id
+				)
 		);
-		setAttributes( {
-			images: newImages.map( ( newImage ) => ( {
-				...pickRelevantMediaFiles( newImage, sizeSlug ),
-				caption: selectCaption( newImage, images, attachmentCaptions ),
-				// The id value is stored in a data attribute, so when the
-				// block is parsed it's converted to a string. Converting
-				// to a string here ensures it's type is consistent.
-				id: toString( newImage.id ),
-			} ) ),
-			columns: attributes.columns
-				? Math.min( newImages.length, attributes.columns )
-				: attributes.columns,
+
+		const newBlocks = newImageList.map( ( image ) => {
+			return createBlock( 'core/image', {
+				id: image.id,
+				url: image.url,
+				caption: image.caption,
+				alt: image.alt,
+			} );
 		} );
+
+		replaceInnerBlocks(
+			clientId,
+			concat( existingImageBlocks, newBlocks ).sort(
+				( a, b ) =>
+					newOrderMap[ a.attributes.id ] -
+					newOrderMap[ b.attributes.id ]
+			)
+		);
 	}
 
 	function onUploadError( message ) {
@@ -283,6 +294,34 @@ function GalleryEdit( props ) {
 
 	function setLinkTo( value ) {
 		setAttributes( { linkTo: value } );
+		const changedAttributes = {};
+		const blocks = [];
+		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
+			blocks.push( block.clientId );
+			const image = block.attributes.id
+				? find( imageData, { id: block.attributes.id } )
+				: null;
+			changedAttributes[ block.clientId ] = getHrefAndDestination(
+				image,
+				value
+			);
+		} );
+		updateBlockAttributes( blocks, changedAttributes, true );
+		const linkToText = [ ...linkOptions ].find(
+			( linkType ) => linkType.value === value
+		);
+
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: image size settings */
+				__( 'All gallery image links updated to: %s' ),
+				linkToText.label
+			),
+			{
+				id: 'gallery-attributes-linkTo',
+				type: 'snackbar',
+			}
+		);
 	}
 
 	function setColumnsNumber( value ) {
@@ -299,77 +338,62 @@ function GalleryEdit( props ) {
 			: __( 'Thumbnails are not cropped.' );
 	}
 
-	function setImageAttributes( index, newAttributes ) {
-		if ( ! images[ index ] ) {
-			return;
-		}
-
-		setAttributes( {
-			images: [
-				...images.slice( 0, index ),
-				{
-					...images[ index ],
-					...newAttributes,
-				},
-				...images.slice( index + 1 ),
-			],
+	function toggleOpenInNewTab( openInNewTab ) {
+		const newLinkTarget = openInNewTab ? '_blank' : undefined;
+		setAttributes( { linkTarget: newLinkTarget } );
+		const changedAttributes = {};
+		const blocks = [];
+		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
+			blocks.push( block.clientId );
+			changedAttributes[ block.clientId ] = getUpdatedLinkTargetSettings(
+				newLinkTarget,
+				block.attributes
+			);
+		} );
+		updateBlockAttributes( blocks, changedAttributes, true );
+		const noticeText = openInNewTab
+			? __( 'All gallery images updated to open in new tab' )
+			: __( 'All gallery images updated to not open in new tab' );
+		createSuccessNotice( noticeText, {
+			id: 'gallery-attributes-openInNewTab',
+			type: 'snackbar',
 		} );
-	}
-
-	function getImagesSizeOptions() {
-		return map(
-			filter( imageSizes, ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
-			),
-			( { name, slug } ) => ( { value: slug, label: name } )
-		);
 	}
 
 	function updateImagesSize( newSizeSlug ) {
-		const updatedImages = map( images, ( image ) => {
-			if ( ! image.id ) {
-				return image;
-			}
-			const url = get( resizedImages, [
-				parseInt( image.id, 10 ),
-				newSizeSlug,
-			] );
-			return {
-				...image,
-				...( url && { url } ),
-			};
+		setAttributes( { sizeSlug: newSizeSlug } );
+		const changedAttributes = {};
+		const blocks = [];
+		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
+			blocks.push( block.clientId );
+			const image = block.attributes.id
+				? find( imageData, { id: block.attributes.id } )
+				: null;
+			changedAttributes[ block.clientId ] = getImageSizeAttributes(
+				image,
+				newSizeSlug
+			);
 		} );
+		updateBlockAttributes( blocks, changedAttributes, true );
+		const imageSize = imageSizeOptions.find(
+			( size ) => size.value === newSizeSlug
+		);
 
-		setAttributes( { images: updatedImages, sizeSlug: newSizeSlug } );
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: image size settings */
+				__( 'All gallery image sizes updated to: %s' ),
+				imageSize.label
+			),
+			{
+				id: 'gallery-attributes-sizeSlug',
+				type: 'snackbar',
+			}
+		);
 	}
 
 	useEffect( () => {
-		if (
-			Platform.OS === 'web' &&
-			images &&
-			images.length > 0 &&
-			every( images, ( { url } ) => isBlobURL( url ) )
-		) {
-			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
-			forEach( images, ( { url } ) => revokeBlobURL( url ) );
-			mediaUpload( {
-				filesList,
-				onFileChange: onSelectImages,
-				allowedTypes: [ 'image' ],
-			} );
-		}
-	}, [] );
-
-	useEffect( () => {
-		// Deselect images when deselecting the block
-		if ( ! isSelected ) {
-			setSelectedImage();
-		}
-	}, [ isSelected ] );
-
-	useEffect( () => {
-		// linkTo attribute must be saved so blocks don't break when changing
-		// image_default_link_type in options.php
+		// linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php
 		if ( ! linkTo ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
@@ -382,39 +406,42 @@ function GalleryEdit( props ) {
 
 	const hasImages = !! images.length;
 	const hasImageIds = hasImages && images.some( ( image ) => !! image.id );
+	const imagesUploading = images.some(
+		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
+	);
 
 	const mediaPlaceholder = (
 		<MediaPlaceholder
 			addToGallery={ hasImageIds }
+			handleUpload={ false }
 			isAppender={ hasImages }
-			disableMediaButtons={ hasImages && ! isSelected }
+			disableMediaButtons={
+				( hasImages && ! isSelected ) || imagesUploading
+			}
 			icon={ ! hasImages && sharedIcon }
 			labels={ {
 				title: ! hasImages && __( 'Gallery' ),
 				instructions: ! hasImages && PLACEHOLDER_TEXT,
 			} }
-			onSelect={ onSelectImages }
+			onSelect={ updateImages }
 			accept="image/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple
 			value={ hasImageIds ? images : {} }
 			onError={ onUploadError }
 			notices={ hasImages ? undefined : noticeUI }
-			onFocus={ onFocus }
-			autoOpenMediaUpload={
-				! hasImages && isSelected && wasBlockJustInserted
-			}
 		/>
 	);
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: classnames( className, 'has-nested-images' ),
+	} );
 
 	if ( ! hasImages ) {
 		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
 	}
 
-	const imageSizeOptions = getImagesSizeOptions();
-	const shouldShowSizeOptions = hasImages && ! isEmpty( imageSizeOptions );
+	const hasLinkTo = linkTo && linkTo !== 'none';
 
 	return (
 		<>
@@ -423,7 +450,11 @@ function GalleryEdit( props ) {
 					{ images.length > 1 && (
 						<RangeControl
 							label={ __( 'Columns' ) }
-							value={ columns }
+							value={
+								columns
+									? columns
+									: defaultColumnsNumber( images.length )
+							}
 							onChange={ setColumnsNumber }
 							min={ 1 }
 							max={ Math.min( MAX_COLUMNS, images.length ) }
@@ -444,7 +475,14 @@ function GalleryEdit( props ) {
 						options={ linkOptions }
 						hideCancelButton={ true }
 					/>
-					{ shouldShowSizeOptions && (
+					{ hasLinkTo && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							checked={ linkTarget === '_blank' }
+							onChange={ toggleOpenInNewTab }
+						/>
+					) }
+					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
@@ -453,27 +491,30 @@ function GalleryEdit( props ) {
 							hideCancelButton={ true }
 						/>
 					) }
+					{ Platform.isWeb && ! imageSizeOptions && (
+						<BaseControl className={ 'gallery-image-sizes' }>
+							<BaseControl.VisualLabel>
+								{ __( 'Image size' ) }
+							</BaseControl.VisualLabel>
+							<View className={ 'gallery-image-sizes__loading' }>
+								<Spinner />
+								{ __( 'Loading options…' ) }
+							</View>
+						</BaseControl>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ noticeUI }
 			<Gallery
 				{ ...props }
-				selectedImage={ selectedImage }
+				images={ images }
 				mediaPlaceholder={ mediaPlaceholder }
-				onMoveBackward={ onMoveBackward }
-				onMoveForward={ onMoveForward }
-				onRemoveImage={ onRemoveImage }
-				onSelectImage={ onSelectImage }
-				onDeselectImage={ onDeselectImage }
-				onSetImageAttributes={ setImageAttributes }
 				blockProps={ blockProps }
-				// This prop is used by gallery.native.js.
-				onFocusGalleryCaption={ onFocusGalleryCaption }
+				insertBlocksAfter={ insertBlocksAfter }
 			/>
 		</>
 	);
 }
-
 export default compose( [
 	withNotices,
 	withViewportMatch( { isNarrow: '< small' } ),