@wordpress/edit-site 6.9.0 → 6.11.0

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

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

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

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+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 { stylesEditRoute } from './styles-edit';
+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';
+
+const routes = [
+	pagesListViewQuickEditRoute,
+	pagesListViewRoute,
+	pagesViewQuickEditRoute,
+	pagesViewRoute,
+	pagesEditRoute,
+	templatesEditRoute,
+	templatesListViewRoute,
+	templatesViewRoute,
+	patternsViewRoute,
+	patternsEditRoute,
+	stylesViewRoute,
+	stylesEditRoute,
+	navigationItemViewRoute,
+	navigationItemEditRoute,
+	navigationViewRoute,
+	navigationEditRoute,
+	homeViewRoute,
+	homeEditRoute,
+];
+
+export function useRegisterSiteEditorRoutes() {
+	const registry = useRegistry();
+	const { registerRoute } = unlock( useDispatch( siteEditorStore ) );
+	useEffect( () => {
+		registry.batch( () => {
+			routes.forEach( registerRoute );
+		} );
+	}, [ registry, registerRoute ] );
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+
+export const navigationEditRoute = {
+	name: 'navigation-edit',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			! params.postId &&
+			params.canvas === 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath={ {} } />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

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

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+
+export const navigationItemEditRoute = {
+	name: 'navigation-item-edit',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			!! params.postId &&
+			params.canvas === 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu
+				backPath={ { postType: NAVIGATION_POST_TYPE } }
+			/>
+		),
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+
+export const navigationItemViewRoute = {
+	name: 'navigation-item-view',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			!! params.postId &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu
+				backPath={ { postType: NAVIGATION_POST_TYPE } }
+			/>
+		),
+		preview: <Editor />,
+	},
+};

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

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+
+export const navigationViewRoute = {
+	name: 'navigation-view',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			! params.postId &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath={ {} } />,
+		preview: <Editor />,
+	},
+};

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+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';
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath={ {} }
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PageList />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/pages-list-view-quick-edit.js

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

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import Editor from '../editor';
+
+function PageList() {
+	return <PostList postType="page" />;
+}
+
+export const pagesListViewRoute = {
+	name: 'pages-list-view',
+	match: ( params ) => {
+		return (
+			params.isCustom !== 'true' &&
+			( params.layout ?? 'list' ) === 'list' &&
+			! params.quickEdit &&
+			params.postType === 'page' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath={ {} }
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PageList />,
+		preview: <Editor />,
+		mobile: <PageList />,
+	},
+	widths: {
+		content: 380,
+	},
+};

package/src/components/site-editor-routes/pages-view-quick-edit.js

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

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+function PageList() {
+	return <PostList postType="page" />;
+}
+
+export const pagesViewRoute = {
+	name: 'pages-view',
+	match: ( params ) => {
+		return (
+			( params.isCustom === 'true' ||
+				( params.layout ?? 'list' ) !== 'list' ) &&
+			! params.quickEdit &&
+			params.postType === 'page' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath={ {} }
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PageList />,
+		mobile: <PageList />,
+	},
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import PagePatterns from '../page-patterns';
+import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+export const patternsEditRoute = {
+	name: 'patterns-edit',
+	match: ( params ) => {
+		return (
+			[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes(
+				params.postType
+			) && params.canvas === 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
+		content: <PagePatterns />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import PagePatterns from '../page-patterns';
+import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+export const patternsViewRoute = {
+	name: 'patterns-view',
+	match: ( params ) => {
+		return (
+			[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes(
+				params.postType
+			) && params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
+		content: <PagePatterns />,
+		mobile: <PagePatterns />,
+	},
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+
+export const stylesEditRoute = {
+	name: 'styles-edit',
+	match: ( params ) => {
+		return params.path === '/wp_global_styles' && params.canvas === 'edit';
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

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

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+
+export const stylesViewRoute = {
+	name: 'styles-view',
+	match: ( params ) => {
+		return params.path === '/wp_global_styles' && params.canvas !== 'edit';
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
+		preview: <Editor />,
+	},
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import PageTemplates from '../page-templates';
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+
+export const templatesEditRoute = {
+	name: 'templates-edit',
+	match: ( params ) => {
+		return (
+			params.postType === TEMPLATE_POST_TYPE && params.canvas === 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath={ {} } />,
+		content: <PageTemplates />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

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

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import PageTemplates from '../page-templates';
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+
+export const templatesListViewRoute = {
+	name: 'templates-list-view',
+	match: ( params ) => {
+		return (
+			params.isCustom !== 'true' &&
+			params.layout === 'list' &&
+			params.postType === TEMPLATE_POST_TYPE &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath={ {} } />,
+		content: <PageTemplates />,
+		mobile: <PageTemplates />,
+		preview: <Editor />,
+	},
+	widths: {
+		content: 380,
+	},
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import PageTemplates from '../page-templates';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+
+export const templatesViewRoute = {
+	name: 'templates-view',
+	match: ( params ) => {
+		return (
+			( params.isCustom === 'true' || params.layout !== 'list' ) &&
+			params.postType === TEMPLATE_POST_TYPE &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath={ {} } />,
+		content: <PageTemplates />,
+		mobile: <PageTemplates />,
+	},
+};

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

@@ -68,7 +68,7 @@ const SiteHub = memo(
 							label={ __( 'Go to the Dashboard' ) }
 							className="edit-site-layout__view-mode-toggle"
 							style={ {
-								transform: 'scale(0.5)',
+								transform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge
 								borderRadius: 4,
 							} }
 						>
@@ -99,7 +99,7 @@ const SiteHub = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
-								__next40pxDefaultSize
+								size="compact"
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }

package/src/components/site-hub/style.scss

@@ -4,6 +4,7 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 	margin-right: $grid-unit-15;
+	height: $grid-unit-70;
 }
 
 .edit-site-site-hub__actions {
@@ -29,6 +30,9 @@
 	overflow: hidden;
 	// Add space for the ↗ to render.
 	padding-right: $grid-unit-20;
+
+	// Create 12px gap between site icon and site title
+	margin-left: - $grid-unit-05;
 	position: relative;
 	text-decoration: none;
 	text-overflow: ellipsis;

package/src/components/style-book/color-examples.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+import {
+	getColorClassName,
+	__experimentalGetGradientClass,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import type { Color, Gradient } from './types';
+
+const ColorExamples = ( { colors, type } ): JSX.Element | null => {
+	if ( ! colors ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
+			{ colors.map( ( color: Color | Gradient ) => {
+				const className =
+					type === 'gradients'
+						? __experimentalGetGradientClass( color.slug )
+						: getColorClassName( 'background-color', color.slug );
+				const classes = clsx(
+					'edit-site-style-book__color-example',
+					className
+				);
+
+				return <View key={ color.slug } className={ classes } />;
+			} ) }
+		</Grid>
+	);
+};
+
+export default ColorExamples;