@wordpress/edit-site 5.30.0 → 5.32.0

package/src/components/layout/router.js

@@ -18,10 +18,11 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const history = useHistory();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
 
@@ -30,36 +31,29 @@ export default function useLayoutAreas() {
 
 	// Regular page
 	if ( path === '/page' ) {
+		const isListLayout = layout === 'list' || ! layout;
 		return {
+			key: 'pages-list',
 			areas: {
-				content: undefined,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				content: <PagePages />,
+				preview: isListLayout && (
+					<Editor
+						isLoading={ isSiteEditorLoading }
+						onClick={ () =>
+							history.push( {
+								path,
+								postType: 'page',
+								postId,
+								canvas: 'edit',
+							} )
+						}
+					/>
+				),
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isLoading={ isSiteEditorLoading } />
 					) : undefined,
 			},
-			widths: {
-				content: undefined,
-			},
-		};
-	}
-
-	// List layout is still experimental.
-	// Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.
-	const isListLayout =
-		isCustom !== 'true' &&
-		layout === 'list' &&
-		window?.__experimentalAdminViews;
-
-	if ( path === '/pages' ) {
-		return {
-			areas: {
-				content: <PagePages />,
-				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
 			},
@@ -69,6 +63,7 @@ export default function useLayoutAreas() {
 	// Regular other post types
 	if ( postType && postId ) {
 		return {
+			key: 'page',
 			areas: {
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile:
@@ -80,8 +75,10 @@ export default function useLayoutAreas() {
 	}
 
 	// Templates
-	if ( path === '/wp_template/all' ) {
+	if ( path === '/wp_template' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'templates-list',
 			areas: {
 				content: (
 					<PageTemplatesTemplateParts
@@ -105,7 +102,9 @@ export default function useLayoutAreas() {
 
 	// Template parts
 	if ( path === '/wp_template_part/all' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'template-parts',
 			areas: {
 				content: (
 					<PageTemplatesTemplateParts
@@ -130,6 +129,7 @@ export default function useLayoutAreas() {
 	// Patterns
 	if ( path === '/patterns' ) {
 		return {
+			key: 'patterns',
 			areas: {
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
@@ -139,6 +139,7 @@ export default function useLayoutAreas() {
 
 	// Fallback shows the home page preview
 	return {
+		key: 'default',
 		areas: {
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
 			mobile:

package/src/components/layout/style.scss

@@ -93,6 +93,8 @@
 	position: relative;
 	flex-grow: 1;
 	z-index: z-index(".edit-site-layout__canvas-container");
+	// When animating the frame size can exceed its container size.
+	overflow: visible;
 
 	&.is-resizing::after {
 		// This covers the whole content which ensures mouse up triggers

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

@@ -15,6 +15,7 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -30,28 +31,19 @@ import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
 } from '../../utils/constants';
 
-import {
-	trashPostAction,
-	usePermanentlyDeletePostAction,
-	useRestorePostAction,
-	postRevisionsAction,
-	viewPostAction,
-	useEditPostAction,
-} from '../actions';
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 
+const { usePostActions } = unlock( editorPrivateApis );
+
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews
-	? [ LAYOUT_GRID, LAYOUT_TABLE, LAYOUT_LIST ]
-	: [ LAYOUT_GRID, LAYOUT_TABLE ];
 
 function useView( postType ) {
 	const { params } = useLocation();
@@ -222,18 +214,18 @@ export default function PagePages() {
 		view.filters.forEach( ( filter ) => {
 			if (
 				filter.field === 'status' &&
-				filter.operator === OPERATOR_IN
+				filter.operator === OPERATOR_IS_ANY
 			) {
 				filters.status = filter.value;
 			}
 			if (
 				filter.field === 'author' &&
-				filter.operator === OPERATOR_IN
+				filter.operator === OPERATOR_IS_ANY
 			) {
 				filters.author = filter.value;
 			} else if (
 				filter.field === 'author' &&
-				filter.operator === OPERATOR_NOT_IN
+				filter.operator === OPERATOR_IS_NONE
 			) {
 				filters.author_exclude = filter.value;
 			}
@@ -331,13 +323,12 @@ export default function PagePages() {
 				elements: STATUSES,
 				enableSorting: false,
 				filterBy: {
-					operators: [ OPERATOR_IN ],
+					operators: [ OPERATOR_IS_ANY ],
 				},
 			},
 			{
 				header: __( 'Date' ),
 				id: 'date',
-				getValue: ( { item } ) => item.date,
 				render: ( { item } ) => {
 					const formattedDate = dateI18n(
 						getSettings().formats.datetimeAbbreviated,
@@ -349,21 +340,20 @@ export default function PagePages() {
 		],
 		[ authors, view.type ]
 	);
-
-	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
-	const restorePostAction = useRestorePostAction();
-	const editPostAction = useEditPostAction();
-	const actions = useMemo(
-		() => [
-			viewPostAction,
-			trashPostAction,
-			restorePostAction,
-			permanentlyDeletePostAction,
-			editPostAction,
-			postRevisionsAction,
-		],
-		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'edit-post' ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			}
+		},
+		[ history ]
 	);
+	const actions = usePostActions( onActionPerformed );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -381,27 +371,17 @@ export default function PagePages() {
 	);
 
 	const [ showAddPageModal, setShowAddPageModal ] = useState( false );
-	const openModal = useCallback( () => {
-		if ( ! showAddPageModal ) {
-			setShowAddPageModal( true );
-		}
-	}, [ showAddPageModal ] );
-	const closeModal = useCallback( () => {
-		if ( showAddPageModal ) {
-			setShowAddPageModal( false );
-		}
-	}, [ showAddPageModal ] );
-	const handleNewPage = useCallback(
-		( { type, id } ) => {
-			history.push( {
-				postId: id,
-				postType: type,
-				canvas: 'edit',
-			} );
-			closeModal();
-		},
-		[ history ]
-	);
+
+	const openModal = () => setShowAddPageModal( true );
+	const closeModal = () => setShowAddPageModal( false );
+	const handleNewPage = ( { type, id } ) => {
+		history.push( {
+			postId: id,
+			postType: type,
+			canvas: 'edit',
+		} );
+		closeModal();
+	};
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
@@ -430,7 +410,6 @@ export default function PagePages() {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
-				supportedLayouts={ SUPPORTED_LAYOUTS }
 			/>
 		</Page>
 	);

package/src/components/page-patterns/delete-category-menu-item.js

@@ -90,6 +90,13 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 				onCancel={ () => setIsModalOpen( false ) }
 				confirmButtonText={ __( 'Delete' ) }
 				className="edit-site-patterns__delete-modal"
+				title={ sprintf(
+					// translators: %s: The pattern category's name.
+					__( 'Delete "%s"?' ),
+					decodeEntities( category.label )
+				) }
+				size="medium"
+				__experimentalHideHeader={ false }
 			>
 				{ sprintf(
 					// translators: %s: The pattern category's name.

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

@@ -20,11 +20,7 @@ import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	DataViews,
-	sortByTextFields,
-	getPaginationResults,
-} from '@wordpress/dataviews';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import {
 	Icon,
 	header,
@@ -41,12 +37,13 @@ import { usePrevious } from '@wordpress/compose';
 import Page from '../page';
 import {
 	LAYOUT_GRID,
+	LAYOUT_TABLE,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	ENUMERATION_TYPE,
-	OPERATOR_IN,
+	OPERATOR_IS,
 } from '../../utils/constants';
 import {
 	exportJSONaction,
@@ -69,6 +66,9 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 const templatePartIcons = { header, footer, uncategorized };
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
@@ -151,6 +151,7 @@ function Preview( { item, categoryId, viewType } ) {
 		postId: isUserPattern ? item.id : item.name,
 		categoryId,
 		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+		canvas: 'edit',
 	} );
 
 	return (
@@ -175,7 +176,12 @@ function Preview( { item, categoryId, viewType } ) {
 				>
 					{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 					{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+					{ ! isEmpty && (
+						<BlockPreview
+							blocks={ item.blocks }
+							viewportWidth={ item.viewportWidth }
+						/>
+					) }
 				</PreviewWrapper>
 			</div>
 			{ ariaDescriptions.map( ( ariaDescription, index ) => (
@@ -201,6 +207,7 @@ function Title( { item, categoryId } ) {
 		postId: isUserPattern ? item.id : item.name,
 		categoryId,
 		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+		canvas: 'edit',
 	} );
 	if ( ! isUserPattern && templatePartIcons[ categoryId ] ) {
 		itemIcon = templatePartIcons[ categoryId ];
@@ -296,7 +303,6 @@ export default function DataviewsPatterns() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				getValue: ( { item } ) => item.title,
 				render: ( { item } ) => (
 					<Title item={ item } categoryId={ categoryId } />
 				),
@@ -323,7 +329,7 @@ export default function DataviewsPatterns() {
 				type: ENUMERATION_TYPE,
 				elements: SYNC_FILTERS,
 				filterBy: {
-					operators: [ OPERATOR_IN ],
+					operators: [ OPERATOR_IS ],
 					isPrimary: true,
 				},
 				enableSorting: false,
@@ -338,27 +344,12 @@ export default function DataviewsPatterns() {
 		}
 	}, [ 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,
-		} );
+		// Since filters are applied server-side,
+		// we need to remove them from the view
+		const viewWithoutFilters = { ...view };
+		delete viewWithoutFilters.search;
+		viewWithoutFilters.filters = [];
+		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields ] );
 
 	const actions = useMemo(
@@ -414,7 +405,7 @@ export default function DataviewsPatterns() {
 					view={ view }
 					onChangeView={ onChangeView }
 					deferredRendering
-					supportedLayouts={ [ LAYOUT_GRID ] }
+					supportedLayouts={ [ LAYOUT_GRID, LAYOUT_TABLE ] }
 				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>

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

@@ -1,8 +1,16 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import removeAccents from 'remove-accents';
-import { noCase } from 'change-case';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { extractWords, getNormalizedSearchTerms, normalizeString } = unlock(
+	blockEditorPrivateApis
+);
 
 /**
  * Internal dependencies
@@ -20,59 +28,6 @@ const defaultGetDescription = ( item ) => item.description || '';
 const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultHasCategory = () => false;
 
-/**
- * Extracts words from an input string.
- *
- * @param {string} input The input string.
- *
- * @return {Array} Words, extracted from the input string.
- */
-function extractWords( input = '' ) {
-	return noCase( input, {
-		splitRegexp: [
-			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
-			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
-		],
-		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
-	} )
-		.split( ' ' )
-		.filter( Boolean );
-}
-
-/**
- * Sanitizes the search input string.
- *
- * @param {string} input The search input to normalize.
- *
- * @return {string} The normalized search input.
- */
-function normalizeSearchInput( input = '' ) {
-	// Disregard diacritics.
-	//  Input: "média"
-	input = removeAccents( input );
-
-	// Accommodate leading slash, matching autocomplete expectations.
-	//  Input: "/media"
-	input = input.replace( /^\//, '' );
-
-	// Lowercase.
-	//  Input: "MEDIA"
-	input = input.toLowerCase();
-
-	return input;
-}
-
-/**
- * Converts the search term into a list of normalized terms.
- *
- * @param {string} input The search term to normalize.
- *
- * @return {string[]} The normalized list of search terms.
- */
-export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
-};
-
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
 	return unmatchedTerms.filter(
 		( term ) =>
@@ -162,8 +117,8 @@ function getItemSearchRank( item, searchTerm, config ) {
 	const description = getDescription( item );
 	const keywords = getKeywords( item );
 
-	const normalizedSearchInput = normalizeSearchInput( searchTerm );
-	const normalizedTitle = normalizeSearchInput( title );
+	const normalizedSearchInput = normalizeString( searchTerm );
+	const normalizedTitle = normalizeString( title );
 
 	// Prefers exact matches
 	// Then prefers if the beginning of the title matches the search term

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

@@ -50,7 +50,8 @@ const templatePartToPattern = ( templatePart ) => ( {
 
 const selectTemplatePartsAsPatterns = createSelector(
 	( select, categoryId, search = '' ) => {
-		const { getEntityRecords, getIsResolving } = select( coreStore );
+		const { getEntityRecords, isResolving: isResolvingSelector } =
+			select( coreStore );
 		const { __experimentalGetDefaultTemplatePartAreas } =
 			select( editorStore );
 		const query = { per_page: -1 };
@@ -78,7 +79,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 			);
 		};
 
-		const isResolving = getIsResolving( 'getEntityRecords', [
+		const isResolving = isResolvingSelector( 'getEntityRecords', [
 			'postType',
 			TEMPLATE_PART_POST_TYPE,
 			query,
@@ -99,7 +100,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 				per_page: -1,
 			}
 		),
-		select( coreStore ).getIsResolving( 'getEntityRecords', [
+		select( coreStore ).isResolving( 'getEntityRecords', [
 			'postType',
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 },
@@ -111,7 +112,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 const selectThemePatterns = createSelector(
 	( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
-		const { getIsResolving } = select( coreStore );
+		const { isResolving: isResolvingSelector } = select( coreStore );
 		const settings = getSettings();
 		const blockPatterns =
 			settings.__experimentalAdditionalBlockPatterns ??
@@ -137,11 +138,14 @@ const selectThemePatterns = createSelector(
 					__unstableSkipMigrationLogs: true,
 				} ),
 			} ) );
-		return { patterns, isResolving: getIsResolving( 'getBlockPatterns' ) };
+		return {
+			patterns,
+			isResolving: isResolvingSelector( 'getBlockPatterns' ),
+		};
 	},
 	( select ) => [
 		select( coreStore ).getBlockPatterns(),
-		select( coreStore ).getIsResolving( 'getBlockPatterns' ),
+		select( coreStore ).isResolving( 'getBlockPatterns' ),
 		unlock( select( editSiteStore ) ).getSettings(),
 	]
 );
@@ -228,8 +232,11 @@ const convertPatternPostToItem = ( patternPost, categories ) => ( {
 
 const selectUserPatterns = createSelector(
 	( select, syncStatus, search = '' ) => {
-		const { getEntityRecords, getIsResolving, getUserPatternCategories } =
-			select( coreStore );
+		const {
+			getEntityRecords,
+			isResolving: isResolvingSelector,
+			getUserPatternCategories,
+		} = select( coreStore );
 
 		const query = { per_page: -1 };
 		const patternPosts = getEntityRecords(
@@ -248,7 +255,7 @@ const selectUserPatterns = createSelector(
 			  )
 			: EMPTY_PATTERN_LIST;
 
-		const isResolving = getIsResolving( 'getEntityRecords', [
+		const isResolving = isResolvingSelector( 'getEntityRecords', [
 			'postType',
 			PATTERN_TYPES.user,
 			query,
@@ -277,7 +284,7 @@ const selectUserPatterns = createSelector(
 		select( coreStore ).getEntityRecords( 'postType', PATTERN_TYPES.user, {
 			per_page: -1,
 		} ),
-		select( coreStore ).getIsResolving( 'getEntityRecords', [
+		select( coreStore ).isResolving( 'getEntityRecords', [
 			'postType',
 			PATTERN_TYPES.user,
 			{ per_page: -1 },