@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
 /**
  * WordPress dependencies
  */
@@ -10,14 +15,15 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import { filterOutDuplicatesByName } from './utils';
 import {
-	CORE_PATTERN_SOURCES,
-	PATTERNS,
-	SYNC_TYPES,
-	TEMPLATE_PARTS,
-	USER_PATTERNS,
-	filterOutDuplicatesByName,
-} from './utils';
+	PATTERN_CORE_SOURCES,
+	PATTERN_TYPES,
+	PATTERN_SYNC_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { searchItems } from './search-items';
 import { store as editSiteStore } from '../../store';
@@ -33,7 +39,7 @@ const templatePartToPattern = ( templatePart ) => ( {
 	} ),
 	categories: [ templatePart.area ],
 	description: templatePart.description || '',
-	isCustom: templatePart.source === 'custom',
+	isCustom: templatePart.source === TEMPLATE_ORIGINS.custom,
 	keywords: templatePart.keywords || [],
 	id: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
@@ -42,155 +48,239 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
-const selectTemplatePartsAsPatterns = (
-	select,
-	{ categoryId, search = '' } = {}
-) => {
-	const { getEntityRecords, getIsResolving } = select( coreStore );
-	const { __experimentalGetDefaultTemplatePartAreas } = select( editorStore );
-	const query = { per_page: -1 };
-	const rawTemplateParts =
-		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
-		EMPTY_PATTERN_LIST;
-	const templateParts = rawTemplateParts.map( ( templatePart ) =>
-		templatePartToPattern( templatePart )
-	);
+const selectTemplatePartsAsPatterns = createSelector(
+	( select, categoryId, search = '' ) => {
+		const { getEntityRecords, getIsResolving } = select( coreStore );
+		const { __experimentalGetDefaultTemplatePartAreas } =
+			select( editorStore );
+		const query = { per_page: -1 };
+		const rawTemplateParts =
+			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
-	// parts can be treated as uncategorized.
-	const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
-	const templatePartAreas = knownAreas.map( ( area ) => area.area );
+		// 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
+		// parts can be treated as uncategorized.
+		const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+		const templatePartAreas = knownAreas.map( ( area ) => area.area );
 
-	const templatePartHasCategory = ( item, category ) => {
-		if ( category !== 'uncategorized' ) {
-			return item.templatePart.area === category;
-		}
+		const templatePartHasCategory = ( item, category ) => {
+			if ( category !== TEMPLATE_PART_AREA_DEFAULT_CATEGORY ) {
+				return item.templatePart.area === category;
+			}
 
-		return (
-			item.templatePart.area === category ||
-			! templatePartAreas.includes( item.templatePart.area )
-		);
-	};
+			return (
+				item.templatePart.area === category ||
+				! templatePartAreas.includes( item.templatePart.area )
+			);
+		};
 
-	const isResolving = getIsResolving( 'getEntityRecords', [
-		'postType',
-		'wp_template_part',
-		query,
-	] );
+		const isResolving = getIsResolving( 'getEntityRecords', [
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			query,
+		] );
 
-	const patterns = searchItems( templateParts, search, {
-		categoryId,
-		hasCategory: templatePartHasCategory,
-	} );
+		const patterns = searchItems( templateParts, search, {
+			categoryId,
+			hasCategory: templatePartHasCategory,
+		} );
 
-	return { patterns, isResolving };
-};
+		return { patterns, isResolving };
+	},
+	( select ) => [
+		select( coreStore ).getEntityRecords(
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			{
+				per_page: -1,
+			}
+		),
+		select( coreStore ).getIsResolving( 'getEntityRecords', [
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			{ per_page: -1 },
+		] ),
+		select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+	]
+);
 
-const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
-	const { getSettings } = unlock( select( editSiteStore ) );
-	const settings = getSettings();
-	const blockPatterns =
-		settings.__experimentalAdditionalBlockPatterns ??
-		settings.__experimentalBlockPatterns;
+const selectThemePatterns = createSelector(
+	( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+		const blockPatterns =
+			settings.__experimentalAdditionalBlockPatterns ??
+			settings.__experimentalBlockPatterns;
 
-	const restBlockPatterns = select( coreStore ).getBlockPatterns();
+		const restBlockPatterns = select( coreStore ).getBlockPatterns();
 
-	let patterns = [
-		...( blockPatterns || [] ),
-		...( restBlockPatterns || [] ),
+		const patterns = [
+			...( blockPatterns || [] ),
+			...( restBlockPatterns || [] ),
+		]
+			.filter(
+				( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source )
+			)
+			.filter( filterOutDuplicatesByName )
+			.filter( ( pattern ) => pattern.inserter !== false )
+			.map( ( pattern ) => ( {
+				...pattern,
+				keywords: pattern.keywords || [],
+				type: PATTERN_TYPES.theme,
+				blocks: parse( pattern.content, {
+					__unstableSkipMigrationLogs: true,
+				} ),
+			} ) );
+
+		return { patterns, isResolving: false };
+	},
+	( select ) => [
+		select( coreStore ).getBlockPatterns(),
+		unlock( select( editSiteStore ) ).getSettings(),
 	]
-		.filter(
-			( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )
-		)
-		.filter( filterOutDuplicatesByName )
-		.filter( ( pattern ) => pattern.inserter !== false )
-		.map( ( pattern ) => ( {
-			...pattern,
-			keywords: pattern.keywords || [],
-			type: 'pattern',
-			blocks: parse( pattern.content, {
-				__unstableSkipMigrationLogs: true,
-			} ),
-		} ) );
-
-	if ( categoryId ) {
-		patterns = searchItems( patterns, search, {
-			categoryId,
-			hasCategory: ( item, currentCategory ) =>
-				item.categories?.includes( currentCategory ),
-		} );
-	} else {
-		patterns = searchItems( patterns, search, {
-			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
-		} );
-	}
+);
 
-	return { patterns, isResolving: false };
-};
+const selectPatterns = createSelector(
+	( select, categoryId, syncStatus, search = '' ) => {
+		const { patterns: themePatterns } = selectThemePatterns( select );
+		const { patterns: userPatterns } = selectUserPatterns( select );
+
+		let patterns = [
+			...( themePatterns || [] ),
+			...( userPatterns || [] ),
+		];
+
+		if ( syncStatus ) {
+			patterns = patterns.filter(
+				( pattern ) => pattern.syncStatus === syncStatus
+			);
+		}
+
+		if ( categoryId ) {
+			patterns = searchItems( patterns, search, {
+				categoryId,
+				hasCategory: ( item, currentCategory ) =>
+					item.categories?.includes( currentCategory ),
+			} );
+		} else {
+			patterns = searchItems( patterns, search, {
+				hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+			} );
+		}
+		return { patterns, isResolving: false };
+	},
+	( select ) => [
+		selectThemePatterns( select ),
+		selectUserPatterns( select ),
+	]
+);
 
-const reusableBlockToPattern = ( reusableBlock ) => ( {
-	blocks: parse( reusableBlock.content.raw, {
+const patternBlockToPattern = ( patternBlock, categories ) => ( {
+	blocks: parse( patternBlock.content.raw, {
 		__unstableSkipMigrationLogs: true,
 	} ),
-	categories: reusableBlock.wp_pattern,
-	id: reusableBlock.id,
-	name: reusableBlock.slug,
-	syncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,
-	title: reusableBlock.title.raw,
-	type: reusableBlock.type,
-	reusableBlock,
+	...( patternBlock.wp_pattern_category.length > 0 && {
+		categories: patternBlock.wp_pattern_category.map(
+			( patternCategoryId ) =>
+				categories && categories.get( patternCategoryId )
+					? categories.get( patternCategoryId ).slug
+					: 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,
 } );
 
-const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
-	const { getEntityRecords, getIsResolving } = select( coreStore );
+const selectUserPatterns = createSelector(
+	( select, syncStatus, search = '' ) => {
+		const { getEntityRecords, getIsResolving, getUserPatternCategories } =
+			select( coreStore );
 
-	const query = { per_page: -1 };
-	const records = getEntityRecords( 'postType', USER_PATTERNS, query );
+		const query = { per_page: -1 };
+		const records = getEntityRecords(
+			'postType',
+			PATTERN_TYPES.user,
+			query
+		);
+		const userPatternCategories = getUserPatternCategories();
+		const categories = new Map();
+		userPatternCategories.forEach( ( userCategory ) =>
+			categories.set( userCategory.id, userCategory )
+		);
+		let patterns = records
+			? records.map( ( record ) =>
+					patternBlockToPattern( record, categories )
+			  )
+			: EMPTY_PATTERN_LIST;
 
-	let patterns = records
-		? records.map( ( record ) => reusableBlockToPattern( record ) )
-		: EMPTY_PATTERN_LIST;
-	const isResolving = getIsResolving( 'getEntityRecords', [
-		'postType',
-		USER_PATTERNS,
-		query,
-	] );
+		const isResolving = getIsResolving( 'getEntityRecords', [
+			'postType',
+			PATTERN_TYPES.user,
+			query,
+		] );
 
-	if ( syncStatus ) {
-		patterns = patterns.filter(
-			( pattern ) => pattern.syncStatus === syncStatus
-		);
-	}
+		if ( syncStatus ) {
+			patterns = patterns.filter(
+				( pattern ) => pattern.syncStatus === syncStatus
+			);
+		}
 
-	patterns = searchItems( patterns, search, {
-		// We exit user pattern retrieval early if we aren't in the
-		// catch-all category for user created patterns, so it has
-		// to be in the category.
-		hasCategory: () => true,
-	} );
+		patterns = searchItems( patterns, search, {
+			// We exit user pattern retrieval early if we aren't in the
+			// catch-all category for user created patterns, so it has
+			// to be in the category.
+			hasCategory: () => true,
+		} );
 
-	return { patterns, isResolving };
-};
+		return {
+			patterns,
+			isResolving,
+			categories: userPatternCategories,
+		};
+	},
+	( select ) => [
+		select( coreStore ).getEntityRecords( 'postType', PATTERN_TYPES.user, {
+			per_page: -1,
+		} ),
+		select( coreStore ).getIsResolving( 'getEntityRecords', [
+			'postType',
+			PATTERN_TYPES.user,
+			{ per_page: -1 },
+		] ),
+		select( coreStore ).getUserPatternCategories(),
+	]
+);
 
 export const usePatterns = (
 	categoryType,
 	categoryId,
-	{ search = '', syncStatus }
+	{ search = '', syncStatus } = {}
 ) => {
 	return useSelect(
 		( select ) => {
-			if ( categoryType === TEMPLATE_PARTS ) {
-				return selectTemplatePartsAsPatterns( select, {
+			if ( categoryType === TEMPLATE_PART_POST_TYPE ) {
+				return selectTemplatePartsAsPatterns(
+					select,
 					categoryId,
-					search,
-				} );
-			} else if ( categoryType === PATTERNS ) {
-				return selectThemePatterns( select, { categoryId, search } );
-			} else if ( categoryType === USER_PATTERNS ) {
-				return selectUserPatterns( select, { search, syncStatus } );
+					search
+				);
+			} else if ( categoryType === PATTERN_TYPES.theme ) {
+				return selectPatterns( select, categoryId, syncStatus, search );
+			} else if ( categoryType === PATTERN_TYPES.user ) {
+				return selectUserPatterns( select, syncStatus, search );
 			}
-			return { patterns: EMPTY_PATTERN_LIST, isResolving: false };
+			return {
+				patterns: EMPTY_PATTERN_LIST,
+				isResolving: false,
+			};
 		},
 		[ categoryId, categoryType, search, syncStatus ]
 	);

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

@@ -1,21 +1,2 @@
-export const DEFAULT_CATEGORY = 'my-patterns';
-export const DEFAULT_TYPE = 'wp_block';
-export const PATTERNS = 'pattern';
-export const TEMPLATE_PARTS = 'wp_template_part';
-export const USER_PATTERNS = 'wp_block';
-export const USER_PATTERN_CATEGORY = 'my-patterns';
-
-export const CORE_PATTERN_SOURCES = [
-	'core',
-	'pattern-directory/core',
-	'pattern-directory/featured',
-	'pattern-directory/theme',
-];
-
-export const SYNC_TYPES = {
-	full: 'fully',
-	unsynced: 'unsynced',
-};
-
 export const filterOutDuplicatesByName = ( currentItem, index, items ) =>
 	index === items.findIndex( ( item ) => currentItem.name === item.name );

package/src/components/page-template-parts/add-new-template-part.js

@@ -13,6 +13,7 @@ import { Button } from '@wordpress/components';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -22,7 +23,9 @@ export default function AddNewTemplatePart() {
 			select( editSiteStore ).getSettings();
 		return {
 			canCreate: ! supportsTemplatePartsMode,
-			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+			postType: select( coreStore ).getPostType(
+				TEMPLATE_PART_POST_TYPE
+			),
 		};
 	}, [] );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -45,7 +48,7 @@ export default function AddNewTemplatePart() {
 						setIsModalOpen( false );
 						history.push( {
 							postId: templatePart.id,
-							postType: 'wp_template_part',
+							postType: TEMPLATE_PART_POST_TYPE,
 							canvas: 'edit',
 						} );
 					} }

package/src/components/page-template-parts/index.js

@@ -19,11 +19,12 @@ import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplatePart from './add-new-template-part';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 export default function PageTemplateParts() {
 	const { records: templateParts } = useEntityRecords(
 		'postType',
-		'wp_template_part',
+		TEMPLATE_PART_POST_TYPE,
 		{
 			per_page: -1,
 		}

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

@@ -20,11 +20,12 @@ import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplate from '../add-new-template';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function PageTemplates() {
 	const { records: templates } = useEntityRecords(
 		'postType',
-		'wp_template',
+		TEMPLATE_POST_TYPE,
 		{
 			per_page: -1,
 		}
@@ -79,7 +80,7 @@ export default function PageTemplates() {
 			title={ __( 'Templates' ) }
 			actions={
 				<AddNewTemplate
-					templateType={ 'wp_template' }
+					templateType={ TEMPLATE_POST_TYPE }
 					showIcon={ false }
 					toggleProps={ { variant: 'primary' } }
 				/>

package/src/components/save-hub/index.js

@@ -16,13 +16,14 @@ import { store as noticesStore } from '@wordpress/notices';
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
 const PUBLISH_ON_SAVE_ENTITIES = [
 	{
 		kind: 'postType',
-		name: 'wp_navigation',
+		name: NAVIGATION_POST_TYPE,
 	},
 ];
 

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -3,13 +3,9 @@
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import {
-	useFocusOnMount,
-	useFocusReturn,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -24,20 +20,27 @@ import { unlock } from '../../lock-unlock';
 
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
 	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	// The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
-	const headerFocusReturnRef = useFocusReturn();
-	const contentFocusReturnRef = useFocusReturn();
 
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			setIsListViewOpened( false );
-		}
-	}
+	// When closing the list view, focus should return to the toggle button.
+	const closeListView = useCallback( () => {
+		setIsListViewOpened( false );
+		listViewToggleElement?.focus();
+	}, [ listViewToggleElement, setIsListViewOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeListView();
+			}
+		},
+		[ closeListView ]
+	);
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the dropZoneElement updates.
@@ -68,20 +71,26 @@ export default function ListViewSidebar() {
 		listViewFocusArea.focus();
 	}
 
-	// This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
-	useShortcut( 'core/edit-site/toggle-list-view', () => {
+	const handleToggleListViewShortcut = useCallback( () => {
 		// If the sidebar has focus, it is safe to close.
 		if (
 			sidebarRef.current.contains(
 				sidebarRef.current.ownerDocument.activeElement
 			)
 		) {
-			setIsListViewOpened( false );
-			// If the list view or close button does not have focus, focus should be moved to it.
+			closeListView();
 		} else {
+			// If the list view or close button does not have focus, focus should be moved to it.
 			handleSidebarFocus();
 		}
-	} );
+	}, [ closeListView ] );
+
+	// This only fires when the sidebar is open because of the conditional rendering.
+	// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+	useShortcut(
+		'core/edit-site/toggle-list-view',
+		handleToggleListViewShortcut
+	);
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -90,22 +99,18 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<div
-				className="edit-site-editor__list-view-panel-header"
-				ref={ headerFocusReturnRef }
-			>
+			<div className="edit-site-editor__list-view-panel-header">
 				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
-					onClick={ () => setIsListViewOpened( false ) }
+					onClick={ closeListView }
 					ref={ sidebarCloseButtonRef }
 				/>
 			</div>
 			<div
 				className="edit-site-editor__list-view-panel-content"
 				ref={ useMergeRefs( [
-					contentFocusReturnRef,
 					focusOnMountRef,
 					setDropZoneElement,
 					listViewRef,