@wordpress/edit-site 5.3.2 → 5.4.0

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

@@ -1,9 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
@@ -14,24 +16,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
 import AddNewTemplate from '../add-new-template';
 
-function omit( object, keys ) {
-	return Object.fromEntries(
-		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
-	);
-}
-
-const Item = ( { item } ) => {
-	const linkInfo = useLink( item.params );
-	const props = item.params
-		? { ...omit( item, 'params' ), ...linkInfo }
-		: item;
-	return <SidebarNavigationItem { ...props } />;
-};
-
 const config = {
 	wp_template: {
 		path: '/templates',
@@ -53,23 +39,20 @@ const config = {
 	},
 };
 
+const TemplateItem = ( { postType, postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postType,
+		postId,
+		path: config[ postType ].path + '/single',
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
 export default function SidebarNavigationScreenTemplates( {
 	postType = 'wp_template',
 } ) {
-	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
-	// Ideally the URL params would be enough.
-	// Loading the editor should ideally redirect to the home page
-	// instead of fetching the edited entity here.
-	const { editedPostId, editedPostType } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		return {
-			editedPostId: getEditedPostId(),
-			editedPostType: getEditedPostType(),
-		};
-	}, [] );
-
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
 		postType,
@@ -78,44 +61,15 @@ export default function SidebarNavigationScreenTemplates( {
 		}
 	);
 
-	let items = [];
-	if ( isLoading ) {
-		items = [
-			{
-				children: config[ postType ].labels.loading,
-			},
-		];
-	} else if ( ! templates && ! isLoading ) {
-		items = [
-			{
-				children: config[ postType ].labels.notFound,
-			},
-		];
-	} else {
-		items = templates?.map( ( template ) => ( {
-			params: {
-				postType,
-				postId: template.id,
-			},
-			children: decodeEntities(
-				template.title?.rendered || template.slug
-			),
-			'aria-current':
-				( params.postType === postType &&
-					params.postId === template.id ) ||
-				// This is a special case for the home page.
-				( editedPostId === template.id &&
-					editedPostType === postType &&
-					!! params.postId )
-					? 'page'
-					: undefined,
-		} ) );
-	}
+	const browseAllLink = useLink( {
+		postType,
+		postId: undefined,
+		path: config[ postType ].path + '/all',
+	} );
 
 	return (
 		<SidebarNavigationScreen
 			path={ config[ postType ].path }
-			parentTitle={ __( 'Design' ) }
 			title={ config[ postType ].labels.title }
 			actions={
 				! isMobileViewport && (
@@ -130,25 +84,37 @@ export default function SidebarNavigationScreenTemplates( {
 			}
 			content={
 				<>
-					<ItemGroup>
-						{ items.map( ( item, index ) => (
-							<Item item={ item } key={ index } />
-						) ) }
-
-						<SidebarNavigationItem
-							className="edit-site-sidebar-navigation-screen-templates__see-all"
-							{ ...useLink( {
-								postType,
-								postId: undefined,
-							} ) }
-							aria-current={
-								params.postType === postType && ! params.postId
-									? 'page'
-									: undefined
-							}
-							children={ config[ postType ].labels.manage }
-						/>
-					</ItemGroup>
+					{ isLoading && config[ postType ].labels.loading }
+					{ ! isLoading && (
+						<ItemGroup>
+							{ ! templates?.length && (
+								<Item>
+									{ config[ postType ].labels.notFound }
+								</Item>
+							) }
+							{ ( templates ?? [] ).map( ( template ) => (
+								<TemplateItem
+									postType={ postType }
+									postId={ template.id }
+									key={ template.id }
+								>
+									{ decodeEntities(
+										template.title?.rendered ||
+											template.slug
+									) }
+								</TemplateItem>
+							) ) }
+							{ ! isMobileViewport && (
+								<SidebarNavigationItem
+									className="edit-site-sidebar-navigation-screen-templates__see-all"
+									{ ...browseAllLink }
+									children={
+										config[ postType ].labels.manage
+									}
+								/>
+							) }
+						</ItemGroup>
+					) }
 				</>
 			}
 		/>

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+const config = {
+	wp_template: {
+		path: '/templates/all',
+		title: __( 'All templates' ),
+	},
+	wp_template_part: {
+		path: '/template-parts/all',
+		title: __( 'All template parts' ),
+	},
+};
+
+export default function SidebarNavigationScreenTemplatesBrowse( {
+	postType = 'wp_template',
+} ) {
+	return (
+		<SidebarNavigationScreen
+			path={ config[ postType ].path }
+			title={ config[ postType ].title }
+		/>
+	);
+}

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

@@ -11,9 +11,8 @@ import {
 	Button,
 	__unstableMotion as motion,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
+import { useReducedMotion } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -23,137 +22,83 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { useLocation } from '../routes';
-import getIsListPage from '../../utils/get-is-list-page';
 import SiteIcon from '../site-icon';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-const SiteHub = forwardRef(
-	( { isMobileCanvasVisible, setIsMobileCanvasVisible, ...props }, ref ) => {
-		const { params } = useLocation();
-		const isListPage = getIsListPage( params );
-		const isEditorPage = ! isListPage;
-		const { canvasMode, dashboardLink, entityConfig } = useSelect(
-			( select ) => {
-				select( editSiteStore ).getEditedPostType();
-				const { getCanvasMode, getSettings, getEditedPostType } =
-					unlock( select( editSiteStore ) );
-				return {
-					canvasMode: getCanvasMode(),
-					dashboardLink: getSettings().__experimentalDashboardLink,
-					entityConfig: select( coreStore ).getEntityConfig(
-						'postType',
-						getEditedPostType()
-					),
-				};
-			},
-			[]
+const SiteHub = forwardRef( ( props, ref ) => {
+	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
+		select( editSiteStore ).getEditedPostType();
+		const { getCanvasMode, getSettings } = unlock(
+			select( editSiteStore )
 		);
-		const disableMotion = useReducedMotion();
-		const isMobileViewport = useViewportMatch( 'medium', '<' );
-		const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-		const { clearSelectedBlock } = useDispatch( blockEditorStore );
-		const showEditButton =
-			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
-			( isMobileViewport &&
-				canvasMode === 'view' &&
-				isMobileCanvasVisible );
-		const isBackToDashboardButton =
-			( ! isMobileViewport && canvasMode === 'view' ) ||
-			( isMobileViewport && ! isMobileCanvasVisible );
-		const showLabels = canvasMode !== 'edit';
-		const siteIconButtonProps = isBackToDashboardButton
-			? {
-					href: dashboardLink || 'index.php',
-					'aria-label': __( 'Go back to the dashboard' ),
-			  }
-			: {
-					label: __( 'Open Navigation Sidebar' ),
-					onClick: () => {
-						clearSelectedBlock();
-						setIsMobileCanvasVisible( false );
-						setCanvasMode( 'view' );
-					},
-			  };
-		const { getTitle } = useEditedEntityRecord();
+		return {
+			canvasMode: getCanvasMode(),
+			dashboardLink: getSettings().__experimentalDashboardLink,
+		};
+	}, [] );
+	const disableMotion = useReducedMotion();
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const isBackToDashboardButton = canvasMode === 'view';
+	const showLabels = canvasMode !== 'edit';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink || 'index.php',
+				'aria-label': __( 'Go back to the dashboard' ),
+		  }
+		: {
+				label: __( 'Open Navigation Sidebar' ),
+				onClick: () => {
+					clearSelectedBlock();
+					setCanvasMode( 'view' );
+				},
+		  };
+	const siteTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
+		[]
+	);
 
-		return (
-			<motion.div
-				ref={ ref }
-				{ ...props }
-				className={ classnames(
-					'edit-site-site-hub',
-					props.className
-				) }
-				layout
-				transition={ {
-					type: 'tween',
-					duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-					ease: 'easeOut',
-				} }
+	return (
+		<motion.div
+			ref={ ref }
+			{ ...props }
+			className={ classnames( 'edit-site-site-hub', props.className ) }
+			layout
+			transition={ {
+				type: 'tween',
+				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+				ease: 'easeOut',
+			} }
+		>
+			<HStack
+				justify="flex-start"
+				className="edit-site-site-hub__text-content"
+				spacing="0"
 			>
-				<HStack
-					justify="flex-start"
-					className="edit-site-site-hub__text-content"
-					spacing="0"
+				<motion.div
+					className="edit-site-site-hub__view-mode-toggle-container"
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
 				>
-					<motion.div
-						className="edit-site-site-hub__view-mode-toggle-container"
-						layout
-						transition={ {
-							type: 'tween',
-							duration: disableMotion
-								? 0
-								: HUB_ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
-					>
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</Button>
-					</motion.div>
-
-					{ showLabels && (
-						<VStack spacing={ 0 }>
-							<div className="edit-site-site-hub__title">
-								{ getTitle() }
-							</div>
-							<div className="edit-site-site-hub__post-type">
-								{ entityConfig?.label }
-							</div>
-						</VStack>
-					) }
-				</HStack>
-
-				{ showEditButton && (
 					<Button
-						className="edit-site-site-hub__edit-button"
-						onClick={ () => {
-							setCanvasMode( 'edit' );
-						} }
-						variant="primary"
+						{ ...siteIconButtonProps }
+						className="edit-site-layout__view-mode-toggle"
 					>
-						{ __( 'Edit' ) }
+						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 					</Button>
-				) }
+				</motion.div>
 
-				{ isMobileViewport && ! isMobileCanvasVisible && (
-					<Button
-						onClick={ () => setIsMobileCanvasVisible( true ) }
-						variant="primary"
-					>
-						{ __( 'View Editor' ) }
-					</Button>
-				) }
-			</motion.div>
-		);
-	}
-);
+				{ showLabels && <div>{ siteTitle }</div> }
+			</HStack>
+		</motion.div>
+	);
+} );
 
 export default SiteHub;

package/src/components/site-hub/style.scss

@@ -5,11 +5,6 @@
 	gap: $grid-unit-10;
 }
 
-.edit-site-site-hub__edit-button {
-	height: $grid-unit-40;
-	color: $white;
-}
-
 .edit-site-site-hub__post-type {
 	opacity: 0.6;
 }
@@ -18,12 +13,7 @@
 	height: $header-height;
 	width: $header-height + 4px;
 	flex-shrink: 0;
-}
-
-.edit-site-layout.is-edit-mode {
-	.edit-site-site-hub__view-mode-toggle-container {
-		width: $header-height;
-	}
+	background: $gray-900;
 }
 
 .edit-site-site-hub__text-content {

package/src/components/start-template-options/index.js

@@ -0,0 +1,171 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+function useFallbackTemplateContent( slug, isCustom = false ) {
+	const [ templateContent, setTemplateContent ] = useState( '' );
+
+	useEffect( () => {
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/templates/lookup', {
+				slug,
+				is_custom: isCustom,
+				ignore_empty: true,
+			} ),
+		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
+	}, [ slug ] );
+	return templateContent;
+}
+
+const START_BLANK_TITLE = __( 'Start blank' );
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useMemo(
+		() => [
+			{
+				name: 'fallback',
+				blocks: parse( fallbackContent ),
+				title: __( 'Fallback content' ),
+			},
+			{
+				name: 'start-blank',
+				blocks: parse(
+					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
+				),
+				title: START_BLANK_TITLE,
+			},
+		],
+		[ fallbackContent ]
+	);
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+
+	return (
+		<div
+			className="edit-site-start-template-options__pattern-container"
+			style={ {
+				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
+			} }
+		>
+			<BlockPatternsList
+				blockPatterns={ blockPatterns }
+				shownPatterns={ shownBlockPatterns }
+				onClickPattern={ ( pattern, blocks ) => {
+					onChange( 'start-blank' === pattern.name ? [] : blocks, {
+						selection: undefined,
+					} );
+					onChoosePattern();
+				} }
+			/>
+		</div>
+	);
+}
+
+function StartModal( { slug, isCustom, onClose, postType } ) {
+	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
+	if ( ! fallbackContent ) {
+		return null;
+	}
+	return (
+		<Modal
+			className="edit-site-start-template-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			focusOnMount="firstElement"
+			onRequestClose={ onClose }
+		>
+			<div className="edit-site-start-template-options__modal-content">
+				<PatternSelection
+					fallbackContent={ fallbackContent }
+					slug={ slug }
+					isCustom={ isCustom }
+					postType={ postType }
+					onChoosePattern={ () => {
+						onClose();
+					} }
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+const START_TEMPLATE_MODAL_STATES = {
+	INITIAL: 'INITIAL',
+	CLOSED: 'CLOSED',
+};
+
+export default function StartTemplateOptions() {
+	const [ modalState, setModalState ] = useState(
+		START_TEMPLATE_MODAL_STATES.INITIAL
+	);
+	const { shouldOpenModel, slug, isCustom, postType } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const _postType = getEditedPostType();
+			const postId = getEditedPostId();
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getEditedEntityRecord,
+			} = select( coreStore );
+			const templateRecord = getEditedEntityRecord(
+				'postType',
+				_postType,
+				postId
+			);
+
+			const hasDirtyEntityRecords =
+				__experimentalGetDirtyEntityRecords().length > 0;
+
+			return {
+				shouldOpenModel:
+					! hasDirtyEntityRecords &&
+					'' === templateRecord.content &&
+					'wp_template' === _postType &&
+					! select( preferencesStore ).get(
+						'core/edit-site',
+						'welcomeGuide'
+					),
+				slug: templateRecord.slug,
+				isCustom: templateRecord.is_custom,
+				postType: _postType,
+			};
+		},
+		[]
+	);
+
+	if (
+		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
+			! shouldOpenModel ) ||
+		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
+	) {
+		return null;
+	}
+
+	return (
+		<StartModal
+			slug={ slug }
+			isCustom={ isCustom }
+			postType={ postType }
+			onClose={ () =>
+				setModalState( START_TEMPLATE_MODAL_STATES.CLOSED )
+			}
+		/>
+	);
+}

package/src/components/start-template-options/style.scss

@@ -0,0 +1,76 @@
+.edit-site-start-template-options__modal.components-modal__frame {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: 50%;
+	}
+	@include break-large() {
+		height: fit-content;
+	}
+}
+
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+	display: grid;
+	width: 100%;
+	margin-top: $grid-unit-05;
+	gap: $grid-unit-30;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+		margin-bottom: 0;
+		width: 100%;
+		aspect-ratio: 3/4;
+
+		.block-editor-block-preview__container {
+			height: 100%;
+			box-shadow: 0 0 0 1px $gray-300;
+		}
+
+		.block-editor-block-preview__content {
+			width: 100%;
+			position: absolute;
+		}
+
+		.block-editor-block-patterns-list__item-title {
+			display: none;
+		}
+
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus {
+			.block-editor-block-preview__container {
+				box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+		}
+	}
+
+	// The start blank pattern is the last and we are selecting it.
+	.block-editor-block-patterns-list__list-item:nth-last-child(2) {
+		.block-editor-block-preview__container {
+			position: absolute;
+			padding: 0;
+			background: #f0f0f0;
+			&::after {
+				width: 100%;
+				top: 50%;
+				margin-top: -1em;
+				content: var(--wp-edit-site-start-template-options-start-blank);
+				text-align: center;
+			}
+		}
+		iframe {
+			display: none;
+		}
+	}
+}