@wordpress/edit-site 5.11.0 → 5.12.1

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

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useAddedBy } from '../list/added-by';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+
+export default function usePatternDetails( postType, postId ) {
+	const { getDescription, getTitle, record } = useEditedEntityRecord(
+		postType,
+		postId
+	);
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
+	const addedBy = useAddedBy( postType, postId );
+	const isAddedByActiveTheme =
+		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
+	const title = getTitle();
+	let descriptionText = getDescription();
+
+	if ( ! descriptionText && addedBy.text ) {
+		descriptionText = sprintf(
+			// translators: %s: pattern title e.g: "Header".
+			__( 'This is your %s pattern.' ),
+			getTitle()
+		);
+	}
+
+	if ( ! descriptionText && postType === 'wp_block' && record?.title ) {
+		descriptionText = sprintf(
+			// translators: %s: user created pattern title e.g. "Footer".
+			__( 'This is your %s pattern.' ),
+			record.title
+		);
+	}
+
+	const description = (
+		<>
+			{ descriptionText }
+
+			{ addedBy.text && ! isAddedByActiveTheme && (
+				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description">
+					<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
+						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon">
+							{ addedBy.imageUrl ? (
+								<img
+									src={ addedBy.imageUrl }
+									alt=""
+									width="24"
+									height="24"
+								/>
+							) : (
+								<Icon icon={ addedBy.icon } />
+							) }
+						</span>
+						{ addedBy.text }
+					</span>
+
+					{ addedBy.isCustomized && (
+						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
+							{ _x( '(Customized)', 'pattern' ) }
+						</span>
+					) }
+				</span>
+			) }
+		</>
+	);
+
+	const footer = !! record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter
+			lastModifiedDateTime={ record.modified }
+		/>
+	) : null;
+
+	return { title, description, footer };
+}

package/src/components/sidebar-navigation-screen-template/home-template-details.js

@@ -0,0 +1,230 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { debounce } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	CheckboxControl,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalInputControl as InputControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalTruncate as Truncate,
+	__experimentalItemGroup as ItemGroup,
+} from '@wordpress/components';
+import { header, footer, layout } from '@wordpress/icons';
+import { useMemo, useState, useEffect } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+} from '../sidebar-navigation-screen-details-panel';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+
+const EMPTY_OBJECT = {};
+
+function TemplateAreaButton( { postId, icon, title } ) {
+	const icons = {
+		header,
+		footer,
+	};
+	const linkInfo = useLink( {
+		postType: 'wp_template_part',
+		postId,
+	} );
+
+	return (
+		<SidebarNavigationItem
+			className="edit-site-sidebar-navigation-screen-template__template-area-button"
+			{ ...linkInfo }
+			icon={ icons[ icon ] ?? layout }
+			withChevron
+		>
+			<Truncate
+				limit={ 20 }
+				ellipsizeMode="tail"
+				numberOfLines={ 1 }
+				className="edit-site-sidebar-navigation-screen-template__template-area-label-text"
+			>
+				{ decodeEntities( title ) }
+			</Truncate>
+		</SidebarNavigationItem>
+	);
+}
+
+export default function HomeTemplateDetails() {
+	const navigator = useNavigator();
+	const {
+		params: { postType, postId },
+	} = navigator;
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const {
+		allowCommentsOnNewPosts,
+		templatePartAreas,
+		postsPerPage,
+		postsPageTitle,
+		postsPageId,
+		currentTemplateParts,
+	} = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const _currentTemplateParts =
+				select( editSiteStore ).getCurrentTemplateTemplateParts();
+			const siteEditorSettings = getSettings();
+			const _postsPageRecord = siteSettings?.page_for_posts
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'page',
+						siteSettings?.page_for_posts
+				  )
+				: EMPTY_OBJECT;
+
+			return {
+				allowCommentsOnNewPosts:
+					siteSettings?.default_comment_status === 'open',
+				postsPageTitle: _postsPageRecord?.title?.rendered,
+				postsPageId: _postsPageRecord?.id,
+				postsPerPage: siteSettings?.posts_per_page,
+				templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas,
+				currentTemplateParts: _currentTemplateParts,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
+		useState( '' );
+	const [ postsCountValue, setPostsCountValue ] = useState( 1 );
+	const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' );
+
+	/*
+	 * This hook serves to set the server-retrieved values,
+	 * postsPageTitle, allowCommentsOnNewPosts, postsPerPage,
+	 * to local state.
+	 */
+	useEffect( () => {
+		setCommentsOnNewPostsValue( allowCommentsOnNewPosts );
+		setPostsPageTitleValue( postsPageTitle );
+		setPostsCountValue( postsPerPage );
+	}, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] );
+
+	/*
+	 * Merge data in currentTemplateParts with templatePartAreas,
+	 * which contains the template icon and fallback labels
+	 */
+	const templateAreas = useMemo( () => {
+		return currentTemplateParts.length && templatePartAreas
+			? currentTemplateParts.map( ( { templatePart } ) => ( {
+					...templatePartAreas?.find(
+						( { area } ) => area === templatePart?.area
+					),
+					...templatePart,
+			  } ) )
+			: [];
+	}, [ currentTemplateParts, templatePartAreas ] );
+
+	const setAllowCommentsOnNewPosts = ( newValue ) => {
+		setCommentsOnNewPostsValue( newValue );
+		editEntityRecord( 'root', 'site', undefined, {
+			default_comment_status: newValue ? 'open' : null,
+		} );
+	};
+
+	const setPostsPageTitle = ( newValue ) => {
+		setPostsPageTitleValue( newValue );
+		editEntityRecord( 'postType', 'page', postsPageId, {
+			title: newValue,
+		} );
+	};
+
+	const setPostsPerPage = ( newValue ) => {
+		setPostsCountValue( newValue );
+		editEntityRecord( 'root', 'site', undefined, {
+			posts_per_page: newValue,
+		} );
+	};
+
+	return (
+		<>
+			<SidebarNavigationScreenDetailsPanel spacing={ 6 }>
+				{ postsPageId && (
+					<SidebarNavigationScreenDetailsPanelRow>
+						<InputControl
+							className="edit-site-sidebar-navigation-screen__input-control"
+							placeholder={ __( 'No Title' ) }
+							size={ '__unstable-large' }
+							value={ postsPageTitleValue }
+							onChange={ debounce( setPostsPageTitle, 300 ) }
+							label={ __( 'Blog title' ) }
+							help={ __(
+								'Set the Posts Page title. Appears in search results, and when the page is shared on social media.'
+							) }
+						/>
+					</SidebarNavigationScreenDetailsPanelRow>
+				) }
+				<SidebarNavigationScreenDetailsPanelRow>
+					<NumberControl
+						className="edit-site-sidebar-navigation-screen__input-control"
+						placeholder={ 0 }
+						value={ postsCountValue }
+						size={ '__unstable-large' }
+						spinControls="custom"
+						step="1"
+						min="1"
+						onChange={ setPostsPerPage }
+						label={ __( 'Posts per page' ) }
+						help={ __(
+							'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.'
+						) }
+					/>
+				</SidebarNavigationScreenDetailsPanelRow>
+			</SidebarNavigationScreenDetailsPanel>
+
+			<SidebarNavigationScreenDetailsPanel
+				title={ __( 'Discussion' ) }
+				spacing={ 3 }
+			>
+				<SidebarNavigationScreenDetailsPanelRow>
+					<CheckboxControl
+						className="edit-site-sidebar-navigation-screen__input-control"
+						label="Allow comments on new posts"
+						help="Changes will apply to new posts only. Individual posts may override these settings."
+						checked={ commentsOnNewPostsValue }
+						onChange={ setAllowCommentsOnNewPosts }
+					/>
+				</SidebarNavigationScreenDetailsPanelRow>
+			</SidebarNavigationScreenDetailsPanel>
+			<SidebarNavigationScreenDetailsPanel
+				title={ __( 'Areas' ) }
+				spacing={ 3 }
+			>
+				<ItemGroup>
+					{ templateAreas.map(
+						( { label, icon, theme, slug, title } ) => (
+							<SidebarNavigationScreenDetailsPanelRow
+								key={ slug }
+							>
+								<TemplateAreaButton
+									postId={ `${ theme }//${ slug }` }
+									title={ title?.rendered || label }
+									icon={ icon }
+								/>
+							</SidebarNavigationScreenDetailsPanelRow>
+						)
+					) }
+				</ItemGroup>
+			</SidebarNavigationScreenDetailsPanel>
+		</>
+	);
+}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf, _x } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 import {
@@ -9,18 +9,20 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../list/added-by';
+import TemplateActions from '../template-actions';
+import HomeTemplateDetails from './home-template-details';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
-function useTemplateTitleAndDescription( postType, postId ) {
+function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
 		postId
@@ -36,19 +38,22 @@ function useTemplateTitleAndDescription( postType, postId ) {
 	let descriptionText = getDescription();
 
 	if ( ! descriptionText && addedBy.text ) {
-		if ( record.type === 'wp_template' && record.is_custom ) {
-			descriptionText = __(
-				'This is a custom template that can be applied manually to any Post or Page.'
-			);
-		} else if ( record.type === 'wp_template_part' ) {
-			descriptionText = sprintf(
-				// translators: %s: template part title e.g: "Header".
-				__( 'This is your %s template part.' ),
-				getTitle()
-			);
-		}
+		descriptionText = __(
+			'This is a custom template that can be applied manually to any Post or Page.'
+		);
 	}
 
+	const content =
+		record?.slug === 'home' || record?.slug === 'index' ? (
+			<HomeTemplateDetails />
+		) : null;
+
+	const footer = !! record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter
+			lastModifiedDateTime={ record.modified }
+		/>
+	) : null;
+
 	const description = (
 		<>
 			{ descriptionText }
@@ -73,9 +78,7 @@ function useTemplateTitleAndDescription( postType, postId ) {
 
 					{ addedBy.isCustomized && (
 						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ postType === 'wp_template'
-								? _x( '(Customized)', 'template' )
-								: _x( '(Customized)', 'template part' ) }
+							{ _x( '(Customized)', 'template' ) }
 						</span>
 					) }
 				</span>
@@ -83,14 +86,16 @@ function useTemplateTitleAndDescription( postType, postId ) {
 		</>
 	);
 
-	return { title, description };
+	return { title, description, content, footer };
 }
 
 export default function SidebarNavigationScreenTemplate() {
-	const { params } = useNavigator();
-	const { postType, postId } = params;
+	const navigator = useNavigator();
+	const {
+		params: { postType, postId },
+	} = navigator;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { title, description } = useTemplateTitleAndDescription(
+	const { title, content, description, footer } = useTemplateDetails(
 		postType,
 		postId
 	);
@@ -99,13 +104,25 @@ export default function SidebarNavigationScreenTemplate() {
 		<SidebarNavigationScreen
 			title={ title }
 			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
+				<>
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						toggleProps={ { as: SidebarButton } }
+						onRemove={ () => {
+							navigator.goTo( `/${ postType }/all` );
+						} }
+					/>
+					<SidebarButton
+						onClick={ () => setCanvasMode( 'edit' ) }
+						label={ __( 'Edit' ) }
+						icon={ pencil }
+					/>
+				</>
 			}
 			description={ description }
+			content={ content }
+			footer={ footer }
 		/>
 	);
 }

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

@@ -23,3 +23,26 @@
 		}
 	}
 }
+
+.edit-site-sidebar-navigation-screen-template__template-area-button {
+	color: $white;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	flex-wrap: nowrap;
+	border-radius: 4px;
+	&:hover,
+	&:focus {
+		background: $gray-800;
+		color: $white;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-template__template-area-label-text {
+	margin: 0 $grid-unit-20 0 $grid-unit-05;
+	flex-grow: 1;
+}
+
+.edit-site-sidebar-navigation-screen-template__template-icon {
+	display: flex;
+}

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

@@ -41,9 +41,9 @@ const config = {
 			loading: __( 'Loading library' ),
 			notFound: __( 'No patterns found' ),
 			manage: __( 'Manage all template parts' ),
-			reusableBlocks: __( 'Manage reusable blocks' ),
+			reusableBlocks: __( 'Manage patterns' ),
 			description: __(
-				'Manage what patterns are available when editing your site.'
+				'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'
 			),
 		},
 		sortCallback: ( items ) => {
@@ -147,34 +147,27 @@ export default function SidebarNavigationScreenTemplates() {
 									) }
 								</TemplateItem>
 							) ) }
-							{ ! isMobileViewport && (
-								<>
-									<SidebarNavigationItem
-										className="edit-site-sidebar-navigation-screen-templates__see-all"
-										withChevron
-										{ ...browseAllLink }
-									>
-										{ config[ postType ].labels.manage }
-									</SidebarNavigationItem>
-									{ !! config[ postType ].labels
-										.reusableBlocks && (
-										<SidebarNavigationItem
-											as="a"
-											href="edit.php?post_type=wp_block"
-											withChevron
-										>
-											{
-												config[ postType ].labels
-													.reusableBlocks
-											}
-										</SidebarNavigationItem>
-									) }
-								</>
-							) }
 						</ItemGroup>
 					) }
 				</>
 			}
+			footer={
+				! isMobileViewport && (
+					<>
+						<SidebarNavigationItem withChevron { ...browseAllLink }>
+							{ config[ postType ].labels.manage }
+						</SidebarNavigationItem>
+						{ !! config[ postType ].labels.reusableBlocks && (
+							<SidebarNavigationItem
+								as="a"
+								href="edit.php?post_type=wp_block"
+							>
+								{ config[ postType ].labels.reusableBlocks }
+							</SidebarNavigationItem>
+						) }
+					</>
+				)
+			}
 		/>
 	);
 }

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

@@ -19,30 +19,33 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
-import { search } from '@wordpress/icons';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { search, external } from '@wordpress/icons';
+import { store as commandsStore } from '@wordpress/commands';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
-import { unlock } from '../../private-apis';
-
-const { store: commandsStore } = unlock( commandsPrivateApis );
+import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
+	const { canvasMode, dashboardLink, homeUrl } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
 
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
 		return {
 			canvasMode: getCanvasMode(),
 			dashboardLink:
 				getSettings().__experimentalDashboardLink || 'index.php',
+			homeUrl: getUnstableBase()?.home,
 		};
 	}, [] );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
@@ -87,7 +90,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack justify="space-between" alignment="center">
+			<HStack
+				justify="space-between"
+				alignment="center"
+				className="edit-site-site-hub__container"
+			>
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
@@ -149,6 +156,18 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							{ decodeEntities( siteTitle ) }
 						</motion.div>
 					</AnimatePresence>
+					{ canvasMode === 'view' && (
+						<Button
+							href={ homeUrl }
+							target="_blank"
+							label={ __( 'View site' ) }
+							aria-label={ __(
+								'View site (opens in a new tab)'
+							) }
+							icon={ external }
+							className="edit-site-site-hub__site-view-link"
+						/>
+					) }
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button

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

@@ -3,6 +3,31 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+
+	.edit-site-site-hub__container {
+		gap: 0;
+	}
+
+	.edit-site-site-hub__site-view-link {
+		flex-grow: 0;
+		@include break-mobile() {
+			opacity: 0;
+			transition: opacity 0.2s ease-in-out;
+		}
+		&:focus {
+			outline: none;
+			box-shadow: none;
+			opacity: 1;
+		}
+		svg {
+			fill: $white;
+		}
+	}
+	&:hover {
+		.edit-site-site-hub__site-view-link {
+			opacity: 1;
+		}
+	}
 }
 
 .edit-site-site-hub__post-type {
@@ -29,6 +54,7 @@
 
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
+	flex-grow: 1;
 }
 
 .edit-site-site-hub_toggle-command-center {

package/src/components/style-book/index.js

@@ -36,7 +36,7 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(