@wordpress/block-library 9.48.0 → 10.0.0

package/src/gallery/edit.js

@@ -17,7 +17,6 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToolbarDropdownMenu,
-	PanelBody,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -29,7 +28,7 @@ import {
 	MediaReplaceFlow,
 	useSettings,
 } from '@wordpress/block-editor';
-import { Platform, useEffect, useMemo } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { View } from '@wordpress/primitives';
@@ -112,13 +111,9 @@ const NAVIGATION_BUTTON_TYPE_OPTIONS = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-const PLACEHOLDER_TEXT = Platform.isNative
-	? __( 'Add media' )
-	: __( 'Drag and drop images, upload, or choose from your library.' );
-
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
-	? { type: 'stepper' }
-	: {};
+const PLACEHOLDER_TEXT = __(
+	'Drag and drop images, upload, or choose from your library.'
+);
 
 const DEFAULT_BLOCK = { name: 'core/image' };
 const EMPTY_ARRAY = [];
@@ -132,7 +127,6 @@ export default function GalleryEdit( props ) {
 		isSelected,
 		insertBlocksAfter,
 		isContentLocked,
-		onFocus,
 	} = props;
 
 	const [ lightboxSetting, defaultRatios, themeRatios, showDefaultRatios ] =
@@ -169,42 +163,32 @@ export default function GalleryEdit( props ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const {
-		getBlock,
-		getSettings,
-		innerBlockImages,
-		blockWasJustInserted,
-		multiGallerySelection,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockName,
-				getMultiSelectedBlockClientIds,
-				getSettings: _getSettings,
-				getBlock: _getBlock,
-				wasBlockJustInserted,
-			} = select( blockEditorStore );
-			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
-
-			return {
-				getBlock: _getBlock,
-				getSettings: _getSettings,
-				innerBlockImages:
-					_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
-				blockWasJustInserted: wasBlockJustInserted(
-					clientId,
-					'inserter_menu'
-				),
-				multiGallerySelection:
-					multiSelectedClientIds.length &&
-					multiSelectedClientIds.every(
-						( _clientId ) =>
-							getBlockName( _clientId ) === 'core/gallery'
-					),
-			};
-		},
-		[ clientId ]
-	);
+	const { getBlock, getSettings, innerBlockImages, multiGallerySelection } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockName,
+					getMultiSelectedBlockClientIds,
+					getSettings: _getSettings,
+					getBlock: _getBlock,
+				} = select( blockEditorStore );
+				const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
+				return {
+					getBlock: _getBlock,
+					getSettings: _getSettings,
+					innerBlockImages:
+						_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
+					multiGallerySelection:
+						multiSelectedClientIds.length &&
+						multiSelectedClientIds.every(
+							( _clientId ) =>
+								getBlockName( _clientId ) === 'core/gallery'
+						),
+				};
+			},
+			[ clientId ]
+		);
 
 	const images = useMemo(
 		() =>
@@ -327,15 +311,7 @@ export default function GalleryEdit( props ) {
 	}
 
 	function isValidFileType( file ) {
-		// It's necessary to retrieve the media type from the raw image data for already-uploaded images on native.
-		const nativeFileData =
-			Platform.isNative && file.id
-				? imageData.find( ( { id } ) => id === file.id )
-				: null;
-
-		const mediaTypeSelector = nativeFileData
-			? nativeFileData?.media_type
-			: file.type;
+		const mediaTypeSelector = file.type;
 
 		return (
 			ALLOWED_MEDIA_TYPES.some(
@@ -593,30 +569,15 @@ export default function GalleryEdit( props ) {
 
 	const hasImages = !! images.length;
 	const hasImageIds = hasImages && images.some( ( image ) => !! image.id );
-	const imagesUploading = images.some( ( img ) =>
-		! Platform.isNative
-			? ! img.id && img.url?.indexOf( 'blob:' ) === 0
-			: img.url?.indexOf( 'file:' ) === 0
+	const imagesUploading = images.some(
+		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
 	);
 
-	// MediaPlaceholder props are different between web and native hence, we provide a platform-specific set.
-	const mediaPlaceholderProps = Platform.select( {
-		web: {
-			addToGallery: false,
-			disableMediaButtons: imagesUploading,
-			value: {},
-		},
-		native: {
-			addToGallery: hasImageIds,
-			isAppender: hasImages,
-			disableMediaButtons:
-				( hasImages && ! isSelected ) || imagesUploading,
-			value: hasImageIds ? images : {},
-			autoOpenMediaUpload:
-				! hasImages && isSelected && blockWasJustInserted,
-			onFocus,
-		},
-	} );
+	const mediaPlaceholderProps = {
+		addToGallery: false,
+		disableMediaButtons: imagesUploading,
+		value: {},
+	};
 	const mediaPlaceholder = (
 		<MediaPlaceholder
 			handleUpload={ false }
@@ -637,17 +598,11 @@ export default function GalleryEdit( props ) {
 		className: clsx( className, 'has-nested-images' ),
 	} );
 
-	const nativeInnerBlockProps = Platform.isNative && {
-		marginHorizontal: 0,
-		marginVertical: 0,
-	};
-
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		defaultBlock: DEFAULT_BLOCK,
 		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
-		...nativeInnerBlockProps,
 	} );
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -666,189 +621,37 @@ export default function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				{ Platform.isWeb && (
-					<ToolsPanel
-						label={ __( 'Settings' ) }
-						resetAll={ () => {
-							setAttributes( {
-								navigationButtonType: 'icon',
-								columns: undefined,
-								imageCrop: true,
-								randomOrder: false,
-							} );
-
-							setAspectRatio( 'auto' );
-
-							if ( sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG ) {
-								updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG );
-							}
-
-							if ( linkTarget ) {
-								toggleOpenInNewTab( false );
-							}
-						} }
-						dropdownMenuProps={ dropdownMenuProps }
-					>
-						{ images.length > 1 && (
-							<ToolsPanelItem
-								isShownByDefault
-								label={ __( 'Columns' ) }
-								hasValue={ () =>
-									!! columns && columns !== images.length
-								}
-								onDeselect={ () =>
-									setColumnsNumber( undefined )
-								}
-							>
-								<RangeControl
-									label={ __( 'Columns' ) }
-									value={
-										columns
-											? columns
-											: defaultColumnsNumber(
-													images.length
-											  )
-									}
-									onChange={ setColumnsNumber }
-									min={ 1 }
-									max={ Math.min(
-										MAX_COLUMNS,
-										images.length
-									) }
-									required
-									__next40pxDefaultSize
-								/>
-							</ToolsPanelItem>
-						) }
-						{ imageSizeOptions?.length > 0 && (
-							<ToolsPanelItem
-								isShownByDefault
-								label={ __( 'Resolution' ) }
-								hasValue={ () =>
-									sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG
-								}
-								onDeselect={ () =>
-									updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG )
-								}
-							>
-								<SelectControl
-									label={ __( 'Resolution' ) }
-									help={ __(
-										'Select the size of the source images.'
-									) }
-									value={ sizeSlug }
-									options={ imageSizeOptions }
-									onChange={ updateImagesSize }
-									hideCancelButton
-									size="__unstable-large"
-								/>
-							</ToolsPanelItem>
-						) }
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							navigationButtonType: 'icon',
+							columns: undefined,
+							imageCrop: true,
+							randomOrder: false,
+						} );
+
+						setAspectRatio( 'auto' );
+
+						if ( sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG ) {
+							updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG );
+						}
+
+						if ( linkTarget ) {
+							toggleOpenInNewTab( false );
+						}
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ images.length > 1 && (
 						<ToolsPanelItem
 							isShownByDefault
-							label={ __( 'Crop images to fit' ) }
-							hasValue={ () => ! imageCrop }
-							onDeselect={ () =>
-								setAttributes( { imageCrop: true } )
-							}
-						>
-							<ToggleControl
-								label={ __( 'Crop images to fit' ) }
-								checked={ !! imageCrop }
-								onChange={ toggleImageCrop }
-							/>
-						</ToolsPanelItem>
-						<ToolsPanelItem
-							isShownByDefault
-							label={ __( 'Randomize order' ) }
-							hasValue={ () => !! randomOrder }
-							onDeselect={ () =>
-								setAttributes( { randomOrder: false } )
-							}
-						>
-							<ToggleControl
-								label={ __( 'Randomize order' ) }
-								checked={ !! randomOrder }
-								onChange={ toggleRandomOrder }
-							/>
-						</ToolsPanelItem>
-						{ hasLinkTo && (
-							<ToolsPanelItem
-								isShownByDefault
-								label={ __( 'Open images in new tab' ) }
-								hasValue={ () => !! linkTarget }
-								onDeselect={ () => toggleOpenInNewTab( false ) }
-							>
-								<ToggleControl
-									label={ __( 'Open images in new tab' ) }
-									checked={ linkTarget === '_blank' }
-									onChange={ toggleOpenInNewTab }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ aspectRatioOptions.length > 1 && (
-							<ToolsPanelItem
-								hasValue={ () =>
-									!! aspectRatio && aspectRatio !== 'auto'
-								}
-								label={ __( 'Aspect ratio' ) }
-								onDeselect={ () => setAspectRatio( 'auto' ) }
-								isShownByDefault
-							>
-								<SelectControl
-									__next40pxDefaultSize
-									label={ __( 'Aspect ratio' ) }
-									help={ __(
-										'Set a consistent aspect ratio for all images in the gallery.'
-									) }
-									value={ aspectRatio }
-									options={ aspectRatioOptions }
-									onChange={ setAspectRatio }
-								/>
-							</ToolsPanelItem>
-						) }
-						<ToolsPanelItem
-							label={ __( 'Navigation button type' ) }
-							isShownByDefault
-							hasValue={ () => navigationButtonType !== 'icon' }
-							onDeselect={ () =>
-								setAttributes( {
-									navigationButtonType: 'icon',
-								} )
+							label={ __( 'Columns' ) }
+							hasValue={ () =>
+								!! columns && columns !== images.length
 							}
+							onDeselect={ () => setColumnsNumber( undefined ) }
 						>
-							{ hasLightboxImages && (
-								<ToggleGroupControl
-									label={ __( 'Navigation button type' ) }
-									value={ navigationButtonType }
-									onChange={ ( value ) =>
-										setAttributes( {
-											navigationButtonType: value,
-										} )
-									}
-									isBlock
-									__next40pxDefaultSize
-									help={ __(
-										'Adjust the appearance of buttons in the lightbox.'
-									) }
-								>
-									{ NAVIGATION_BUTTON_TYPE_OPTIONS.map(
-										( option ) => (
-											<ToggleGroupControlOption
-												key={ option.value }
-												value={ option.value }
-												label={ option.label }
-											/>
-										)
-									) }
-								</ToggleGroupControl>
-							) }
-						</ToolsPanelItem>
-					</ToolsPanel>
-				) }
-				{ Platform.isNative && (
-					<PanelBody title={ __( 'Settings' ) }>
-						{ images.length > 1 && (
 							<RangeControl
 								label={ __( 'Columns' ) }
 								value={
@@ -859,12 +662,22 @@ export default function GalleryEdit( props ) {
 								onChange={ setColumnsNumber }
 								min={ 1 }
 								max={ Math.min( MAX_COLUMNS, images.length ) }
-								{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 								required
 								__next40pxDefaultSize
 							/>
-						) }
-						{ imageSizeOptions?.length > 0 && (
+						</ToolsPanelItem>
+					) }
+					{ imageSizeOptions?.length > 0 && (
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Resolution' ) }
+							hasValue={ () =>
+								sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG
+							}
+							onDeselect={ () =>
+								updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG )
+							}
+						>
 							<SelectControl
 								label={ __( 'Resolution' ) }
 								help={ __(
@@ -876,121 +689,171 @@ export default function GalleryEdit( props ) {
 								hideCancelButton
 								size="__unstable-large"
 							/>
-						) }
-						<SelectControl
-							label={ __( 'Link' ) }
-							value={ linkTo }
-							onChange={ setLinkTo }
-							options={ linkOptions }
-							hideCancelButton
-							size="__unstable-large"
-						/>
+						</ToolsPanelItem>
+					) }
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Crop images to fit' ) }
+						hasValue={ () => ! imageCrop }
+						onDeselect={ () =>
+							setAttributes( { imageCrop: true } )
+						}
+					>
 						<ToggleControl
 							label={ __( 'Crop images to fit' ) }
 							checked={ !! imageCrop }
 							onChange={ toggleImageCrop }
 						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Randomize order' ) }
+						hasValue={ () => !! randomOrder }
+						onDeselect={ () =>
+							setAttributes( { randomOrder: false } )
+						}
+					>
 						<ToggleControl
 							label={ __( 'Randomize order' ) }
 							checked={ !! randomOrder }
 							onChange={ toggleRandomOrder }
 						/>
-						{ hasLinkTo && (
+					</ToolsPanelItem>
+					{ hasLinkTo && (
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Open images in new tab' ) }
+							hasValue={ () => !! linkTarget }
+							onDeselect={ () => toggleOpenInNewTab( false ) }
+						>
 							<ToggleControl
 								label={ __( 'Open images in new tab' ) }
 								checked={ linkTarget === '_blank' }
 								onChange={ toggleOpenInNewTab }
 							/>
-						) }
-						{ aspectRatioOptions.length > 1 && (
+						</ToolsPanelItem>
+					) }
+					{ aspectRatioOptions.length > 1 && (
+						<ToolsPanelItem
+							hasValue={ () =>
+								!! aspectRatio && aspectRatio !== 'auto'
+							}
+							label={ __( 'Aspect ratio' ) }
+							onDeselect={ () => setAspectRatio( 'auto' ) }
+							isShownByDefault
+						>
 							<SelectControl
-								label={ __( 'Aspect Ratio' ) }
+								__next40pxDefaultSize
+								label={ __( 'Aspect ratio' ) }
 								help={ __(
 									'Set a consistent aspect ratio for all images in the gallery.'
 								) }
 								value={ aspectRatio }
 								options={ aspectRatioOptions }
 								onChange={ setAspectRatio }
-								hideCancelButton
-								size="__unstable-large"
 							/>
-						) }
-					</PanelBody>
-				) }
+						</ToolsPanelItem>
+					) }
+					{ lightboxSetting?.allowEditing && hasLightboxImages && (
+						<ToolsPanelItem
+							label={ __( 'Navigation button type' ) }
+							isShownByDefault
+							hasValue={ () => navigationButtonType !== 'icon' }
+							onDeselect={ () =>
+								setAttributes( {
+									navigationButtonType: 'icon',
+								} )
+							}
+						>
+							<ToggleGroupControl
+								label={ __( 'Navigation button type' ) }
+								value={ navigationButtonType }
+								onChange={ ( value ) =>
+									setAttributes( {
+										navigationButtonType: value,
+									} )
+								}
+								isBlock
+								__next40pxDefaultSize
+								help={ __(
+									'Adjust the appearance of buttons in the lightbox.'
+								) }
+							>
+								{ NAVIGATION_BUTTON_TYPE_OPTIONS.map(
+									( option ) => (
+										<ToggleGroupControlOption
+											key={ option.value }
+											value={ option.value }
+											label={ option.label }
+										/>
+									)
+								) }
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			</InspectorControls>
-			{ Platform.isWeb ? (
-				<BlockControls group="block">
-					<ToolbarDropdownMenu
-						icon={ linkIcon }
-						label={ __( 'Link' ) }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								{ linkOptions.map( ( linkItem ) => {
-									const isOptionSelected =
-										linkTo === linkItem.value;
-									return (
-										<MenuItem
-											key={ linkItem.value }
-											isSelected={ isOptionSelected }
-											className={ clsx(
-												'components-dropdown-menu__menu-item',
-												{
-													'is-active':
-														isOptionSelected,
-												}
-											) }
-											iconPosition="left"
-											icon={ linkItem.icon }
-											onClick={ () => {
-												setLinkTo( linkItem.value );
-												onClose();
-											} }
-											role="menuitemradio"
-											info={ linkItem.infoText }
-										>
-											{ linkItem.label }
-										</MenuItem>
-									);
-								} ) }
-							</MenuGroup>
-						) }
-					</ToolbarDropdownMenu>
-				</BlockControls>
-			) : null }
-			{ Platform.isWeb && (
-				<>
-					{ ! multiGallerySelection && (
-						<BlockControls group="other">
-							<MediaReplaceFlow
-								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								handleUpload={ false }
-								onSelect={ updateImages }
-								name={ __( 'Add' ) }
-								multiple
-								mediaIds={ images
-									.filter( ( image ) => image.id )
-									.map( ( image ) => image.id ) }
-								addToGallery={ hasImageIds }
-								variant="toolbar"
-							/>
-						</BlockControls>
+			<BlockControls group="block">
+				<ToolbarDropdownMenu icon={ linkIcon } label={ __( 'Link' ) }>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ linkOptions.map( ( linkItem ) => {
+								const isOptionSelected =
+									linkTo === linkItem.value;
+								return (
+									<MenuItem
+										key={ linkItem.value }
+										isSelected={ isOptionSelected }
+										className={ clsx(
+											'components-dropdown-menu__menu-item',
+											{
+												'is-active': isOptionSelected,
+											}
+										) }
+										iconPosition="left"
+										icon={ linkItem.icon }
+										onClick={ () => {
+											setLinkTo( linkItem.value );
+											onClose();
+										} }
+										role="menuitemradio"
+										info={ linkItem.infoText }
+									>
+										{ linkItem.label }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
 					) }
-					<GapStyles
-						blockGap={ attributes.style?.spacing?.blockGap }
-						clientId={ clientId }
-					/>
-				</>
-			) }
+				</ToolbarDropdownMenu>
+			</BlockControls>
+			<>
+				{ ! multiGallerySelection && (
+					<BlockControls group="other">
+						<MediaReplaceFlow
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							handleUpload={ false }
+							onSelect={ updateImages }
+							name={ __( 'Add' ) }
+							multiple
+							mediaIds={ images
+								.filter( ( image ) => image.id )
+								.map( ( image ) => image.id ) }
+							addToGallery={ hasImageIds }
+							variant="toolbar"
+						/>
+					</BlockControls>
+				) }
+				<GapStyles
+					blockGap={ attributes.style?.spacing?.blockGap }
+					clientId={ clientId }
+				/>
+			</>
 			<Gallery
 				{ ...props }
 				isContentLocked={ isContentLocked }
 				images={ images }
-				mediaPlaceholder={
-					! hasImages || Platform.isNative
-						? mediaPlaceholder
-						: undefined
-				}
+				mediaPlaceholder={ ! hasImages ? mediaPlaceholder : undefined }
 				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
 				multiGallerySelection={ multiGallerySelection }