@wordpress/block-editor 12.23.0 → 12.25.0

package/src/components/global-styles/use-global-styles-output.js

@@ -527,10 +527,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `:where(${ selector } .${ className })${
+										? `:where(.${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${
+										: `:where(${ selector }-${ className })${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -575,7 +575,7 @@ export function getLayoutStyles( {
 						}
 
 						if ( declarations.length ) {
-							const combinedSelector = `${ selector } .${ className }${
+							const combinedSelector = `.${ className }${
 								baseStyle?.selector || ''
 							}`;
 							ruleset += `${ combinedSelector } { ${ declarations.join(
@@ -776,15 +776,29 @@ export const toStyles = (
 	hasBlockGapSupport,
 	hasFallbackGapSupport,
 	disableLayoutStyles = false,
-	isTemplate = true
+	isTemplate = true,
+	styleOptions = undefined
 ) => {
+	// These allow opting out of certain sets of styles.
+	const options = {
+		blockGap: true,
+		blockStyles: true,
+		layoutStyles: true,
+		marginReset: true,
+		presets: true,
+		rootPadding: true,
+		...styleOptions,
+	};
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
 	const { contentSize, wideSize } = tree?.settings?.layout || {};
+	const hasBodyStyles =
+		options.marginReset || options.rootPadding || options.layoutStyles;
+
 	let ruleset = '';
 
-	if ( contentSize || wideSize ) {
+	if ( options.presets && ( contentSize || wideSize ) ) {
 		ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } {`;
 		ruleset = contentSize
 			? ruleset + ` --wp--style--global--content-size: ${ contentSize };`
@@ -795,203 +809,211 @@ export const toStyles = (
 		ruleset += '}';
 	}
 
-	/*
-	 * Reset default browser margin on the body element.
-	 * This is set on the body selector **before** generating the ruleset
-	 * from the `theme.json`. This is to ensure that if the `theme.json` declares
-	 * `margin` in its `spacing` declaration for the `body` element then these
-	 * user-generated values take precedence in the CSS cascade.
-	 * @link https://github.com/WordPress/gutenberg/issues/36147.
-	 */
-	ruleset += 'body {margin: 0;';
-
-	// Root padding styles should only be output for full templates, not patterns or template parts.
-	if ( useRootPaddingAlign && isTemplate ) {
+	if ( hasBodyStyles ) {
 		/*
-		 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
-		 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
+		 * Reset default browser margin on the body element.
+		 * This is set on the body selector **before** generating the ruleset
+		 * from the `theme.json`. This is to ensure that if the `theme.json` declares
+		 * `margin` in its `spacing` declaration for the `body` element then these
+		 * user-generated values take precedence in the CSS cascade.
+		 * @link https://github.com/WordPress/gutenberg/issues/36147.
 		 */
-		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
-			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-			.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }
-			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-			.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }
-			.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
-	}
+		ruleset += 'body {margin: 0;';
 
-	ruleset += '}';
+		// Root padding styles should only be output for full templates, not patterns or template parts.
+		if ( options.rootPadding && useRootPaddingAlign && isTemplate ) {
+			/*
+			 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
+			 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
+			 */
+			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
+				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }
+				.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+				.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
+		}
 
-	nodesWithStyles.forEach(
-		( {
-			selector,
-			duotoneSelector,
-			styles,
-			fallbackGapValue,
-			hasLayoutSupport,
-			featureSelectors,
-			styleVariationSelectors,
-		} ) => {
-			// Process styles for block support features with custom feature level
-			// CSS selectors set.
-			if ( featureSelectors ) {
-				const featureDeclarations = getFeatureDeclarations(
-					featureSelectors,
-					styles
-				);
+		ruleset += '}';
+	}
 
-				Object.entries( featureDeclarations ).forEach(
-					( [ cssSelector, declarations ] ) => {
-						if ( declarations.length ) {
-							const rules = declarations.join( ';' );
-							ruleset += `:where(${ cssSelector }){${ rules };}`;
-						}
-					}
-				);
-			}
+	if ( options.blockStyles ) {
+		nodesWithStyles.forEach(
+			( {
+				selector,
+				duotoneSelector,
+				styles,
+				fallbackGapValue,
+				hasLayoutSupport,
+				featureSelectors,
+				styleVariationSelectors,
+			} ) => {
+				// Process styles for block support features with custom feature level
+				// CSS selectors set.
+				if ( featureSelectors ) {
+					const featureDeclarations = getFeatureDeclarations(
+						featureSelectors,
+						styles
+					);
 
-			if ( styleVariationSelectors ) {
-				Object.entries( styleVariationSelectors ).forEach(
-					( [ styleVariationName, styleVariationSelector ] ) => {
-						const styleVariations =
-							styles?.variations?.[ styleVariationName ];
-						if ( styleVariations ) {
-							// If the block uses any custom selectors for block support, add those first.
-							if ( featureSelectors ) {
-								const featureDeclarations =
-									getFeatureDeclarations(
-										featureSelectors,
-										styleVariations
-									);
+					Object.entries( featureDeclarations ).forEach(
+						( [ cssSelector, declarations ] ) => {
+							if ( declarations.length ) {
+								const rules = declarations.join( ';' );
+								ruleset += `:where(${ cssSelector }){${ rules };}`;
+							}
+						}
+					);
+				}
 
-								Object.entries( featureDeclarations ).forEach(
-									( [ baseSelector, declarations ] ) => {
-										if ( declarations.length ) {
-											const cssSelector =
-												concatFeatureVariationSelectorString(
-													baseSelector,
-													styleVariationSelector
-												);
-											const rules =
-												declarations.join( ';' );
-											ruleset += `${ cssSelector }{${ rules };}`;
+				if ( styleVariationSelectors ) {
+					Object.entries( styleVariationSelectors ).forEach(
+						( [ styleVariationName, styleVariationSelector ] ) => {
+							const styleVariations =
+								styles?.variations?.[ styleVariationName ];
+							if ( styleVariations ) {
+								// If the block uses any custom selectors for block support, add those first.
+								if ( featureSelectors ) {
+									const featureDeclarations =
+										getFeatureDeclarations(
+											featureSelectors,
+											styleVariations
+										);
+
+									Object.entries(
+										featureDeclarations
+									).forEach(
+										( [ baseSelector, declarations ] ) => {
+											if ( declarations.length ) {
+												const cssSelector =
+													concatFeatureVariationSelectorString(
+														baseSelector,
+														styleVariationSelector
+													);
+												const rules =
+													declarations.join( ';' );
+												ruleset += `${ cssSelector }{${ rules };}`;
+											}
 										}
-									}
-								);
-							}
+									);
+								}
 
-							// Otherwise add regular selectors.
-							const styleVariationDeclarations =
-								getStylesDeclarations(
-									styleVariations,
-									styleVariationSelector,
-									useRootPaddingAlign,
-									tree
-								);
-							if ( styleVariationDeclarations.length ) {
-								ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
-									';'
-								) };}`;
+								// Otherwise add regular selectors.
+								const styleVariationDeclarations =
+									getStylesDeclarations(
+										styleVariations,
+										styleVariationSelector,
+										useRootPaddingAlign,
+										tree
+									);
+								if ( styleVariationDeclarations.length ) {
+									ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+										';'
+									) };}`;
+								}
 							}
 						}
+					);
+				}
+
+				// Process duotone styles.
+				if ( duotoneSelector ) {
+					const duotoneStyles = {};
+					if ( styles?.filter ) {
+						duotoneStyles.filter = styles.filter;
+						delete styles.filter;
 					}
-				);
-			}
+					const duotoneDeclarations =
+						getStylesDeclarations( duotoneStyles );
+					if ( duotoneDeclarations.length ) {
+						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
+					}
+				}
 
-			// Process duotone styles.
-			if ( duotoneSelector ) {
-				const duotoneStyles = {};
-				if ( styles?.filter ) {
-					duotoneStyles.filter = styles.filter;
-					delete styles.filter;
+				// Process blockGap and layout styles.
+				if (
+					! disableLayoutStyles &&
+					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+				) {
+					ruleset += getLayoutStyles( {
+						style: styles,
+						selector,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						fallbackGapValue,
+					} );
 				}
-				const duotoneDeclarations =
-					getStylesDeclarations( duotoneStyles );
-				if ( duotoneDeclarations.length ) {
-					ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+
+				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+				const declarations = getStylesDeclarations(
+					styles,
+					selector,
+					useRootPaddingAlign,
+					tree,
+					isTemplate
+				);
+				if ( declarations?.length ) {
+					ruleset += `:where(${ selector }){${ declarations.join(
 						';'
 					) };}`;
 				}
-			}
-
-			// Process blockGap and layout styles.
-			if (
-				! disableLayoutStyles &&
-				( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
-			) {
-				ruleset += getLayoutStyles( {
-					style: styles,
-					selector,
-					hasBlockGapSupport,
-					hasFallbackGapSupport,
-					fallbackGapValue,
-				} );
-			}
 
-			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-			const declarations = getStylesDeclarations(
-				styles,
-				selector,
-				useRootPaddingAlign,
-				tree,
-				isTemplate
-			);
-			if ( declarations?.length ) {
-				ruleset += `:where(${ selector }){${ declarations.join(
-					';'
-				) };}`;
-			}
+				// Check for pseudo selector in `styles` and handle separately.
+				const pseudoSelectorStyles = Object.entries( styles ).filter(
+					( [ key ] ) => key.startsWith( ':' )
+				);
 
-			// Check for pseudo selector in `styles` and handle separately.
-			const pseudoSelectorStyles = Object.entries( styles ).filter(
-				( [ key ] ) => key.startsWith( ':' )
-			);
+				if ( pseudoSelectorStyles?.length ) {
+					pseudoSelectorStyles.forEach(
+						( [ pseudoKey, pseudoStyle ] ) => {
+							const pseudoDeclarations =
+								getStylesDeclarations( pseudoStyle );
 
-			if ( pseudoSelectorStyles?.length ) {
-				pseudoSelectorStyles.forEach(
-					( [ pseudoKey, pseudoStyle ] ) => {
-						const pseudoDeclarations =
-							getStylesDeclarations( pseudoStyle );
+							if ( ! pseudoDeclarations?.length ) {
+								return;
+							}
 
-						if ( ! pseudoDeclarations?.length ) {
-							return;
-						}
+							// `selector` maybe provided in a form
+							// where block level selectors have sub element
+							// selectors appended to them as a comma separated
+							// string.
+							// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+							// Split and append pseudo selector to create
+							// the proper rules to target the elements.
+							const _selector = selector
+								.split( ',' )
+								.map( ( sel ) => sel + pseudoKey )
+								.join( ',' );
 
-						// `selector` maybe provided in a form
-						// where block level selectors have sub element
-						// selectors appended to them as a comma separated
-						// string.
-						// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
-						// Split and append pseudo selector to create
-						// the proper rules to target the elements.
-						const _selector = selector
-							.split( ',' )
-							.map( ( sel ) => sel + pseudoKey )
-							.join( ',' );
-
-						const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
-							';'
-						) };}`;
+							const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+								';'
+							) };}`;
 
-						ruleset += pseudoRule;
-					}
-				);
+							ruleset += pseudoRule;
+						}
+					);
+				}
 			}
-		}
-	);
+		);
+	}
+
+	if ( options.layoutStyles ) {
+		/* Add alignment / layout styles */
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+	}
 
-	/* Add alignment / layout styles */
-	ruleset =
-		ruleset +
-		'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-	ruleset =
-		ruleset +
-		'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-	ruleset =
-		ruleset +
-		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-	if ( hasBlockGapSupport ) {
+	if ( options.blockGap && hasBlockGapSupport ) {
 		// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
 		const gapValue =
 			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
@@ -1000,26 +1022,28 @@ export const toStyles = (
 			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
+			':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
+			':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
 	}
 
-	nodesWithSettings.forEach( ( { selector, presets } ) => {
-		if (
-			ROOT_BLOCK_SELECTOR === selector ||
-			ROOT_CSS_PROPERTIES_SELECTOR === selector
-		) {
-			// Do not add extra specificity for top-level classes.
-			selector = '';
-		}
+	if ( options.presets ) {
+		nodesWithSettings.forEach( ( { selector, presets } ) => {
+			if (
+				ROOT_BLOCK_SELECTOR === selector ||
+				ROOT_CSS_PROPERTIES_SELECTOR === selector
+			) {
+				// Do not add extra specificity for top-level classes.
+				selector = '';
+			}
 
-		const classes = getPresetsClasses( selector, presets );
-		if ( classes.length > 0 ) {
-			ruleset += classes;
-		}
-	} );
+			const classes = getPresetsClasses( selector, presets );
+			if ( classes.length > 0 ) {
+				ruleset += classes;
+			}
+		} );
+	}
 
 	return ruleset;
 };

package/src/components/global-styles/utils.js

@@ -364,6 +364,10 @@ export function getValueFromVariable( features, blockName, variable ) {
  * @return {string} Scoped selector.
  */
 export function scopeSelector( scope, selector ) {
+	if ( ! scope || ! selector ) {
+		return selector;
+	}
+
 	const scopes = scope.split( ',' );
 	const selectors = selector.split( ',' );
 
@@ -377,6 +381,57 @@ export function scopeSelector( scope, selector ) {
 	return selectorsScoped.join( ', ' );
 }
 
+/**
+ * Scopes a collection of selectors for features and subfeatures.
+ *
+ * @example
+ * ```js
+ * const scope = '.custom-scope';
+ * const selectors = {
+ *     color: '.wp-my-block p',
+ *     typography: { fontSize: '.wp-my-block caption' },
+ * };
+ * const result = scopeFeatureSelector( scope, selectors );
+ * // result is {
+ * //     color: '.custom-scope .wp-my-block p',
+ * //     typography: { fonSize: '.custom-scope .wp-my-block caption' },
+ * // }
+ * ```
+ *
+ * @param {string} scope     Selector to scope collection of selectors with.
+ * @param {Object} selectors Collection of feature selectors e.g.
+ *
+ * @return {Object|undefined} Scoped collection of feature selectors.
+ */
+export function scopeFeatureSelectors( scope, selectors ) {
+	if ( ! scope || ! selectors ) {
+		return;
+	}
+
+	const featureSelectors = {};
+
+	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
+		if ( typeof selector === 'string' ) {
+			featureSelectors[ feature ] = scopeSelector( scope, selector );
+		}
+
+		if ( typeof selector === 'object' ) {
+			featureSelectors[ feature ] = {};
+
+			Object.entries( selector ).forEach(
+				( [ subfeature, subfeatureSelector ] ) => {
+					featureSelectors[ feature ][ subfeature ] = scopeSelector(
+						scope,
+						subfeatureSelector
+					);
+				}
+			);
+		}
+	} );
+
+	return featureSelectors;
+}
+
 /**
  * Appends a sub-selector to an existing one.
  *

package/src/components/iframe/index.js

@@ -141,13 +141,6 @@ function Iframe( {
 		function onLoad() {
 			const { contentDocument, ownerDocument } = node;
 			const { documentElement } = contentDocument;
-			// Get any CSS classes the iframe document body may initially have
-			// to re-apply them later together with the ones of the main document
-			// body. This is necessary for some CSS classes for example the
-			// `is-dark-theme` class added by useDarkThemeBodyClassName.
-			const initialIframeBodyClasses = Array.from(
-				contentDocument.body.classList
-			);
 			iFrameDocument = contentDocument;
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
@@ -158,15 +151,12 @@ function Iframe( {
 			// be added in the editor too, which we'll somehow have to get from
 			// the server in the future (which will run the PHP filters).
 			setBodyClasses(
-				Array.from( ownerDocument.body.classList )
-					.concat( initialIframeBodyClasses )
-					.filter(
-						( name ) =>
-							name.startsWith( 'admin-color-' ) ||
-							name.startsWith( 'post-type-' ) ||
-							name === 'wp-embed-responsive' ||
-							name === 'is-dark-theme'
-					)
+				Array.from( ownerDocument.body.classList ).filter(
+					( name ) =>
+						name.startsWith( 'admin-color-' ) ||
+						name.startsWith( 'post-type-' ) ||
+						name === 'wp-embed-responsive'
+				)
 			);
 
 			contentDocument.dir = ownerDocument.dir;
@@ -238,7 +228,10 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		windowResizeRef,
+		// Avoid resize listeners when not needed, these will trigger
+		// unnecessary re-renders when animating the iframe width, or when
+		// expanding preview iframes.
+		scale === 1 ? null : windowResizeRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -279,29 +272,29 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	scale =
+		typeof scale === 'function'
+			? scale( contentWidth, contentHeight )
+			: scale;
+
 	useEffect( () => {
 		if ( ! iframeDocument ) {
 			return;
 		}
 
-		const _scale =
-			typeof scale === 'function'
-				? scale( contentWidth, contentHeight )
-				: scale;
-
-		if ( _scale !== 1 ) {
+		if ( scale !== 1 ) {
 			// Hack to get proper margins when scaling the iframe document.
-			const bottomFrameSize = frameSize - contentHeight * ( 1 - _scale );
+			const bottomFrameSize = frameSize - contentHeight * ( 1 - scale );
 
 			iframeDocument.body.classList.add( 'is-zoomed-out' );
 
-			iframeDocument.documentElement.style.transform = `scale( ${ _scale } )`;
+			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
 			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
 			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
 			iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;
-			if ( iframeWindowInnerHeight > contentHeight * _scale ) {
+			if ( iframeWindowInnerHeight > contentHeight * scale ) {
 				iframeDocument.body.style.minHeight = `${ Math.floor(
-					( iframeWindowInnerHeight - 2 * frameSize ) / _scale
+					( iframeWindowInnerHeight - 2 * frameSize ) / scale
 				) }px`;
 			}
 

package/src/components/image-editor/cropper.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,7 +21,6 @@ export default function ImageCropper( {
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
 	borderProps,
@@ -36,6 +36,8 @@ export default function ImageCropper( {
 		setZoom,
 		rotation,
 	} = useImageEditingContext();
+	const [ contentResizeListener, { width: clientWidth } ] =
+		useResizeObserver();
 
 	let editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;
 
@@ -43,7 +45,7 @@ export default function ImageCropper( {
 		editedHeight = ( clientWidth * naturalWidth ) / naturalHeight;
 	}
 
-	return (
+	const area = (
 		<div
 			className={ classnames(
 				'wp-block-image__crop-area',
@@ -79,4 +81,11 @@ export default function ImageCropper( {
 			{ isInProgress && <Spinner /> }
 		</div>
 	);
+
+	return (
+		<>
+			{ contentResizeListener }
+			{ area }
+		</>
+	);
 }