@wordpress/edit-site 5.25.0 → 5.26.0

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

@@ -0,0 +1,380 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	Button,
+	__experimentalHeading as Heading,
+	Tooltip,
+	Flex,
+} from '@wordpress/components';
+import { getQueryArgs } from '@wordpress/url';
+import { __, _x } from '@wordpress/i18n';
+import {
+	useState,
+	useMemo,
+	useCallback,
+	useId,
+	useEffect,
+} from '@wordpress/element';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import {
+	DataViews,
+	sortByTextFields,
+	getPaginationResults,
+} from '@wordpress/dataviews';
+import {
+	Icon,
+	header,
+	footer,
+	symbolFilled as uncategorized,
+	symbol,
+	lockSmall,
+} from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import {
+	LAYOUT_GRID,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_SYNC_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+} from '../../utils/constants';
+import {
+	exportJSONaction,
+	renameAction,
+	resetAction,
+	deleteAction,
+	duplicatePatternAction,
+	duplicateTemplatePartAction,
+} from './dataviews-pattern-actions';
+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';
+
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
+
+const templatePartIcons = { header, footer, uncategorized };
+const EMPTY_ARRAY = [];
+const defaultConfigPerViewType = {
+	[ LAYOUT_GRID ]: {
+		mediaField: 'preview',
+		primaryField: 'title',
+	},
+};
+const DEFAULT_VIEW = {
+	type: LAYOUT_GRID,
+	search: '',
+	page: 1,
+	perPage: 20,
+	hiddenFields: [ 'sync-status' ],
+	layout: {
+		...defaultConfigPerViewType[ LAYOUT_GRID ],
+	},
+	filters: [],
+};
+
+const SYNC_FILTERS = [
+	{
+		value: PATTERN_SYNC_TYPES.full,
+		label: _x( 'Synced', 'Option that shows all synchronized patterns' ),
+		description: __( 'Patterns that are kept in sync across the site.' ),
+	},
+	{
+		value: PATTERN_SYNC_TYPES.unsynced,
+		label: _x(
+			'Not synced',
+			'Option that shows all patterns that are not synchronized'
+		),
+		description: __(
+			'Patterns that can be changed freely without affecting the site.'
+		),
+	},
+];
+
+function Preview( { item, viewType } ) {
+	const descriptionId = useId();
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const isEmpty = ! item.blocks?.length;
+	// Only custom patterns or custom template parts can be renamed or deleted.
+	const isCustomPattern =
+		isUserPattern || ( isTemplatePart && item.isCustom );
+	const ariaDescriptions = [];
+	if ( isCustomPattern ) {
+		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
+		ariaDescriptions.push(
+			__( 'Press Enter to edit, or Delete to delete the pattern.' )
+		);
+	} else if ( item.description ) {
+		ariaDescriptions.push( item.description );
+	}
+
+	if ( isNonUserPattern ) {
+		ariaDescriptions.push(
+			__( 'Theme & plugin patterns cannot be edited.' )
+		);
+	}
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	return (
+		<>
+			<div
+				className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
+				style={ { backgroundColor } }
+			>
+				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+			</div>
+			{ ariaDescriptions.map( ( ariaDescription, index ) => (
+				<div
+					key={ index }
+					hidden
+					id={ `${ descriptionId }-${ index }` }
+				>
+					{ ariaDescription }
+				</div>
+			) ) }
+		</>
+	);
+}
+
+function Title( { item, categoryId } ) {
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	let itemIcon;
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: isUserPattern ? item.id : item.name,
+		categoryId,
+		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+	} );
+	if ( ! isUserPattern && templatePartIcons[ categoryId ] ) {
+		itemIcon = templatePartIcons[ categoryId ];
+	} else {
+		itemIcon =
+			item.syncStatus === PATTERN_SYNC_TYPES.full ? symbol : undefined;
+	}
+	return (
+		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
+			{ itemIcon && ! isNonUserPattern && (
+				<Tooltip
+					placement="top"
+					text={ __(
+						'Editing this pattern will also update anywhere it is used'
+					) }
+				>
+					<Icon
+						className="edit-site-patterns__pattern-icon"
+						icon={ itemIcon }
+					/>
+				</Tooltip>
+			) }
+			{ 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>
+			) }
+			<Flex as="span" gap={ 0 } justify="left">
+				{ item.type === PATTERN_TYPES.theme ? (
+					<span className="dataviews-view-grid__title-field">
+						{ item.title }
+					</span>
+				) : (
+					<Heading level={ 5 }>
+						<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"
+							className="dataviews-view-grid__title-field"
+						>
+							{ item.title || item.name }
+						</Button>
+					</Heading>
+				) }
+			</Flex>
+		</HStack>
+	);
+}
+
+export default function DataviewsPatterns() {
+	const { categoryType, categoryId = PATTERN_DEFAULT_CATEGORY } =
+		getQueryArgs( window.location.href );
+	const type = categoryType || PATTERN_TYPES.theme;
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const isUncategorizedThemePatterns =
+		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
+	const previousCategoryId = usePrevious( categoryId );
+	const viewSyncStatus = view.filters?.find(
+		( { field } ) => field === 'sync-status'
+	)?.value;
+	const { patterns, isResolving } = usePatterns(
+		type,
+		isUncategorizedThemePatterns ? '' : categoryId,
+		{
+			search: view.search,
+			syncStatus: viewSyncStatus,
+		}
+	);
+	const fields = useMemo( () => {
+		const _fields = [
+			{
+				header: __( 'Preview' ),
+				id: 'preview',
+				render: ( { item } ) => (
+					<Preview item={ item } viewType={ view.type } />
+				),
+				enableSorting: false,
+				enableHiding: false,
+			},
+			{
+				header: __( 'Title' ),
+				id: 'title',
+				getValue: ( { item } ) => item.title,
+				render: ( { item } ) => (
+					<Title item={ item } categoryId={ categoryId } />
+				),
+				enableHiding: false,
+			},
+		];
+		if ( type === PATTERN_TYPES.theme ) {
+			_fields.push( {
+				header: __( 'Sync Status' ),
+				id: 'sync-status',
+				render: ( { item } ) => {
+					// User patterns can have their sync statuses checked directly.
+					// Non-user patterns are all unsynced for the time being.
+					return (
+						SYNC_FILTERS.find(
+							( { value } ) => value === item.syncStatus
+						)?.label ||
+						SYNC_FILTERS.find(
+							( { value } ) =>
+								value === PATTERN_SYNC_TYPES.unsynced
+						).label
+					);
+				},
+				type: ENUMERATION_TYPE,
+				elements: SYNC_FILTERS,
+				filterBy: {
+					operators: [ OPERATOR_IN ],
+				},
+				enableSorting: false,
+			} );
+		}
+		return _fields;
+	}, [ view.type, categoryId, type ] );
+	// Reset the page number when the category changes.
+	useEffect( () => {
+		if ( previousCategoryId !== categoryId ) {
+			setView( DEFAULT_VIEW );
+		}
+	}, [ categoryId, previousCategoryId ] );
+	const { data, paginationInfo } = useMemo( () => {
+		if ( ! patterns ) {
+			return {
+				data: EMPTY_ARRAY,
+				paginationInfo: { totalItems: 0, totalPages: 0 },
+			};
+		}
+		let filteredData = [ ...patterns ];
+		// Handle sorting.
+		if ( view.sort ) {
+			filteredData = sortByTextFields( {
+				data: filteredData,
+				view,
+				fields,
+				textFields: [ 'title', 'author' ],
+			} );
+		}
+		// Handle pagination.
+		return getPaginationResults( {
+			data: filteredData,
+			view,
+		} );
+	}, [ patterns, view, fields ] );
+
+	const actions = useMemo(
+		() => [
+			renameAction,
+			duplicatePatternAction,
+			duplicateTemplatePartAction,
+			exportJSONaction,
+			resetAction,
+			deleteAction,
+		],
+		[]
+	);
+	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.
+	// This ensures 'styles' that are needed for the previews are synced
+	// from the site editor store to the block editor store.
+	// TODO: check if I add the provider in every preview like in templates...
+	return (
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<Page
+				title={ __( 'Patterns content' ) }
+				className="edit-site-page-patterns-dataviews"
+				hideTitleFromUI
+			>
+				<PatternsHeader
+					categoryId={ categoryId }
+					type={ type }
+					titleId={ `${ id }-title` }
+					descriptionId={ `${ id }-description` }
+				/>
+				<DataViews
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					actions={ actions }
+					data={ data || EMPTY_ARRAY }
+					getItemId={ ( item ) => item.name }
+					isLoading={ isResolving }
+					view={ view }
+					onChangeView={ onChangeView }
+					deferredRendering={ true }
+					supportedLayouts={ [ LAYOUT_GRID ] }
+				/>
+			</Page>
+		</ExperimentalBlockEditorProvider>
+	);
+}

package/src/components/page-patterns/duplicate-menu-item.js

@@ -81,7 +81,7 @@ export default function DuplicateMenuItem( {
 				<DuplicatePatternModal
 					onClose={ closeModal }
 					onSuccess={ onPatternSuccess }
-					pattern={ isThemePattern ? item : item.patternBlock }
+					pattern={ isThemePattern ? item : item.patternPost }
 				/>
 			) }
 			{ isModalOpen && isTemplatePart && (

package/src/components/page-patterns/grid-item.js

@@ -114,8 +114,8 @@ function GridItem( { categoryId, item, ...props } ) {
 		const json = {
 			__file: item.type,
 			title: item.title || item.name,
-			content: item.patternBlock.content.raw,
-			syncStatus: item.patternBlock.wp_pattern_sync_status,
+			content: item.patternPost.content.raw,
+			syncStatus: item.patternPost.wp_pattern_sync_status,
 		};
 
 		return downloadBlob(
@@ -200,6 +200,7 @@ function GridItem( { categoryId, item, ...props } ) {
 					<BlockPreview
 						blocks={ item.blocks }
 						additionalStyles={ additionalStyles }
+						viewportWidth={ item.viewportWidth }
 					/>
 				) }
 			</button>

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

@@ -31,7 +31,7 @@ import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
 import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants';
-import Pagination from './pagination';
+import Pagination from '../pagination';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -217,6 +217,7 @@ export default function PatternsList( { categoryId, type } ) {
 			</VStack>
 			{ numPages > 1 && (
 				<Pagination
+					className="edit-site-patterns__pagination"
 					currentPage={ currentPage }
 					numPages={ numPages }
 					changePage={ changePage }

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

@@ -67,32 +67,6 @@
 		background: $gray-700;
 		color: $gray-100;
 	}
-
-	.edit-site-patterns__grid-pagination {
-		border-top: 1px solid $gray-800;
-		background: $gray-900;
-		padding: $grid-unit-30 $grid-unit-40;
-		position: sticky;
-		bottom: 0;
-		z-index: z-index(".edit-site-patterns__grid-pagination");
-
-		.components-button.is-tertiary {
-			width: $button-size-compact;
-			height: $button-size-compact;
-			color: $gray-100;
-			background-color: $gray-800;
-			justify-content: center;
-
-			&:disabled {
-				color: $gray-600;
-				background: none;
-			}
-
-			&:hover:not(:disabled) {
-				background-color: $gray-700;
-			}
-		}
-	}
 }
 
 .edit-site-patterns__header {
@@ -226,3 +200,92 @@
 .edit-site-patterns__delete-modal {
 	width: $modal-width-small;
 }
+
+.edit-site-patterns__pagination {
+	padding: $grid-unit-30 $grid-unit-40;
+	border-top: 1px solid $gray-800;
+	background: $gray-900;
+	position: sticky;
+	bottom: 0;
+	color: $gray-100;
+	z-index: z-index(".edit-site-patterns__grid-pagination");
+	.components-button.is-tertiary {
+		background-color: $gray-800;
+		color: $gray-100;
+
+		&:disabled {
+			color: $gray-600;
+			background: none;
+		}
+
+		&:hover:not(:disabled) {
+			background-color: $gray-700;
+		}
+	}
+}
+
+/**
+ * DataViews patterns styles.
+ * TODO: when this becomes stable, consolidate styles with the above.
+ */
+.edit-site-page-patterns-dataviews {
+	.page-patterns-preview-field {
+		&.is-viewtype-grid {
+			.block-editor-block-preview__container {
+				height: auto;
+			}
+		}
+	}
+
+	.edit-site-patterns__pattern-icon {
+		fill: var(--wp-block-synced-color);
+		flex-shrink: 0;
+	}
+
+	.edit-site-patterns__pattern-lock-icon {
+		min-width: min-content;
+	}
+
+	.edit-site-patterns__section-header {
+		border-bottom: 1px solid #f0f0f0;
+		min-height: 72px;
+		padding: $grid-unit-20 $grid-unit-40;
+		position: sticky;
+		top: 0;
+		z-index: 2;
+	}
+}
+
+.dataviews-action-modal__duplicate-pattern {
+	// Fix the modal width to prevent added categories from stretching the modal.
+	[role="dialog"] > [role="document"] {
+		width: 350px;
+	}
+
+	.patterns-menu-items__convert-modal-categories {
+		position: relative;
+	}
+
+	.components-form-token-field__suggestions-list:not(:empty) {
+		position: absolute;
+		border: $border-width solid var(--wp-admin-theme-color);
+		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-block-ui;
+		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
+		box-sizing: border-box;
+		z-index: 1;
+		background-color: $white;
+		width: calc(100% + 2px); // Account for the border width of the token field.
+		left: -1px;
+		min-width: initial;
+		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
+	}
+}
+
+.dataviews-action-modal__duplicate-template-part {
+	.components-modal__frame {
+		@include break-small {
+			max-width: 500px;
+		}
+	}
+}

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

@@ -184,29 +184,38 @@ const selectPatterns = createSelector(
 	]
 );
 
-const patternBlockToPattern = ( patternBlock, categories ) => ( {
-	blocks: parse( patternBlock.content.raw, {
+/**
+ * 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,
 	} ),
-	...( patternBlock.wp_pattern_category.length > 0 && {
-		categories: patternBlock.wp_pattern_category.map(
+	...( patternPost.wp_pattern_category.length > 0 && {
+		categories: patternPost.wp_pattern_category.map(
 			( patternCategoryId ) =>
 				categories && categories.get( patternCategoryId )
 					? categories.get( patternCategoryId ).slug
 					: patternCategoryId
 		),
 	} ),
-	termLabels: patternBlock.wp_pattern_category.map( ( patternCategoryId ) =>
+	termLabels: patternPost.wp_pattern_category.map( ( patternCategoryId ) =>
 		categories?.get( patternCategoryId )
 			? categories.get( patternCategoryId ).label
 			: patternCategoryId
 	),
-	id: patternBlock.id,
-	name: patternBlock.slug,
-	syncStatus: patternBlock.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
-	title: patternBlock.title.raw,
-	type: PATTERN_TYPES.user,
-	patternBlock,
+	id: patternPost.id,
+	name: patternPost.slug,
+	syncStatus: patternPost.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
+	title: patternPost.title.raw,
+	type: patternPost.type,
+	patternPost,
 } );
 
 const selectUserPatterns = createSelector(
@@ -215,7 +224,7 @@ const selectUserPatterns = createSelector(
 			select( coreStore );
 
 		const query = { per_page: -1 };
-		const records = getEntityRecords(
+		const patternPosts = getEntityRecords(
 			'postType',
 			PATTERN_TYPES.user,
 			query
@@ -225,9 +234,9 @@ const selectUserPatterns = createSelector(
 		userPatternCategories.forEach( ( userCategory ) =>
 			categories.set( userCategory.id, userCategory )
 		);
-		let patterns = records
-			? records.map( ( record ) =>
-					patternBlockToPattern( record, categories )
+		let patterns = patternPosts
+			? patternPosts.map( ( record ) =>
+					convertPatternPostToItem( record, categories )
 			  )
 			: EMPTY_PATTERN_LIST;