Move resize styles to be more inline with the Site Editor

plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx

@@ -25,7 +25,11 @@ import {
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	__experimentalUseResizeCanvas as useResizeCanvas,
+} from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -52,6 +56,14 @@ function Iframe( {
 		};
 	}, [] );
 
+	const { deviceType } = useSelect( ( select ) => {
+		const { getDeviceType } = select( editorStore );
+
+		return {
+			deviceType: getDeviceType(),
+		};
+	} );
+
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const prevContainerWidth = useRef( 0 );
@@ -124,6 +136,7 @@ function Iframe( {
 		};
 	}, [] );
 
+	const deviceStyles = useResizeCanvas( deviceType );
 	const isZoomedOut = scale !== 1 && canEnableZoomOutView;
 
 	useEffect( () => {
@@ -301,10 +314,12 @@ function Iframe( {
 					isZoomedOut && 'is-zoomed-out'
 				) }
 				style={ {
+					transition: 'all .3s',
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,
 					'--wp-block-editor-iframe-zoom-out-prev-container-width':
 						isZoomedOut && `${ prevContainerWidth.current }px`,
+					...deviceStyles,
 				} }
 			>
 				{ iframe }

plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx

@@ -34,9 +34,6 @@ import { NavigableRegion } from '@wordpress/interface';
 import { EntityProvider } from '@wordpress/core-data';
 // @ts-ignore No types for this exist yet.
 import useEditedEntityRecord from '@wordpress/edit-site/build-module/components/use-edited-entity-record';
-// @ts-ignore No types for this exist yet.
-import { store as editorStore } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -77,15 +74,6 @@ export const Layout = () => {
 		isOfflineAIFlow( context.flowType ) && customizing !== 'true'
 	);
 
-	const { deviceType } = useSelect( ( select ) => {
-		// @ts-ignore No types for this exist yet.
-		const { getDeviceType } = select( editorStore );
-
-		return {
-			deviceType: getDeviceType(),
-		};
-	} );
-
 	useEffect( () => {
 		setShowAiOfflineModal(
 			isOfflineAIFlow( context.flowType ) && customizing !== 'true'
@@ -129,6 +117,11 @@ export const Layout = () => {
 
 	const [ isSurveyOpen, setSurveyOpen ] = useState( false );
 	const editor = <Editor isLoading={ isEditorLoading } />;
+	const innerContentStyle = isEditorLoading
+		? {
+				background: gradientValue ?? backgroundColor,
+		  }
+		: undefined;
 
 	if (
 		typeof currentState === 'object' &&
@@ -263,13 +256,8 @@ export const Layout = () => {
 														isResizingHandleEnabled={
 															! isFullComposabilityFeatureAndAPIAvailable()
 														}
-														innerContentStyle={ {
+														innerContentStyle={
-															background:
+															innerContentStyle
-																gradientValue ??
-																backgroundColor,
-														} }
-														deviceType={
-															deviceType
 														}
 													>
 														{ editor }

plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx

@@ -5,7 +5,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { useState, useRef, createContext, useEffect } from '@wordpress/element';
+import { useState, useRef, createContext } from '@wordpress/element';
 import {
 	ResizableBox,
 	Tooltip,
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/block-editor';
 
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
@@ -80,8 +79,6 @@ function ResizableFrame( {
 	innerContentStyle,
 	isHandleVisibleByDefault = false,
 	isResizingHandleEnabled = true,
-	/** Passing as a prop because the LYS feature does not have access to the editor data store, but CYS feature does. */
-	deviceType = null,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
@@ -98,27 +95,6 @@ function ResizableFrame( {
 	);
 	const defaultAspectRatio = defaultSize.width / defaultSize.height;
 
-	const deviceStyles = useResizeCanvas( deviceType );
-
-	useEffect( () => {
-		if ( ! deviceType ) {
-			return;
-		}
-
-		if ( deviceType === 'Desktop' ) {
-			setFrameSize( INITIAL_FRAME_SIZE );
-		} else {
-			const { width, height, marginLeft, marginRight } = deviceStyles;
-			setIsOversized( width > defaultSize.width );
-			setFrameSize( {
-				width: isOversized ? '100%' : width,
-				height: isOversized ? '100%' : height,
-				marginLeft,
-				marginRight,
-			} );
-		}
-	}, [ deviceType ] );
-
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
 		// every resize event thereafter, which will cause layout thrashing.