@wordpress/edit-site 5.24.1 → 5.25.0

package/src/components/sidebar/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -33,53 +38,65 @@ import DataViewsSidebarContent from '../sidebar-dataviews';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+function SidebarScreenWrapper( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ classNames(
+				'edit-site-sidebar__screen-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
 function SidebarScreens() {
 	useSyncPathWithURL();
 
 	return (
 		<>
-			<NavigatorScreen path="/">
+			<SidebarScreenWrapper path="/">
 				<SidebarNavigationScreenMain />
-			</NavigatorScreen>
-			<NavigatorScreen path="/navigation">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
-			</NavigatorScreen>
-			<NavigatorScreen path="/navigation/:postType/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationMenu />
-			</NavigatorScreen>
-			<NavigatorScreen path="/wp_global_styles">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/wp_global_styles">
 				<SidebarNavigationScreenGlobalStyles />
-			</NavigatorScreen>
-			<NavigatorScreen path="/page">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/page">
 				<SidebarNavigationScreenPages />
-			</NavigatorScreen>
-			<NavigatorScreen path="/page/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />
-			</NavigatorScreen>
+			</SidebarScreenWrapper>
 			{ window?.__experimentalAdminViews && (
-				<NavigatorScreen path="/pages">
+				<SidebarScreenWrapper path="/pages">
 					<SidebarNavigationScreen
 						title={ __( 'Pages' ) }
 						backPath="/page"
 						content={ <DataViewsSidebarContent /> }
 					/>
-				</NavigatorScreen>
+				</SidebarScreenWrapper>
 			) }
-			<NavigatorScreen path="/:postType(wp_template)">
+			<SidebarScreenWrapper path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
-			</NavigatorScreen>
-			<NavigatorScreen path="/patterns">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/patterns">
 				<SidebarNavigationScreenPatterns />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
-			</NavigatorScreen>
+			</SidebarScreenWrapper>
 		</>
 	);
 }

package/src/components/sidebar/style.scss

@@ -1,14 +1,17 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
+}
+
+.edit-site-sidebar__screen-wrapper {
+	@include custom-scrollbars-on-hover(transparent, $gray-700);
+	scrollbar-gutter: stable;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 
-	.components-navigator-screen {
-		@include custom-scrollbars-on-hover(transparent, $gray-700);
-		scrollbar-gutter: stable;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
+	// This matches the logo padding
+	padding: 0 $grid-unit-15;
 }
 
 .edit-site-sidebar__footer {
@@ -17,8 +20,3 @@
 	margin: 0 $canvas-padding;
 	padding: $canvas-padding 0;
 }
-
-.edit-site-sidebar__content > div {
-	// This matches the logo padding
-	padding: 0 $grid-unit-15;
-}

package/src/components/sidebar-dataviews/dataview-item.js

@@ -6,9 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { page, columns, pullRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
+import { VIEW_LAYOUTS } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
@@ -18,11 +18,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
-function getDataViewIcon( type ) {
-	const icons = { list: page, grid: columns, 'side-by-side': pullRight };
-	return icons[ type ];
-}
-
 export default function DataViewItem( {
 	title,
 	slug,
@@ -37,7 +32,8 @@ export default function DataViewItem( {
 		params: { path },
 	} = useLocation();
 
-	const iconToUse = icon || getDataViewIcon( type );
+	const iconToUse =
+		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
 	const linkInfo = useLink( {
 		path,

package/src/components/sidebar-dataviews/default-views.js

@@ -7,10 +7,10 @@ import { trash } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { OPERATOR_IN } from '../dataviews/constants';
+import { LAYOUT_TABLE, OPERATOR_IN } from '../../utils/constants';
 
 const DEFAULT_PAGE_BASE = {
-	type: 'list',
+	type: LAYOUT_TABLE,
 	search: '',
 	filters: [],
 	page: 1,

package/src/components/sidebar-edit-mode/page-panels/index.js

@@ -12,6 +12,7 @@ import { humanTimeDiff } from '@wordpress/date';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -22,28 +23,39 @@ import PageContent from './page-content';
 import PageSummary from './page-summary';
 
 export default function PagePanels() {
-	const { id, type, hasResolved, status, date, password, title, modified } =
-		useSelect( ( select ) => {
-			const { getEditedPostContext } = select( editSiteStore );
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const context = getEditedPostContext();
-			const queryArgs = [ 'postType', context.postType, context.postId ];
-			const page = getEditedEntityRecord( ...queryArgs );
-			return {
-				hasResolved: hasFinishedResolution(
-					'getEditedEntityRecord',
-					queryArgs
-				),
-				title: page?.title,
-				id: page?.id,
-				type: page?.type,
-				status: page?.status,
-				date: page?.date,
-				password: page?.password,
-				modified: page?.modified,
-			};
-		}, [] );
+	const {
+		id,
+		type,
+		hasResolved,
+		status,
+		date,
+		password,
+		title,
+		modified,
+		renderingMode,
+	} = useSelect( ( select ) => {
+		const { getEditedPostContext } = select( editSiteStore );
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const { getRenderingMode } = select( editorStore );
+		const context = getEditedPostContext();
+		const queryArgs = [ 'postType', context.postType, context.postId ];
+		const page = getEditedEntityRecord( ...queryArgs );
+		return {
+			hasResolved: hasFinishedResolution(
+				'getEditedEntityRecord',
+				queryArgs
+			),
+			title: page?.title,
+			id: page?.id,
+			type: page?.type,
+			status: page?.status,
+			date: page?.date,
+			password: page?.password,
+			modified: page?.modified,
+			renderingMode: getRenderingMode(),
+		};
+	}, [] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -77,9 +89,11 @@ export default function PagePanels() {
 					postType={ type }
 				/>
 			</PanelBody>
-			<PanelBody title={ __( 'Content' ) }>
-				<PageContent />
-			</PanelBody>
+			{ renderingMode !== 'post-only' && (
+				<PanelBody title={ __( 'Content' ) }>
+					<PageContent />
+				</PanelBody>
+			) }
 		</>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -6,13 +6,13 @@ import {
 	PostAuthorPanel,
 	PostURLPanel,
 	PostSchedulePanel,
+	PostTemplatePanel,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import PageStatus from './page-status';
-import EditTemplate from './edit-template';
 
 export default function PageSummary( {
 	status,
@@ -31,7 +31,7 @@ export default function PageSummary( {
 				postType={ postType }
 			/>
 			<PostSchedulePanel />
-			<EditTemplate />
+			<PostTemplatePanel />
 			<PostURLPanel />
 			<PostAuthorPanel />
 		</VStack>

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -1,39 +1,9 @@
-.edit-site-swap-template-modal {
-	z-index: z-index(".edit-site-swap-template-modal");
-}
+
 
 .edit-site-page-panels__swap-template__confirm-modal__actions {
 	margin-top: $grid-unit-30;
 }
 
-.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
-	column-count: 2;
-	column-gap: $grid-unit-30;
-
-	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus-fallback;
-
-	@include break-medium() {
-		column-count: 3;
-	}
-
-	@include break-wide() {
-		column-count: 4;
-	}
-
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
-}
-
 .edit-site-change-status__content {
 	.components-popover__content {
 		min-width: 320px;
@@ -69,14 +39,3 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
-.edit-site-page-panels-edit-template__dropdown {
-	.components-popover__content {
-		min-width: 240px;
-	}
-	.components-button.is-pressed,
-	.components-button.is-pressed:hover {
-		background: inherit;
-		color: inherit;
-	}
-}

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -27,16 +27,22 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 
 						<Button
+							__next40pxDefaultSize
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"

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