@wordpress/edit-site 6.1.0 → 6.3.0

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

@@ -5,7 +5,6 @@ import { parse } from '@wordpress/blocks';
 import { useSelect, createSelector } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -16,7 +15,6 @@ import {
 	PATTERN_TYPES,
 	PATTERN_SYNC_TYPES,
 	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_ORIGINS,
 	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
@@ -25,38 +23,16 @@ import { store as editSiteStore } from '../../store';
 
 const EMPTY_PATTERN_LIST = [];
 
-const createTemplatePartId = ( theme, slug ) =>
-	theme && slug ? theme + '//' + slug : null;
-
-const templatePartToPattern = ( templatePart ) => ( {
-	blocks: parse( templatePart.content.raw, {
-		__unstableSkipMigrationLogs: true,
-	} ),
-	categories: [ templatePart.area ],
-	description: templatePart.description || '',
-	isCustom: templatePart.source === TEMPLATE_ORIGINS.custom,
-	keywords: templatePart.keywords || [],
-	id: createTemplatePartId( templatePart.theme, templatePart.slug ),
-	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
-	title: decodeEntities( templatePart.title.rendered ),
-	type: templatePart.type,
-	_links: templatePart._links,
-	templatePart,
-} );
-
-const selectTemplatePartsAsPatterns = createSelector(
+const selectTemplateParts = createSelector(
 	( select, categoryId, search = '' ) => {
 		const { getEntityRecords, isResolving: isResolvingSelector } =
 			select( coreStore );
 		const { __experimentalGetDefaultTemplatePartAreas } =
 			select( editorStore );
 		const query = { per_page: -1 };
-		const rawTemplateParts =
+		const templateParts =
 			getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
 			EMPTY_PATTERN_LIST;
-		const templateParts = rawTemplateParts.map( ( templatePart ) =>
-			templatePartToPattern( templatePart )
-		);
 
 		// In the case where a custom template part area has been removed we need
 		// the current list of areas to cross check against so orphaned template
@@ -66,12 +42,12 @@ const selectTemplatePartsAsPatterns = createSelector(
 
 		const templatePartHasCategory = ( item, category ) => {
 			if ( category !== TEMPLATE_PART_AREA_DEFAULT_CATEGORY ) {
-				return item.templatePart.area === category;
+				return item.area === category;
 			}
 
 			return (
-				item.templatePart.area === category ||
-				! templatePartAreas.includes( item.templatePart.area )
+				item.area === category ||
+				! templatePartAreas.includes( item.area )
 			);
 		};
 
@@ -152,8 +128,11 @@ const selectPatterns = createSelector(
 			patterns: themePatterns,
 			isResolving: isResolvingThemePatterns,
 		} = selectThemePatterns( select );
-		const { patterns: userPatterns, isResolving: isResolvingUserPatterns } =
-			selectUserPatterns( select );
+		const {
+			patterns: userPatterns,
+			isResolving: isResolvingUserPatterns,
+			categories: userPatternCategories,
+		} = selectUserPatterns( select );
 
 		let patterns = [
 			...( themePatterns || [] ),
@@ -165,7 +144,8 @@ const selectPatterns = createSelector(
 			// Non-user patterns are all unsynced for the time being.
 			patterns = patterns.filter( ( pattern ) => {
 				return pattern.type === PATTERN_TYPES.user
-					? pattern.syncStatus === syncStatus
+					? ( pattern.wp_pattern_sync_status ||
+							PATTERN_SYNC_TYPES.full ) === syncStatus
 					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
 			} );
 		}
@@ -173,12 +153,35 @@ const selectPatterns = createSelector(
 		if ( categoryId ) {
 			patterns = searchItems( patterns, search, {
 				categoryId,
-				hasCategory: ( item, currentCategory ) =>
-					item.categories?.includes( currentCategory ),
+				hasCategory: ( item, currentCategory ) => {
+					if ( item.type === PATTERN_TYPES.user ) {
+						return item.wp_pattern_category.some(
+							( catId ) =>
+								userPatternCategories.find(
+									( cat ) => cat.id === catId
+								)?.slug === currentCategory
+						);
+					}
+					return item.categories?.includes( currentCategory );
+				},
 			} );
 		} else {
 			patterns = searchItems( patterns, search, {
-				hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+				hasCategory: ( item ) => {
+					if ( item.type === PATTERN_TYPES.user ) {
+						return (
+							userPatternCategories?.length &&
+							( ! item.wp_pattern_category?.length ||
+								! item.wp_pattern_category.some( ( catId ) =>
+									userPatternCategories.find(
+										( cat ) => cat.id === catId
+									)
+								) )
+						);
+					}
+
+					return ! item.hasOwnProperty( 'categories' );
+				},
 			} );
 		}
 		return {
@@ -192,41 +195,6 @@ const selectPatterns = createSelector(
 	]
 );
 
-/**
- * Converts a post of type `wp_block` to a 'pattern item' that more closely
- * matches the structure of theme provided patterns.
- *
- * @param {Object} patternPost The `wp_block` record being normalized.
- * @param {Map}    categories  A Map of user created categories.
- *
- * @return {Object} The normalized item.
- */
-const convertPatternPostToItem = ( patternPost, categories ) => ( {
-	blocks: parse( patternPost.content.raw, {
-		__unstableSkipMigrationLogs: true,
-	} ),
-	...( patternPost.wp_pattern_category.length > 0 && {
-		categories: patternPost.wp_pattern_category.map(
-			( patternCategoryId ) =>
-				categories && categories.get( patternCategoryId )
-					? categories.get( patternCategoryId ).slug
-					: patternCategoryId
-		),
-	} ),
-	termLabels: patternPost.wp_pattern_category.map( ( patternCategoryId ) =>
-		categories?.get( patternCategoryId )
-			? categories.get( patternCategoryId ).label
-			: patternCategoryId
-	),
-	id: patternPost.id,
-	name: patternPost.slug,
-	syncStatus: patternPost.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
-	title: patternPost.title.raw,
-	type: patternPost.type,
-	description: patternPost.excerpt.raw,
-	patternPost,
-} );
-
 const selectUserPatterns = createSelector(
 	( select, syncStatus, search = '' ) => {
 		const {
@@ -246,12 +214,7 @@ const selectUserPatterns = createSelector(
 		userPatternCategories.forEach( ( userCategory ) =>
 			categories.set( userCategory.id, userCategory )
 		);
-		let patterns = patternPosts
-			? patternPosts.map( ( record ) =>
-					convertPatternPostToItem( record, categories )
-			  )
-			: EMPTY_PATTERN_LIST;
-
+		let patterns = patternPosts ?? EMPTY_PATTERN_LIST;
 		const isResolving = isResolvingSelector( 'getEntityRecords', [
 			'postType',
 			PATTERN_TYPES.user,
@@ -260,7 +223,9 @@ const selectUserPatterns = createSelector(
 
 		if ( syncStatus ) {
 			patterns = patterns.filter(
-				( pattern ) => pattern.syncStatus === syncStatus
+				( pattern ) =>
+					pattern.wp_pattern_sync_status ||
+					PATTERN_SYNC_TYPES.full === syncStatus
 			);
 		}
 
@@ -298,11 +263,7 @@ export const usePatterns = (
 	return useSelect(
 		( select ) => {
 			if ( postType === TEMPLATE_PART_POST_TYPE ) {
-				return selectTemplatePartsAsPatterns(
-					select,
-					categoryId,
-					search
-				);
+				return selectTemplateParts( select, categoryId, search );
 			} else if ( postType === PATTERN_TYPES.user && !! categoryId ) {
 				const appliedCategory =
 					categoryId === 'uncategorized' ? '' : categoryId;

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

@@ -54,18 +54,24 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
-const defaultConfigPerViewType = {
+const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
+		layout: {
+			primaryField: 'title',
+		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
-		primaryField: 'title',
-		columnFields: [ 'description' ],
+		layout: {
+			mediaField: 'preview',
+			primaryField: 'title',
+			columnFields: [ 'description' ],
+		},
 	},
 	[ LAYOUT_LIST ]: {
-		primaryField: 'title',
-		mediaField: 'preview',
+		layout: {
+			primaryField: 'title',
+			mediaField: 'preview',
+		},
 	},
 };
 
@@ -78,10 +84,8 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	// All fields are visible by default, so it's
-	// better to keep track of the hidden ones.
-	hiddenFields: [ 'preview' ],
-	layout: defaultConfigPerViewType[ LAYOUT_GRID ],
+	fields: [ 'title', 'description', 'author' ],
+	layout: defaultLayouts[ LAYOUT_GRID ].layout,
 	filters: [],
 };
 
@@ -186,13 +190,15 @@ function Preview( { item, viewType } ) {
 
 export default function PageTemplates() {
 	const { params } = useLocation();
-	const { activeView = 'all', layout } = params;
+	const { activeView = 'all', layout, postId } = params;
+	const [ selection, setSelection ] = useState( [ postId ] );
+
 	const defaultView = useMemo( () => {
 		const usedType = layout ?? DEFAULT_VIEW.type;
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			layout: defaultConfigPerViewType[ usedType ],
+			layout: defaultLayouts[ usedType ].layout,
 			filters:
 				activeView !== 'all'
 					? [
@@ -323,7 +329,10 @@ export default function PageTemplates() {
 		return filterSortAndPaginate( records, view, fields );
 	}, [ records, view, fields ] );
 
-	const postTypeActions = usePostActions( TEMPLATE_POST_TYPE );
+	const postTypeActions = usePostActions( {
+		postType: TEMPLATE_POST_TYPE,
+		context: 'list',
+	} );
 	const editAction = useEditPostAction();
 	const actions = useMemo(
 		() => [ editAction, ...postTypeActions ],
@@ -333,13 +342,6 @@ export default function PageTemplates() {
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-
 				history.push( {
 					...params,
 					layout: newView.type,
@@ -366,6 +368,9 @@ export default function PageTemplates() {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
+				selection={ selection }
+				setSelection={ setSelection }
+				defaultLayouts={ defaultLayouts }
 			/>
 		</Page>
 	);

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

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	border-radius: 3px 3px 0 0;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +12,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: 3px;
+		border-radius: $grid-unit-05;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -32,10 +31,6 @@
 		.block-editor-block-preview__container {
 			height: 100%;
 		}
-
-		.page-templates-preview-field__button {
-			border-radius: 3px 3px 0 0;
-		}
 	}
 
 	&.is-viewtype-table {

package/src/components/pagination/index.js

@@ -47,7 +47,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( 1 ) }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'First page' ) }
 					icon={ previous }
@@ -56,7 +56,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'Previous page' ) }
 					icon={ chevronLeft }
@@ -75,7 +75,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage + 1 ) }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Next page' ) }
 					icon={ chevronRight }
@@ -84,7 +84,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Last page' ) }
 					icon={ next }

package/src/components/posts-app/index.js

@@ -10,29 +10,27 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import Page from '../page';
+import useLayoutAreas from './router';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
-const defaultRoute = {
-	key: 'index',
-	areas: {
-		sidebar: 'Empty Sidebar',
-		content: <Page>Welcome to Posts</Page>,
-		preview: undefined,
-		mobile: <Page>Welcome to Posts</Page>,
-	},
-};
+function PostsLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	const route = useLayoutAreas();
+	return <Layout route={ route } />;
+}
 
 export default function PostsApp() {
 	return (
 		<GlobalStylesProvider>
 			<UnsavedChangesWarning />
 			<RouterProvider>
-				<Layout route={ defaultRoute } />
+				<PostsLayout />
 			</RouterProvider>
 		</GlobalStylesProvider>
 	);