From 30cd999120acd7b90b42fa03f15776c0f071e18d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 10 Jan 2023 10:43:38 +0100 Subject: [PATCH 1/2] Synchronize the canvas mode with the site editor url --- .../edit-site/src/components/layout/index.js | 10 +++++ .../src/components/layout/style.scss | 5 ++- .../use-sync-canvas-mode-with-url.js | 40 +++++++++++++++++++ packages/edit-site/src/store/reducer.js | 2 +- 4 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 7c07c47e753c1..9a6d4373edc27 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -37,6 +37,7 @@ import Header from '../header-edit-mode'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import SiteHub from '../site-hub'; import ResizeHandle from '../block-editor/resize-handle'; +import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url'; const ANIMATION_DURATION = 0.5; const emptyResizeHandleStyles = { @@ -54,6 +55,8 @@ const emptyResizeHandleStyles = { export default function Layout( { onError } ) { // This ensures the edited entity id and type are initialized properly. useInitEditedEntityFromURL(); + useSyncCanvasModeWithURL(); + const hubRef = useRef(); const { params } = useLocation(); const isListPage = getIsListPage( params ); @@ -117,6 +120,13 @@ export default function Layout( { onError } ) { } }, [ canvasMode, isMobileViewport ] ); + // Synchronizing the URL with the store value of canvasMode happens in an effect + // This condition ensures the component is only rendered after the synchronization happens + // which prevents any animations due to potential canvasMode value change. + if ( canvasMode === 'init' ) { + return null; + } + return ( <> { fullResizer } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index e60b0eb3a7cfb..f5db7df0c0732 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -147,7 +147,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size; top: 0; bottom: 0; width: 100%; - border-radius: 0; + + & > div { + border-radius: 0; + } } } diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js new file mode 100644 index 0000000000000..cd147168e383d --- /dev/null +++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import { useEffect, useRef } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import { useLocation, useHistory } from '../routes'; + +export default function useSyncCanvasModeWithURL() { + const history = useHistory(); + const { params } = useLocation(); + const canvasMode = useSelect( + ( select ) => select( editSiteStore ).__unstableGetCanvasMode(), + [] + ); + const { __unstableSetCanvasMode } = useDispatch( editSiteStore ); + const currentCanvasMode = useRef( canvasMode ); + const { canvas: canvasInUrl = 'view' } = params; + const currentCanvasInUrl = useRef( canvasInUrl ); + useEffect( () => { + currentCanvasMode.current = canvasMode; + if ( currentCanvasMode !== currentCanvasInUrl ) { + history.push( { + ...params, + canvas: canvasMode, + } ); + } + }, [ canvasMode ] ); + + useEffect( () => { + currentCanvasInUrl.current = canvasInUrl; + if ( canvasInUrl !== currentCanvasMode.current ) { + __unstableSetCanvasMode( canvasInUrl ); + } + }, [ canvasInUrl ] ); +} diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index 6a7e68fccb3c9..fee3a8fcc5618 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/packages/edit-site/src/store/reducer.js @@ -131,7 +131,7 @@ export function saveViewPanel( state = false, action ) { * @param {Object} state Current state. * @param {Object} action Dispatched action. */ -function canvasMode( state = 'view', action ) { +function canvasMode( state = 'init', action ) { switch ( action.type ) { case 'SET_CANVAS_MODE': return action.mode; From 40fc3bbc6665e558522048c6f1ccad997ae90724 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 10 Jan 2023 11:28:05 +0100 Subject: [PATCH 2/2] Fix e2e test --- test/e2e/specs/site-editor/block-list-panel-preference.spec.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js index e31a06f2c888d..8745a75f3ad46 100644 --- a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js +++ b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js @@ -34,8 +34,6 @@ test.describe( 'Block list view', () => { await page.reload(); - await siteEditor.enterEditMode(); - // Should display the Preview button. await expect( page.locator( 'role=region[name="List View"i]' )