@wordpress/edit-site 6.10.0 → 6.12.0

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,26 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+
+export const stylesEditRoute = {
+	name: 'styles-edit',
+	match: ( params ) => {
+		return (
+			params.path &&
+			params.path.startsWith( '/wp_global_styles' ) &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		content: <GlobalStylesUIWrapper />,
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+	widths: {
+		content: 380,
+	},
+};

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

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

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() }
@@ -121,17 +121,27 @@ export const SiteHubMobile = memo(
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
 
-		const { homeUrl, siteTitle } = useSelect( ( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
-			return {
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
-			};
-		}, [] );
+		const { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(
+			( select ) => {
+				const { getSettings } = unlock( select( editSiteStore ) );
+
+				const { getEntityRecord, getCurrentTheme } =
+					select( coreStore );
+				const _site = getEntityRecord( 'root', 'site' );
+				return {
+					dashboardLink:
+						getSettings().__experimentalDashboardLink ||
+						'index.php',
+					isBlockTheme: getCurrentTheme()?.is_block_theme,
+					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+					siteTitle:
+						! _site?.title && !! _site?.url
+							? filterURLForDisplay( _site?.url )
+							: _site?.title,
+				};
+			},
+			[]
+		);
 		const { open: openCommandCenter } = useDispatch( commandsStore );
 
 		return (
@@ -148,16 +158,23 @@ export const SiteHubMobile = memo(
 						<Button
 							__next40pxDefaultSize
 							ref={ ref }
-							label={ __( 'Go to Site Editor' ) }
 							className="edit-site-layout__view-mode-toggle"
 							style={ {
 								transform: 'scale(0.5)',
 								borderRadius: 4,
 							} }
-							onClick={ () => {
-								history.push( {} );
-								navigate( 'back' );
-							} }
+							{ ...( ! isBlockTheme
+								? {
+										href: dashboardLink,
+										label: __( 'Go to the Dashboard' ),
+								  }
+								: {
+										onClick: () => {
+											history.push( {} );
+											navigate( 'back' );
+										},
+										label: __( 'Go to Site Editor' ),
+								  } ) }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>

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/site-icon/style.scss

@@ -20,3 +20,19 @@
 		border-radius: 0;
 	}
 }
+
+.edit-site-editor__view-mode-toggle button:focus {
+	position: relative;
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(#{ $border-width } + var(--wp-admin-border-width-focus)) $white;
+	}
+}

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;