@wordpress/edit-site 5.11.0 → 5.12.1

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

@@ -2,22 +2,33 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit, seen } from '@wordpress/icons';
+import { backup, edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import {
+	Icon,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalVStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { humanTimeDiff } from '@wordpress/date';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 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';
 import StyleBook from '../style-book';
+import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
+
+const noop = () => {};
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -51,8 +62,87 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
+function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<StyleVariationsContainer />
+		</BlockEditorProvider>
+	);
+}
+
+function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
+	const { revisions, isLoading } = useGlobalStylesRevisions();
+	const { revisionsCount } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
+
+	const hasRevisions = revisionsCount >= 2;
+	const modified = revisions?.[ 0 ]?.modified;
+
+	if ( ! hasRevisions || isLoading || ! modified ) {
+		return null;
+	}
+
+	return (
+		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
+			<SidebarNavigationItem
+				className="edit-site-sidebar-navigation-screen-global-styles__revisions"
+				label={ __( 'Revisions' ) }
+				onClick={ onClickRevisions }
+			>
+				<HStack
+					as="span"
+					alignment="center"
+					spacing={ 5 }
+					direction="row"
+					justify="space-between"
+				>
+					<span className="edit-site-sidebar-navigation-screen-global-styles__revisions__label">
+						{ __( 'Last modified' ) }
+					</span>
+					<span>
+						<time dateTime={ modified }>
+							{ humanTimeDiff( modified ) }
+						</time>
+					</span>
+					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
+				</HStack>
+			</SidebarNavigationItem>
+		</VStack>
+	);
+}
+
 export default function SidebarNavigationScreenGlobalStyles() {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { openGeneralSidebar, setIsListViewOpened } =
+		useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
@@ -65,19 +155,36 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		[]
 	);
 
-	const openGlobalStyles = async () =>
-		Promise.all( [
-			setCanvasMode( 'edit' ),
-			openGeneralSidebar( 'edit-site/global-styles' ),
-		] );
+	const openGlobalStyles = useCallback(
+		async () =>
+			Promise.all( [
+				setCanvasMode( 'edit' ),
+				openGeneralSidebar( 'edit-site/global-styles' ),
+			] ),
+		[ setCanvasMode, openGeneralSidebar ]
+	);
 
-	const openStyleBook = async () => {
+	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
 		// Open the Style Book once the canvas mode is set to edit,
 		// and the global styles sidebar is open. This ensures that
 		// the Style Book is not prematurely closed.
 		setEditorCanvasContainerView( 'style-book' );
-	};
+		setIsListViewOpened( false );
+	}, [
+		openGlobalStyles,
+		setEditorCanvasContainerView,
+		setIsListViewOpened,
+	] );
+
+	const openRevisions = useCallback( async () => {
+		await openGlobalStyles();
+		// Open the global styles revisions once the canvas mode is set to edit,
+		// and the global styles sidebar is open. The global styles UI is responsible
+		// for redirecting to the revisions screen once the editor canvas container
+		// has been set to 'global-styles-revisions'.
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
 	return (
 		<>
@@ -86,9 +193,14 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Choose a different style combination for the theme styles.'
 				) }
-				content={ <StyleVariationsContainer /> }
+				content={ <SidebarNavigationScreenGlobalStylesContent /> }
+				footer={
+					<SidebarNavigationScreenGlobalStylesFooter
+						onClickRevisions={ openRevisions }
+					/>
+				}
 				actions={
-					<div>
+					<>
 						{ ! isMobileViewport && (
 							<SidebarButton
 								icon={ seen }
@@ -108,7 +220,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 							label={ __( 'Edit styles' ) }
 							onClick={ async () => await openGlobalStyles() }
 						/>
-					</div>
+					</>
 				}
 			/>
 			{ isStyleBookOpened && ! isMobileViewport && (

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

@@ -0,0 +1,12 @@
+
+.edit-site-sidebar-navigation-screen-global-styles__revisions {
+	border-radius: $radius-block-ui;
+
+	&:not(:hover) {
+		color: $gray-200;
+
+		.edit-site-sidebar-navigation-screen-global-styles__revisions__label {
+			color: $gray-600;
+		}
+	}
+}

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

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

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useDefaultPatternCategories from './use-default-pattern-categories';
+import useThemePatterns from './use-theme-patterns';
+
+export default function usePatternCategories() {
+	const defaultCategories = useDefaultPatternCategories();
+	const themePatterns = useThemePatterns();
+	const userPatterns = useSelect( ( select ) =>
+		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+			per_page: -1,
+		} )
+	);
+
+	const patternCategories = useMemo( () => {
+		const categoryMap = {};
+		const categoriesWithCounts = [];
+
+		// Create a map for easier counting of patterns in categories.
+		defaultCategories.forEach( ( category ) => {
+			if ( ! categoryMap[ category.name ] ) {
+				categoryMap[ category.name ] = { ...category, count: 0 };
+			}
+		} );
+
+		// Update the category counts to reflect theme registered patterns.
+		themePatterns.forEach( ( pattern ) => {
+			pattern.categories?.forEach( ( category ) => {
+				if ( categoryMap[ category ] ) {
+					categoryMap[ category ].count += 1;
+				}
+			} );
+		} );
+
+		// Filter categories so we only have those containing patterns.
+		defaultCategories.forEach( ( category ) => {
+			if ( categoryMap[ category.name ].count ) {
+				categoriesWithCounts.push( categoryMap[ category.name ] );
+			}
+		} );
+
+		// Add "Your Patterns" category for user patterns if there are any.
+		if ( userPatterns?.length ) {
+			categoriesWithCounts.push( {
+				count: userPatterns.length || 0,
+				name: 'custom-patterns',
+				label: __( 'Custom patterns' ),
+			} );
+		}
+
+		return categoriesWithCounts;
+	}, [ defaultCategories, themePatterns, userPatterns ] );
+
+	return { patternCategories, hasPatterns: !! patternCategories.length };
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+
+const getTemplatePartAreas = ( items ) => {
+	const allItems = items || [];
+
+	const groupedByArea = allItems.reduce(
+		( accumulator, item ) => {
+			const key = accumulator[ item.area ] ? item.area : 'uncategorized';
+			accumulator[ key ].push( item );
+			return accumulator;
+		},
+		{ header: [], footer: [], sidebar: [], uncategorized: [] }
+	);
+
+	return groupedByArea;
+};
+
+export default function useTemplatePartAreas() {
+	const { records: templateParts, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{ per_page: -1 }
+	);
+
+	return {
+		hasTemplateParts: templateParts ? !! templateParts.length : false,
+		isLoading,
+		templatePartAreas: getTemplatePartAreas( templateParts ),
+	};
+}

package/src/components/sidebar-navigation-screen-library/use-theme-patterns.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	CORE_PATTERN_SOURCES,
+	filterOutDuplicatesByName,
+} from '../page-library/utils';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useThemePatterns() {
+	const blockPatterns = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return (
+			getSettings().__experimentalAdditionalBlockPatterns ??
+			getSettings().__experimentalBlockPatterns
+		);
+	} );
+
+	const restBlockPatterns = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatterns()
+	);
+
+	const patterns = useMemo(
+		() =>
+			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter(
+					( pattern ) =>
+						! CORE_PATTERN_SOURCES.includes( pattern.source )
+				)
+				.filter( filterOutDuplicatesByName ),
+		[ blockPatterns, restBlockPatterns ]
+	);
+
+	return patterns;
+}

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

@@ -4,10 +4,11 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 import { useEffect } from '@wordpress/element';
 
@@ -17,25 +18,21 @@ import { useEffect } from '@wordpress/element';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';
 
 export default function SidebarNavigationScreenMain() {
-	const editorCanvasContainerView = useSelect( ( select ) => {
-		return unlock( select( editSiteStore ) ).getEditorCanvasContainerView();
-	}, [] );
-
+	const { location } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 
 	// Clear the editor canvas container view when accessing the main navigation screen.
 	useEffect( () => {
-		if ( editorCanvasContainerView ) {
+		if ( location?.path === '/' ) {
 			setEditorCanvasContainerView( undefined );
 		}
-	}, [ editorCanvasContainerView, setEditorCanvasContainerView ] );
+	}, [ setEditorCanvasContainerView, location?.path ] );
 
 	return (
 		<SidebarNavigationScreen
@@ -46,14 +43,14 @@ export default function SidebarNavigationScreenMain() {
 			) }
 			content={
 				<ItemGroup>
-					<SidebarNavigationScreenNavigationMenuButton
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/navigation"
 						withChevron
 						icon={ navigation }
-						as={ SidebarNavigationItem }
 					>
 						{ __( 'Navigation' ) }
-					</SidebarNavigationScreenNavigationMenuButton>
-
+					</NavigatorButton>
 					<SidebarNavigationItemGlobalStyles
 						withChevron
 						icon={ styles }
@@ -78,7 +75,7 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/wp_template_part"
+						path="/library"
 						withChevron
 						icon={ symbol }
 					>

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

@@ -15,7 +15,7 @@ import { pencil } from '@wordpress/icons';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';