@wordpress/edit-site 6.12.1-next.082ed6819.0 → 6.13.1-next.cd6172eb0.0

package/src/components/site-editor-routes/index.js

@@ -9,42 +9,30 @@ import { useEffect } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import { store as siteEditorStore } from '../../store';
-import { homeViewRoute } from './home-view';
-import { homeEditRoute } from './home-edit';
-import { navigationViewRoute } from './navigation-view';
-import { navigationEditRoute } from './navigation-edit';
-import { navigationItemEditRoute } from './navigation-item-edit';
-import { navigationItemViewRoute } from './navigation-item-view';
-import { stylesViewRoute } from './styles-view';
-import { patternsEditRoute } from './patterns-edit';
-import { patternsViewRoute } from './patterns-view';
-import { templatesEditRoute } from './templates-edit';
-import { templatesListViewRoute } from './templates-list-view';
-import { templatesViewRoute } from './templates-view';
-import { pagesViewRoute } from './pages-view';
-import { pagesEditRoute } from './pages-edit';
-import { pagesListViewRoute } from './pages-list-view';
-import { pagesListViewQuickEditRoute } from './pages-list-view-quick-edit';
-import { pagesViewQuickEditRoute } from './pages-view-quick-edit';
+import { homeRoute } from './home';
+import { stylesRoute } from './styles';
+import { navigationRoute } from './navigation';
+import { navigationItemRoute } from './navigation-item';
+import { patternsRoute } from './patterns';
+import { patternItemRoute } from './pattern-item';
+import { templatePartItemRoute } from './template-part-item';
+import { templatesRoute } from './templates';
+import { templateItemRoute } from './template-item';
+import { pagesRoute } from './pages';
+import { pageItemRoute } from './page-item';
 
 const routes = [
-	pagesListViewQuickEditRoute,
-	pagesListViewRoute,
-	pagesViewQuickEditRoute,
-	pagesViewRoute,
-	pagesEditRoute,
-	templatesEditRoute,
-	templatesListViewRoute,
-	templatesViewRoute,
-	patternsViewRoute,
-	patternsEditRoute,
-	stylesViewRoute,
-	navigationItemViewRoute,
-	navigationItemEditRoute,
-	navigationViewRoute,
-	navigationEditRoute,
-	homeViewRoute,
-	homeEditRoute,
+	pageItemRoute,
+	pagesRoute,
+	templateItemRoute,
+	templatesRoute,
+	templatePartItemRoute,
+	patternItemRoute,
+	patternsRoute,
+	navigationItemRoute,
+	navigationRoute,
+	stylesRoute,
+	homeRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {

package/src/components/site-editor-routes/navigation-item.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileNavigationItemView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? (
+		<Editor />
+	) : (
+		<SidebarNavigationScreenNavigationMenu
+			backPath={ { postType: NAVIGATION_POST_TYPE } }
+		/>
+	);
+}
+
+export const navigationItemRoute = {
+	name: 'navigation-item',
+	path: '/wp_navigation/:postId',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
+		),
+		preview: <Editor />,
+		mobile: <MobileNavigationItemView />,
+	},
+};

package/src/components/site-editor-routes/navigation.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileNavigationView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? (
+		<Editor />
+	) : (
+		<SidebarNavigationScreenNavigationMenus backPath="/" />
+	);
+}
+
+export const navigationRoute = {
+	name: 'navigation',
+	path: '/navigation',
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath="/" />,
+		preview: <Editor />,
+		mobile: <MobileNavigationView />,
+	},
+};

package/src/components/site-editor-routes/{pages-edit.js → page-item.js}

@@ -6,29 +6,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PostList from '../post-list';
+import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import Editor from '../editor';
 
-function PageList() {
-	return <PostList postType="page" />;
-}
-
-export const pagesEditRoute = {
-	name: 'pages-edit',
-	match: ( params ) => {
-		return params.postType === 'page' && params.canvas === 'edit';
-	},
+export const pageItemRoute = {
+	name: 'page-item',
+	path: '/page/:postId',
 	areas: {
 		sidebar: (
 			<SidebarNavigationScreen
 				title={ __( 'Pages' ) }
-				backPath={ {} }
-				content={ <DataViewsSidebarContent /> }
+				backPath="/"
+				content={ <DataViewsSidebarContent postType="page" /> }
 			/>
 		),
-		content: <PageList />,
 		mobile: <Editor />,
 		preview: <Editor />,
 	},

package/src/components/site-editor-routes/pages.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePagesView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? <Editor /> : <PostList postType="page" />;
+}
+
+export const pagesRoute = {
+	name: 'pages',
+	path: '/page',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath="/"
+				content={ <DataViewsSidebarContent postType="page" /> }
+			/>
+		),
+		content: <PostList postType="page" />,
+		preview( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? <Editor /> : undefined;
+		},
+		mobile: <MobilePagesView />,
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+			return hasQuickEdit ? (
+				<PostEdit postType="page" postId={ query.postId } />
+			) : undefined;
+		},
+	},
+	widths: {
+		content( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? 380 : undefined;
+		},
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+			return hasQuickEdit ? 380 : undefined;
+		},
+	},
+};

package/src/components/site-editor-routes/pattern-item.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+
+export const patternItemRoute = {
+	name: 'pattern-item',
+	path: '/wp_block/:postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/patterns.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import PagePatterns from '../page-patterns';
+
+export const patternsRoute = {
+	name: 'patterns',
+	path: '/pattern',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		content: <PagePatterns />,
+		mobile: <PagePatterns />,
+	},
+};

package/src/components/site-editor-routes/styles.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileGlobalStylesUI() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <GlobalStylesUIWrapper />;
+}
+
+export const stylesRoute = {
+	name: 'styles',
+	path: '/styles',
+	areas: {
+		content: <GlobalStylesUIWrapper />,
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
+		preview: <Editor />,
+		mobile: <MobileGlobalStylesUI />,
+	},
+	widths: {
+		content: 380,
+	},
+};

package/src/components/site-editor-routes/template-item.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+
+export const templateItemRoute = {
+	name: 'template-item',
+	path: '/wp_template/*postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/template-part-item.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+
+export const templatePartItemRoute = {
+	name: 'template-part-item',
+	path: '/wp_template_part/*postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/templates.js

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import PageTemplates from '../page-templates';
+
+export const templatesRoute = {
+	name: 'templates',
+	path: '/template',
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
+		content: <PageTemplates />,
+		preview( { query } ) {
+			const isListView = query.layout === 'list';
+			return isListView ? <Editor /> : undefined;
+		},
+		mobile: <PageTemplates />,
+	},
+	widths: {
+		content( { query } ) {
+			const isListView = query.layout === 'list';
+			return isListView ? 380 : undefined;
+		},
+	},
+};

package/src/components/site-hub/index.js

@@ -39,8 +39,7 @@ const SiteHub = memo(
 			const { getEntityRecord } = select( coreStore );
 			const _site = getEntityRecord( 'root', 'site' );
 			return {
-				dashboardLink:
-					getSettings().__experimentalDashboardLink || 'index.php',
+				dashboardLink: getSettings().__experimentalDashboardLink,
 				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
@@ -129,9 +128,7 @@ export const SiteHubMobile = memo(
 					select( coreStore );
 				const _site = getEntityRecord( 'root', 'site' );
 				return {
-					dashboardLink:
-						getSettings().__experimentalDashboardLink ||
-						'index.php',
+					dashboardLink: getSettings().__experimentalDashboardLink,
 					isBlockTheme: getCurrentTheme()?.is_block_theme,
 					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 					siteTitle:
@@ -170,7 +167,7 @@ export const SiteHubMobile = memo(
 								  }
 								: {
 										onClick: () => {
-											history.push( {} );
+											history.navigate( '/' );
 											navigate( 'back' );
 										},
 										label: __( 'Go to Site Editor' ),

package/src/components/style-book/constants.ts

@@ -216,27 +216,25 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 	.edit-site-style-book__duotone-example > div:not(:first-child) {
 		height: 20px;
-		border: 1px solid #ddd;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 
 	.edit-site-style-book__color-example {
-		height: 52px;
-		border: 1px solid #ddd;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
+		height: 32px;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 
 	.edit-site-style-book__subcategory-title,
 	.edit-site-style-book__example-title {
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
-		font-weight: 500;
+		font-size: 13px;
+		font-weight: normal;
 		line-height: normal;
 		margin: 0;
 		text-align: left;
-		text-transform: uppercase;
+		padding-top: 8px;
+		border-top: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+		color: color-mix( in srgb, currentColor 60%, transparent );
 	}
 
 	.edit-site-style-book__subcategory-title {
@@ -246,18 +244,9 @@ export const STYLE_BOOK_IFRAME_STYLES = `
     	padding-bottom: 8px;
 	}
 
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
-		width: 120px;
-	}
-
 	.edit-site-style-book__example-preview {
 		width: 100%;
 	}
-	
-	.is-wide .edit-site-style-book__example-preview {
-		width: calc(100% - 120px);
-	}
 
 	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
 	.edit-site-style-book__example-preview .block-list-appender {

package/src/components/style-book/index.js

@@ -89,6 +89,11 @@ const scrollToSection = ( anchorId, iframe ) => {
  */
 const getStyleBookNavigationFromPath = ( path ) => {
 	if ( path && typeof path === 'string' ) {
+		if ( path.startsWith( '/typography' ) ) {
+			return {
+				block: 'typography',
+			};
+		}
 		let block = path.includes( '/blocks/' )
 			? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
 			: null;

package/src/hooks/commands/use-common-commands.js

@@ -49,27 +49,17 @@ const getGlobalStylesOpenStylesCommands = () =>
 					label: __( 'Open styles' ),
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{ ...params, canvas: 'edit' },
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 					},
 					icon: styles,
 				},
 			];
-		}, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
+		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme ] );
 
 		return {
 			isLoading: false,
@@ -100,24 +90,11 @@ const getGlobalStylesToggleWelcomeGuideCommands = () =>
 					label: __( 'Learn about styles' ),
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{
-									...params,
-									canvas: 'edit',
-								},
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 						set( 'core/edit-site', 'welcomeGuideStyles', true );
 						// sometimes there's a focus loss that happens after some time
@@ -129,14 +106,7 @@ const getGlobalStylesToggleWelcomeGuideCommands = () =>
 					icon: help,
 				},
 			];
-		}, [
-			history,
-			openGeneralSidebar,
-			canvas,
-			isBlockBasedTheme,
-			set,
-			params,
-		] );
+		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme, set ] );
 
 		return {
 			isLoading: false,
@@ -205,24 +175,11 @@ const getGlobalStylesOpenCssCommands = () =>
 					icon: brush,
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{
-									...params,
-									canvas: 'edit',
-								},
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 						setEditorCanvasContainerView( 'global-styles-css' );
 					},
@@ -234,7 +191,6 @@ const getGlobalStylesOpenCssCommands = () =>
 			setEditorCanvasContainerView,
 			canEditCSS,
 			canvas,
-			params,
 		] );
 		return {
 			isLoading: false,
@@ -272,24 +228,11 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 					icon: backup,
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{
-									...params,
-									canvas: 'edit',
-								},
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 						setEditorCanvasContainerView(
 							'global-styles-revisions'
@@ -303,7 +246,6 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 			openGeneralSidebar,
 			setEditorCanvasContainerView,
 			canvas,
-			params,
 		] );
 
 		return {

package/src/hooks/commands/use-set-command-context.js

@@ -19,8 +19,8 @@ const { useLocation } = unlock( routerPrivateApis );
  * React hook used to set the correct command context based on the current state.
  */
 export default function useSetCommandContext() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
 	const hasBlockSelected = useSelect( ( select ) => {
 		return select( blockEditorStore ).getBlockSelectionStart();
 	}, [] );

package/src/store/private-actions.js

@@ -18,3 +18,10 @@ export function registerRoute( route ) {
 		route,
 	};
 }
+
+export function unregisterRoute( name ) {
+	return {
+		type: 'UNREGISTER_ROUTE',
+		name,
+	};
+}

package/src/store/reducer.js

@@ -85,6 +85,8 @@ function routes( state = [], action ) {
 	switch ( action.type ) {
 		case 'REGISTER_ROUTE':
 			return [ ...state, action.route ];
+		case 'UNREGISTER_ROUTE':
+			return state.filter( ( route ) => route.name !== action.name );
 	}
 
 	return state;

package/src/utils/is-previewing-theme.js

@@ -4,9 +4,7 @@
 import { getQueryArg } from '@wordpress/url';
 
 export function isPreviewingTheme() {
-	return (
-		getQueryArg( window.location.href, 'wp_theme_preview' ) !== undefined
-	);
+	return !! getQueryArg( window.location.href, 'wp_theme_preview' );
 }
 
 export function currentlyPreviewingTheme() {