@wordpress/edit-site 6.9.0 → 6.11.0

package/src/components/posts-app/index.js

@@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import useLayoutAreas from './router';
+import useActiveRoute from './router';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
@@ -21,7 +21,7 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis );
 function PostsLayout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
-	const route = useLayoutAreas();
+	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }
 

package/src/components/posts-app/router.js

@@ -17,7 +17,7 @@ import PostList from '../post-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
+export default function useActiveRoute() {
 	const { params = {} } = useLocation();
 	const { postType, layout, canvas } = params;
 	const labels = useSelect(
@@ -31,7 +31,7 @@ export default function useLayoutAreas() {
 	if ( [ 'post' ].includes( postType ) ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'posts-list',
+			name: 'posts-list',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
@@ -59,7 +59,7 @@ export default function useLayoutAreas() {
 
 	// Fallback shows the home page preview
 	return {
-		key: 'default',
+		name: 'default',
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isPostsList />,

package/src/components/resizable-frame/index.js

@@ -13,14 +13,15 @@ import {
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
@@ -86,6 +87,9 @@ function ResizableFrame( {
 	defaultSize,
 	innerContentStyle,
 } ) {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
@@ -93,11 +97,7 @@ function ResizableFrame( {
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
-	const canvasMode = useSelect(
-		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
-		[]
-	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
 	const resizableHandleHelpId = useInstanceId(
@@ -158,7 +158,16 @@ function ResizableFrame( {
 			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
-			setCanvasMode( 'edit' );
+			history.push(
+				{
+					...params,
+					canvas: 'edit',
+				},
+				undefined,
+				{
+					transition: 'canvas-mode-edit-transition',
+				}
+			);
 		}
 	};
 
@@ -237,7 +246,7 @@ function ResizableFrame( {
 				}
 			} }
 			whileHover={
-				canvasMode === 'view'
+				canvas === 'view'
 					? {
 							scale: 1.005,
 							transition: {
@@ -275,7 +284,7 @@ function ResizableFrame( {
 			onMouseOver={ () => setShouldShowHandle( true ) }
 			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
+				[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
 							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }

package/src/components/revisions/index.js

@@ -53,7 +53,10 @@ function Revisions( { userConfig, blocks } ) {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			isPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 

package/src/components/save-keyboard-shortcut/index.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+const shortcutName = 'core/edit-site/save';
+
+/**
+ * Register the save keyboard shortcut in view mode.
+ *
+ * @return {null} Returns null.
+ */
+export default function SaveKeyboardShortcut() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { hasNonPostEntityChanges, isPostSavingLocked } =
+		useSelect( editorStore );
+	const { savePost } = useDispatch( editorStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	useEffect( () => {
+		registerShortcut( {
+			name: shortcutName,
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+		return () => {
+			unregisterShortcut( shortcutName );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+		if ( ! hasDirtyEntities || isSaving ) {
+			return;
+		}
+		if ( hasNonPostEntityChanges() ) {
+			setIsSaveViewOpened( true );
+		} else if ( ! isPostSavingLocked() ) {
+			savePost();
+		}
+	} );
+
+	return null;
+}

package/src/components/save-panel/index.js

@@ -15,6 +15,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,6 +29,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
@@ -47,7 +50,7 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				/* translators: %1$s: The name of active theme, %2$s: The name of theme to be activated. */
+				/* translators: 1: The name of active theme, 2: The name of theme to be activated. */
 				__(
 					'Saving your changes will change your active theme from %1$s to %2$s.'
 				),
@@ -87,41 +90,36 @@ const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const isActivatingTheme = isResolving( 'activateTheme' );
-			const { isSaveViewOpened, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
+	const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => {
+		const {
+			__experimentalGetDirtyEntityRecords,
+			isSavingEntityRecord,
+			isResolving,
+		} = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const isActivatingTheme = isResolving( 'activateTheme' );
+		const { isSaveViewOpened } = unlock( select( editSiteStore ) );
 
-			// The currently selected entity to display.
-			// Typically template or template part in the site editor.
-			return {
-				isSaveViewOpen: isSaveViewOpened(),
-				canvasMode: getCanvasMode(),
-				isDirty: dirtyEntityRecords.length > 0,
-				isSaving:
-					dirtyEntityRecords.some( ( record ) =>
-						isSavingEntityRecord(
-							record.kind,
-							record.name,
-							record.key
-						)
-					) || isActivatingTheme,
-			};
-		},
-		[]
-	);
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			isDirty: dirtyEntityRecords.length > 0,
+			isSaving:
+				dirtyEntityRecords.some( ( record ) =>
+					isSavingEntityRecord( record.kind, record.name, record.key )
+				) || isActivatingTheme,
+		};
+	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
+	useEffect( () => {
+		setIsSaveViewOpened( false );
+	}, [ canvas, setIsSaveViewOpened ] );
 
-	if ( canvasMode === 'view' ) {
+	if ( canvas === 'view' ) {
 		return isSaveViewOpen ? (
 			<Modal
 				className="edit-site-save-panel__modal"

package/src/components/sidebar-button/index.js

@@ -11,7 +11,7 @@ import { Button } from '@wordpress/components';
 export default function SidebarButton( props ) {
 	return (
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			{ ...props }
 			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>

package/src/components/sidebar-button/style.scss

@@ -14,10 +14,10 @@
 		outline: 3px solid transparent;
 	}
 
-	&:hover,
+	&:hover:not(:disabled,[aria-disabled="true"]),
 	&:focus-visible,
 	&:focus,
-	&:not([aria-disabled="true"]):active,
+	&:not(:disabled,[aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
 		color: $gray-100;
 	}

package/src/components/sidebar-dataviews/default-views.js

@@ -31,9 +31,6 @@ export const defaultLayouts = {
 		layout: {
 			primaryField: 'title',
 			styles: {
-				'featured-image': {
-					width: '1%',
-				},
 				title: {
 					maxWidth: 300,
 				},
@@ -42,14 +39,14 @@ export const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 			primaryField: 'title',
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 		},
 	},
 };

package/src/components/sidebar-navigation-screen/index.js

@@ -109,7 +109,8 @@ export default function SidebarNavigationScreen( {
 						{ ! isPreviewingTheme()
 							? title
 							: sprintf(
-									'Previewing %1$s: %2$s',
+									/* translators: 1: theme name. 2: title */
+									__( 'Previewing %1$s: %2$s' ),
 									previewingThemeName,
 									title
 							  ) }

package/src/components/sidebar-navigation-screen/style.scss

@@ -68,7 +68,11 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	overflow-wrap: break-word;
-	padding: $grid-unit-05 * 0.5 0 0 0;
+
+	&#{&},
+	&#{&} .edit-site-sidebar-navigation-screen__title {
+		line-height: $font-line-height-x-large;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__actions {

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -9,6 +9,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,10 +24,12 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import SidebarNavigationScreenGlobalStylesContent from './content';
 
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
+	const history = useHistory();
+	const { params } = useLocation();
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -48,7 +51,16 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 			{ ...props }
 			onClick={ () => {
 				// Switch to edit mode.
-				setCanvasMode( 'edit' );
+				history.push(
+					{
+						...params,
+						canvas: 'edit',
+					},
+					undefined,
+					{
+						transition: 'canvas-mode-edit-transition',
+					}
+				);
 				// Open global styles sidebar.
 				openGeneralSidebar( 'edit-site/global-styles' );
 			} }
@@ -57,45 +69,51 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setIsListViewOpened } = useDispatch( editorStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
+	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-				select( editSiteStore )
-			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-			return {
-				isViewMode: 'view' === getCanvasMode(),
-				isStyleBookOpened:
-					'style-book' === getEditorCanvasContainerView(),
-				revisionsCount:
-					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
-					0,
-			};
-		},
-		[]
-	);
+	const { isStyleBookOpened, revisionsCount } = useSelect( ( select ) => {
+		const { getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return {
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
+		history.push(
+			{
+				...params,
+				canvas: 'edit',
+			},
+			undefined,
+			{
+				transition: 'canvas-mode-edit-transition',
+			}
+		);
 		return Promise.all( [
 			setPreference( 'core', 'distractionFree', false ),
-			setCanvasMode( 'edit' ),
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
-	}, [ setCanvasMode, openGeneralSidebar, setPreference ] );
+	}, [ history, params, openGeneralSidebar, setPreference ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -166,7 +184,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
+			{ isStyleBookOpened && ! isMobileViewport && canvas === 'view' && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -150,7 +150,7 @@ function useDuplicateNavigationMenu() {
 				{
 					title: sprintf(
 						/* translators: %s: Navigation menu title */
-						__( '%s (Copy)' ),
+						_x( '%s (Copy)', 'navigation menu' ),
 						menuTitle
 					),
 					content: navigationMenu?.content?.raw,

package/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js

@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 export default function buildNavigationLabel( title, id, status ) {
 	if ( ! title?.rendered ) {
-		/* translators: %s is the index of the menu in the list of menus. */
+		/* translators: %s: the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
@@ -16,8 +16,8 @@ export default function buildNavigationLabel( title, id, status ) {
 	}
 
 	return sprintf(
-		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
-		__( '%1$s (%2$s)' ),
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		_x( '%1$s (%2$s)', 'menu label' ),
 		decodeEntities( title?.rendered ),
 		status
 	);

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -27,7 +27,7 @@ import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
 	if ( ! title ) {
-		/* translators: %s is the index of the menu in the list of menus. */
+		/* translators: %s: the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
@@ -36,16 +36,13 @@ function buildMenuLabel( title, id, status ) {
 	}
 
 	return sprintf(
-		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
-		__( '%1$s (%2$s)' ),
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		_x( '%1$s (%2$s)', 'menu label' ),
 		decodeEntities( title ),
 		status
 	);
 }
 
-// Save a boolean to prevent us creating a fallback more than once per session.
-let hasCreatedFallback = false;
-
 export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 	const {
 		records: navigationMenus,
@@ -61,21 +58,22 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
 
 	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
+	const isCreatingNavigationFallback = useSelect(
+		( select ) =>
+			select( coreStore ).isResolving( 'getNavigationFallbackId' ),
+		[]
+	);
 
 	const firstNavigationMenu = navigationMenus?.[ 0 ];
 
-	// Save a boolean to prevent us creating a fallback more than once per session.
-	if ( firstNavigationMenu ) {
-		hasCreatedFallback = true;
-	}
-
 	// If there is no navigation menu found
 	// then trigger fallback algorithm to create one.
 	if (
 		! firstNavigationMenu &&
 		! isResolvingNavigationMenus &&
 		hasResolvedNavigationMenus &&
-		! hasCreatedFallback
+		// Ensure a fallback navigation is created only once
+		! isCreatingNavigationFallback
 	) {
 		getNavigationFallbackId();
 	}

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -19,7 +19,7 @@
 		padding-right: 0;
 	}
 
-	.components-button {
+	.block-editor-list-view-block-select-button {
 		color: $gray-600;
 		&:hover,
 		&:focus,

package/src/components/site-editor-routes/README.md

@@ -0,0 +1,20 @@
+# Site Editor Routes
+
+## Areas
+
+When `canvasMode` is not `edit`, the areas avaliable to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `sidebar` | Always rendered. | Only if `mobile` is not provided. |
+| `content` | Rendered if provided. | Not rendered. |
+| `preview` | Rendered if provided. | Not rendered. |
+| `edit` | Rendered if provided. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. |
+
+When `canvasMode` is `edit`, the areas avaliable to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |

package/src/components/site-editor-routes/home-edit.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+
+export const homeEditRoute = {
+	name: 'home-edit',
+	match: ( params ) => {
+		return params.canvas === 'edit';
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};