@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

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

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalTruncate as Truncate,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { layout } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useLink } from '../routes/link';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+
+const PageItem = ( { postType = 'page', postId, ...props } ) => {
+	const linkInfo = useLink(
+		{
+			postType,
+			postId,
+		},
+		{
+			backPath: '/page',
+		}
+	);
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
+export default function SidebarNavigationScreenPagesDataViews() {
+	const { records: templateRecords } = useEntityRecords(
+		'postType',
+		TEMPLATE_POST_TYPE,
+		{
+			per_page: -1,
+		}
+	);
+	const templates = useMemo(
+		() =>
+			templateRecords?.filter( ( { slug } ) =>
+				[ '404', 'search' ].includes( slug )
+			),
+		[ templateRecords ]
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Pages' ) }
+			content={ <DataViewsSidebarContent /> }
+			footer={
+				<VStack spacing={ 0 }>
+					{ templates?.map( ( item ) => (
+						<PageItem
+							postType={ TEMPLATE_POST_TYPE }
+							postId={ item.id }
+							key={ item.id }
+							icon={ layout }
+							withChevron
+						>
+							<Truncate numberOfLines={ 1 }>
+								{ decodeEntities(
+									item.title?.rendered || __( '(no title)' )
+								) }
+							</Truncate>
+						</PageItem>
+					) ) }
+				</VStack>
+			}
+		/>
+	);
+}

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

@@ -95,7 +95,7 @@ export default function usePatternCategories() {
 		sortedCategories.unshift( {
 			name: PATTERN_DEFAULT_CATEGORY,
 			label: __( 'All patterns' ),
-			description: __( 'A list of all patterns from all sources' ),
+			description: __( 'A list of all patterns from all sources.' ),
 			count: themePatterns.length + userPatterns.length,
 		} );
 

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

@@ -9,12 +9,8 @@ import {
 	CheckboxControl,
 	__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';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,58 +19,19 @@ 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';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const EMPTY_OBJECT = {};
 
-function TemplateAreaButton( { postId, icon, title } ) {
-	const icons = {
-		header,
-		footer,
-	};
-	const linkInfo = useLink( {
-		postType: TEMPLATE_PART_POST_TYPE,
-		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 { editEntityRecord } = useDispatch( coreStore );
 
 	const {
 		allowCommentsOnNewPosts,
-		templatePartAreas,
 		postsPerPage,
 		postsPageTitle,
 		postsPageId,
-		currentTemplateParts,
 	} = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
-		const { getSettings, getCurrentTemplateTemplateParts } = unlock(
-			select( editSiteStore )
-		);
 		const siteSettings = getEntityRecord( 'root', 'site' );
 		const _postsPageRecord = siteSettings?.page_for_posts
 			? getEntityRecord(
@@ -90,8 +47,6 @@ export default function HomeTemplateDetails() {
 			postsPageTitle: _postsPageRecord?.title?.rendered,
 			postsPageId: _postsPageRecord?.id,
 			postsPerPage: siteSettings?.posts_per_page,
-			templatePartAreas: getSettings()?.defaultTemplatePartAreas,
-			currentTemplateParts: getCurrentTemplateTemplateParts(),
 		};
 	}, [] );
 
@@ -111,36 +66,6 @@ export default function HomeTemplateDetails() {
 		setPostsCountValue( postsPerPage );
 	}, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] );
 
-	/*
-	 * Merge data in currentTemplateParts with templatePartAreas,
-	 * which contains the template icon and fallback labels
-	 */
-	const templateAreas = useMemo( () => {
-		// Keep track of template part IDs that have already been added to the array.
-		const templatePartIds = new Set();
-		const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => {
-			// If the template part has already been added to the array, skip it.
-			if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) {
-				return;
-			}
-			// Add to the array of template part IDs.
-			templatePartIds.add( currentTemplatePart.templatePart.id );
-			return currentTemplatePart;
-		};
-
-		return currentTemplateParts.length && templatePartAreas
-			? currentTemplateParts
-					.filter( filterOutDuplicateTemplateParts )
-					.map( ( { templatePart, block } ) => ( {
-						...templatePartAreas?.find(
-							( { area } ) => area === templatePart?.area
-						),
-						...templatePart,
-						clientId: block.clientId,
-					} ) )
-			: [];
-	}, [ currentTemplateParts, templatePartAreas ] );
-
 	const setAllowCommentsOnNewPosts = ( newValue ) => {
 		setCommentsOnNewPostsValue( newValue );
 		editEntityRecord( 'root', 'site', undefined, {
@@ -214,26 +139,6 @@ export default function HomeTemplateDetails() {
 					/>
 				</SidebarNavigationScreenDetailsPanelRow>
 			</SidebarNavigationScreenDetailsPanel>
-			<SidebarNavigationScreenDetailsPanel
-				title={ __( 'Areas' ) }
-				spacing={ 3 }
-			>
-				<ItemGroup>
-					{ templateAreas.map(
-						( { clientId, label, icon, theme, slug, title } ) => (
-							<SidebarNavigationScreenDetailsPanelRow
-								key={ clientId }
-							>
-								<TemplateAreaButton
-									postId={ `${ theme }//${ slug }` }
-									title={ title?.rendered || label }
-									icon={ icon }
-								/>
-							</SidebarNavigationScreenDetailsPanelRow>
-						)
-					) }
-				</ItemGroup>
-			</SidebarNavigationScreenDetailsPanel>
 		</>
 	);
 }

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

@@ -12,6 +12,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import TemplateAreas from './template-areas';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../lock-unlock';
@@ -45,8 +46,13 @@ function useTemplateDetails( postType, postId ) {
 
 	const content =
 		record?.slug === 'home' || record?.slug === 'index' ? (
-			<HomeTemplateDetails />
-		) : null;
+			<>
+				<HomeTemplateDetails />
+				<TemplateAreas />
+			</>
+		) : (
+			<TemplateAreas />
+		);
 
 	const footer = record?.modified ? (
 		<SidebarNavigationScreenDetailsFooter record={ record } />

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

@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	__experimentalTruncate as Truncate,
+	__experimentalItemGroup as ItemGroup,
+} from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
+import { useMemo } 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';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+function TemplateAreaButton( { postId, area, title } ) {
+	const templatePartArea = useSelect(
+		( select ) => {
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
+
+			return defaultAreas.find(
+				( defaultArea ) => defaultArea.area === area
+			);
+		},
+		[ area ]
+	);
+	const linkInfo = useLink( {
+		postType: TEMPLATE_PART_POST_TYPE,
+		postId,
+	} );
+
+	return (
+		<SidebarNavigationItem
+			className="edit-site-sidebar-navigation-screen-template__template-area-button"
+			{ ...linkInfo }
+			icon={ templatePartArea?.icon }
+			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 TemplateAreas() {
+	const { templatePartAreas, currentTemplateParts } = useSelect(
+		( select ) => {
+			const { getSettings, getCurrentTemplateTemplateParts } = unlock(
+				select( editSiteStore )
+			);
+			return {
+				templatePartAreas: getSettings()?.defaultTemplatePartAreas,
+				currentTemplateParts: getCurrentTemplateTemplateParts(),
+			};
+		},
+		[]
+	);
+
+	/*
+	 * Merge data in currentTemplateParts with templatePartAreas,
+	 * which contains the template icon and fallback labels
+	 */
+	const templateAreas = useMemo( () => {
+		// Keep track of template part IDs that have already been added to the array.
+		const templatePartIds = new Set();
+		const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => {
+			// If the template part has already been added to the array, skip it.
+			if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) {
+				return;
+			}
+			// Add to the array of template part IDs.
+			templatePartIds.add( currentTemplatePart.templatePart.id );
+			return currentTemplatePart;
+		};
+
+		return currentTemplateParts.length && templatePartAreas
+			? currentTemplateParts
+					.filter( filterOutDuplicateTemplateParts )
+					.map( ( { templatePart, block } ) => ( {
+						...templatePartAreas?.find(
+							( { area } ) => area === templatePart?.area
+						),
+						...templatePart,
+						clientId: block.clientId,
+					} ) )
+			: [];
+	}, [ currentTemplateParts, templatePartAreas ] );
+
+	if ( ! templateAreas.length ) {
+		return null;
+	}
+
+	return (
+		<SidebarNavigationScreenDetailsPanel
+			title={ __( 'Areas' ) }
+			spacing={ 3 }
+		>
+			<ItemGroup>
+				{ templateAreas.map(
+					( { clientId, label, area, theme, slug, title } ) => (
+						<SidebarNavigationScreenDetailsPanelRow
+							key={ clientId }
+						>
+							<TemplateAreaButton
+								postId={ `${ theme }//${ slug }` }
+								title={ title?.rendered || label }
+								area={ area }
+							/>
+						</SidebarNavigationScreenDetailsPanelRow>
+					)
+				) }
+			</ItemGroup>
+		</SidebarNavigationScreenDetailsPanel>
+	);
+}

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

@@ -4,6 +4,7 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -30,20 +31,11 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
 		TEMPLATE_POST_TYPE,
-		{
-			per_page: -1,
-		}
-	);
-
-	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) =>
-		a.title.rendered.localeCompare( b.title.rendered )
+		{ per_page: -1 }
 	);
-
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
 	const canCreate = ! isMobileViewport;
 	return (
@@ -66,24 +58,7 @@ export default function SidebarNavigationScreenTemplates() {
 				<>
 					{ isLoading && __( 'Loading templates…' ) }
 					{ ! isLoading && (
-						<ItemGroup>
-							{ ! templates?.length && (
-								<Item>{ __( 'No templates found' ) }</Item>
-							) }
-							{ sortedTemplates.map( ( template ) => (
-								<TemplateItem
-									postType={ TEMPLATE_POST_TYPE }
-									postId={ template.id }
-									key={ template.id }
-									withChevron
-								>
-									{ decodeEntities(
-										template.title?.rendered ||
-											template.slug
-									) }
-								</TemplateItem>
-							) ) }
-						</ItemGroup>
+						<SidebarTemplatesList templates={ templates } />
 					) }
 				</>
 			}
@@ -97,3 +72,85 @@ export default function SidebarNavigationScreenTemplates() {
 		/>
 	);
 }
+
+function TemplatesGroup( { title, templates } ) {
+	return (
+		<ItemGroup>
+			{ !! title && (
+				<Item className="edit-site-sidebar-navigation-screen-templates__templates-group-title">
+					{ title }
+				</Item>
+			) }
+			{ templates.map( ( template ) => (
+				<TemplateItem
+					postType={ TEMPLATE_POST_TYPE }
+					postId={ template.id }
+					key={ template.id }
+					withChevron
+				>
+					{ decodeEntities(
+						template.title?.rendered || template.slug
+					) }
+				</TemplateItem>
+			) ) }
+		</ItemGroup>
+	);
+}
+function SidebarTemplatesList( { templates } ) {
+	if ( ! templates?.length ) {
+		return (
+			<ItemGroup>
+				<Item>{ __( 'No templates found' ) }</Item>
+			</ItemGroup>
+		);
+	}
+	const sortedTemplates = templates ? [ ...templates ] : [];
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
+	const { hierarchyTemplates, customTemplates, ...plugins } =
+		sortedTemplates.reduce(
+			( accumulator, template ) => {
+				const {
+					original_source: originalSource,
+					author_text: authorText,
+				} = template;
+				if ( originalSource === 'plugin' ) {
+					if ( ! accumulator[ authorText ] ) {
+						accumulator[ authorText ] = [];
+					}
+					accumulator[ authorText ].push( template );
+				} else if ( template.is_custom ) {
+					accumulator.customTemplates.push( template );
+				} else {
+					accumulator.hierarchyTemplates.push( template );
+				}
+				return accumulator;
+			},
+			{ hierarchyTemplates: [], customTemplates: [] }
+		);
+	return (
+		<VStack spacing={ 3 }>
+			{ !! hierarchyTemplates.length && (
+				<TemplatesGroup templates={ hierarchyTemplates } />
+			) }
+			{ !! customTemplates.length && (
+				<TemplatesGroup
+					title={ __( 'Custom' ) }
+					templates={ customTemplates }
+				/>
+			) }
+			{ Object.entries( plugins ).map(
+				( [ plugin, pluginTemplates ] ) => {
+					return (
+						<TemplatesGroup
+							key={ plugin }
+							title={ plugin }
+							templates={ pluginTemplates }
+						/>
+					);
+				}
+			) }
+		</VStack>
+	);
+}

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

@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
+	text-transform: uppercase;
+	color: $gray-200;
+	// 6px right padding to align with + button
+	padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20;
+	border-top: 1px solid $gray-800;
+	font-size: 11px;
+	font-weight: 500;
+}

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

@@ -17,6 +17,7 @@ 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';
+import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { memo } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
@@ -57,11 +58,9 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
 	const disableMotion = useReducedMotion();
-	const {
-		setCanvasMode,
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-	} = unlock( useDispatch( editSiteStore ) );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { setDeviceType } = useDispatch( editorStore );
 	const isBackToDashboardButton = canvasMode === 'view';
 	const siteIconButtonProps = isBackToDashboardButton
 		? {
@@ -76,7 +75,7 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 					event.preventDefault();
 					if ( canvasMode === 'edit' ) {
 						clearSelectedBlock();
-						setPreviewDeviceType( 'Desktop' );
+						setDeviceType( 'Desktop' );
 						setCanvasMode( 'view' );
 					}
 				},

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

@@ -73,7 +73,10 @@
 .edit-site-site-hub_toggle-command-center {
 	color: $gray-200;
 
-	&:hover {
-		color: $gray-100;
+	&:hover,
+	&:active {
+		svg {
+			fill: $gray-100;
+		}
 	}
 }