From 99f332ec76ff88bd698fb6209ead2cff04d66e0d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 12 Dec 2022 15:24:23 +0100 Subject: [PATCH 01/10] Try adding a resize handle to resize the canvas --- .../src/components/block-editor/index.js | 41 +++------ .../edit-site/src/components/layout/index.js | 24 ++++- .../src/components/layout/style.scss | 21 +++++ .../src/components/resize-handle/index.js | 91 +++++++++++++++++++ .../src/components/resize-handle/style.scss | 33 +++++++ packages/edit-site/src/style.scss | 1 + 6 files changed, 184 insertions(+), 27 deletions(-) create mode 100644 packages/edit-site/src/components/resize-handle/index.js create mode 100644 packages/edit-site/src/components/resize-handle/style.scss diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 0f39f771a5d36..d24ad30ff33f8 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -26,11 +26,7 @@ import { store as blockEditorStore, __unstableBlockNameContext, } from '@wordpress/block-editor'; -import { - useMergeRefs, - useViewportMatch, - useResizeObserver, -} from '@wordpress/compose'; +import { useMergeRefs, useViewportMatch } from '@wordpress/compose'; import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks'; import { listView } from '@wordpress/icons'; import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; @@ -143,7 +139,6 @@ export default function BlockEditor( { setIsInserterOpen } ) { const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] ); const isMobileViewport = useViewportMatch( 'small', '<' ); const { clearSelectedBlock } = useDispatch( blockEditorStore ); - const [ resizeObserver, sizes ] = useResizeObserver(); const isTemplatePart = templateType === 'wp_template_part'; const hasBlocks = blocks.length !== 0; @@ -229,28 +224,22 @@ export default function BlockEditor( { setIsInserterOpen } ) { > - - - { resizeObserver } - - - + + <__unstableBlockSettingsMenuFirstItem> { ( { onClose } ) => ( diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index e451357ee97e5..810eaaae0e0bc 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -38,6 +38,7 @@ import getIsListPage from '../../utils/get-is-list-page'; import Header from '../header-edit-mode'; import SiteIcon from '../site-icon'; import SiteTitle from '../site-title'; +import ResizeHandle from '../resize-handle'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; const ANIMATION_DURATION = 0.5; @@ -96,6 +97,8 @@ export default function Layout( { onError } ) { // Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store. const [ canvasResizer, canvasSize ] = useResizeObserver(); const [ fullResizer, fullSize ] = useResizeObserver(); + const [ forcedWidth, setForcedWidth ] = useState( null ); + const [ isResizing, setIsResizing ] = useState( false ); useEffect( () => { if ( canvasMode === 'view' && isMobileViewport ) { setIsMobileCanvasVisible( false ); @@ -245,13 +248,32 @@ export default function Layout( { onError } ) { { showCanvas && (
{ canvasResizer } + { showFrame && ! isMobileViewport && ( +
+ + setIsResizing( true ) + } + onEndResize={ () => setIsResizing( false ) } + /> +
+ ) } { !! canvasSize.width && ( { + if ( initialPosition ) { + setInitialPosition( + initialPosition + ( currentValue.current - value ) + ); + } + currentValue.current = value; + }, [ value, initialPosition ] ); + + function onKeyDown( event ) { + const { keyCode } = event; + + if ( keyCode === LEFT ) { + onResize( value + factor * DELTA_DISTANCE ); + } else if ( keyCode === RIGHT ) { + onResize( value - factor * DELTA_DISTANCE ); + } + } + + const onMouseDown = ( event ) => { + event.preventDefault(); + onStartResize(); + setInitialPosition( event.clientX ); + }; + + const onMouseResetRef = useRefEffect( ( node ) => { + const reset = () => { + onEndResize(); + setInitialPosition( null ); + }; + node.ownerDocument.addEventListener( 'mouseup', reset ); + return () => node.ownerDocument.removeEventListener( 'mouseup', reset ); + }, [] ); + + const onMouseMoveRef = useRefEffect( + ( node ) => { + const resize = ( event ) => { + if ( initialPosition === null ) { + return; + } + + onResize( + currentValue.current + + factor * ( event.clientX - initialPosition ) + ); + }; + node.ownerDocument.addEventListener( 'mousemove', resize ); + return () => { + node.ownerDocument.removeEventListener( 'mousemove', resize ); + }; + }, + [ initialPosition, factor ] + ); + + return ( + <> +
) } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 0e3d1aac6cbc4..82eadff3ff7d0 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -189,9 +189,5 @@ } .edit-site-layout__resize-handle-container { - position: absolute; - top: 0; - bottom: 0; - left: -$grid-unit-10; - width: $grid-unit-10; + margin: auto; } diff --git a/packages/edit-site/src/components/resize-handle/index.js b/packages/edit-site/src/components/resize-handle/index.js deleted file mode 100644 index 29be5b097f552..0000000000000 --- a/packages/edit-site/src/components/resize-handle/index.js +++ /dev/null @@ -1,91 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { LEFT, RIGHT } from '@wordpress/keycodes'; -import { VisuallyHidden } from '@wordpress/components'; -import { useState, useEffect, useRef } from '@wordpress/element'; -import { useRefEffect, useInstanceId, useMergeRefs } from '@wordpress/compose'; - -const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels. - -export default function ResizeHandle( { - value, - onStartResize, - onEndResize, - onResize, - factor, -} ) { - const [ initialPosition, setInitialPosition ] = useState( null ); - const id = useInstanceId( ResizeHandle ); - const currentValue = useRef( value ); - useEffect( () => { - if ( initialPosition ) { - setInitialPosition( - initialPosition + ( currentValue.current - value ) - ); - } - currentValue.current = value; - }, [ value, initialPosition ] ); - - function onKeyDown( event ) { - const { keyCode } = event; - - if ( keyCode === LEFT ) { - onResize( value + factor * DELTA_DISTANCE ); - } else if ( keyCode === RIGHT ) { - onResize( value - factor * DELTA_DISTANCE ); - } - } - - const onMouseDown = ( event ) => { - event.preventDefault(); - onStartResize(); - setInitialPosition( event.clientX ); - }; - - const onMouseResetRef = useRefEffect( ( node ) => { - const reset = () => { - onEndResize(); - setInitialPosition( null ); - }; - node.ownerDocument.addEventListener( 'mouseup', reset ); - return () => node.ownerDocument.removeEventListener( 'mouseup', reset ); - }, [] ); - - const onMouseMoveRef = useRefEffect( - ( node ) => { - const resize = ( event ) => { - if ( initialPosition === null ) { - return; - } - - onResize( - currentValue.current + - factor * ( event.clientX - initialPosition ) - ); - }; - node.ownerDocument.addEventListener( 'mousemove', resize ); - return () => { - node.ownerDocument.removeEventListener( 'mousemove', resize ); - }; - }, - [ initialPosition, factor ] - ); - - return ( - <> -