Fix alignment issues

WordPress · Aug 29, 2024 · d9e9642 · d9e9642
1 parent 65a45b0
commit d9e9642
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 36 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -19,10 +19,11 @@ import {
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState, cloneElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -110,6 +111,9 @@ export function ImageEdit( {
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const containerRef = useRef();
 
+	const [ contentResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
+
 	const altRef = useRef();
 	useEffect( () => {
 		altRef.current = alt;
@@ -368,36 +372,69 @@ export function ImageEdit( {
 	};
 
 	return (
-		<figure { ...blockProps }>
-			<Image
-				temporaryURL={ temporaryURL }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSingleSelected={ isSingleSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				onReplace={ onReplace }
-				onSelectImage={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onUploadError={ onUploadError }
-				context={ context }
-				clientId={ clientId }
-				blockEditingMode={ blockEditingMode }
-				parentLayoutType={ parentLayout?.type }
-				getContainerWidth={ () => containerRef.current.offsetWidth }
-			/>
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				onSelect={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onError={ onUploadError }
-				placeholder={ placeholder }
-				accept="image/*"
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				value={ { id, src } }
-				mediaPreview={ mediaPreview }
-				disableMediaButtons={ temporaryURL || url }
-			/>
-		</figure>
+		<>
+			<figure { ...blockProps }>
+				<Image
+					temporaryURL={ temporaryURL }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSingleSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					onReplace={ onReplace }
+					onSelectImage={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onUploadError={ onUploadError }
+					context={ context }
+					clientId={ clientId }
+					blockEditingMode={ blockEditingMode }
+					parentLayoutType={ parentLayout?.type }
+					maxContentWidth={ containerWidth }
+					getMaxContentWidth={ () =>
+						containerRef.current?.clientWidth
+					}
+				/>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					placeholder={ placeholder }
+					accept="image/*"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					value={ { id, src } }
+					mediaPreview={ mediaPreview }
+					disableMediaButtons={ temporaryURL || url }
+				/>
+			</figure>
+			{
+				// Only render the content resize listener if the block has alignment set,
+				// otherwise we can simply use 100% of the width.
+				align ? (
+					// A trick to take the padding of the parent into account when calculating the max width.
+					<div
+						aria-hidden="true"
+						style={ {
+							position: 'absolute',
+							boxSizing: 'border-box',
+							inset: 0,
+							width: '100%',
+							height: 0,
+							paddingInline: 'inherit',
+							margin: 0,
+							// Override the max-width set by the editor styles.
+							maxWidth: 'none',
+						} }
+					>
+						{ cloneElement( contentResizeListener, {
+							style: {
+								...contentResizeListener.props.style,
+								position: 'relative',
+							},
+						} ) }
+					</div>
+				) : null
+			}
+		</>
 	);
 }
 

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -152,6 +152,11 @@ figure.wp-block-image:not(.wp-block) {
 	text-align: center;
 }
 
+// Relatively position the alignment container to support the content resizer.
+.wp-block[data-align]:has(> .wp-block-image) {
+	position: relative;
+}
+
 .wp-block-image__crop-area {
 	position: relative;
 	max-width: 100%;

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -109,7 +109,8 @@ export default function Image( {
 	clientId,
 	blockEditingMode,
 	parentLayoutType,
-	getContainerWidth,
+	maxContentWidth,
+	getMaxContentWidth,
 } ) {
 	const {
 		url = '',
@@ -962,7 +963,7 @@ export default function Image( {
 				} }
 				showHandle={ isSingleSelected }
 				minWidth={ minWidth }
-				maxWidth="100%"
+				maxWidth={ maxContentWidth || '100%' }
 				minHeight={ minHeight }
 				lockAspectRatio={ ratio }
 				enable={ {
@@ -975,14 +976,14 @@ export default function Image( {
 				onResizeStop={ ( event, direction, elt ) => {
 					onResizeStop();
 
-					const maxContentWidth = getContainerWidth();
+					const maxWidth = maxContentWidth || getMaxContentWidth();
 
 					// Clear hardcoded width if the resized width is close to the max-content width.
 					if (
 						// Only do this if the image is bigger than the container to prevent it from being squished.
 						// TODO: Remove this check if the image support setting 100% width.
-						naturalWidth >= maxContentWidth &&
-						Math.abs( elt.offsetWidth - maxContentWidth ) < 10
+						naturalWidth >= maxWidth &&
+						Math.abs( elt.offsetWidth - maxWidth ) < 10
 					) {
 						setAttributes( {
 							width: undefined,