From 8c843933ef595cd999a20e22aee7031ae342a66a Mon Sep 17 00:00:00 2001 From: Tom Cafferkey Date: Mon, 2 Sep 2024 15:15:00 +0100 Subject: [PATCH] Move resize styles to be more inline with the Site Editor --- .../customize-store/assembler-hub/iframe.jsx | 17 +++++++++++- .../customize-store/assembler-hub/layout.tsx | 26 +++++-------------- .../assembler-hub/resizable-frame.jsx | 26 +------------------ 3 files changed, 24 insertions(+), 45 deletions(-) diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx index bbb7480f22a..0b4b4b0cd75 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx +++ b/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 } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx index c95905dbd0c..f225cb3cd11 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx +++ b/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 = ; + const innerContentStyle = isEditorLoading + ? { + background: gradientValue ?? backgroundColor, + } + : undefined; if ( typeof currentState === 'object' && @@ -263,13 +256,8 @@ export const Layout = () => { isResizingHandleEnabled={ ! isFullComposabilityFeatureAndAPIAvailable() } - innerContentStyle={ { - background: - gradientValue ?? - backgroundColor, - } } - deviceType={ - deviceType + innerContentStyle={ + innerContentStyle } > { editor } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx index 9ea06feba29..f5c4b8c4dbf 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx +++ b/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.