@wordpress/edit-site 6.13.1-next.a9f418477.0 → 6.14.0

package/src/components/post-edit/index.js

@@ -18,12 +18,11 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import Page from '../page';
-import PostEditHeader from '../post-edit/header';
 import { unlock } from '../../lock-unlock';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-const { usePostFields } = unlock( editorPrivateApis );
+const { usePostFields, PostCardPanel } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [
 	'title',
@@ -35,17 +34,22 @@ const fieldsWithBulkEditSupport = [
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { record } = useSelect(
+	const { record, hasFinishedResolution } = useSelect(
 		( select ) => {
+			const args = [ 'postType', postType, ids[ 0 ] ];
+
+			const {
+				getEditedEntityRecord,
+				hasFinishedResolution: hasFinished,
+			} = select( coreDataStore );
+
 			return {
 				record:
-					ids.length === 1
-						? select( coreDataStore ).getEditedEntityRecord(
-								'postType',
-								postType,
-								ids[ 0 ]
-						  )
-						: null,
+					ids.length === 1 ? getEditedEntityRecord( ...args ) : null,
+				hasFinishedResolution: hasFinished(
+					'getEditedEntityRecord',
+					args
+				),
 			};
 		},
 		[ postType, ids ]
@@ -159,13 +163,15 @@ function PostEditForm( { postType, postId } ) {
 
 	return (
 		<VStack spacing={ 4 }>
-			<PostEditHeader postType={ postType } postId={ postId } />
-			<DataForm
-				data={ ids.length === 1 ? record : multiEdits }
-				fields={ fieldsWithDependency }
-				form={ form }
-				onChange={ onChange }
-			/>
+			<PostCardPanel postType={ postType } postId={ ids } />
+			{ hasFinishedResolution && (
+				<DataForm
+					data={ ids.length === 1 ? record : multiEdits }
+					fields={ fieldsWithDependency }
+					form={ form }
+					onChange={ onChange }
+				/>
+			) }
 		</VStack>
 	);
 }

package/src/components/post-edit/style.scss

@@ -14,13 +14,3 @@
 		padding-top: $grid-unit-20;
 	}
 }
-
-.edit-site-post-edit-header {
-	.edit-site-post-edit-header__description {
-		color: $gray-700;
-	}
-
-	.edit-site-post-edit-header__title {
-		@include heading-medium();
-	}
-}

package/src/components/post-list/index.js

@@ -13,7 +13,7 @@ import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { drawerRight } from '@wordpress/icons';
-import { usePrevious } from '@wordpress/compose';
+import { useEvent, usePrevious } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -112,53 +112,50 @@ function useView( postType ) {
 		};
 	} );
 
-	const setViewWithUrlUpdate = useCallback(
-		( newView ) => {
-			if ( newView.type === LAYOUT_LIST && ! layout ) {
-				// Skip updating the layout URL param if
-				// it is not present and the newView.type is LAYOUT_LIST.
-			} else if ( newView.type !== layout ) {
-				history.navigate(
-					addQueryArgs( path, {
-						layout: newView.type,
-					} )
-				);
-			}
+	const setViewWithUrlUpdate = useEvent( ( newView ) => {
+		setView( newView );
 
-			setView( newView );
+		if ( isCustom === 'true' && editedEntityRecord?.id ) {
+			editEntityRecord(
+				'postType',
+				'wp_dataviews',
+				editedEntityRecord?.id,
+				{
+					content: JSON.stringify( newView ),
+				}
+			);
+		}
 
-			if ( isCustom === 'true' && editedEntityRecord?.id ) {
-				editEntityRecord(
-					'postType',
-					'wp_dataviews',
-					editedEntityRecord?.id,
-					{
-						content: JSON.stringify( newView ),
-					}
-				);
-			}
-		},
-		[
-			history,
-			isCustom,
-			editEntityRecord,
-			editedEntityRecord?.id,
-			layout,
-			path,
-		]
-	);
+		const currentUrlLayout = layout ?? LAYOUT_LIST;
+		if ( newView.type !== currentUrlLayout ) {
+			history.navigate(
+				addQueryArgs( path, {
+					layout: newView.type,
+				} )
+			);
+		}
+	} );
 
 	// When layout URL param changes, update the view type
 	// without affecting any other config.
+	const onUrlLayoutChange = useEvent( () => {
+		setView( ( prevView ) => {
+			const layoutToApply = layout ?? LAYOUT_LIST;
+			if ( layoutToApply === prevView.type ) {
+				return prevView;
+			}
+			return {
+				...prevView,
+				type: layout ?? LAYOUT_LIST,
+			};
+		} );
+	} );
 	useEffect( () => {
-		setView( ( prevView ) => ( {
-			...prevView,
-			type: layout ?? LAYOUT_LIST,
-		} ) );
-	}, [ layout ] );
+		onUrlLayoutChange();
+	}, [ onUrlLayoutChange, layout ] );
 
 	// When activeView or isCustom URL parameters change, reset the view.
-	useEffect( () => {
+	const onUrlActiveViewChange = useEvent( () => {
 		let newView;
 		if ( isCustom === 'true' ) {
 			newView = getCustomView( editedEntityRecord );
@@ -173,9 +170,18 @@ function useView( postType ) {
 				type,
 			} );
 		}
-	}, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] );
+	} );
+	useEffect( () => {
+		onUrlActiveViewChange();
+	}, [
+		onUrlActiveViewChange,
+		activeView,
+		isCustom,
+		defaultViews,
+		editedEntityRecord,
+	] );
 
-	return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
+	return [ view, setViewWithUrlUpdate ];
 }
 
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.

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

@@ -15,6 +15,8 @@ import {
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { __, isRTL } from '@wordpress/i18n';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -106,6 +108,10 @@ function ResizableFrame( {
 		'edit-site-resizable-frame-handle-help'
 	);
 	const defaultAspectRatio = defaultSize.width / defaultSize.height;
+	const isBlockTheme = useSelect( ( select ) => {
+		const { getCurrentTheme } = select( coreStore );
+		return getCurrentTheme()?.is_block_theme;
+	}, [] );
 
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
@@ -153,7 +159,10 @@ function ResizableFrame( {
 		const remainingWidth =
 			ref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;
 
-		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
+		if (
+			remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ||
+			! isBlockTheme
+		) {
 			// Reset the initial aspect ratio if the frame is resized slightly
 			// above the sidebar but not far enough to trigger full screen.
 			setFrameSize( INITIAL_FRAME_SIZE );

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

@@ -26,7 +26,7 @@ export default function DataViewsSidebarContent( { postType } ) {
 
 	return (
 		<>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-dataviews">
 				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem

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

@@ -7,6 +7,11 @@
 	}
 }
 
+.edit-site-sidebar-dataviews {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
+
 .edit-site-sidebar-dataviews-dataview-item {
 	border-radius: $radius-small;
 	padding-right: $grid-unit-10;

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

@@ -18,11 +18,6 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.components-item-group {
-		margin-left: -$grid-unit-20;
-		margin-right: -$grid-unit-20;
-	}
-
 	.components-text {
 		color: $gray-400;
 	}

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

@@ -4,8 +4,9 @@
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -16,40 +17,54 @@ import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-export function MainSidebarNavigationContent() {
+export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
 		<ItemGroup>
-			<SidebarNavigationItem
-				uid="navigation-navigation-item"
-				to="/navigation"
-				withChevron
-				icon={ navigation }
-			>
-				{ __( 'Navigation' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItemGlobalStyles
-				to="/styles"
-				uid="global-styles-navigation-item"
-				icon={ styles }
-			>
-				{ __( 'Styles' ) }
-			</SidebarNavigationItemGlobalStyles>
-			<SidebarNavigationItem
-				uid="page-navigation-item"
-				to="/page"
-				withChevron
-				icon={ page }
-			>
-				{ __( 'Pages' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItem
-				uid="template-navigation-item"
-				to="/template"
-				withChevron
-				icon={ layout }
-			>
-				{ __( 'Templates' ) }
-			</SidebarNavigationItem>
+			{ isBlockBasedTheme && (
+				<>
+					<SidebarNavigationItem
+						uid="navigation-navigation-item"
+						to="/navigation"
+						withChevron
+						icon={ navigation }
+					>
+						{ __( 'Navigation' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItemGlobalStyles
+						to="/styles"
+						uid="global-styles-navigation-item"
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
+					<SidebarNavigationItem
+						uid="page-navigation-item"
+						to="/page"
+						withChevron
+						icon={ page }
+					>
+						{ __( 'Pages' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItem
+						uid="template-navigation-item"
+						to="/template"
+						withChevron
+						icon={ layout }
+					>
+						{ __( 'Templates' ) }
+					</SidebarNavigationItem>
+				</>
+			) }
+			{ ! isBlockBasedTheme && (
+				<SidebarNavigationItem
+					uid="stylebook-navigation-item"
+					to="/stylebook"
+					withChevron
+					icon={ styles }
+				>
+					{ __( 'Styles' ) }
+				</SidebarNavigationItem>
+			) }
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
 				to="/pattern"
@@ -63,6 +78,10 @@ export function MainSidebarNavigationContent() {
 }
 
 export default function SidebarNavigationScreenMain() {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -76,10 +95,20 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			isRoot
 			title={ __( 'Design' ) }
-			description={ __(
-				'Customize the appearance of your website using the block editor.'
-			) }
-			content={ <MainSidebarNavigationContent /> }
+			description={
+				isBlockBasedTheme
+					? __(
+							'Customize the appearance of your website using the block editor.'
+					  )
+					: __(
+							'Explore block styles and patterns to refine your site'
+					  )
+			}
+			content={
+				<MainSidebarNavigationContent
+					isBlockBasedTheme={ isBlockBasedTheme }
+				/>
+			}
 		/>
 	);
 }

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

@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-main {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}

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

@@ -116,7 +116,7 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 
 	return (
 		<SidebarNavigationScreenWrapper backPath={ backPath }>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-navigation-menus">
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
 						postId={ id }

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

@@ -2,6 +2,11 @@
 	margin: 0 0 $grid-unit-40 0;
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
+
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;

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

@@ -7,8 +7,6 @@ import {
 } from '@wordpress/components';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -115,14 +113,9 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
-	const isBlockBasedTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

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

@@ -1,5 +1,7 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
 
 	&:last-of-type {
 		border-bottom: 0;

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -57,7 +57,7 @@ export default function DataviewsTemplatesSidebarContent() {
 	}, [ records ] );
 
 	return (
-		<ItemGroup>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
 			<SidebarNavigationItem
 				to="/template"
 				icon={ layout }

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

@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-templates-browse {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}

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

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import { MaybeEditor } from '../maybe-editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor />,
+		preview: <MaybeEditor showEditor={ false } />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };

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

@@ -20,6 +20,7 @@ import { templatesRoute } from './templates';
 import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
+import { stylebookRoute } from './stylebook';
 
 const routes = [
 	pageItemRoute,
@@ -33,6 +34,7 @@ const routes = [
 	navigationRoute,
 	stylesRoute,
 	homeRoute,
+	stylebookRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { StyleBookPreview } from '../style-book';
+
+export const stylebookRoute = {
+	name: 'stylebook',
+	path: '/stylebook',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				backPath="/"
+				description={ __(
+					`Preview your website's visual identity: colors, typography, and blocks.`
+				) }
+			/>
+		),
+		preview: <StyleBookPreview />,
+		mobile: <StyleBookPreview />,
+	},
+};

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

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

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
+import { MaybeEditor } from '../maybe-editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
@@ -9,7 +9,7 @@ export const templatePartItemRoute = {
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		mobile: <MaybeEditor />,
+		preview: <MaybeEditor />,
 	},
 };

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

@@ -18,13 +18,25 @@ import {
  */
 import type { Color, Gradient } from './types';
 
-const ColorExamples = ( { colors, type } ): JSX.Element | null => {
+type Props = {
+	colors: Color[] | Gradient[];
+	type: 'colors' | 'gradients';
+	templateColumns?: string | number;
+	itemHeight?: string;
+};
+
+const ColorExamples = ( {
+	colors,
+	type,
+	templateColumns = '1fr 1fr',
+	itemHeight = '52px',
+}: Props ): JSX.Element | null => {
 	if ( ! colors ) {
 		return null;
 	}
 
 	return (
-		<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
+		<Grid templateColumns={ templateColumns } rowGap={ 8 } columnGap={ 16 }>
 			{ colors.map( ( color: Color | Gradient ) => {
 				const className =
 					type === 'gradients'
@@ -35,7 +47,13 @@ const ColorExamples = ( { colors, type } ): JSX.Element | null => {
 					className
 				);
 
-				return <View key={ color.slug } className={ classes } />;
+				return (
+					<View
+						key={ color.slug }
+						className={ classes }
+						style={ { height: itemHeight } }
+					/>
+				);
 			} ) }
 		</Grid>
 	);

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

@@ -220,7 +220,6 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__color-example {
-		height: 32px;
 		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 

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

@@ -78,8 +78,8 @@ function getOverviewBlockExamples(
 ): BlockExample[] {
 	const examples: BlockExample[] = [];
 
-	// Get theme palette from colors.
-	const themePalette = colors.colors.find(
+	// Get theme palette from colors if they exist.
+	const themePalette = colors?.colors.find(
 		( origin: ColorOrigin ) => origin.slug === 'theme'
 	);
 
@@ -89,7 +89,12 @@ function getOverviewBlockExamples(
 			title: __( 'Colors' ),
 			category: 'overview',
 			content: (
-				<ColorExamples colors={ themePalette.colors } type={ colors } />
+				<ColorExamples
+					colors={ themePalette.colors }
+					type={ colors }
+					templateColumns="repeat(auto-fill, minmax( 200px, 1fr ))"
+					itemHeight="32px"
+				/>
 			),
 		};