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

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

@@ -2,76 +2,118 @@
  * 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';
+import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import SwapTemplateButton from './swap-template-button';
+import ResetDefaultTemplate from './reset-default-template';
+import { unlock } from '../../../lock-unlock';
 
-export default function EditTemplate() {
-	const { context, 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 { setHasPageContentFocus } = useDispatch( editSiteStore );
+const POPOVER_PROPS = {
+	className: 'edit-site-page-panels-edit-template__dropdown',
+	placement: 'bottom-start',
+};
 
-	const blockContext = useMemo(
-		() => ( { ...context, postType: null, postId: null } ),
-		[ context ]
+export default function EditTemplate() {
+	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 blocks = useMemo(
-		() =>
-			template.blocks ??
-			( template.content && typeof template.content !== 'function'
-				? parse( template.content )
-				: [] ),
-		[ template.blocks, template.content ]
-	);
+	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;
 	}
 
 	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 } />
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								onClick={ () => {
+									setPageContentFocusType(
+										isTemplateHidden
+											? 'disableTemplate'
+											: 'hideTemplate'
+									);
+								} }
+							>
+								{ __( 'Template preview' ) }
+							</MenuItem>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</HStack>
 	);
 }

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

@@ -0,0 +1,88 @@
+/**
+ * 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';
+import { TEMPLATE_POST_TYPE } from '../../../utils/constants';
+
+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',
+				TEMPLATE_POST_TYPE,
+				{
+					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,11 +61,18 @@
 
 .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 {
@@ -48,3 +80,8 @@
 	}
 }
 
+.edit-site-page-panels-edit-template__dropdown {
+	.components-popover__content {
+		min-width: 240px;
+	}
+}

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 }
+		/>
+	);
+}

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -17,12 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
-
-const entityLabels = {
-	wp_navigation: __( 'Navigation' ),
-	wp_block: __( 'Pattern' ),
-	wp_template: __( 'Template' ),
-};
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';
 
 const SettingsHeader = ( { sidebarName } ) => {
 	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
@@ -35,7 +30,9 @@ const SettingsHeader = ( { sidebarName } ) => {
 		};
 	} );
 
-	const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
+	const entityLabel =
+		POST_TYPE_LABELS[ entityType ] ||
+		POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ];
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { PanelRow, PanelBody } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
 import { navigation, symbol } from '@wordpress/icons';
 
 /**
@@ -17,6 +16,8 @@ import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
+import PatternCategories from './pattern-categories';
+import { PATTERN_TYPES } from '../../../utils/constants';
 
 const CARD_ICONS = {
 	wp_block: symbol,
@@ -24,24 +25,29 @@ const CARD_ICONS = {
 };
 
 export default function TemplatePanel() {
-	const { title, description, icon, record } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
+	const { title, description, icon, record, postType } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
 
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
-		const _record = getEditedEntityRecord( 'postType', postType, postId );
-		const info = getTemplateInfo( _record );
+			const type = getEditedPostType();
+			const postId = getEditedPostId();
+			const _record = getEditedEntityRecord( 'postType', type, postId );
+			const info = getTemplateInfo( _record );
 
-		return {
-			title: info.title,
-			description: info.description,
-			icon: info.icon,
-			record: _record,
-		};
-	}, [] );
+			return {
+				title: info.title,
+				description: info.description,
+				icon: info.icon,
+				record: _record,
+				postType: type,
+			};
+		},
+		[]
+	);
 
 	if ( ! title && ! description ) {
 		return null;
@@ -58,12 +64,10 @@ export default function TemplatePanel() {
 			>
 				<TemplateAreas />
 			</SidebarCard>
-			<PanelRow
-				header={ __( 'Editing history' ) }
-				className="edit-site-template-revisions"
-			>
-				<LastRevision />
-			</PanelRow>
+			<LastRevision />
+			{ postType === PATTERN_TYPES.user && (
+				<PatternCategories post={ record } />
+			) }
 		</PanelBody>
 	);
 }

package/src/components/sidebar-edit-mode/template-panel/last-revision.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { sprintf, _n } from '@wordpress/i18n';
+import { Button, PanelRow } from '@wordpress/components';
+import { sprintf, _n, __ } from '@wordpress/i18n';
 import { backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { PostTypeSupportCheck } from '@wordpress/editor';
@@ -47,20 +47,24 @@ const PostLastRevision = () => {
 
 	return (
 		<PostLastRevisionCheck>
-			<Button
-				href={ addQueryArgs( 'revision.php', {
-					revision: lastRevisionId,
-					gutenberg: true,
-				} ) }
-				className="edit-site-template-last-revision__title"
-				icon={ backup }
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
 			>
-				{ sprintf(
-					/* translators: %d: number of revisions */
-					_n( '%d Revision', '%d Revisions', revisionsCount ),
-					revisionsCount
-				) }
-			</Button>
+				<Button
+					href={ addQueryArgs( 'revision.php', {
+						revision: lastRevisionId,
+					} ) }
+					className="edit-site-template-last-revision__title"
+					icon={ backup }
+				>
+					{ sprintf(
+						/* translators: %d: number of revisions */
+						_n( '%d Revision', '%d Revisions', revisionsCount ),
+						revisionsCount
+					) }
+				</Button>
+			</PanelRow>
 		</PostLastRevisionCheck>
 	);
 };