@wordpress/edit-site 6.3.0 → 6.5.0

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

@@ -1,59 +1,39 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Button,
-	Tooltip,
-	Flex,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useId, useEffect } from '@wordpress/element';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { Icon, lockSmall } from '@wordpress/icons';
 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
  */
-import { Async } from '../async';
 import Page from '../page';
 import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
-	LAYOUT_LIST,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
-	OPERATOR_IS,
 } from '../../utils/constants';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
 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';
+import {
+	patternStatusField,
+	previewField,
+	titleField,
+	templatePartAuthorField,
+} from './fields';
 
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -62,6 +42,14 @@ const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
 			primaryField: 'title',
+			styles: {
+				preview: {
+					width: '1%',
+				},
+				author: {
+					width: '1%',
+				},
+			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
@@ -82,164 +70,6 @@ const DEFAULT_VIEW = {
 	filters: [],
 };
 
-const SYNC_FILTERS = [
-	{
-		value: PATTERN_SYNC_TYPES.full,
-		label: _x( 'Synced', 'pattern (singular)' ),
-		description: __( 'Patterns that are kept in sync across the site.' ),
-	},
-	{
-		value: PATTERN_SYNC_TYPES.unsynced,
-		label: _x( 'Not synced', 'pattern (singular)' ),
-		description: __(
-			'Patterns that can be changed freely without affecting the site.'
-		),
-	},
-];
-
-function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
-	return (
-		<button
-			className="page-patterns-preview-field__button"
-			type="button"
-			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
-			aria-label={ item.title }
-			aria-describedby={ ariaDescribedBy }
-			aria-disabled={ item.type === PATTERN_TYPES.theme }
-		>
-			{ children }
-		</button>
-	);
-}
-
-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 [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { onClick } = useLink( {
-		postType: item.type,
-		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
-			className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
-			style={ { backgroundColor } }
-		>
-			<PreviewWrapper
-				item={ item }
-				onClick={ onClick }
-				ariaDescribedBy={ !! description ? descriptionId : undefined }
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && (
-					<Async>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ item.viewportWidth }
-						/>
-					</Async>
-				) }
-			</PreviewWrapper>
-			{ !! description && (
-				<div hidden id={ descriptionId }>
-					{ description }
-				</div>
-			) }
-		</div>
-	);
-}
-
-function Author( { item, viewType } ) {
-	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 && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ withIcon && ! imageUrl && (
-				<div className="page-templates-author-field__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span className="page-templates-author-field__name">{ text }</span>
-		</HStack>
-	);
-}
-
-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 || isTemplatePart ? item.id : item.name,
-		canvas: 'edit',
-	} );
-	const title = decodeEntities( defaultGetTitle( item ) );
-	return (
-		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<Flex
-				as="div"
-				gap={ 0 }
-				justify="left"
-				className="edit-site-patterns__pattern-title"
-			>
-				{ item.type === PATTERN_TYPES.theme ? (
-					title
-				) : (
-					<Button
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ title }
-					</Button>
-				) }
-			</Flex>
-			{ item.type === PATTERN_TYPES.theme && (
-				<Tooltip
-					placement="top"
-					text={ __( 'This pattern cannot be edited.' ) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
-				</Tooltip>
-			) }
-		</HStack>
-	);
-}
-
 export default function DataviewsPatterns() {
 	const {
 		params: { postType, categoryId: categoryIdFromURL },
@@ -259,6 +89,7 @@ export default function DataviewsPatterns() {
 	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
 		per_page: -1,
 	} );
+
 	const authors = useMemo( () => {
 		if ( ! records ) {
 			return EMPTY_ARRAY;
@@ -274,78 +105,24 @@ export default function DataviewsPatterns() {
 	}, [ records ] );
 
 	const fields = useMemo( () => {
-		const _fields = [
-			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => (
-					<Preview item={ item } viewType={ view.type } />
-				),
-				enableSorting: false,
-				width: '1%',
-			},
-			{
-				header: __( 'Title' ),
-				id: 'title',
-				render: ( { item } ) => <Title item={ item } />,
-				enableHiding: false,
-			},
-		];
+		const _fields = [ previewField, titleField ];
 
 		if ( type === PATTERN_TYPES.user ) {
-			_fields.push( {
-				header: __( '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-${ syncStatus }` }
-						>
-							{
-								SYNC_FILTERS.find(
-									( { value } ) => value === syncStatus
-								).label
-							}
-						</span>
-					);
-				},
-				elements: SYNC_FILTERS,
-				filterBy: {
-					operators: [ OPERATOR_IS ],
-					isPrimary: true,
-				},
-				enableSorting: false,
-			} );
+			_fields.push( patternStatusField );
 		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <Author viewType={ view.type } item={ item } />;
-				},
+				...templatePartAuthorField,
 				elements: authors,
-				filterBy: {
-					isPrimary: true,
-				},
-				width: '1%',
 			} );
 		}
 
 		return _fields;
-	}, [ view.type, type, authors ] );
+	}, [ type, authors ] );
 
 	// 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( () => {
@@ -394,6 +171,7 @@ export default function DataviewsPatterns() {
 					descriptionId={ `${ id }-description` }
 				/>
 				<DataViews
+					key={ categoryId + postType }
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }

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

@@ -1,118 +1,115 @@
-.edit-site-patterns__section-header {
-	.screen-reader-shortcut:focus {
-		top: 0;
-	}
+.edit-site-patterns__delete-modal {
+	width: $modal-width-small;
 }
 
-.edit-site-patterns__pattern-title {
-	.is-link {
-		text-decoration: none;
-		color: $gray-200;
+.page-patterns-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: $radius-medium;
 
-		&:hover,
-		&:focus {
-			color: $white;
+	.dataviews-view-table & {
+		width: 96px;
+		flex-grow: 0;
+		border-radius: 2px;
+
+		.page-patterns-preview-field__button {
+			border-radius: 2px;
 		}
 	}
 
-	.edit-site-patterns__pattern-icon {
+	.page-patterns-preview-field__button {
+		box-shadow: none;
+		border: none;
+		padding: 0;
+		background-color: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		overflow: hidden;
+		height: 100%;
 		border-radius: $grid-unit-05;
-		background: var(--wp-block-synced-color);
-		fill: $white;
-	}
 
-	.edit-site-patterns__pattern-lock-icon {
-		fill: currentcolor;
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
+
+		&[aria-disabled="true"] {
+			cursor: default;
+		}
 	}
 }
 
-.edit-site-patterns__delete-modal {
-	width: $modal-width-small;
+.edit-site-patterns__pattern-icon {
+	fill: var(--wp-block-synced-color);
+	flex-shrink: 0;
 }
 
-.edit-site-page-patterns-dataviews {
-	.page-patterns-preview-field {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		&.is-viewtype-table {
-			width: 96px;
-			flex-grow: 0;
-			border-radius: 2px;
+.edit-site-patterns__pattern-lock-icon {
+	min-width: min-content;
+}
 
-			.page-patterns-preview-field__button {
-				border-radius: 2px;
-			}
-		}
+.edit-site-patterns__section-header {
+	border-bottom: 1px solid #f0f0f0;
+	padding: $grid-unit-20 $grid-unit-60;
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+	min-height: $grid-unit-50;
+
+	.edit-site-patterns__title {
+		min-height: $grid-unit-50;
 
-		.page-patterns-preview-field__button {
-			box-shadow: none;
-			border: none;
-			padding: 0;
-			background-color: unset;
-			box-sizing: border-box;
-			cursor: pointer;
-			overflow: hidden;
-			height: 100%;
-			border-radius: $grid-unit-05;
-
-			&:focus-visible {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 2px solid transparent;
-			}
-
-			&[aria-disabled="true"] {
-				cursor: default;
-			}
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
 		}
 	}
 
-	.edit-site-patterns__pattern-icon {
-		fill: var(--wp-block-synced-color);
-		flex-shrink: 0;
+	.edit-site-patterns__sub-title {
+		margin-bottom: $grid-unit-10;
 	}
 
-	.edit-site-patterns__pattern-lock-icon {
-		min-width: min-content;
+	.screen-reader-shortcut:focus {
+		top: 0;
 	}
+}
 
-	.edit-site-patterns__section-header {
-		border-bottom: 1px solid #f0f0f0;
-		padding: $grid-unit-20 $grid-unit-60;
-		position: sticky;
-		top: 0;
-		z-index: 2;
-		flex-shrink: 0;
-		transition: padding ease-out 0.1s;
-		@include reduce-motion("transition");
-		min-height: $grid-unit-50;
+.edit-site-patterns__pattern-title {
+	display: block;
+	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: inherit;
 
-		.edit-site-patterns__title {
-			min-height: $grid-unit-50;
+	.is-link {
+		text-decoration: none;
+		color: $gray-200;
 
-			.components-heading {
-				flex-grow: 1;
-				flex-basis: 0;
-				white-space: nowrap;
-			}
+		&:hover,
+		&:focus {
+			color: $white;
 		}
+	}
 
-		.edit-site-patterns__sub-title {
-			margin-bottom: $grid-unit-10;
-		}
+	.edit-site-patterns__pattern-icon {
+		border-radius: $grid-unit-05;
+		background: var(--wp-block-synced-color);
+		fill: $white;
 	}
 
-	.edit-site-patterns__pattern-title {
-		display: block;
-		width: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		color: inherit;
+	.edit-site-patterns__pattern-lock-icon {
+		fill: currentcolor;
 	}
+}
 
+.edit-site-page-patterns-dataviews {
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
 	}

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

@@ -5,6 +5,7 @@ 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 { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -260,7 +261,7 @@ export const usePatterns = (
 	categoryId,
 	{ search = '', syncStatus } = {}
 ) => {
-	return useSelect(
+	const { patterns, ...rest } = useSelect(
 		( select ) => {
 			if ( postType === TEMPLATE_PART_POST_TYPE ) {
 				return selectTemplateParts( select, categoryId, search );
@@ -283,6 +284,35 @@ export const usePatterns = (
 		},
 		[ categoryId, postType, search, syncStatus ]
 	);
+
+	const ids = useMemo(
+		() => patterns?.map( ( record ) => record.id ) ?? [],
+		[ patterns ]
+	);
+
+	const permissions = useSelect(
+		( select ) => {
+			const { getEntityRecordsPermissions } = unlock(
+				select( coreStore )
+			);
+			return getEntityRecordsPermissions( 'postType', postType, ids );
+		},
+		[ ids, postType ]
+	);
+
+	const patternsWithPermissions = useMemo(
+		() =>
+			patterns?.map( ( record, index ) => ( {
+				...record,
+				permissions: permissions[ index ],
+			} ) ) ?? [],
+		[ patterns, permissions ]
+	);
+
+	return {
+		...rest,
+		patterns: patternsWithPermissions,
+	};
 };
 
 export default usePatterns;