Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move resize styles to be more inline with the Site Editor

This commit is contained in:
Tom Cafferkey 2024-09-02 15:15:00 +01:00
parent 4ff24a0188
commit 8c843933ef
3 changed files with 24 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 }

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

@ -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={ {
background:
gradientValue ??
backgroundColor,
} }
deviceType={
deviceType
innerContentStyle={
innerContentStyle
}
>
{ editor }

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

@ -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.