@wordpress/edit-site 5.12.0 → 5.12.1

package/src/components/sidebar-navigation-item/index.js

@@ -11,12 +11,14 @@ import {
 	__experimentalHStack as HStack,
 	FlexBlock,
 } from '@wordpress/components';
-import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { isRTL } from '@wordpress/i18n';
+import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
 
 export default function SidebarNavigationItem( {
 	className,
 	icon,
 	withChevron = false,
+	suffix,
 	children,
 	...props
 } ) {
@@ -24,6 +26,7 @@ export default function SidebarNavigationItem( {
 		<Item
 			className={ classnames(
 				'edit-site-sidebar-navigation-item',
+				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
 			{ ...props }
@@ -39,11 +42,12 @@ export default function SidebarNavigationItem( {
 				<FlexBlock>{ children }</FlexBlock>
 				{ withChevron && (
 					<Icon
-						icon={ chevronRightSmall }
+						icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
 						className="edit-site-sidebar-navigation-item__drilldown-indicator"
 						size={ 24 }
 					/>
 				) }
+				{ ! withChevron && suffix }
 			</HStack>
 		</Item>
 	);

package/src/components/sidebar-navigation-item/style.scss

@@ -4,6 +4,7 @@
 	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
 	border: none;
 	min-height: $grid-unit-50;
+	border-radius: $radius-block-ui;
 
 	&:hover,
 	&:focus,
@@ -22,12 +23,18 @@
 
 	&:is(a) {
 		text-decoration: none;
+		display: flex;
+		align-items: center;
 
 		&:focus {
 			box-shadow: none;
 			outline: none;
 		}
 	}
+
+	&.with-suffix {
+		padding-right: $grid-unit-20;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {

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

@@ -3,9 +3,10 @@
  */
 import {
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalHeading as Heading,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -16,7 +17,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import SidebarButton from '../sidebar-button';
 import {
 	isPreviewingTheme,
@@ -31,6 +32,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
+	backPath,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -39,7 +41,9 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
+	const { goTo } = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
+	const icon = isRTL() ? chevronRight : chevronLeft;
 
 	return (
 		<>
@@ -53,15 +57,23 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot ? (
+					{ ! isRoot && ! backPath && (
 						<NavigatorToParentButton
 							as={ SidebarButton }
 							icon={ isRTL() ? chevronRight : chevronLeft }
+							aria-label={ __( 'Back' ) }
+						/>
+					) }
+					{ ! isRoot && backPath && (
+						<SidebarButton
+							onClick={ () => goTo( backPath, { isBack: true } ) }
+							icon={ icon }
 							label={ __( 'Back' ) }
 						/>
-					) : (
+					) }
+					{ isRoot && (
 						<SidebarButton
-							icon={ isRTL() ? chevronRight : chevronLeft }
+							icon={ icon }
 							label={
 								! isPreviewingTheme()
 									? __( 'Go back to the Dashboard' )
@@ -77,7 +89,7 @@ export default function SidebarNavigationScreen( {
 					<Heading
 						className="edit-site-sidebar-navigation-screen__title"
 						color={ 'white' }
-						level={ 2 }
+						level={ 1 }
 						size={ 20 }
 					>
 						{ ! isPreviewingTheme()

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

@@ -14,13 +14,19 @@
 .edit-site-sidebar-navigation-screen__content {
 	color: $gray-400;
 	padding: 0 $grid-unit-20;
+
 	.components-item-group {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}
+
 	.components-text {
 		color: $gray-400;
 	}
+
+	.components-heading {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__meta {
@@ -51,7 +57,6 @@
 	top: 0;
 	background: $gray-900;
 	padding-top: $grid-unit-60 + $header-height;
-	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
@@ -82,7 +87,7 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen__sticky-section.edit-site-sidebar-navigation-screen__sticky-section {
+.edit-site-sidebar-navigation-screen__footer {
 	position: sticky;
 	bottom: 0;
 	background-color: $gray-900;
@@ -90,12 +95,27 @@
 	padding: $grid-unit-20 0;
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
-	box-shadow: 0 #{-$grid-unit-10} $grid-unit-20 $gray-900;
 }
 
-.edit-site-sidebar-navigation-screen__footer {
-	position: sticky;
-	bottom: 0;
-	background-color: $gray-900;
-	padding: $grid-unit-20 0;
+/* In general style overrides are discouraged.
+ * This is a temporary solution to override the InputControl component's styles.
+ * The `Theme` component will potentially be the more appropriate approach
+ * once that component is stabilized.
+ * See: packages/components/src/theme
+ */
+.edit-site-sidebar-navigation-screen__input-control {
+	width: 100%;
+	.components-input-control__container {
+		background: transparent;
+	}
+	.components-input-control__input {
+		color: $gray-200 !important;
+		background: $gray-800 !important;
+	}
+	.components-input-control__backdrop {
+		border: 4px !important;
+	}
+	.components-base-control__help {
+		color: $gray-600;
+	}
 }

package/src/components/sidebar-navigation-screen-details-footer/index.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
+
+export default function SidebarNavigationScreenDetailsFooter( {
+	lastModifiedDateTime,
+} ) {
+	return (
+		<>
+			{ lastModifiedDateTime && (
+				<SidebarNavigationScreenDetailsPanelRow className="edit-site-sidebar-navigation-screen-details-footer">
+					<SidebarNavigationScreenDetailsPanelLabel>
+						{ __( 'Last modified' ) }
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: %s: is the relative time when the post was last modified. */
+								__( '<time>%s</time>' ),
+								humanTimeDiff( lastModifiedDateTime )
+							),
+							{
+								time: (
+									<time dateTime={ lastModifiedDateTime } />
+								),
+							}
+						) }
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
+			) }
+		</>
+	);
+}

package/src/components/sidebar-navigation-screen-details-footer/style.scss

@@ -0,0 +1,5 @@
+.edit-site-sidebar-navigation-screen-details-footer {
+	padding-top: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+	padding-left: $grid-unit-20;
+}

package/src/components/sidebar-navigation-screen-details-panel/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenDetailsPanelLabel from './sidebar-navigation-screen-details-panel-label';
+import SidebarNavigationScreenDetailsPanelRow from './sidebar-navigation-screen-details-panel-row';
+import SidebarNavigationScreenDetailsPanelValue from './sidebar-navigation-screen-details-panel-value';
+
+function SidebarNavigationScreenDetailsPanel( { title, children, spacing } ) {
+	return (
+		<VStack
+			className="edit-site-sidebar-navigation-details-screen-panel"
+			spacing={ spacing }
+		>
+			{ title && (
+				<Heading
+					className="edit-site-sidebar-navigation-details-screen-panel__heading"
+					level={ 2 }
+				>
+					{ title }
+				</Heading>
+			) }
+			{ children }
+		</VStack>
+	);
+}
+
+export {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+};

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelLabel( {
+	children,
+} ) {
+	return (
+		<Text className="edit-site-sidebar-navigation-details-screen-panel__label">
+			{ children }
+		</Text>
+	);
+}

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelRow( {
+	label,
+	children,
+	className,
+} ) {
+	return (
+		<HStack
+			key={ label }
+			spacing={ 5 }
+			alignment="left"
+			className={ classnames(
+				'edit-site-sidebar-navigation-details-screen-panel__row',
+				className
+			) }
+		>
+			{ children }
+		</HStack>
+	);
+}

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelValue( {
+	children,
+} ) {
+	return (
+		<Text className="edit-site-sidebar-navigation-details-screen-panel__value">
+			{ children }
+		</Text>
+	);
+}

package/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -0,0 +1,25 @@
+.edit-site-sidebar-navigation-details-screen-panel {
+	margin-bottom: $grid-unit-30;
+
+	&:last-of-type {
+		margin-bottom: 0;
+	}
+
+	.edit-site-sidebar-navigation-details-screen-panel__heading {
+		color: $gray-400;
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 11px;
+		padding: 0;
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
+	color: $gray-600;
+	width: 100px;
+}
+
+.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
+	color: $gray-200;
+}

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -21,7 +21,7 @@ import { useCallback } from '@wordpress/element';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import StyleVariationsContainer from '../global-styles/style-variations-container';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
@@ -141,7 +141,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { openGeneralSidebar, setIsListViewOpened } =
+		useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
@@ -169,7 +170,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		// and the global styles sidebar is open. This ensures that
 		// the Style Book is not prematurely closed.
 		setEditorCanvasContainerView( 'style-book' );
-	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
+		setIsListViewOpened( false );
+	}, [
+		openGlobalStyles,
+		setEditorCanvasContainerView,
+		setIsListViewOpened,
+	] );
 
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();

package/src/components/sidebar-navigation-screen-global-styles/style.scss

@@ -1,6 +1,3 @@
-.edit-site-sidebar-navigation-screen-global-styles__footer {
-	padding-left: $grid-unit-15;
-}
 
 .edit-site-sidebar-navigation-screen-global-styles__revisions {
 	border-radius: $radius-block-ui;

package/src/components/sidebar-navigation-screen-library/category-item.js

@@ -0,0 +1,43 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLink } from '../routes/link';
+
+export default function CategoryItem( {
+	count,
+	icon,
+	id,
+	isActive,
+	label,
+	type,
+} ) {
+	const linkInfo = useLink(
+		{
+			path: '/library',
+			categoryType: type,
+			categoryId: id,
+		},
+		{
+			// Keep a record of where we came from in state so we can
+			// use the browser's back button to go back to the library.
+			// See the implementation of the back button in patterns-list.
+			backPath: '/library',
+		}
+	);
+
+	if ( ! count ) {
+		return;
+	}
+
+	return (
+		<SidebarNavigationItem
+			{ ...linkInfo }
+			icon={ icon }
+			suffix={ <span>{ count }</span> }
+			className={ isActive ? 'is-active-category' : undefined }
+		>
+			{ label }
+		</SidebarNavigationItem>
+	);
+}

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

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { getTemplatePartIcon } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { getQueryArgs } from '@wordpress/url';
+import { file } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import AddNewPattern from '../add-new-pattern';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import CategoryItem from './category-item';
+import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-library/utils';
+import { store as editSiteStore } from '../../store';
+import usePatternCategories from './use-pattern-categories';
+import useTemplatePartAreas from './use-template-part-areas';
+
+const templatePartAreaLabels = {
+	header: __( 'Headers' ),
+	footer: __( 'Footers' ),
+	sidebar: __( 'Sidebar' ),
+	uncategorized: __( 'Uncategorized' ),
+};
+
+export default function SidebarNavigationScreenLibrary() {
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const currentCategory = categoryId || DEFAULT_CATEGORY;
+	const currentType = categoryType || DEFAULT_TYPE;
+
+	const { templatePartAreas, hasTemplateParts, isLoading } =
+		useTemplatePartAreas();
+	const { patternCategories, hasPatterns } = usePatternCategories();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
+	return (
+		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
+			title={ __( 'Library' ) }
+			description={ __(
+				'Manage what patterns are available when editing your site.'
+			) }
+			actions={ <AddNewPattern /> }
+			footer={
+				<ItemGroup>
+					{ ! isMobileViewport && (
+						<SidebarNavigationItem
+							as="a"
+							href="edit.php?post_type=wp_block"
+							withChevron
+						>
+							{ __( 'Manage all custom patterns' ) }
+						</SidebarNavigationItem>
+					) }
+				</ItemGroup>
+			}
+			content={
+				<>
+					{ isLoading && __( 'Loading library' ) }
+					{ ! isLoading && (
+						<>
+							{ ! hasTemplateParts && ! hasPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+									<Item>
+										{ __(
+											'No template parts or patterns found'
+										) }
+									</Item>
+								</ItemGroup>
+							) }
+							{ hasTemplateParts && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+									{ Object.entries( templatePartAreas ).map(
+										( [ area, parts ] ) => (
+											<CategoryItem
+												key={ area }
+												count={ parts.length }
+												icon={ getTemplatePartIcon(
+													area
+												) }
+												label={
+													templatePartAreaLabels[
+														area
+													]
+												}
+												id={ area }
+												type="wp_template_part"
+												isActive={
+													currentCategory === area &&
+													currentType ===
+														'wp_template_part'
+												}
+											/>
+										)
+									) }
+								</ItemGroup>
+							) }
+							{ hasPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+									{ patternCategories.map( ( category ) => (
+										<CategoryItem
+											key={ category.name }
+											count={ category.count }
+											label={ category.label }
+											icon={ file }
+											id={ category.name }
+											type="pattern"
+											isActive={
+												currentCategory ===
+													`${ category.name }` &&
+												currentType === 'pattern'
+											}
+										/>
+									) ) }
+								</ItemGroup>
+							) }
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}

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

@@ -0,0 +1,7 @@
+.edit-site-sidebar-navigation-screen-library__group {
+	margin-bottom: $grid-unit-30;
+}
+
+.edit-site-sidebar-navigation-item.is-active-category {
+	background: $gray-800;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useDefaultPatternCategories() {
+	const blockPatternCategories = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+
+		return (
+			settings.__experimentalAdditionalBlockPatternCategories ??
+			settings.__experimentalBlockPatternCategories
+		);
+	} );
+
+	const restBlockPatternCategories = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatternCategories()
+	);
+
+	return [
+		...( blockPatternCategories || [] ),
+		...( restBlockPatternCategories || [] ),
+	];
+}