diff --git a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js index f55c7210f35581..46719a00c16aad 100644 --- a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js +++ b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js @@ -23,7 +23,7 @@ const { useLocation, useHistory } = unlock( routerPrivateApis ); export default function useEditorIframeProps() { const { params } = useLocation(); const history = useHistory(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const currentPostIsTrashed = useSelect( ( select ) => { return ( select( editorStore ).getCurrentPostAttribute( 'status' ) === @@ -33,10 +33,10 @@ export default function useEditorIframeProps() { const [ isFocused, setIsFocused ] = useState( false ); useEffect( () => { - if ( canvasMode === 'edit' ) { + if ( canvas === 'edit' ) { setIsFocused( false ); } - }, [ canvasMode ] ); + }, [ canvas ] ); // In view mode, make the canvas iframe be perceived and behave as a button // to switch to edit mode, with a meaningful label and no title attribute. @@ -55,13 +55,13 @@ export default function useEditorIframeProps() { ! currentPostIsTrashed ) { event.preventDefault(); - history.push( { ...params, canvasMode: 'edit' }, undefined, { + history.push( { ...params, canvas: 'edit' }, undefined, { transition: 'canvas-mode-edit-transition', } ); } }, onClick: () => { - history.push( { ...params, canvasMode: 'edit' }, undefined, { + history.push( { ...params, canvas: 'edit' }, undefined, { transition: 'canvas-mode-edit-transition', } ); }, @@ -76,8 +76,8 @@ export default function useEditorIframeProps() { return { className: clsx( 'edit-site-visual-editor__editor-canvas', { - 'is-focused': isFocused && canvasMode === 'view', + 'is-focused': isFocused && canvas === 'view', } ), - ...( canvasMode === 'view' ? viewModeIframeProps : {} ), + ...( canvas === 'view' ? viewModeIframeProps : {} ), }; } diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 4064962e2c3dcd..dcdfb157b235b6 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -39,7 +39,7 @@ function useNavigateToPreviousEntityRecord() { export function useSpecificEditorSettings() { const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const onNavigateToEntityRecord = useNavigateToEntityRecord(); const { settings, shouldUseTemplateAsDefaultRenderingMode } = useSelect( ( select ) => { @@ -68,15 +68,15 @@ export function useSpecificEditorSettings() { richEditingEnabled: true, supportsTemplateMode: true, - focusMode: canvasMode !== 'view', + focusMode: canvas !== 'view', defaultRenderingMode, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord, - __unstableIsPreviewMode: canvasMode === 'view', + __unstableIsPreviewMode: canvas === 'view', }; }, [ settings, - canvasMode, + canvas, defaultRenderingMode, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 44f94327a99b87..32d6d9b311eb91 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -80,9 +80,9 @@ const siteIconVariants = { export default function EditSiteEditor( { isPostsList = false } ) { const disableMotion = useReducedMotion(); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const isLoading = useIsSiteEditorLoading(); - useAdaptEditorToCanvas( canvasMode ); + useAdaptEditorToCanvas( canvas ); const { editedPostType, editedPostId, @@ -128,7 +128,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { const _isPreviewingTheme = isPreviewingTheme(); const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); const iframeProps = useEditorIframeProps(); - const isEditMode = canvasMode === 'edit'; + const isEditMode = canvas === 'edit'; const postWithTemplate = !! contextPostId; const loadingProgressId = useInstanceId( CanvasLoader, @@ -143,14 +143,14 @@ export default function EditSiteEditor( { isPostsList = false } ) { // Forming a "block formatting context" to prevent margin collapsing. // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context css: - canvasMode === 'view' + canvas === 'view' ? `body{min-height: 100vh; ${ currentPostIsTrashed ? '' : 'cursor: pointer;' }}` : undefined, }, ], - [ settings.styles, canvasMode, currentPostIsTrashed ] + [ settings.styles, canvas, currentPostIsTrashed ] ); const { createSuccessNotice } = useDispatch( noticesStore ); const history = useHistory(); @@ -280,8 +280,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { history.push( { ...params, - canvasMode: - undefined, + canvas: undefined, }, undefined, { diff --git a/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js b/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js index 0f8f20684cf0de..a09adfb7a49d53 100644 --- a/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js +++ b/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js @@ -7,7 +7,7 @@ import { store as editorStore } from '@wordpress/editor'; import { useLayoutEffect } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; -export function useAdaptEditorToCanvas( canvasMode ) { +export function useAdaptEditorToCanvas( canvas ) { const { clearSelectedBlock } = useDispatch( blockEditorStore ); const { setDeviceType, @@ -31,7 +31,7 @@ export function useAdaptEditorToCanvas( canvasMode ) { // This behavior is disabled for small viewports. if ( isMediumOrBigger && - canvasMode === 'edit' && + canvas === 'edit' && getPreference( 'core', 'showListViewByDefault' ) && ! getPreference( 'core', 'distractionFree' ) ) { @@ -41,7 +41,7 @@ export function useAdaptEditorToCanvas( canvasMode ) { } } ); }, [ - canvasMode, + canvas, registry, clearSelectedBlock, setDeviceType, diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index 353ec74577c277..d9a99718047b35 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -28,7 +28,7 @@ const { useLocation } = unlock( routerPrivateApis ); export default function GlobalStylesSidebar() { const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const { shouldClearCanvasContainerView, isStyleBookOpened, @@ -45,7 +45,7 @@ export default function GlobalStylesSidebar() { const canvasContainerView = getEditorCanvasContainerView(); const _isVisualEditorMode = 'visual' === select( editorStore ).getEditorMode(); - const _isEditCanvasMode = 'edit' === canvasMode; + const _isEditCanvasMode = 'edit' === canvas; const _showListViewByDefault = select( preferencesStore ).get( 'core', 'showListViewByDefault' @@ -76,7 +76,7 @@ export default function GlobalStylesSidebar() { 'global-styles-revisions' === canvasContainerView, }; }, - [ canvasMode ] + [ canvas ] ); const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) diff --git a/packages/edit-site/src/components/keyboard-shortcuts/global.js b/packages/edit-site/src/components/keyboard-shortcuts/global.js index efefaf284ccbfc..c25e2a020de304 100644 --- a/packages/edit-site/src/components/keyboard-shortcuts/global.js +++ b/packages/edit-site/src/components/keyboard-shortcuts/global.js @@ -21,7 +21,7 @@ function KeyboardShortcutsGlobal() { const { hasNonPostEntityChanges } = useSelect( editorStore ); const { setIsSaveViewOpened } = useDispatch( editSiteStore ); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; useShortcut( 'core/edit-site/save', ( event ) => { event.preventDefault(); @@ -32,7 +32,7 @@ function KeyboardShortcutsGlobal() { isSavingEntityRecord( record.kind, record.name, record.key ) ); const _hasNonPostEntityChanges = hasNonPostEntityChanges(); - const isViewMode = canvasMode === 'view'; + const isViewMode = canvas === 'view'; if ( ( ! hasDirtyEntities || ! _hasNonPostEntityChanges || isSaving ) && ! isViewMode diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index f71dd6550d5a0b..fb4eb6c076bda6 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -52,7 +52,7 @@ const ANIMATION_DURATION = 0.3; export default function Layout( { route } ) { const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; useCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); const toggleRef = useRef(); @@ -64,19 +64,19 @@ export default function Layout( { route } ) { useState( false ); const { name: routeKey, areas, widths } = route; const animationRef = useMovingAnimation( { - triggerAnimationOnChange: routeKey + '-' + canvasMode, + triggerAnimationOnChange: routeKey + '-' + canvas, } ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); - const previousCanvaMode = usePrevious( canvasMode ); + const previousCanvaMode = usePrevious( canvas ); useEffect( () => { if ( previousCanvaMode === 'edit' ) { toggleRef.current?.focus(); } // Should not depend on the previous canvas mode value but the next. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ canvasMode ] ); + }, [ canvas ] ); return ( <> @@ -90,7 +90,7 @@ export default function Layout( { route } ) { 'edit-site-layout', navigateRegionsProps.className, { - 'is-full-canvas': canvasMode === 'edit', + 'is-full-canvas': canvas === 'edit', } ) } > @@ -105,7 +105,7 @@ export default function Layout( { route } ) { className="edit-site-layout__sidebar-region" > - { canvasMode === 'view' && ( + { canvas === 'view' && ( - { canvasMode !== 'edit' && ( + { canvas !== 'edit' && ( setShouldShowHandle( true ) } onMouseOut={ () => setShouldShowHandle( false ) } handleComponent={ { - [ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && ( + [ isRTL() ? 'right' : 'left' ]: canvas === 'view' && ( <> { /* Disable reason: role="separator" does in fact support aria-valuenow */ } diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index edf4f6d4d0fbbc..d7817d5b3c1bb2 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -91,7 +91,7 @@ const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => { export default function SavePanel() { const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => { const { __experimentalGetDirtyEntityRecords, @@ -117,9 +117,9 @@ export default function SavePanel() { const onClose = () => setIsSaveViewOpened( false ); useEffect( () => { setIsSaveViewOpened( false ); - }, [ canvasMode, setIsSaveViewOpened ] ); + }, [ canvas, setIsSaveViewOpened ] ); - if ( canvasMode === 'view' ) { + if ( canvas === 'view' ) { return isSaveViewOpen ? ( } /> - { isStyleBookOpened && - ! isMobileViewport && - canvasMode === 'view' && ( - false } - onClick={ openStyleBook } - onSelect={ openStyleBook } - showCloseButton={ false } - showTabs={ false } - /> - ) } + { isStyleBookOpened && ! isMobileViewport && canvas === 'view' && ( + false } + onClick={ openStyleBook } + onSelect={ openStyleBook } + showCloseButton={ false } + showTabs={ false } + /> + ) } ); } diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js index 64a7213b63077b..536817e88d3a47 100644 --- a/packages/edit-site/src/hooks/commands/use-common-commands.js +++ b/packages/edit-site/src/hooks/commands/use-common-commands.js @@ -31,7 +31,7 @@ const { useHistory, useLocation } = unlock( routerPrivateApis ); function useGlobalStylesOpenStylesCommands() { const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) ); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const history = useHistory(); const isBlockBasedTheme = useSelect( ( select ) => { return select( coreStore ).getCurrentTheme().is_block_theme; @@ -54,9 +54,9 @@ function useGlobalStylesOpenStylesCommands() { canvas: 'edit', } ); } - if ( params.postId && canvasMode !== 'edit' ) { + if ( params.postId && canvas !== 'edit' ) { history.push( - { ...params, canvasMode: 'edit' }, + { ...params, canvas: 'edit' }, undefined, { transition: 'canvas-mode-edit-transition', @@ -68,7 +68,7 @@ function useGlobalStylesOpenStylesCommands() { icon: styles, }, ]; - }, [ history, openGeneralSidebar, params, canvasMode, isBlockBasedTheme ] ); + }, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] ); return { isLoading: false, @@ -79,7 +79,7 @@ function useGlobalStylesOpenStylesCommands() { function useGlobalStylesToggleWelcomeGuideCommands() { const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) ); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const { set } = useDispatch( preferencesStore ); const history = useHistory(); @@ -104,11 +104,11 @@ function useGlobalStylesToggleWelcomeGuideCommands() { canvas: 'edit', } ); } - if ( params.postId && canvasMode !== 'edit' ) { + if ( params.postId && canvas !== 'edit' ) { history.push( { ...params, - canvasMode: 'edit', + canvas: 'edit', }, undefined, { @@ -130,7 +130,7 @@ function useGlobalStylesToggleWelcomeGuideCommands() { }, [ history, openGeneralSidebar, - canvasMode, + canvas, isBlockBasedTheme, set, params, @@ -173,7 +173,7 @@ function useGlobalStylesOpenCssCommands() { useDispatch( editSiteStore ) ); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const history = useHistory(); const { canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -207,7 +207,7 @@ function useGlobalStylesOpenCssCommands() { canvas: 'edit', } ); } - if ( params.postId && canvasMode !== 'edit' ) { + if ( params.postId && canvas !== 'edit' ) { history.push( { ...params, @@ -229,7 +229,7 @@ function useGlobalStylesOpenCssCommands() { openGeneralSidebar, setEditorCanvasContainerView, canEditCSS, - canvasMode, + canvas, params, ] ); return { @@ -243,7 +243,7 @@ function useGlobalStylesOpenRevisionsCommands() { useDispatch( editSiteStore ) ); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const history = useHistory(); const hasRevisions = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -273,7 +273,7 @@ function useGlobalStylesOpenRevisionsCommands() { canvas: 'edit', } ); } - if ( params.postId && canvasMode !== 'edit' ) { + if ( params.postId && canvas !== 'edit' ) { history.push( { ...params, @@ -295,7 +295,7 @@ function useGlobalStylesOpenRevisionsCommands() { history, openGeneralSidebar, setEditorCanvasContainerView, - canvasMode, + canvas, params, ] ); diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index f1b838eecdba4a..97283044193892 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -25,7 +25,7 @@ const { useHistory, useLocation } = unlock( routerPrivateApis ); function usePageContentFocusCommands() { const { record: template } = useEditedEntityRecord(); const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const { isPage, templateId, currentPostType } = useSelect( ( select ) => { const { isPage: _isPage } = unlock( select( editSiteStore ) ); const { getCurrentPostType, getCurrentTemplateId } = @@ -44,7 +44,7 @@ function usePageContentFocusCommands() { const { setRenderingMode } = useDispatch( editorStore ); - if ( ! isPage || canvasMode !== 'edit' ) { + if ( ! isPage || canvas !== 'edit' ) { return { isLoading: false, commands: [] }; } diff --git a/packages/edit-site/src/hooks/commands/use-set-command-context.js b/packages/edit-site/src/hooks/commands/use-set-command-context.js index c54e2a26ba0059..e27c4ca91582fd 100644 --- a/packages/edit-site/src/hooks/commands/use-set-command-context.js +++ b/packages/edit-site/src/hooks/commands/use-set-command-context.js @@ -20,7 +20,7 @@ const { useLocation } = unlock( routerPrivateApis ); */ export default function useSetCommandContext() { const { params } = useLocation(); - const { canvasMode = 'view' } = params; + const { canvas = 'view' } = params; const hasBlockSelected = useSelect( ( select ) => { return select( blockEditorStore ).getBlockSelectionStart(); }, [] ); @@ -29,7 +29,7 @@ export default function useSetCommandContext() { // Sets the right context for the command palette let commandContext = 'site-editor'; - if ( canvasMode === 'edit' ) { + if ( canvas === 'edit' ) { commandContext = 'entity-edit'; } if ( hasBlockSelected ) {