From ce74c369dc6b637cbac9f18bafc6ac346efa6b5d Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 27 Feb 2025 20:00:09 -0800
Subject: [PATCH] Minimize class names applied and avoid unneeded execution

---
 packages/block-library/src/image/edit.js      | 20 ++++++++++---------
 .../src/image/use-max-width-observer.js       | 15 ++++++++++----
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 7117120f7ee6ce..6388925cfc348a 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -356,14 +356,16 @@ export function ImageEdit( {
 		ref: containerRef,
 		className: classes,
 	} );
-	// Only observe the max width from the parent container when the parent layout is not flex nor grid.
-	// This won't work for them because the container width changes with the image.
-	// TODO: Find a way to observe the container width for flex and grid layouts.
-	const isMaxWidthContainerWidth =
-		! parentLayout || ! SIZED_LAYOUTS.includes( parentLayout.type );
-	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver(
-		blockProps.className
-	);
+	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver( {
+		className: blockProps.className,
+		isActive:
+			isSingleSelected &&
+			// Only observe the max width from the parent container when the parent layout
+			// is not flex nor grid. This won't work for them because the container width
+			// changes with the image.
+			// TODO: Find a way to observe the container width for flex and grid layouts.
+			( ! parentLayout || ! SIZED_LAYOUTS.includes( parentLayout.type ) ),
+	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
@@ -473,7 +475,7 @@ export function ImageEdit( {
 			{
 				// The listener cannot be placed as the first element as it will break the in-between inserter.
 				// See https://github.com/WordPress/gutenberg/blob/71134165868298fc15e22896d0c28b41b3755ff7/packages/block-editor/src/components/block-list/use-in-between-inserter.js#L120
-				isSingleSelected && isMaxWidthContainerWidth && maxWidthObserver
+				maxWidthObserver
 			}
 		</>
 	);
diff --git a/packages/block-library/src/image/use-max-width-observer.js b/packages/block-library/src/image/use-max-width-observer.js
index f749137ed89ae6..f558cb5548e9f0 100644
--- a/packages/block-library/src/image/use-max-width-observer.js
+++ b/packages/block-library/src/image/use-max-width-observer.js
@@ -4,17 +4,24 @@
 import { useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
-function useMaxWidthObserver( className ) {
+function useMaxWidthObserver( { className, isActive } ) {
 	const [ usedMaxWidth, setUsedMaxWidth ] = useState();
 	const setResizeObserved = useResizeObserver( ( [ entry ] ) => {
 		setUsedMaxWidth( entry.contentRect.width );
 	} );
+	if ( ! isActive ) {
+		return [];
+	}
+	// The block’s alignment class names need to be applied because the max-width
+	// may vary by that. The base `wp-block` is needed for classic themes.
+	const usedClassName = className
+		.split( ' ' )
+		.filter( ( name ) => /^(wp-block|align[^\b]+)$/.test( name ) )
+		.join( ' ' );
 
 	const maxWidthObserver = (
 		<div
-			// The block’s class names need to be applied because the max-width
-			// may vary per theme styles (e.g. alignments).
-			className={ className }
+			className={ usedClassName }
 			aria-hidden="true"
 			style={ {
 				position: 'absolute',