@wordpress/edit-site 6.10.0 → 6.11.0

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;

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

@@ -6,7 +6,52 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { StyleBookCategory } from './types';
+import type { StyleBookCategory, StyleBookColorGroup } from './types';
+
+export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [
+	{
+		slug: 'theme-colors',
+		title: __( 'Theme Colors' ),
+		origin: 'theme',
+		type: 'colors',
+	},
+	{
+		slug: 'theme-gradients',
+		title: __( 'Theme Gradients' ),
+		origin: 'theme',
+		type: 'gradients',
+	},
+	{
+		slug: 'custom-colors',
+		title: __( 'Custom Colors' ),
+		origin: 'custom',
+		type: 'colors',
+	},
+	{
+		slug: 'custom-gradients',
+		title: __( 'Custom Gradients' ),
+		origin: 'custom', // User.
+		type: 'gradients',
+	},
+	{
+		slug: 'duotones',
+		title: __( 'Duotones' ),
+		origin: 'theme',
+		type: 'duotones',
+	},
+	{
+		slug: 'default-colors',
+		title: __( 'Default Colors' ),
+		origin: 'default',
+		type: 'colors',
+	},
+	{
+		slug: 'default-gradients',
+		title: __( 'Default Gradients' ),
+		origin: 'default',
+		type: 'gradients',
+	},
+];
 
 export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
 	StyleBookCategory,
@@ -74,7 +119,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	{
 		slug: 'colors',
 		title: __( 'Colors' ),
-		blocks: [ 'custom/colors' ],
+		blocks: [],
 	},
 	{
 		slug: 'theme',
@@ -98,6 +143,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	},
 ];
 
+// Forming a "block formatting context" to prevent margin collapsing.
+// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+const ROOT_CONTAINER = `
+	.is-root-container {
+		display: flow-root;
+	}
+`;
 // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
@@ -106,17 +158,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 // applied to the `button` element, targeted via `.edit-site-style-book__example`.
 // This is to ensure that browser default styles for buttons are not applied to the previews.
 export const STYLE_BOOK_IFRAME_STYLES = `
-	// Forming a "block formatting context" to prevent margin collapsing.
-	// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-	.is-root-container {
-		display: flow-root;
-	}
-	
 	body {
 		position: relative;
 		padding: 32px !important;
 	}
 
+	${ ROOT_CONTAINER }
+
 	.edit-site-style-book__examples {
 		max-width: 1200px;
 		margin: 0 auto;
@@ -141,15 +189,40 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 	}
 
+	.edit-site-style-book__example.is-disabled-example {
+		pointer-events: none;
+	}
+
 	.edit-site-style-book__example:focus:not(:disabled) {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		outline: 3px solid transparent;
 	}
 
+	.edit-site-style-book__duotone-example > div:first-child {
+		display: flex;
+		aspect-ratio: 16 / 9;
+		grid-row: span 1;
+		grid-column: span 2;
+	}
+	.edit-site-style-book__duotone-example img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.edit-site-style-book__duotone-example > div:not(:first-child) {
+		height: 20px;
+		border: 1px solid #ddd;
+	}
+
+	.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;
 	}
-	
+
 	.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;
@@ -160,7 +233,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		text-align: left;
 		text-transform: uppercase;
 	}
-	
+
 	.edit-site-style-book__subcategory-title {
 		font-size: 16px;
 		margin-bottom: 40px;

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

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import type { Duotone } from './types';
+
+const DuotoneExamples = ( { duotones } ): JSX.Element | null => {
+	if ( ! duotones ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 16 } columnGap={ 16 }>
+			{ duotones.map( ( duotone: Duotone ) => {
+				return (
+					<Grid
+						key={ duotone.slug }
+						className="edit-site-style-book__duotone-example"
+						columns={ 2 }
+						rowGap={ 8 }
+						columnGap={ 8 }
+					>
+						<View>
+							<img
+								alt={ `Duotone example: ${ duotone.slug }` }
+								src="https://s.w.org/images/core/5.3/MtBlanc1.jpg"
+								style={ {
+									filter: `url(#wp-duotone-${ duotone.slug })`,
+								} }
+							/>
+						</View>
+						{ duotone.colors.map( ( color ) => {
+							return (
+								<View
+									key={ color }
+									className="edit-site-style-book__color-example"
+									style={ { backgroundColor: color } }
+								/>
+							);
+						} ) }
+					</Grid>
+				);
+			} ) }
+		</Grid>
+	);
+};
+
+export default DuotoneExamples;