@wordpress/edit-site 6.2.0 → 6.4.0

package/src/components/layout/router.js

@@ -8,9 +8,8 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { useIsSiteEditorLoading } from './hooks';
 import Editor from '../editor';
-import PagePages from '../page-pages';
+import PostList from '../post-list';
 import PagePatterns from '../page-patterns';
 import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
@@ -27,6 +26,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
+import { PostEdit } from '../post-edit';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -74,14 +74,16 @@ function useRedirectOldPaths() {
 }
 
 export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
+		params;
+	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
 	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
+		const showQuickEdit = quickEdit && ! isListLayout;
 		return {
 			key: 'pages',
 			areas: {
@@ -92,19 +94,21 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PagePages />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
-					<Editor isLoading={ isSiteEditorLoading } />
+				content: <PostList postType={ postType } />,
+				preview: ! showQuickEdit &&
+					( isListLayout || hasEditCanvasMode ) && <Editor />,
+				mobile: hasEditCanvasMode ? (
+					<Editor />
+				) : (
+					<PostList postType={ postType } />
+				),
+				edit: showQuickEdit && (
+					<PostEdit postType={ postType } postId={ postId } />
 				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : (
-						<PagePages />
-					),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
+				edit: showQuickEdit ? 380 : undefined,
 			},
 		};
 	}
@@ -119,10 +123,8 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-				mobile: <PageTemplates />,
+				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -139,10 +141,8 @@ export default function useLayoutAreas() {
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-				preview: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
+				preview: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -155,10 +155,8 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				preview: <Editor />,
+				mobile: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -174,10 +172,8 @@ export default function useLayoutAreas() {
 							backPath={ { postType: NAVIGATION_POST_TYPE } }
 						/>
 					),
-					preview: <Editor isLoading={ isSiteEditorLoading } />,
-					mobile: canvas === 'edit' && (
-						<Editor isLoading={ isSiteEditorLoading } />
-					),
+					preview: <Editor />,
+					mobile: hasEditCanvasMode && <Editor />,
 				},
 			};
 		}
@@ -187,10 +183,8 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
 				),
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				preview: <Editor />,
+				mobile: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -200,10 +194,8 @@ export default function useLayoutAreas() {
 		key: 'default',
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
-			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile: canvas === 'edit' && (
-				<Editor isLoading={ isSiteEditorLoading } />
-			),
+			preview: <Editor />,
+			mobile: hasEditCanvasMode && <Editor />,
 		},
 	};
 }

package/src/components/layout/style.scss

@@ -56,6 +56,18 @@
 	position: relative;
 	width: 100%;
 	z-index: z-index(".edit-site-layout__canvas-container");
+
+	/*
+	 * The SiteHubMobile component is displayed
+	 * for pages that do not have a sidebar,
+	 * yet it needs the Sidebar component for the React context.
+	 *
+	 * This removes the padding in this scenario.
+	 * See https://github.com/WordPress/gutenberg/pull/63118
+	 */
+	.edit-site-sidebar__screen-wrapper {
+		padding: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {
@@ -163,8 +175,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		color: $white;
 	}
 
+	&:focus-visible,
 	&:focus {
-		box-shadow: none;
+		box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
+		outline: 4px solid #0000;
+		outline-offset: 4px;
 	}
 
 	&::before {
@@ -181,13 +196,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		box-shadow: none;
 	}
 
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
 		height: $grid-unit-80;
@@ -243,3 +251,25 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	padding-left: 16px;
 	padding-right: 16px;
 }
+
+.edit-site-layout.is-full-canvas {
+	.edit-site-layout__view-mode-toggle.components-button {
+		&:focus-visible,
+		&:focus {
+
+			box-shadow: none;
+			outline: none;
+			outline-offset: 0;
+
+			.edit-site-site-icon svg {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
+				outline: 3px solid #0000;
+				height: 40px;
+				width: 40px;
+				padding: 2px;
+				border-radius: 2px;
+			}
+
+		}
+	}
+}

package/src/components/page-patterns/header.js

@@ -80,7 +80,7 @@ export default function PatternsHeader( {
 							label={ __( 'Actions' ) }
 							toggleProps={ {
 								className: 'edit-site-patterns__button',
-								describedBy: sprintf(
+								description: sprintf(
 									/* translators: %s: pattern category name */
 									__( 'Action menu for %s pattern category' ),
 									title

package/src/components/page-patterns/index.js

@@ -13,13 +13,7 @@ import {
 	Flex,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import {
-	useState,
-	useMemo,
-	useCallback,
-	useId,
-	useEffect,
-} from '@wordpress/element';
+import { useState, useMemo, useId, useEffect } from '@wordpress/element';
 import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
@@ -30,6 +24,8 @@ import { usePrevious } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { parse } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -53,6 +49,7 @@ import PatternsHeader from './header';
 import { useLink } from '../routes/link';
 import { useAddedBy } from '../page-templates/hooks';
 import { useEditPostAction } from '../dataviews-actions';
+import { defaultGetTitle } from './search-items';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
@@ -61,14 +58,26 @@ const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const defaultConfigPerViewType = {
+const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
+		layout: {
+			primaryField: 'title',
+			styles: {
+				preview: {
+					width: '1%',
+				},
+				author: {
+					width: '1%',
+				},
+			},
+		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
-		primaryField: 'title',
-		badgeFields: [ 'sync-status' ],
+		layout: {
+			mediaField: 'preview',
+			primaryField: 'title',
+			badgeFields: [ 'sync-status' ],
+		},
 	},
 };
 const DEFAULT_VIEW = {
@@ -76,10 +85,8 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
-	hiddenFields: [],
-	layout: {
-		...defaultConfigPerViewType[ LAYOUT_GRID ],
-	},
+	layout: defaultLayouts[ LAYOUT_GRID ].layout,
+	fields: [ 'title', 'sync-status' ],
 	filters: [],
 };
 
@@ -115,16 +122,24 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 
 function Preview( { item, viewType } ) {
 	const descriptionId = useId();
+	const description = item.description || item?.excerpt?.raw;
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isEmpty = ! item.blocks?.length;
-
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { onClick } = useLink( {
 		postType: item.type,
-		postId: isUserPattern ? item.id : item.name,
+		postId: isUserPattern || isTemplatePart ? item.id : item.name,
 		canvas: 'edit',
 	} );
+	const blocks = useMemo( () => {
+		return (
+			item.blocks ??
+			parse( item.content.raw, {
+				__unstableSkipMigrationLogs: true,
+			} )
+		);
+	}, [ item?.content?.raw, item.blocks ] );
+	const isEmpty = ! blocks?.length;
 
 	return (
 		<div
@@ -134,22 +149,22 @@ function Preview( { item, viewType } ) {
 			<PreviewWrapper
 				item={ item }
 				onClick={ onClick }
-				ariaDescribedBy={ item.description ? descriptionId : undefined }
+				ariaDescribedBy={ !! description ? descriptionId : undefined }
 			>
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
 				{ ! isEmpty && (
 					<Async>
 						<BlockPreview
-							blocks={ item.blocks }
+							blocks={ blocks }
 							viewportWidth={ item.viewportWidth }
 						/>
 					</Async>
 				) }
 			</PreviewWrapper>
-			{ item.description && (
+			{ !! description && (
 				<div hidden id={ descriptionId }>
-					{ item.description }
+					{ description }
 				</div>
 			) }
 		</div>
@@ -162,7 +177,7 @@ function Author( { item, viewType } ) {
 	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
-		<HStack alignment="left" spacing={ 1 }>
+		<HStack alignment="left" spacing={ 0 }>
 			{ withIcon && imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {
@@ -188,11 +203,13 @@ function Author( { item, viewType } ) {
 
 function Title( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const { onClick } = useLink( {
 		postType: item.type,
-		postId: isUserPattern ? item.id : item.name,
+		postId: isUserPattern || isTemplatePart ? item.id : item.name,
 		canvas: 'edit',
 	} );
+	const title = decodeEntities( defaultGetTitle( item ) );
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
 			<Flex
@@ -202,7 +219,7 @@ function Title( { item } ) {
 				className="edit-site-patterns__pattern-title"
 			>
 				{ item.type === PATTERN_TYPES.theme ? (
-					item.title
+					title
 				) : (
 					<Button
 						variant="link"
@@ -211,7 +228,7 @@ function Title( { item } ) {
 						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
 						tabIndex="-1"
 					>
-						{ item.title || item.name }
+						{ title }
 					</Button>
 				) }
 			</Flex>
@@ -267,18 +284,17 @@ export default function DataviewsPatterns() {
 	const fields = useMemo( () => {
 		const _fields = [
 			{
-				header: __( 'Preview' ),
+				label: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
 					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
-				enableHiding: false,
-				width: '1%',
 			},
 			{
-				header: __( 'Title' ),
+				label: __( 'Title' ),
 				id: 'title',
+				getValue: ( { item } ) => item.title?.raw || item.title,
 				render: ( { item } ) => <Title item={ item } />,
 				enableHiding: false,
 			},
@@ -286,26 +302,23 @@ export default function DataviewsPatterns() {
 
 		if ( type === PATTERN_TYPES.user ) {
 			_fields.push( {
-				header: __( 'Sync status' ),
+				label: __( 'Sync status' ),
 				id: 'sync-status',
 				render: ( { item } ) => {
+					const syncStatus =
+						'wp_pattern_sync_status' in item
+							? item.wp_pattern_sync_status ||
+							  PATTERN_SYNC_TYPES.full
+							: PATTERN_SYNC_TYPES.unsynced;
 					// User patterns can have their sync statuses checked directly.
 					// Non-user patterns are all unsynced for the time being.
 					return (
 						<span
-							className={ `edit-site-patterns__field-sync-status-${ item.syncStatus }` }
+							className={ `edit-site-patterns__field-sync-status-${ syncStatus }` }
 						>
 							{
-								(
-									SYNC_FILTERS.find(
-										( { value } ) =>
-											value === item.syncStatus
-									) ||
-									SYNC_FILTERS.find(
-										( { value } ) =>
-											value ===
-											PATTERN_SYNC_TYPES.unsynced
-									)
+								SYNC_FILTERS.find(
+									( { value } ) => value === syncStatus
 								).label
 							}
 						</span>
@@ -320,9 +333,9 @@ export default function DataviewsPatterns() {
 			} );
 		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
-				getValue: ( { item } ) => item.templatePart.author_text,
+				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {
 					return <Author viewType={ view.type } item={ item } />;
 				},
@@ -330,7 +343,6 @@ export default function DataviewsPatterns() {
 				filterBy: {
 					isPrimary: true,
 				},
-				width: '1%',
 			} );
 		}
 
@@ -340,7 +352,7 @@ export default function DataviewsPatterns() {
 	// Reset the page number when the category changes.
 	useEffect( () => {
 		if ( previousCategoryId !== categoryId ) {
-			setView( DEFAULT_VIEW );
+			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
 		}
 	}, [ categoryId, previousCategoryId ] );
 	const { data, paginationInfo } = useMemo( () => {
@@ -370,20 +382,6 @@ export default function DataviewsPatterns() {
 		}
 		return [ editAction, ...patternActions ].filter( Boolean );
 	}, [ editAction, type, templatePartActions, patternActions ] );
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-			}
-			setView( newView );
-		},
-		[ view.type, setView ]
-	);
 	const id = useId();
 	const settings = usePatternSettings();
 	// Wrap everything in a block editor provider.
@@ -407,11 +405,11 @@ export default function DataviewsPatterns() {
 					fields={ fields }
 					actions={ actions }
 					data={ data || EMPTY_ARRAY }
-					getItemId={ ( item ) => item.name }
+					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
 					view={ view }
-					onChangeView={ onChangeView }
-					supportedLayouts={ [ LAYOUT_GRID, LAYOUT_TABLE ] }
+					onChangeView={ setView }
+					defaultLayouts={ defaultLayouts }
 				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>

package/src/components/page-patterns/search-items.js

@@ -20,12 +20,46 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
 	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
 // Default search helpers.
-const defaultGetName = ( item ) => item.name || '';
-const defaultGetTitle = ( item ) => item.title;
-const defaultGetDescription = ( item ) => item.description || '';
+const defaultGetName = ( item ) => {
+	if ( item.type === PATTERN_TYPES.user ) {
+		return item.slug;
+	}
+
+	if ( item.type === TEMPLATE_PART_POST_TYPE ) {
+		return '';
+	}
+
+	return item.name || '';
+};
+
+export const defaultGetTitle = ( item ) => {
+	if ( typeof item.title === 'string' ) {
+		return item.title;
+	}
+
+	if ( item.title && item.title.rendered ) {
+		return item.title.rendered;
+	}
+
+	if ( item.title && item.title.raw ) {
+		return item.title.raw;
+	}
+
+	return '';
+};
+
+const defaultGetDescription = ( item ) => {
+	if ( item.type === PATTERN_TYPES.user ) {
+		return item.excerpt.raw;
+	}
+
+	return item.description || '';
+};
+
 const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultHasCategory = () => false;
 

package/src/components/page-patterns/style.scss

@@ -35,13 +35,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		border-radius: 3px 3px 0 0;
-
-		&.is-viewtype-grid {
-			.block-editor-block-preview__container {
-				border-radius: 3px 3px 0 0;
-			}
-		}
 
 		&.is-viewtype-table {
 			width: 96px;
@@ -62,7 +55,7 @@
 			cursor: pointer;
 			overflow: hidden;
 			height: 100%;
-			border-radius: 3px 3px 0 0;
+			border-radius: $grid-unit-05;
 
 			&:focus-visible {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);