replace custom align control with align support

WordPress · Oct 13, 2023 · 74f5579 · 74f5579
1 parent e21581b
commit 74f5579
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 144 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -381,7 +381,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone)
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone)
 -	**Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
@@ -10,7 +10,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"align": {
-			"type": "string"
+			"type": "string",
+			"default": ""
 		},
 		"url": {
 			"type": "string",
@@ -96,6 +97,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"align": [ "left", "center", "right", "wide", "full" ],
 		"color": {
 			"text": false,
 			"background": false

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -10,16 +10,14 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	BlockAlignmentControl,
-	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -106,7 +104,6 @@ export function ImageEdit( {
 		url = '',
 		alt,
 		caption,
-		align,
 		id,
 		width,
 		height,
@@ -138,112 +135,125 @@ export function ImageEdit( {
 	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	function onUploadError( message ) {
-		createErrorNotice( message, { type: 'snackbar' } );
-		setAttributes( {
-			src: undefined,
-			id: undefined,
-			url: undefined,
-		} );
-		setTemporaryURL( undefined );
-	}
-
-	function onSelectImage( media ) {
-		if ( ! media || ! media.url ) {
+	const onUploadError = useCallback(
+		( message ) => {
+			createErrorNotice( message, { type: 'snackbar' } );
 			setAttributes( {
-				url: undefined,
-				alt: undefined,
+				src: undefined,
 				id: undefined,
-				title: undefined,
-				caption: undefined,
+				url: undefined,
 			} );
+			setTemporaryURL( undefined );
+		},
+		[ createErrorNotice, setAttributes ]
+	);
 
-			return;
-		}
+	const onSelectImage = useCallback(
+		( media ) => {
+			if ( ! media || ! media.url ) {
+				setAttributes( {
+					url: undefined,
+					alt: undefined,
+					id: undefined,
+					title: undefined,
+					caption: undefined,
+				} );
+
+				return;
+			}
 
-		if ( isBlobURL( media.url ) ) {
-			setTemporaryURL( media.url );
-			return;
-		}
+			if ( isBlobURL( media.url ) ) {
+				setTemporaryURL( media.url );
+				return;
+			}
 
-		setTemporaryURL();
+			setTemporaryURL();
 
-		// Try to use the previous selected image size if its available
-		// otherwise try the default image size or fallback to "full"
-		let newSize = 'full';
-		if ( sizeSlug && hasSize( media, sizeSlug ) ) {
-			newSize = sizeSlug;
-		} else if ( hasSize( media, imageDefaultSize ) ) {
-			newSize = imageDefaultSize;
-		}
+			// Try to use the previous selected image size if its available
+			// otherwise try the default image size or fallback to "full"
+			let newSize = 'full';
+			if ( sizeSlug && hasSize( media, sizeSlug ) ) {
+				newSize = sizeSlug;
+			} else if ( hasSize( media, imageDefaultSize ) ) {
+				newSize = imageDefaultSize;
+			}
 
-		let mediaAttributes = pickRelevantMediaFiles( media, newSize );
+			let mediaAttributes = pickRelevantMediaFiles( media, newSize );
 
-		// If a caption text was meanwhile written by the user,
-		// make sure the text is not overwritten by empty captions.
-		if ( captionRef.current && ! mediaAttributes.caption ) {
-			const { caption: omittedCaption, ...restMediaAttributes } =
-				mediaAttributes;
-			mediaAttributes = restMediaAttributes;
-		}
+			// If a caption text was meanwhile written by the user,
+			// make sure the text is not overwritten by empty captions.
+			if ( captionRef.current && ! mediaAttributes.caption ) {
+				const { caption: omittedCaption, ...restMediaAttributes } =
+					mediaAttributes;
+				mediaAttributes = restMediaAttributes;
+			}
 
-		let additionalAttributes;
-		// Reset the dimension attributes if changing to a different image.
-		if ( ! media.id || media.id !== id ) {
-			additionalAttributes = {
-				sizeSlug: newSize,
-			};
-		} else {
-			// Keep the same url when selecting the same file, so "Resolution"
-			// option is not changed.
-			additionalAttributes = { url };
-		}
+			let additionalAttributes;
+			// Reset the dimension attributes if changing to a different image.
+			if ( ! media.id || media.id !== id ) {
+				additionalAttributes = {
+					sizeSlug: newSize,
+				};
+			} else {
+				// Keep the same url when selecting the same file, so "Resolution"
+				// option is not changed.
+				additionalAttributes = { url };
+			}
+
+			// Check if default link setting should be used.
+			let linkDestination = attributes.linkDestination;
+			if ( ! linkDestination ) {
+				// Use the WordPress option to determine the proper default.
+				// The constants used in Gutenberg do not match WP options so a little more complicated than ideal.
+				// TODO: fix this in a follow up PR, requires updating media-text and ui component.
+				switch (
+					window?.wp?.media?.view?.settings?.defaultProps?.link ||
+					LINK_DESTINATION_NONE
+				) {
+					case 'file':
+					case LINK_DESTINATION_MEDIA:
+						linkDestination = LINK_DESTINATION_MEDIA;
+						break;
+					case 'post':
+					case LINK_DESTINATION_ATTACHMENT:
+						linkDestination = LINK_DESTINATION_ATTACHMENT;
+						break;
+					case LINK_DESTINATION_CUSTOM:
+						linkDestination = LINK_DESTINATION_CUSTOM;
+						break;
+					case LINK_DESTINATION_NONE:
+						linkDestination = LINK_DESTINATION_NONE;
+						break;
+				}
+			}
 
-		// Check if default link setting should be used.
-		let linkDestination = attributes.linkDestination;
-		if ( ! linkDestination ) {
-			// Use the WordPress option to determine the proper default.
-			// The constants used in Gutenberg do not match WP options so a little more complicated than ideal.
-			// TODO: fix this in a follow up PR, requires updating media-text and ui component.
-			switch (
-				window?.wp?.media?.view?.settings?.defaultProps?.link ||
-				LINK_DESTINATION_NONE
-			) {
-				case 'file':
+			// Check if the image is linked to it's media.
+			let href;
+			switch ( linkDestination ) {
 				case LINK_DESTINATION_MEDIA:
-					linkDestination = LINK_DESTINATION_MEDIA;
+					href = media.url;
 					break;
-				case 'post':
 				case LINK_DESTINATION_ATTACHMENT:
-					linkDestination = LINK_DESTINATION_ATTACHMENT;
-					break;
-				case LINK_DESTINATION_CUSTOM:
-					linkDestination = LINK_DESTINATION_CUSTOM;
-					break;
-				case LINK_DESTINATION_NONE:
-					linkDestination = LINK_DESTINATION_NONE;
+					href = media.link;
 					break;
 			}
-		}
-
-		// Check if the image is linked to it's media.
-		let href;
-		switch ( linkDestination ) {
-			case LINK_DESTINATION_MEDIA:
-				href = media.url;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				href = media.link;
-				break;
-		}
-		mediaAttributes.href = href;
+			mediaAttributes.href = href;
 
-		setAttributes( {
-			...mediaAttributes,
-			...additionalAttributes,
-			linkDestination,
-		} );
-	}
+			setAttributes( {
+				...mediaAttributes,
+				...additionalAttributes,
+				linkDestination,
+			} );
+		},
+		[
+			attributes.linkDestination,
+			id,
+			imageDefaultSize,
+			setAttributes,
+			sizeSlug,
+			url,
+		]
+	);
 
 	function onSelectURL( newURL ) {
 		if ( newURL !== url ) {
@@ -255,17 +265,7 @@ export function ImageEdit( {
 		}
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
-	let isTemp = isTemporaryImage( id, url );
+	const isTemp = isTemporaryImage( id, url );
 
 	// Upload a temporary image on mount.
 	useEffect( () => {
@@ -283,12 +283,11 @@ export function ImageEdit( {
 				},
 				allowedTypes: ALLOWED_MEDIA_TYPES,
 				onError: ( message ) => {
-					isTemp = false;
 					onUploadError( message );
 				},
 			} );
 		}
-	}, [] );
+	}, [ isTemp, mediaUpload, onSelectImage, onUploadError, url ] );
 
 	// If an image is temporary, revoke the Blob url when it is uploaded (and is
 	// no longer temporary).
@@ -298,7 +297,7 @@ export function ImageEdit( {
 			return;
 		}
 		revokeBlobURL( temporaryURL );
-	}, [ isTemp, url ] );
+	}, [ isTemp, temporaryURL, url ] );
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;
@@ -375,14 +374,6 @@ export function ImageEdit( {
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
 			/>
-			{ ! url && blockEditingMode === 'default' && (
-				<BlockControls group="block">
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				</BlockControls>
-			) }
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }
 				onSelect={ onSelectImage }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -25,7 +25,6 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	useSetting,
-	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
@@ -256,11 +255,7 @@ export default function Image( {
 				loadedNaturalHeight ||
 				undefined,
 		};
-	}, [
-		loadedNaturalWidth,
-		loadedNaturalHeight,
-		imageRef.current?.complete,
-	] );
+	}, [ loadedNaturalWidth, loadedNaturalHeight ] );
 
 	function onResizeStart() {
 		toggleSelection( false );
@@ -328,21 +323,6 @@ export default function Image( {
 		} );
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? {
-					width: undefined,
-					height: undefined,
-					aspectRatio: undefined,
-					scale: undefined,
-			  }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -430,12 +410,6 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ hasNonContentControls && (
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				) }
 				{ hasNonContentControls && (
 					<ToolbarButton
 						onClick={ () => {