@wordpress/edit-site 5.18.0 → 5.19.0

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

@@ -211,11 +211,7 @@
 	}
 
 	.edit-site-patterns__pattern-lock-icon {
-		display: inline-flex;
-
-		svg {
-			fill: currentcolor;
-		}
+		fill: currentcolor;
 	}
 }
 

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

@@ -10,14 +10,13 @@ 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,
+} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { searchItems } from './search-items';
 import { store as editSiteStore } from '../../store';
@@ -50,7 +49,7 @@ const selectTemplatePartsAsPatterns = (
 	const { __experimentalGetDefaultTemplatePartAreas } = select( editorStore );
 	const query = { per_page: -1 };
 	const rawTemplateParts =
-		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
+		getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
 		EMPTY_PATTERN_LIST;
 	const templateParts = rawTemplateParts.map( ( templatePart ) =>
 		templatePartToPattern( templatePart )
@@ -87,7 +86,7 @@ const selectTemplatePartsAsPatterns = (
 	return { patterns, isResolving };
 };
 
-const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
+const selectThemePatterns = ( select ) => {
 	const { getSettings } = unlock( select( editSiteStore ) );
 	const settings = getSettings();
 	const blockPatterns =
@@ -96,24 +95,41 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 
 	const restBlockPatterns = select( coreStore ).getBlockPatterns();
 
-	let patterns = [
+	const patterns = [
 		...( blockPatterns || [] ),
 		...( restBlockPatterns || [] ),
 	]
 		.filter(
-			( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )
+			( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source )
 		)
 		.filter( filterOutDuplicatesByName )
 		.filter( ( pattern ) => pattern.inserter !== false )
 		.map( ( pattern ) => ( {
 			...pattern,
 			keywords: pattern.keywords || [],
-			type: 'pattern',
+			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 || [] ) ];
+
+	if ( syncStatus ) {
+		patterns = patterns.filter(
+			( pattern ) => pattern.syncStatus === syncStatus
+		);
+	}
+
 	if ( categoryId ) {
 		patterns = searchItems( patterns, search, {
 			categoryId,
@@ -125,35 +141,49 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
 		} );
 	}
-
 	return { patterns, isResolving: false };
 };
 
-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 { getEntityRecords, getIsResolving, getUserPatternCategories } =
+		select( coreStore );
 
 	const query = { per_page: -1 };
-	const records = getEntityRecords( 'postType', USER_PATTERNS, query );
-
+	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 ) => reusableBlockToPattern( record ) )
+		? records.map( ( record ) =>
+				patternBlockToPattern( record, categories )
+		  )
 		: EMPTY_PATTERN_LIST;
+
 	const isResolving = getIsResolving( 'getEntityRecords', [
 		'postType',
-		USER_PATTERNS,
+		PATTERN_TYPES.user,
 		query,
 	] );
 
@@ -170,24 +200,28 @@ const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
 		hasCategory: () => true,
 	} );
 
-	return { patterns, isResolving };
+	return { patterns, isResolving, categories: userPatternCategories };
 };
 
 export const usePatterns = (
 	categoryType,
 	categoryId,
-	{ search = '', syncStatus }
+	{ search = '', syncStatus } = {}
 ) => {
 	return useSelect(
 		( select ) => {
-			if ( categoryType === TEMPLATE_PARTS ) {
+			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 ) {
+			} else if ( categoryType === PATTERN_TYPES.theme ) {
+				return selectPatterns( select, {
+					categoryId,
+					search,
+					syncStatus,
+				} );
+			} else if ( categoryType === PATTERN_TYPES.user ) {
 				return selectUserPatterns( select, { search, syncStatus } );
 			}
 			return { patterns: EMPTY_PATTERN_LIST, isResolving: false };

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/sidebar-edit-mode/page-panels/edit-template.js

@@ -2,21 +2,31 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
-import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import SwapTemplateButton from './swap-template-button';
+import ResetDefaultTemplate from './reset-default-template';
+
+const POPOVER_PROPS = {
+	className: 'edit-site-page-panels-edit-template__dropdown',
+	placement: 'bottom-start',
+};
 
 export default function EditTemplate() {
-	const { context, hasResolved, template } = useSelect( ( select ) => {
+	const { hasResolved, template } = useSelect( ( select ) => {
 		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
 			select( editSiteStore );
 		const { getEditedEntityRecord, hasFinishedResolution } =
@@ -39,39 +49,43 @@ export default function EditTemplate() {
 
 	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
-	const blockContext = useMemo(
-		() => ( { ...context, postType: null, postId: null } ),
-		[ context ]
-	);
-
-	const blocks = useMemo(
-		() =>
-			template.blocks ??
-			( template.content && typeof template.content !== 'function'
-				? parse( template.content )
-				: [] ),
-		[ template.blocks, template.content ]
-	);
-
 	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
-		<VStack>
-			<div>{ decodeEntities( template.title ) }</div>
-			<div className="edit-site-page-panels__edit-template-preview">
-				<BlockContextProvider value={ blockContext }>
-					<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />
-				</BlockContextProvider>
-			</div>
-			<Button
-				className="edit-site-page-panels__edit-template-button"
-				variant="secondary"
-				onClick={ () => setHasPageContentFocus( false ) }
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Template' ) }
+			</Text>
+			<DropdownMenu
+				popoverProps={ POPOVER_PROPS }
+				focusOnMount
+				toggleProps={ {
+					variant: 'tertiary',
+					className: 'edit-site-summary-field__trigger',
+				} }
+				label={ __( 'Template options' ) }
+				text={ decodeEntities( template.title ) }
+				icon={ null }
 			>
-				{ __( 'Edit template' ) }
-			</Button>
-		</VStack>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									setHasPageContentFocus( false );
+									onClose();
+								} }
+							>
+								{ __( 'Edit template' ) }
+							</MenuItem>
+							<SwapTemplateButton onClick={ onClose } />
+						</MenuGroup>
+						<ResetDefaultTemplate onClick={ onClose } />
+					</>
+				) }
+			</DropdownMenu>
+		</HStack>
 	);
 }

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

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export function useEditedPostContext() {
+	return useSelect(
+		( select ) => select( editSiteStore ).getEditedPostContext(),
+		[]
+	);
+}
+
+export function useIsPostsPage() {
+	const { postId } = useEditedPostContext();
+	return useSelect(
+		( select ) =>
+			+postId ===
+			select( coreStore ).getEntityRecord( 'root', 'site' )
+				?.page_for_posts,
+		[ postId ]
+	);
+}
+
+function useTemplates() {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+				post_type: 'page',
+			} ),
+		[]
+	);
+}
+
+export function useAvailableTemplates() {
+	const currentTemplateSlug = useCurrentTemplateSlug();
+	const isPostsPage = useIsPostsPage();
+	const templates = useTemplates();
+	return useMemo(
+		() =>
+			// The posts page template cannot be changed.
+			! isPostsPage &&
+			templates?.filter(
+				( template ) =>
+					template.is_custom &&
+					template.slug !== currentTemplateSlug &&
+					!! template.content.raw // Skip empty templates.
+			),
+		[ templates, currentTemplateSlug, isPostsPage ]
+	);
+}
+
+export function useCurrentTemplateSlug() {
+	const { postType, postId } = useEditedPostContext();
+	const templates = useTemplates();
+	const entityTemplate = useSelect(
+		( select ) => {
+			const post = select( coreStore ).getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			return post?.template;
+		},
+		[ postType, postId ]
+	);
+
+	if ( ! entityTemplate ) {
+		return;
+	}
+	// If a page has a `template` set and is not included in the list
+	// of the theme's templates, do not return it, in order to resolve
+	// to the current theme's default template.
+	return templates?.find( ( template ) => template.slug === entityTemplate )
+		?.slug;
+}

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

@@ -20,7 +20,6 @@ import { store as editSiteStore } from '../../../store';
 import SidebarCard from '../sidebar-card';
 import PageContent from './page-content';
 import PageSummary from './page-summary';
-import EditTemplate from './edit-template';
 
 export default function PagePanels() {
 	const { id, type, hasResolved, status, date, password, title, modified } =
@@ -81,9 +80,6 @@ export default function PagePanels() {
 			<PanelBody title={ __( 'Content' ) }>
 				<PageContent />
 			</PanelBody>
-			<PanelBody title={ __( 'Template' ) }>
-				<EditTemplate />
-			</PanelBody>
 		</>
 	);
 }

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

@@ -7,6 +7,7 @@ import { __experimentalVStack as VStack } from '@wordpress/components';
  */
 import PageStatus from './page-status';
 import PublishDate from './publish-date';
+import EditTemplate from './edit-template';
 
 export default function PageSummary( {
 	status,
@@ -30,6 +31,7 @@ export default function PageSummary( {
 				postId={ postId }
 				postType={ postType }
 			/>
+			<EditTemplate />
 		</VStack>
 	);
 }

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecord } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useCurrentTemplateSlug,
+	useEditedPostContext,
+	useIsPostsPage,
+} from './hooks';
+import { store as editSiteStore } from '../../../store';
+
+export default function ResetDefaultTemplate( { onClick } ) {
+	const currentTemplateSlug = useCurrentTemplateSlug();
+	const isPostsPage = useIsPostsPage();
+	const { postType, postId } = useEditedPostContext();
+	const entity = useEntityRecord( 'postType', postType, postId );
+	const { setPage } = useDispatch( editSiteStore );
+	// The default template in a post is indicated by an empty string.
+	if ( ! currentTemplateSlug || isPostsPage ) {
+		return null;
+	}
+	return (
+		<MenuGroup>
+			<MenuItem
+				onClick={ async () => {
+					entity.edit( { template: '' }, { undoIgnore: true } );
+					onClick();
+					await setPage( {
+						context: { postType, postId },
+					} );
+				} }
+			>
+				{ __( 'Reset' ) }
+			</MenuItem>
+		</MenuGroup>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -1,12 +1,37 @@
-.edit-site-page-panels__edit-template-preview {
-	border: 1px solid $gray-200;
-	height: 200px;
-	max-height: 200px;
-	overflow: hidden;
+.edit-site-swap-template-modal {
+	z-index: z-index(".edit-site-swap-template-modal");
 }
 
-.edit-site-page-panels__edit-template-button {
-	justify-content: center;
+.edit-site-page-panels__swap-template__confirm-modal__actions {
+	margin-top: $grid-unit-30;
+}
+
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+	}
+
+	.block-editor-block-patterns-list__item {
+		// Avoid to override the BlockPatternList component
+		// default hover and focus styles.
+		&:not(:focus):not(:hover) .block-editor-block-preview__container {
+			box-shadow: 0 0 0 1px $gray-300;
+		}
+	}
 }
 
 .edit-site-change-status__content {
@@ -36,15 +61,21 @@
 
 .edit-site-summary-field {
 	.components-dropdown {
-		flex-grow: 1;
+		width: 70%;
 	}
 
 	.edit-site-summary-field__trigger {
-		width: 100%;
+		max-width: 100%;
+
+		// Truncate
+		display: block;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.edit-site-summary-field__label {
 		width: 30%;
 	}
 }
-

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

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useMemo, useState, useCallback } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecord } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { useAvailableTemplates, useEditedPostContext } from './hooks';
+
+export default function SwapTemplateButton( { onClick } ) {
+	const [ showModal, setShowModal ] = useState( false );
+	const availableTemplates = useAvailableTemplates();
+	const onClose = useCallback( () => {
+		setShowModal( false );
+	}, [] );
+	const { postType, postId } = useEditedPostContext();
+	const entitiy = useEntityRecord( 'postType', postType, postId );
+	const { setPage } = useDispatch( editSiteStore );
+	if ( ! availableTemplates?.length ) {
+		return null;
+	}
+	const onTemplateSelect = async ( template ) => {
+		entitiy.edit( { template: template.name }, { undoIgnore: true } );
+		await setPage( {
+			context: { postType, postId },
+		} );
+		onClose(); // Close the template suggestions modal first.
+		onClick();
+	};
+	return (
+		<>
+			<MenuItem onClick={ () => setShowModal( true ) }>
+				{ __( 'Swap template' ) }
+			</MenuItem>
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ onClose }
+					overlayClassName="edit-site-swap-template-modal"
+					isFullScreen
+				>
+					<div className="edit-site-page-panels__swap-template__modal-content">
+						<TemplatesList onSelect={ onTemplateSelect } />
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function TemplatesList( { onSelect } ) {
+	const availableTemplates = useAvailableTemplates();
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+	const shownTemplates = useAsyncList( templatesAsPatterns );
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ templatesAsPatterns }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+		/>
+	);
+}