@wordpress/edit-site 5.19.2 → 5.20.0

package/src/components/sidebar/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
@@ -27,6 +28,7 @@ import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -53,6 +55,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/page/:postId">
 				<SidebarNavigationScreenPage />
 			</NavigatorScreen>
+			{ window?.__experimentalAdminViews && (
+				<NavigatorScreen path="/pages">
+					<SidebarNavigationScreen
+						title={ __( 'All Pages' ) }
+						description={ __( 'Manage your pages.' ) }
+						backPath="/page"
+					/>
+				</NavigatorScreen>
+			) }
 			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>

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

@@ -11,7 +11,7 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 
 /**
@@ -21,6 +21,7 @@ import { store as editSiteStore } from '../../../store';
 import SwapTemplateButton from './swap-template-button';
 import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../../lock-unlock';
+import usePageContentBlocks from '../../block-editor/block-editor-provider/use-page-content-blocks';
 
 const POPOVER_PROPS = {
 	className: 'edit-site-page-panels-edit-template__dropdown',
@@ -28,7 +29,7 @@ const POPOVER_PROPS = {
 };
 
 export default function EditTemplate() {
-	const { hasResolved, template, isTemplateHidden } = useSelect(
+	const { hasResolved, template, isTemplateHidden, postType } = useSelect(
 		( select ) => {
 			const { getEditedPostContext, getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
@@ -38,11 +39,13 @@ export default function EditTemplate() {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
 			const _context = getEditedPostContext();
+			const _postType = getEditedPostType();
 			const queryArgs = [
 				'postType',
 				getEditedPostType(),
 				getEditedPostId(),
 			];
+
 			return {
 				context: _context,
 				hasResolved: hasFinishedResolution(
@@ -53,15 +56,23 @@ export default function EditTemplate() {
 				isTemplateHidden:
 					getCanvasMode() === 'edit' &&
 					getPageContentFocusType() === 'hideTemplate',
+				postType: _postType,
 			};
 		},
 		[]
 	);
 
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType );
+
 	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 ) );
+	// Check if there are any post content block types in the blocks tree.
+	const pageContentBlocks = usePageContentBlocks( {
+		blocks,
+		isPageContentFocused: true,
+	} );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -97,20 +108,24 @@ 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>
+						{ !! pageContentBlocks?.length && (
+							<MenuGroup>
+								<MenuItem
+									icon={
+										! isTemplateHidden ? check : undefined
+									}
+									onClick={ () => {
+										setPageContentFocusType(
+											isTemplateHidden
+												? 'disableTemplate'
+												: 'hideTemplate'
+										);
+									} }
+								>
+									{ __( 'Template preview' ) }
+								</MenuItem>
+							</MenuGroup>
+						) }
 					</>
 				) }
 			</DropdownMenu>

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

@@ -37,7 +37,7 @@ export default function ResetDefaultTemplate( { onClick } ) {
 					} );
 				} }
 			>
-				{ __( 'Reset' ) }
+				{ __( 'Use default template' ) }
 			</MenuItem>
 		</MenuGroup>
 	);

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

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants';
+import { unlock } from '../../../lock-unlock';
+
+function injectThemeAttributeInBlockTemplateContent(
+	block,
+	currentThemeStylesheet
+) {
+	block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+		return injectThemeAttributeInBlockTemplateContent(
+			innerBlock,
+			currentThemeStylesheet
+		);
+	} );
+
+	if (
+		block.name === 'core/template-part' &&
+		block.attributes.theme === undefined
+	) {
+		block.attributes.theme = currentThemeStylesheet;
+	}
+	return block;
+}
+
+function preparePatterns( patterns, template, currentThemeStylesheet ) {
+	// Filter out duplicates.
+	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+		index === items.findIndex( ( item ) => currentItem.name === item.name );
+
+	// Filter out core patterns.
+	const filterOutCorePatterns = ( pattern ) =>
+		! PATTERN_CORE_SOURCES.includes( pattern.source );
+
+	// Filter only the patterns that are compatible with the current template.
+	const filterCompatiblePatterns = ( pattern ) =>
+		pattern.templateTypes?.includes( template.slug );
+
+	return patterns
+		.filter(
+			filterOutCorePatterns &&
+				filterOutDuplicatesByName &&
+				filterCompatiblePatterns
+		)
+		.map( ( pattern ) => ( {
+			...pattern,
+			keywords: pattern.keywords || [],
+			type: PATTERN_TYPES.theme,
+			blocks: parse( pattern.content, {
+				__unstableSkipMigrationLogs: true,
+			} ).map( ( block ) =>
+				injectThemeAttributeInBlockTemplateContent(
+					block,
+					currentThemeStylesheet
+				)
+			),
+		} ) );
+}
+
+export function useAvailablePatterns( template ) {
+	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
+		useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const settings = getSettings();
+
+			return {
+				blockPatterns:
+					settings.__experimentalAdditionalBlockPatterns ??
+					settings.__experimentalBlockPatterns,
+				restBlockPatterns: select( coreStore ).getBlockPatterns(),
+				currentThemeStylesheet:
+					select( coreStore ).getCurrentTheme().stylesheet,
+			};
+		}, [] );
+
+	return useMemo( () => {
+		const mergedPatterns = [
+			...( blockPatterns || [] ),
+			...( restBlockPatterns || [] ),
+		];
+		return preparePatterns(
+			mergedPatterns,
+			template,
+			currentThemeStylesheet
+		);
+	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
+}

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

@@ -3,7 +3,7 @@
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, PanelRow } from '@wordpress/components';
+import { FormTokenField, FlexBlock, PanelRow } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
@@ -257,21 +257,23 @@ export default function PatternCategories( { post } ) {
 
 	return (
 		<PanelRow initialOpen={ true } title={ __( 'Categories' ) }>
-			<FormTokenField
-				__next40pxDefaultSize
-				value={ values }
-				suggestions={ suggestions }
-				onChange={ onChange }
-				onInputChange={ debouncedSearch }
-				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-				label={ __( 'Pattern categories' ) }
-				messages={ {
-					added: termAddedLabel,
-					removed: termRemovedLabel,
-					remove: removeTermLabel,
-				} }
-				tokenizeOnBlur
-			/>
+			<FlexBlock>
+				<FormTokenField
+					__next40pxDefaultSize
+					value={ values }
+					suggestions={ suggestions }
+					onChange={ onChange }
+					onInputChange={ debouncedSearch }
+					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+					label={ __( 'Pattern categories' ) }
+					messages={ {
+						added: termAddedLabel,
+						removed: termRemovedLabel,
+						remove: removeTermLabel,
+					} }
+					tokenizeOnBlur
+				/>
+			</FlexBlock>
 		</PanelRow>
 	);
 }

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

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { useAsyncList } from '@wordpress/compose';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export default function ReplaceTemplateButton( {
+	onClick,
+	availableTemplates,
+} ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const [ showModal, setShowModal ] = useState( false );
+	const onClose = () => {
+		setShowModal( false );
+	};
+
+	const { postId, postType } = useSelect( ( select ) => {
+		return {
+			postId: select( editSiteStore ).getEditedPostId(),
+			postType: select( editSiteStore ).getEditedPostType(),
+		};
+	}, [] );
+
+	const onTemplateSelect = async ( selectedTemplate ) => {
+		onClose(); // Close the template suggestions modal first.
+		onClick();
+		await editEntityRecord( 'postType', postType, postId, {
+			blocks: selectedTemplate.blocks,
+			content: serialize( selectedTemplate.blocks ),
+		} );
+	};
+
+	if ( ! availableTemplates.length || availableTemplates.length < 1 ) {
+		return null;
+	}
+
+	return (
+		<>
+			<MenuItem
+				info={ __(
+					'Replace the contents of this template with another.'
+				) }
+				onClick={ () => setShowModal( true ) }
+			>
+				{ __( 'Replace template' ) }
+			</MenuItem>
+
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ onClose }
+					overlayClassName="edit-site-template-panel__replace-template-modal"
+					isFullScreen
+				>
+					<div className="edit-site-template-panel__replace-template-modal__content">
+						<TemplatesList
+							availableTemplates={ availableTemplates }
+							onSelect={ onTemplateSelect }
+						/>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function TemplatesList( { availableTemplates, onSelect } ) {
+	const shownTemplates = useAsyncList( availableTemplates );
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+		/>
+	);
+}

package/src/components/sidebar-edit-mode/template-panel/style.scss

@@ -37,3 +37,21 @@ h3.edit-site-template-card__template-areas-title {
 	font-weight: 500;
 	margin: 0 0 $grid-unit-10;
 }
+
+
+.edit-site-template-panel__replace-template-modal {
+	z-index: z-index(".edit-site-template-panel__replace-template-modal");
+}
+
+.edit-site-template-panel__replace-template-modal__content {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+}

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

@@ -11,13 +11,21 @@ import { moreVertical } from '@wordpress/icons';
  */
 import { store as editSiteStore } from '../../../store';
 import isTemplateRevertable from '../../../utils/is-template-revertable';
+import ReplaceTemplateButton from './replace-template-button';
+import { useAvailablePatterns } from './hooks';
 
 export default function Actions( { template } ) {
+	const availablePatterns = useAvailablePatterns( template );
 	const { revertTemplate } = useDispatch( editSiteStore );
 	const isRevertable = isTemplateRevertable( template );
-	if ( ! isRevertable ) {
+
+	if (
+		! isRevertable &&
+		( ! availablePatterns.length || availablePatterns.length < 1 )
+	) {
 		return null;
 	}
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -27,17 +35,24 @@ export default function Actions( { template } ) {
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
-					<MenuItem
-						info={ __(
-							'Use the template as supplied by the theme.'
-						) }
-						onClick={ () => {
-							revertTemplate( template );
-							onClose();
-						} }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
+					{ isRevertable && (
+						<MenuItem
+							info={ __(
+								'Use the template as supplied by the theme.'
+							) }
+							onClick={ () => {
+								revertTemplate( template );
+								onClose();
+							} }
+						>
+							{ __( 'Clear customizations' ) }
+						</MenuItem>
+					) }
+					<ReplaceTemplateButton
+						availableTemplates={ availablePatterns }
+						template={ template }
+						onClick={ onClose }
+					/>
 				</MenuGroup>
 			) }
 		</DropdownMenu>

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

@@ -73,7 +73,7 @@ export default function TemplateAreas() {
 
 			<ul className="edit-site-template-card__template-areas-list">
 				{ templateParts.map( ( { templatePart, block } ) => (
-					<li key={ templatePart.slug }>
+					<li key={ block.clientId }>
 						<TemplateAreaItem
 							area={ templatePart.area }
 							clientId={ block.clientId }

package/src/components/sidebar-navigation-screen/style.scss

@@ -68,7 +68,6 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
-	overflow: hidden;
 	overflow-wrap: break-word;
 }
 

package/src/components/sidebar-navigation-screen-pages/index.js

@@ -136,6 +136,16 @@ export default function SidebarNavigationScreenPages() {
 		};
 	};
 
+	const pagesLink = useLink( { path: '/pages' } );
+	const manageAllPagesProps = window?.__experimentalAdminViews
+		? { ...pagesLink }
+		: {
+				href: 'edit.php?post_type=page',
+				onClick: () => {
+					document.location = 'edit.php?post_type=page';
+				},
+		  };
+
 	return (
 		<>
 			{ showAddPage && (
@@ -220,10 +230,7 @@ export default function SidebarNavigationScreenPages() {
 						) ) }
 						<SidebarNavigationItem
 							className="edit-site-sidebar-navigation-screen-pages__see-all"
-							href="edit.php?post_type=page"
-							onClick={ () => {
-								document.location = 'edit.php?post_type=page';
-							} }
+							{ ...manageAllPagesProps }
 						>
 							{ __( 'Manage all pages' ) }
 						</SidebarNavigationItem>

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js

@@ -24,7 +24,9 @@ export default function TemplatePartNavigationMenuListItem( { id } ) {
 		postType: NAVIGATION_POST_TYPE,
 	} );
 
-	if ( ! id ) return null;
+	if ( ! id || title === undefined ) {
+		return null;
+	}
 
 	return (
 		<SidebarNavigationItem withChevron { ...linkInfo }>

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -19,7 +19,9 @@ export default function TemplatePartNavigationMenu( { id } ) {
 		id
 	);
 
-	if ( ! id ) return null;
+	if ( ! id || title === undefined ) {
+		return null;
+	}
 
 	return (
 		<>

package/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js

@@ -10,6 +10,16 @@ import TemplatePartNavigationMenus from './template-part-navigation-menus';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
+function getBlocksFromRecord( record ) {
+	if ( record?.blocks ) {
+		return record?.blocks;
+	}
+
+	return record?.content && typeof record.content !== 'function'
+		? parse( record.content )
+		: [];
+}
+
 /**
  * Retrieves a list of specific blocks from a given tree of blocks.
  *
@@ -60,11 +70,7 @@ export default function useNavigationMenuContent( postType, postId ) {
 		return;
 	}
 
-	const blocks =
-		record?.content && typeof record.content !== 'function'
-			? parse( record.content )
-			: [];
-
+	const blocks = getBlocksFromRecord( record );
 	const navigationBlocks = getBlocksOfTypeFromBlocks(
 		'core/navigation',
 		blocks

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -10,6 +10,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 
 /**
@@ -27,6 +29,7 @@ import {
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
+import { store as editSiteStore } from '../../store';
 
 function TemplatePartGroup( { areas, currentArea, currentType } ) {
 	return (
@@ -93,8 +96,23 @@ export default function SidebarNavigationScreenPatterns() {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
+	const templatePartsLink = useLink( {
+		path: '/wp_template_part/all',
+		// If a classic theme that supports template parts accessed
+		// the Patterns page directly, preserve that state in the URL.
+		didAccessPatternsPage:
+			! isBlockBasedTheme && isTemplatePartsMode ? 1 : undefined,
+	} );
 
-	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
 			<SidebarNavigationItem
@@ -104,14 +122,17 @@ export default function SidebarNavigationScreenPatterns() {
 			>
 				{ __( 'Manage all of my patterns' ) }
 			</SidebarNavigationItem>
-			<SidebarNavigationItem withChevron { ...templatePartsLink }>
-				{ __( 'Manage all template parts' ) }
-			</SidebarNavigationItem>
+			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
+				<SidebarNavigationItem withChevron { ...templatePartsLink }>
+					{ __( 'Manage all template parts' ) }
+				</SidebarNavigationItem>
+			) }
 		</ItemGroup>
 	) : undefined;
 
 	return (
 		<SidebarNavigationScreen
+			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'