@wordpress/edit-site 5.12.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

@@ -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

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

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

@@ -27,7 +27,7 @@ import { store as commandsStore } from '@wordpress/commands';
  */
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
@@ -156,14 +156,18 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							{ decodeEntities( siteTitle ) }
 						</motion.div>
 					</AnimatePresence>
-					<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"
-					/>
+					{ 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/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(

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -10,7 +10,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -31,8 +31,13 @@ export default function useInitEditedEntityFromURL() {
 		};
 	}, [] );
 
-	const { setTemplate, setTemplatePart, setPage } =
-		useDispatch( editSiteStore );
+	const {
+		setEditedEntity,
+		setTemplate,
+		setTemplatePart,
+		setPage,
+		setNavigationMenu,
+	} = useDispatch( editSiteStore );
 
 	useEffect( () => {
 		if ( postType && postId ) {
@@ -43,6 +48,12 @@ export default function useInitEditedEntityFromURL() {
 				case 'wp_template_part':
 					setTemplatePart( postId );
 					break;
+				case 'wp_navigation':
+					setNavigationMenu( postId );
+					break;
+				case 'wp_block':
+					setEditedEntity( postType, postId );
+					break;
 				default:
 					setPage( {
 						context: { postType, postId },
@@ -68,8 +79,10 @@ export default function useInitEditedEntityFromURL() {
 		postType,
 		homepageId,
 		isRequestingSite,
+		setEditedEntity,
 		setPage,
 		setTemplate,
 		setTemplatePart,
+		setNavigationMenu,
 	] );
 }

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -9,7 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -8,7 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -18,6 +18,7 @@ export function getPathFromURL( urlParams ) {
 	// Compute the navigator path based on the URL params.
 	if ( urlParams?.postType && urlParams?.postId ) {
 		switch ( urlParams.postType ) {
+			case 'wp_block':
 			case 'wp_template':
 			case 'wp_template_part':
 			case 'page':
@@ -86,10 +87,19 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
+		} else if ( navigatorLocation.path === '/library' ) {
+			updateUrlParams( {
+				postType: undefined,
+				postId: undefined,
+				canvas: undefined,
+				path: navigatorLocation.path,
+			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,
 				postId: undefined,
+				categoryType: undefined,
+				categoryId: undefined,
 				path:
 					navigatorLocation.path === '/'
 						? undefined

package/src/components/table/index.js

@@ -0,0 +1,33 @@
+export default function Table( { data, columns } ) {
+	return (
+		<div className="edit-site-table-wrapper">
+			<table className="edit-site-table">
+				<thead>
+					<tr>
+						{ columns.map( ( column ) => (
+							<th key={ column.header }>{ column.header }</th>
+						) ) }
+					</tr>
+				</thead>
+				<tbody>
+					{ data.map( ( row, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ columns.map( ( column, columnIndex ) => (
+								<td
+									style={ {
+										maxWidth: column.maxWidth
+											? column.maxWidth
+											: undefined,
+									} }
+									key={ columnIndex }
+								>
+									{ column.cell( row ) }
+								</td>
+							) ) }
+						</tr>
+					) ) }
+				</tbody>
+			</table>
+		</div>
+	);
+}

package/src/components/table/style.scss

@@ -0,0 +1,37 @@
+.edit-site-table-wrapper {
+	width: 100%;
+}
+
+.edit-site-table {
+	width: 100%;
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+	position: relative;
+	a {
+		text-decoration: none;
+	}
+	th {
+		text-align: left;
+		font-weight: normal;
+		padding: 0 $grid-unit-20 $grid-unit-20;
+		color: $gray-700;
+	}
+	td {
+		padding: $grid-unit-20;
+	}
+	td,
+	th {
+		vertical-align: center;
+		&:first-child {
+			padding-left: 0;
+		}
+		&:last-child {
+			padding-right: 0;
+			text-align: right;
+		}
+	}
+	tr {
+		border-bottom: 1px solid $gray-100;
+	}
+}