@wordpress/block-library 8.27.2 → 8.28.1

package/src/image/edit.js

@@ -15,6 +15,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
@@ -94,7 +95,7 @@ function hasSize( image, size ) {
 export function ImageEdit( {
 	attributes,
 	setAttributes,
-	isSelected,
+	isSelected: isSingleSelected,
 	className,
 	insertBlocksAfter,
 	onReplace,
@@ -142,14 +143,7 @@ export function ImageEdit( {
 	}, [ align ] );
 
 	const ref = useRef();
-	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return {
-			imageDefaultSize: settings.imageDefaultSize,
-			mediaUpload: settings.mediaUpload,
-		};
-	}, [] );
+	const { getSettings } = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -183,6 +177,8 @@ export function ImageEdit( {
 
 		setTemporaryURL();
 
+		const { imageDefaultSize } = getSettings();
+
 		// Try to use the previous selected image size if its available
 		// otherwise try the default image size or fallback to "full"
 		let newSize = 'full';
@@ -265,7 +261,7 @@ export function ImageEdit( {
 			setAttributes( {
 				url: newURL,
 				id: undefined,
-				sizeSlug: imageDefaultSize,
+				sizeSlug: getSettings().imageDefaultSize,
 			} );
 		}
 	}
@@ -281,6 +277,10 @@ export function ImageEdit( {
 		const file = getBlobByURL( url );
 
 		if ( file ) {
+			const { mediaUpload } = getSettings();
+			if ( ! mediaUpload ) {
+				return;
+			}
 			mediaUpload( {
 				filesList: [ file ],
 				onFileChange: ( [ img ] ) => {
@@ -317,6 +317,7 @@ export function ImageEdit( {
 	);
 
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = classnames( className, {
 		'is-transient': temporaryURL,
@@ -336,7 +337,7 @@ export function ImageEdit( {
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false } = useSelect(
 		( select ) => {
-			if ( ! isSelected ) {
+			if ( ! isSingleSelected ) {
 				return {};
 			}
 
@@ -348,17 +349,17 @@ export function ImageEdit( {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
 					getBlockBindingsSource( metadata?.bindings?.url?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 			};
 		},
-		[ isSelected ]
+		[ isSingleSelected ]
 	);
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
 				className={ classnames( 'block-editor-media-placeholder', {
 					[ borderProps.className ]:
-						!! borderProps.className && ! isSelected,
+						!! borderProps.className && ! isSingleSelected,
 				} ) }
 				withIllustration={ true }
 				icon={ lockUrlControls ? pluginsIcon : icon }
@@ -378,6 +379,7 @@ export function ImageEdit( {
 					height: width && aspectRatio ? '100%' : height,
 					objectFit: scale,
 					...borderProps.style,
+					...shadowProps.style,
 				} }
 			>
 				{ lockUrlControls ? (
@@ -399,7 +401,7 @@ export function ImageEdit( {
 				temporaryURL={ temporaryURL }
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				isSelected={ isSelected }
+				isSingleSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				onReplace={ onReplace }
 				onSelectImage={ onSelectImage }

package/src/image/image.js

@@ -25,6 +25,7 @@ import {
 	useSettings,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
@@ -95,7 +96,7 @@ export default function Image( {
 	temporaryURL,
 	attributes,
 	setAttributes,
-	isSelected,
+	isSingleSelected,
 	insertBlocksAfter,
 	onReplace,
 	onSelectImage,
@@ -132,57 +133,32 @@ export default function Image( {
 
 	const imageRef = useRef();
 	const { allowResize = true } = context;
-	const { getBlock } = useSelect( blockEditorStore );
-
-	const { image } = useSelect(
-		( select ) => {
-			const { getMedia } = select( coreStore );
-			return {
-				image:
-					id && isSelected
-						? getMedia( id, { context: 'view' } )
-						: null,
-			};
-		},
-		[ id, isSelected ]
+	const { getBlock, getSettings } = useSelect( blockEditorStore );
+
+	const image = useSelect(
+		( select ) =>
+			id && isSingleSelected
+				? select( coreStore ).getMedia( id, { context: 'view' } )
+				: null,
+		[ id, isSingleSelected ]
 	);
 
-	const {
-		canInsertCover,
-		imageEditing,
-		imageSizes,
-		maxWidth,
-		mediaUpload,
-		multiImageSelection,
-	} = useSelect(
+	const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getMultiSelectedBlockClientIds,
-				getBlockName,
-				getSettings,
-				canInsertBlockType,
-			} = select( blockEditorStore );
+			const { getBlockRootClientId, canInsertBlockType } =
+				select( blockEditorStore );
 
 			const rootClientId = getBlockRootClientId( clientId );
 			const settings = getSettings();
-			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 
 			return {
 				imageEditing: settings.imageEditing,
 				imageSizes: settings.imageSizes,
 				maxWidth: settings.maxWidth,
-				mediaUpload: settings.mediaUpload,
 				canInsertCover: canInsertBlockType(
 					'core/cover',
 					rootClientId
 				),
-				multiImageSelection:
-					multiSelectedClientIds.length &&
-					multiSelectedClientIds.every(
-						( _clientId ) =>
-							getBlockName( _clientId ) === 'core/image'
-					),
 			};
 		},
 		[ clientId ]
@@ -211,7 +187,6 @@ export default function Image( {
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
 		)
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
-	const canUploadMedia = !! mediaUpload;
 
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
@@ -219,8 +194,8 @@ export default function Image( {
 	useEffect( () => {
 		if (
 			! isExternalImage( id, url ) ||
-			! isSelected ||
-			! canUploadMedia
+			! isSingleSelected ||
+			! getSettings().mediaUpload
 		) {
 			setExternalBlob();
 			return;
@@ -235,7 +210,7 @@ export default function Image( {
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
 			.catch( () => {} );
-	}, [ id, url, isSelected, externalBlob, canUploadMedia ] );
+	}, [ id, url, isSingleSelected, externalBlob ] );
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -319,6 +294,10 @@ export default function Image( {
 	}
 
 	function uploadExternal() {
+		const { mediaUpload } = getSettings();
+		if ( ! mediaUpload ) {
+			return;
+		}
 		mediaUpload( {
 			filesList: [ externalBlob ],
 			onFileChange( [ img ] ) {
@@ -341,13 +320,13 @@ export default function Image( {
 	}
 
 	useEffect( () => {
-		if ( ! isSelected ) {
+		if ( ! isSingleSelected ) {
 			setIsEditingImage( false );
 		}
-	}, [ isSelected ] );
+	}, [ isSingleSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
-	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
+	const allowCrop = isSingleSelected && canEditImage && ! isEditingImage;
 
 	function switchToCover() {
 		replaceBlocks(
@@ -426,45 +405,52 @@ export default function Image( {
 
 	const {
 		lockUrlControls = false,
+		lockHrefControls = false,
 		lockAltControls = false,
 		lockTitleControls = false,
 	} = useSelect(
 		( select ) => {
-			if ( ! isSelected ) {
+			if ( ! isSingleSelected ) {
 				return {};
 			}
 
-			const { getBlockBindingsSource } = unlock(
-				select( blockEditorStore )
-			);
+			const { getBlockBindingsSource, getBlockParentsByBlockName } =
+				unlock( select( blockEditorStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
+			const hasParentPattern =
+				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
 			return {
 				lockUrlControls:
 					!! urlBinding &&
 					getBlockBindingsSource( urlBinding?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
+				lockHrefControls:
+					// Disable editing the link of the URL if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the link on the frontend.
+					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
 					getBlockBindingsSource( altBinding?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 				lockTitleControls:
 					!! titleBinding &&
 					getBlockBindingsSource( titleBinding?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 			};
 		},
-		[ isSelected ]
+		[ clientId, isSingleSelected, metadata?.bindings ]
 	);
 
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ ! multiImageSelection &&
+				{ isSingleSelected &&
 					! isEditingImage &&
+					! lockHrefControls &&
 					! lockUrlControls && (
 						<ImageURLInputUI
 							url={ href || '' }
@@ -487,7 +473,7 @@ export default function Image( {
 						label={ __( 'Crop' ) }
 					/>
 				) }
-				{ ! multiImageSelection && canInsertCover && (
+				{ isSingleSelected && canInsertCover && (
 					<ToolbarButton
 						icon={ overlayText }
 						label={ __( 'Add text over image' ) }
@@ -495,28 +481,26 @@ export default function Image( {
 					/>
 				) }
 			</BlockControls>
-			{ ! multiImageSelection &&
-				! isEditingImage &&
-				! lockUrlControls && (
-					<BlockControls group="other">
-						<MediaReplaceFlow
-							mediaId={ id }
-							mediaURL={ url }
-							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							accept="image/*"
-							onSelect={ onSelectImage }
-							onSelectURL={ onSelectURL }
-							onError={ onUploadError }
-						/>
-					</BlockControls>
-				) }
-			{ ! multiImageSelection && externalBlob && (
+			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
+				<BlockControls group="other">
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ url }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="image/*"
+						onSelect={ onSelectImage }
+						onSelectURL={ onSelectURL }
+						onError={ onUploadError }
+					/>
+				</BlockControls>
+			) }
+			{ isSingleSelected && externalBlob && (
 				<BlockControls>
 					<ToolbarGroup>
 						<ToolbarButton
 							onClick={ uploadExternal }
 							icon={ upload }
-							label={ __( 'Upload image to media library' ) }
+							label={ __( 'Upload to Media Library' ) }
 						/>
 					</ToolbarGroup>
 				</BlockControls>
@@ -527,7 +511,7 @@ export default function Image( {
 					resetAll={ resetAll }
 					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 				>
-					{ ! multiImageSelection && (
+					{ isSingleSelected && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
 							isShownByDefault={ true }
@@ -620,6 +604,7 @@ export default function Image( {
 	}
 
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 
 	let img = (
@@ -646,6 +631,7 @@ export default function Image( {
 						( width && height ) || aspectRatio ? '100%' : undefined,
 					objectFit: scale,
 					...borderProps.style,
+					...shadowProps.style,
 				} }
 			/>
 			{ temporaryURL && <Spinner /> }
@@ -756,7 +742,7 @@ export default function Image( {
 					width: currentWidth ?? 'auto',
 					height: currentHeight ?? 'auto',
 				} }
-				showHandle={ isSelected }
+				showHandle={ isSingleSelected }
 				minWidth={ minWidth }
 				maxWidth={ maxWidthBuffer }
 				minHeight={ minHeight }
@@ -805,12 +791,10 @@ export default function Image( {
 			<Caption
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				isSelected={ isSelected }
+				isSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
-				showToolbarButton={
-					! multiImageSelection && hasNonContentControls
-				}
+				showToolbarButton={ isSingleSelected && hasNonContentControls }
 			/>
 		</>
 	);