@wordpress/edit-site 6.2.0 → 6.4.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

@@ -6,12 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	Icon,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -23,7 +18,10 @@ import {
 } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	privateApis as editorPrivateApis,
+	EditorProvider,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -47,25 +45,53 @@ import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
-const defaultConfigPerViewType = {
+const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
+		fields: [ 'template', 'author' ],
+		layout: {
+			primaryField: 'title',
+			combinedFields: [
+				{
+					id: 'template',
+					label: __( 'Template' ),
+					children: [ 'title', 'description' ],
+					direction: 'vertical',
+				},
+			],
+			styles: {
+				template: {
+					maxWidth: 400,
+					minWidth: 320,
+				},
+				preview: {
+					minWidth: 120,
+					maxWidth: 120,
+				},
+				author: {
+					width: '1%',
+				},
+			},
+		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
-		primaryField: 'title',
-		columnFields: [ 'description' ],
+		fields: [ 'title', 'description', 'author' ],
+		layout: {
+			mediaField: 'preview',
+			primaryField: 'title',
+			columnFields: [ 'description' ],
+		},
 	},
 	[ LAYOUT_LIST ]: {
-		primaryField: 'title',
-		mediaField: 'preview',
+		fields: [ 'title', 'description', 'author' ],
+		layout: {
+			primaryField: 'title',
+			mediaField: 'preview',
+		},
 	},
 };
 
@@ -78,10 +104,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: defaultLayouts[ LAYOUT_GRID ].fields,
+	layout: defaultLayouts[ LAYOUT_GRID ].layout,
 	filters: [],
 };
 
@@ -103,14 +127,13 @@ function Title( { item, viewType } ) {
 	);
 }
 
-function AuthorField( { item, viewType } ) {
+function AuthorField( { item } ) {
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {
 						'is-loaded': isImageLoaded,
@@ -123,7 +146,7 @@ function AuthorField( { item, viewType } ) {
 					/>
 				</div>
 			) }
-			{ withIcon && ! imageUrl && (
+			{ ! imageUrl && (
 				<div className="page-templates-author-field__icon">
 					<Icon icon={ icon } />
 				</div>
@@ -154,7 +177,7 @@ function Preview( { item, viewType } ) {
 	// the block editor settings are needed in context where we don't have the block editor.
 	// Explore how we can solve this in a better way.
 	return (
-		<ExperimentalBlockEditorProvider settings={ settings }>
+		<EditorProvider post={ item } settings={ settings }>
 			<div
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
@@ -180,7 +203,7 @@ function Preview( { item, viewType } ) {
 					</button>
 				) }
 			</div>
-		</ExperimentalBlockEditorProvider>
+		</EditorProvider>
 	);
 }
 
@@ -194,7 +217,8 @@ export default function PageTemplates() {
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			layout: defaultConfigPerViewType[ usedType ],
+			layout: defaultLayouts[ usedType ].layout,
+			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -232,12 +256,13 @@ export default function PageTemplates() {
 		}
 	);
 	const history = useHistory();
-	const onSelectionChange = useCallback(
+	const onChangeSelection = useCallback(
 		( items ) => {
+			setSelection( items );
 			if ( view?.type === LAYOUT_LIST ) {
 				history.push( {
 					...params,
-					postId: items.length === 1 ? items[ 0 ].id : undefined,
+					postId: items.length === 1 ? items[ 0 ] : undefined,
 				} );
 			}
 		},
@@ -261,61 +286,46 @@ export default function PageTemplates() {
 	const fields = useMemo(
 		() => [
 			{
-				header: __( 'Preview' ),
+				label: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => {
 					return <Preview item={ item } viewType={ view.type } />;
 				},
-				minWidth: 120,
-				maxWidth: 120,
 				enableSorting: false,
 			},
 			{
-				header: __( 'Template' ),
+				label: __( 'Template' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => (
 					<Title item={ item } viewType={ view.type } />
 				),
-				maxWidth: 400,
 				enableHiding: false,
 				enableGlobalSearch: true,
 			},
 			{
-				header: __( 'Description' ),
+				label: __( 'Description' ),
 				id: 'description',
 				render: ( { item } ) => {
-					return item.description ? (
-						<span className="page-templates-description">
-							{ decodeEntities( item.description ) }
-						</span>
-					) : (
-						view.type === LAYOUT_TABLE && (
-							<>
-								<Text variant="muted" aria-hidden="true">
-									&#8212;
-								</Text>
-								<VisuallyHidden>
-									{ __( 'No description.' ) }
-								</VisuallyHidden>
-							</>
+					return (
+						item.description && (
+							<span className="page-templates-description">
+								{ decodeEntities( item.description ) }
+							</span>
 						)
 					);
 				},
-				maxWidth: 400,
-				minWidth: 320,
 				enableSorting: false,
 				enableGlobalSearch: true,
 			},
 			{
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {
 					return <AuthorField viewType={ view.type } item={ item } />;
 				},
 				elements: authors,
-				width: '1%',
 			},
 		],
 		[ authors, view.type ]
@@ -338,13 +348,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,
@@ -370,9 +373,9 @@ export default function PageTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				onSelectionChange={ onSelectionChange }
+				onChangeSelection={ onChangeSelection }
 				selection={ selection }
-				setSelection={ setSelection }
+				defaultLayouts={ defaultLayouts }
 			/>
 		</Page>
 	);

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

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	border-radius: 3px 3px 0 0;
+	width: 100%;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +13,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 +32,6 @@
 		.block-editor-block-preview__container {
 			height: 100%;
 		}
-
-		.page-templates-preview-field__button {
-			border-radius: 3px 3px 0 0;
-		}
 	}
 
 	&.is-viewtype-table {
@@ -72,12 +68,12 @@
 	width: $grid-unit-30;
 	height: $grid-unit-30;
 	align-items: center;
-	justify-content: center;
+	justify-content: left;
 	display: flex;
 
 	img {
-		width: 20px;
-		height: 20px;
+		width: $grid-unit-20;
+		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
@@ -99,6 +95,7 @@
 	height: $grid-unit-30;
 
 	svg {
+		margin-left: -$grid-unit-05;
 		fill: currentColor;
 	}
 }

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/post-edit/index.js

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DataForm } from '@wordpress/dataviews';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { Button } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import usePostFields from '../post-fields';
+
+function PostEditForm( { postType, postId } ) {
+	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
+	const { initialEdits } = useSelect(
+		( select ) => {
+			if ( ids.length !== 1 ) {
+			}
+			return {
+				initialEdits:
+					ids.length === 1
+						? select( coreDataStore ).getEntityRecord(
+								'postType',
+								postType,
+								ids[ 0 ]
+						  )
+						: null,
+			};
+		},
+		[ postType, ids ]
+	);
+	const registry = useRegistry();
+	const { saveEntityRecord } = useDispatch( coreDataStore );
+	const { fields } = usePostFields();
+	const form = {
+		visibleFields: [ 'title' ],
+	};
+	const [ edits, setEdits ] = useState( {} );
+	const itemWithEdits = useMemo( () => {
+		return {
+			...initialEdits,
+			...edits,
+		};
+	}, [ initialEdits, edits ] );
+	const onSubmit = async ( event ) => {
+		event.preventDefault();
+		const { getEntityRecord } = registry.resolveSelect( coreDataStore );
+		for ( const id of ids ) {
+			const item = await getEntityRecord( 'postType', postType, id );
+			saveEntityRecord( 'postType', postType, {
+				...item,
+				...edits,
+			} );
+		}
+		setEdits( {} );
+	};
+
+	return (
+		<form onSubmit={ onSubmit }>
+			<DataForm
+				data={ itemWithEdits }
+				fields={ fields }
+				form={ form }
+				onChange={ setEdits }
+			/>
+			<Button variant="primary" type="submit">
+				{ __( 'Update' ) }
+			</Button>
+		</form>
+	);
+}
+
+export function PostEdit( { postType, postId } ) {
+	return (
+		<Page
+			className={ clsx( 'edit-site-post-edit', {
+				'is-empty': ! postId,
+			} ) }
+			label={ __( 'Post Edit' ) }
+		>
+			{ postId && (
+				<PostEditForm postType={ postType } postId={ postId } />
+			) }
+			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
+		</Page>
+	);
+}

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

@@ -0,0 +1,9 @@
+.edit-site-post-edit {
+	padding: $grid-unit-30;
+
+	&.is-empty .edit-site-page-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}