@wordpress/edit-site 5.19.0 → 5.19.2

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
 /**
  * WordPress dependencies
  */
@@ -16,6 +21,8 @@ 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';
 import { searchItems } from './search-items';
@@ -32,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 ),
@@ -41,108 +48,136 @@ 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_PART_POST_TYPE, 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',
+			TEMPLATE_PART_POST_TYPE,
+			query,
+		] );
 
-	const isResolving = getIsResolving( 'getEntityRecords', [
-		'postType',
-		'wp_template_part',
-		query,
-	] );
+		const patterns = searchItems( templateParts, search, {
+			categoryId,
+			hasCategory: templatePartHasCategory,
+		} );
 
-	const patterns = searchItems( templateParts, search, {
-		categoryId,
-		hasCategory: templatePartHasCategory,
-	} );
+		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(),
+	]
+);
 
-	return { patterns, isResolving };
-};
+const selectThemePatterns = createSelector(
+	( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+		const blockPatterns =
+			settings.__experimentalAdditionalBlockPatterns ??
+			settings.__experimentalBlockPatterns;
 
-const selectThemePatterns = ( 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();
+		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,
+				} ),
+			} ) );
 
-	const patterns = [
-		...( blockPatterns || [] ),
-		...( restBlockPatterns || [] ),
+		return { patterns, isResolving: false };
+	},
+	( select ) => [
+		select( coreStore ).getBlockPatterns(),
+		unlock( select( editSiteStore ) ).getSettings(),
 	]
-		.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 };
-};
-const selectPatterns = (
-	select,
-	{ categoryId, search = '', syncStatus } = {}
-) => {
-	const { patterns: themePatterns } = selectThemePatterns( select );
-	const { patterns: userPatterns } = selectUserPatterns( select );
+);
 
-	let patterns = [ ...( themePatterns || [] ), ...( userPatterns || [] ) ];
+const selectPatterns = createSelector(
+	( select, categoryId, syncStatus, search = '' ) => {
+		const { patterns: themePatterns } = selectThemePatterns( select );
+		const { patterns: userPatterns } = selectUserPatterns( select );
 
-	if ( syncStatus ) {
-		patterns = patterns.filter(
-			( pattern ) => pattern.syncStatus === syncStatus
-		);
-	}
+		let patterns = [
+			...( themePatterns || [] ),
+			...( userPatterns || [] ),
+		];
 
-	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 };
-};
+		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 patternBlockToPattern = ( patternBlock, categories ) => ( {
 	blocks: parse( patternBlock.content.raw, {
@@ -164,44 +199,65 @@ const patternBlockToPattern = ( patternBlock, categories ) => ( {
 	patternBlock,
 } );
 
-const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
-	const { getEntityRecords, getIsResolving, getUserPatternCategories } =
-		select( coreStore );
+const selectUserPatterns = createSelector(
+	( select, syncStatus, search = '' ) => {
+		const { getEntityRecords, getIsResolving, getUserPatternCategories } =
+			select( coreStore );
 
-	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;
-
-	const isResolving = getIsResolving( 'getEntityRecords', [
-		'postType',
-		PATTERN_TYPES.user,
-		query,
-	] );
-
-	if ( syncStatus ) {
-		patterns = patterns.filter(
-			( pattern ) => pattern.syncStatus === syncStatus
+		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;
 
-	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,
-	} );
+		const isResolving = getIsResolving( 'getEntityRecords', [
+			'postType',
+			PATTERN_TYPES.user,
+			query,
+		] );
 
-	return { patterns, isResolving, categories: userPatternCategories };
-};
+		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,
+		} );
+
+		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,
@@ -211,20 +267,20 @@ export const usePatterns = (
 	return useSelect(
 		( select ) => {
 			if ( categoryType === TEMPLATE_PART_POST_TYPE ) {
-				return selectTemplatePartsAsPatterns( select, {
+				return selectTemplatePartsAsPatterns(
+					select,
 					categoryId,
-					search,
-				} );
+					search
+				);
 			} else if ( categoryType === PATTERN_TYPES.theme ) {
-				return selectPatterns( select, {
-					categoryId,
-					search,
-					syncStatus,
-				} );
+				return selectPatterns( select, categoryId, syncStatus, search );
 			} else if ( categoryType === PATTERN_TYPES.user ) {
-				return selectUserPatterns( select, { search, syncStatus } );
+				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-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,

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,6 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editSiteStore } from '../../../store';
 import SwapTemplateButton from './swap-template-button';
 import ResetDefaultTemplate from './reset-default-template';
+import { unlock } from '../../../lock-unlock';
 
 const POPOVER_PROPS = {
 	className: 'edit-site-page-panels-edit-template__dropdown',
@@ -26,28 +28,40 @@ const POPOVER_PROPS = {
 };
 
 export default function EditTemplate() {
-	const { hasResolved, template } = useSelect( ( select ) => {
-		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
-			select( editSiteStore );
-		const { getEditedEntityRecord, hasFinishedResolution } =
-			select( coreStore );
-		const _context = getEditedPostContext();
-		const queryArgs = [
-			'postType',
-			getEditedPostType(),
-			getEditedPostId(),
-		];
-		return {
-			context: _context,
-			hasResolved: hasFinishedResolution(
-				'getEditedEntityRecord',
-				queryArgs
-			),
-			template: getEditedEntityRecord( ...queryArgs ),
-		};
-	}, [] );
+	const { hasResolved, template, isTemplateHidden } = useSelect(
+		( select ) => {
+			const { getEditedPostContext, getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getCanvasMode, getPageContentFocusType } = unlock(
+				select( editSiteStore )
+			);
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const _context = getEditedPostContext();
+			const queryArgs = [
+				'postType',
+				getEditedPostType(),
+				getEditedPostId(),
+			];
+			return {
+				context: _context,
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				template: getEditedEntityRecord( ...queryArgs ),
+				isTemplateHidden:
+					getCanvasMode() === 'edit' &&
+					getPageContentFocusType() === 'hideTemplate',
+			};
+		},
+		[]
+	);
 
 	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+	// Disable reason: `useDispatch` can't be called conditionally.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -83,6 +97,20 @@ export default function EditTemplate() {
 							<SwapTemplateButton onClick={ onClose } />
 						</MenuGroup>
 						<ResetDefaultTemplate onClick={ onClose } />
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								onClick={ () => {
+									setPageContentFocusType(
+										isTemplateHidden
+											? 'disableTemplate'
+											: 'hideTemplate'
+									);
+								} }
+							>
+								{ __( 'Template preview' ) }
+							</MenuItem>
+						</MenuGroup>
 					</>
 				) }
 			</DropdownMenu>