@wordpress/edit-site 5.12.0 → 5.12.2

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLink } from '../routes/link';
+
+export default function TemplatePartNavigationMenuListItem( { id } ) {
+	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+
+	const linkInfo = useLink( {
+		postId: id,
+		postType: 'wp_navigation',
+	} );
+
+	if ( ! id ) return null;
+
+	return (
+		<SidebarNavigationItem withChevron { ...linkInfo }>
+			{ title || __( '(no title)' ) }
+		</SidebarNavigationItem>
+	);
+}

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

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item';
+
+export default function TemplatePartNavigationMenuList( { menus } ) {
+	return (
+		<ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list">
+			{ menus.map( ( menuId ) => (
+				<TemplatePartNavigationMenuListItem
+					key={ menuId }
+					id={ menuId }
+				/>
+			) ) }
+		</ItemGroup>
+	);
+}

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

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
+
+export default function TemplatePartNavigationMenu( { id } ) {
+	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+
+	if ( ! id ) return null;
+
+	return (
+		<>
+			<Heading
+				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
+				size="12"
+				upperCase={ true }
+			>
+				{ title?.rendered || __( 'Navigation' ) }
+			</Heading>
+			<NavigationMenuEditor navigationMenuId={ id } />
+		</>
+	);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenu from './template-part-navigation-menu';
+import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
+
+export default function TemplatePartNavigationMenus( { menus } ) {
+	if ( ! menus.length ) return null;
+
+	// if there is a single menu then render TemplatePartNavigationMenu
+	if ( menus.length === 1 ) {
+		return <TemplatePartNavigationMenu id={ menus[ 0 ] } />;
+	}
+
+	// if there are multiple menus then render TemplatePartNavigationMenuList
+	return (
+		<>
+			<Heading
+				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
+				size="12"
+				upperCase={ true }
+			>
+				{ __( 'Navigation' ) }
+			</Heading>
+			<TemplatePartNavigationMenuList menus={ menus } />
+		</>
+	);
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenus from './template-part-navigation-menus';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+/**
+ * Retrieves a list of specific blocks from a given tree of blocks.
+ *
+ * @param {string} targetBlockType The name of the block type to find.
+ * @param {Array}  blocks          A list of blocks from a template part entity.
+ *
+ * @return {Array} A list of any navigation blocks found in the blocks.
+ */
+function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) {
+	if ( ! targetBlockType || ! blocks?.length ) {
+		return [];
+	}
+
+	const findInBlocks = ( _blocks ) => {
+		if ( ! _blocks ) {
+			return [];
+		}
+
+		const navigationBlocks = [];
+
+		for ( const block of _blocks ) {
+			if ( block.name === targetBlockType ) {
+				navigationBlocks.push( block );
+			}
+
+			if ( block?.innerBlocks ) {
+				const innerNavigationBlocks = findInBlocks( block.innerBlocks );
+
+				if ( innerNavigationBlocks.length ) {
+					navigationBlocks.push( ...innerNavigationBlocks );
+				}
+			}
+		}
+
+		return navigationBlocks;
+	};
+
+	return findInBlocks( blocks );
+}
+
+export default function useNavigationMenuContent( postType, postId ) {
+	const { record } = useEditedEntityRecord( postType, postId );
+
+	// Only managing navigation menus in template parts is supported
+	// to match previous behaviour. This could potentially be expanded
+	// to patterns as well.
+	if ( postType !== 'wp_template_part' ) {
+		return;
+	}
+
+	const navigationBlocks = getBlocksOfTypeFromBlocks(
+		'core/navigation',
+		record?.blocks
+	);
+
+	const navigationMenuIds = navigationBlocks?.map(
+		( block ) => block.attributes.ref
+	);
+
+	if ( ! navigationMenuIds?.length ) {
+		return;
+	}
+
+	return <TemplatePartNavigationMenus menus={ navigationMenuIds } />;
+}

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

@@ -9,19 +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
@@ -42,6 +43,17 @@ function useTemplateTitleAndDescription( postType, postId ) {
 		);
 	}
 
+	const content =
+		record?.slug === 'home' || record?.slug === 'index' ? (
+			<HomeTemplateDetails />
+		) : null;
+
+	const footer = !! record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter
+			lastModifiedDateTime={ record.modified }
+		/>
+	) : null;
+
 	const description = (
 		<>
 			{ descriptionText }
@@ -74,7 +86,7 @@ function useTemplateTitleAndDescription( postType, postId ) {
 		</>
 	);
 
-	return { title, description };
+	return { title, description, content, footer };
 }
 
 export default function SidebarNavigationScreenTemplate() {
@@ -83,7 +95,7 @@ export default function SidebarNavigationScreenTemplate() {
 		params: { postType, postId },
 	} = navigator;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { title, description } = useTemplateTitleAndDescription(
+	const { title, content, description, footer } = useTemplateDetails(
 		postType,
 		postId
 	);
@@ -109,6 +121,8 @@ export default function SidebarNavigationScreenTemplate() {
 				</>
 			}
 			description={ description }
+			content={ content }
+			footer={ footer }
 		/>
 	);
 }

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

@@ -3,23 +3,46 @@
 	align-items: center;
 	justify-content: space-between;
 	margin-top: $grid-unit-30;
+}
 
-	&-author {
-		display: inline-flex;
-		align-items: center;
+.edit-site-sidebar-navigation-screen-template__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
 
-		img {
-			border-radius: $grid-unit-15;
-		}
+	img {
+		border-radius: $grid-unit-15;
+	}
 
-		svg {
-			fill: $gray-600;
-		}
+	svg {
+		fill: $gray-600;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}
 
-		&-icon {
-			width: 24px;
-			height: 24px;
-			margin-right: $grid-unit-10;
-		}
+.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,7 +41,7 @@ const config = {
 			loading: __( 'Loading library' ),
 			notFound: __( 'No patterns found' ),
 			manage: __( 'Manage all template parts' ),
-			reusableBlocks: __( 'Manage reusable blocks' ),
+			reusableBlocks: __( 'Manage patterns' ),
 			description: __(
 				'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.'
 			),
@@ -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>
+						) }
+					</>
+				)
+			}
 		/>
 	);
 }