@wordpress/edit-site 5.12.5 → 5.12.6

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

@@ -16,6 +16,7 @@ import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -32,14 +33,21 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 const noop = () => {};
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar, toggleFeature } = useDispatch( editSiteStore );
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
-	const hasGlobalStyleVariations = useSelect(
-		( select ) =>
-			!! select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { hasGlobalStyleVariations, isDistractionFree } = useSelect(
+		( select ) => ( {
+			hasGlobalStyleVariations:
+				!! select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+			isDistractionFree: select( preferencesStore ).get(
+				editSiteStore.name,
+				'distractionFree'
+			),
+		} ),
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
@@ -56,15 +64,18 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 			{ ...props }
 			onClick={ () => {
 				// Disable distraction free mode.
-				toggleFeature( 'distractionFree', false );
-				createNotice(
-					'info',
-					__( 'Distraction free mode turned off' ),
-					{
-						isDismissible: true,
-						type: 'snackbar',
-					}
-				);
+				if ( isDistractionFree ) {
+					setPreference(
+						editSiteStore.name,
+						'distractionFree',
+						false
+					);
+					createNotice(
+						'info',
+						__( 'Distraction free mode turned off.' ),
+						{ type: 'snackbar' }
+					);
+				}
 				// Switch to edit mode.
 				setCanvasMode( 'edit' );
 				// Open global styles sidebar.

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

@@ -75,11 +75,11 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/library"
+						path="/patterns"
 						withChevron
 						icon={ symbol }
 					>
-						{ __( 'Library' ) }
+						{ __( 'Patterns' ) }
 					</NavigatorButton>
 				</ItemGroup>
 			}

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

@@ -33,11 +33,8 @@ export default function SidebarNavigationScreenNavigationMenu() {
 
 	const { isSaving, isDeleting } = useSelect(
 		( select ) => {
-			const {
-				isSavingEntityRecord,
-				isDeletingEntityRecord,
-				getEditedEntityRecord: getEditedEntityRecordSelector,
-			} = select( coreStore );
+			const { isSavingEntityRecord, isDeletingEntityRecord } =
+				select( coreStore );
 
 			return {
 				isSaving: isSavingEntityRecord( 'postType', postType, postId ),
@@ -46,7 +43,6 @@ export default function SidebarNavigationScreenNavigationMenu() {
 					postType,
 					postId
 				),
-				getEditedEntityRecord: getEditedEntityRecordSelector,
 			};
 		},
 		[ postId ]

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

@@ -21,6 +21,7 @@ import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 import { useLink } from '../routes/link';
 import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
 import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
+import { unlock } from '../../lock-unlock';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
@@ -41,6 +42,9 @@ function buildMenuLabel( title, id, status ) {
 	);
 }
 
+// Save a boolean to prevent us creating a fallback more than once per session.
+let hasCreatedFallback = false;
+
 export default function SidebarNavigationScreenNavigationMenus() {
 	const {
 		records: navigationMenus,
@@ -55,18 +59,22 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	const isLoading =
 		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
 
-	const getNavigationFallbackId = useSelect(
-		( select ) => select( coreStore ).getNavigationFallbackId
-	);
+	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
 
 	const firstNavigationMenu = navigationMenus?.[ 0 ];
 
+	// Save a boolean to prevent us creating a fallback more than once per session.
+	if ( firstNavigationMenu ) {
+		hasCreatedFallback = true;
+	}
+
 	// If there is no navigation menu found
 	// then trigger fallback algorithm to create one.
 	if (
 		! firstNavigationMenu &&
 		! isResolvingNavigationMenus &&
-		hasResolvedNavigationMenus
+		hasResolvedNavigationMenus &&
+		! hasCreatedFallback
 	) {
 		getNavigationFallbackId();
 	}

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

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { layout, page, home, loop, plus } from '@wordpress/icons';
+import { layout, page, home, verse, plus } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -159,7 +159,7 @@ export default function SidebarNavigationScreenPages() {
 											itemIcon = home;
 											break;
 										case postsPage:
-											itemIcon = loop;
+											itemIcon = verse;
 											break;
 										default:
 											itemIcon = page;

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

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -13,19 +14,26 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import usePatternDetails from './use-pattern-details';
-import useNavigationMenuContent from './use-navigation-menu-content';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export default function SidebarNavigationScreenPattern() {
 	const { params } = useNavigator();
+	const { categoryType } = getQueryArgs( window.location.href );
 	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
-	const content = useNavigationMenuContent( postType, postId );
+
+	// The absence of a category type in the query params for template parts
+	// indicates the user has arrived at the template part via the "manage all"
+	// page and the back button should return them to that list page.
+	const backPath =
+		! categoryType && postType === 'wp_template_part'
+			? '/wp_template_part/all'
+			: '/patterns';
 
 	return (
 		<SidebarNavigationScreen
@@ -36,8 +44,7 @@ export default function SidebarNavigationScreenPattern() {
 					icon={ pencil }
 				/>
 			}
-			backPath={ '/library' }
-			content={ content }
+			backPath={ backPath }
 			{ ...patternDetails }
 		/>
 	);

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

@@ -23,3 +23,7 @@
 	height: 24px;
 	margin-right: $grid-unit-10;
 }
+
+.edit-site-sidebar-navigation-screen-pattern__lock-icon {
+	display: inline-flex;
+}

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

@@ -11,7 +11,14 @@ import { Icon } from '@wordpress/components';
  */
 import { useAddedBy } from '../list/added-by';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 export default function usePatternDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
@@ -82,5 +89,40 @@ export default function usePatternDetails( postType, postId ) {
 		/>
 	) : null;
 
-	return { title, description, footer };
+	const details = [];
+
+	if ( postType === 'wp_block' ) {
+		details.push( {
+			label: __( 'Syncing' ),
+			value:
+				record.meta?.sync_status === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ),
+		} );
+	}
+
+	const content = (
+		<>
+			{ !! details.length && (
+				<SidebarNavigationScreenDetailsPanel
+					spacing={ 5 }
+					title={ __( 'Details' ) }
+				>
+					{ details.map( ( { label, value } ) => (
+						<SidebarNavigationScreenDetailsPanelRow key={ label }>
+							<SidebarNavigationScreenDetailsPanelLabel>
+								{ label }
+							</SidebarNavigationScreenDetailsPanelLabel>
+							<SidebarNavigationScreenDetailsPanelValue>
+								{ value }
+							</SidebarNavigationScreenDetailsPanelValue>
+						</SidebarNavigationScreenDetailsPanelRow>
+					) ) }
+				</SidebarNavigationScreenDetailsPanel>
+			) }
+			{ useNavigationMenuContent( postType, postId ) }
+		</>
+	);
+
+	return { title, description, content, footer };
 }

package/src/components/{sidebar-navigation-screen-library → sidebar-navigation-screen-patterns}/category-item.js

@@ -14,15 +14,15 @@ export default function CategoryItem( {
 } ) {
 	const linkInfo = useLink(
 		{
-			path: '/library',
+			path: '/patterns',
 			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.
+			// use the browser's back button to go back to Patterns.
 			// See the implementation of the back button in patterns-list.
-			backPath: '/library',
+			backPath: '/patterns',
 		}
 	);
 

package/src/components/{sidebar-navigation-screen-library → sidebar-navigation-screen-patterns}/index.js

@@ -4,13 +4,16 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	Flex,
+	Icon,
+	Tooltip,
 } 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';
+import { file, starFilled, lockSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,9 +22,11 @@ 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 { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
 import { store as editSiteStore } from '../../store';
+import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
+import useMyPatterns from './use-my-patterns';
 import useTemplatePartAreas from './use-template-part-areas';
 
 const templatePartAreaLabels = {
@@ -31,7 +36,7 @@ const templatePartAreaLabels = {
 	uncategorized: __( 'Uncategorized' ),
 };
 
-export default function SidebarNavigationScreenLibrary() {
+export default function SidebarNavigationScreenPatterns() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const currentCategory = categoryId || DEFAULT_CATEGORY;
@@ -40,40 +45,45 @@ export default function SidebarNavigationScreenLibrary() {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
+	const { myPatterns, hasPatterns: hasMyPatterns } = useMyPatterns();
 
 	const isTemplatePartsMode = useSelect( ( select ) => {
 		const settings = select( editSiteStore ).getSettings();
 		return !! settings.supportsTemplatePartsMode;
 	}, [] );
 
+	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
+	const footer = ! isMobileViewport ? (
+		<ItemGroup>
+			<SidebarNavigationItem withChevron { ...templatePartsLink }>
+				{ __( 'Manage all template parts' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				as="a"
+				href="edit.php?post_type=wp_block"
+				withChevron
+			>
+				{ __( 'Manage all of my patterns' ) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	) : undefined;
+
 	return (
 		<SidebarNavigationScreen
 			isRoot={ isTemplatePartsMode }
-			title={ __( 'Library' ) }
+			title={ __( 'Patterns' ) }
 			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>
-			}
+			footer={ footer }
 			content={
 				<>
-					{ isLoading && __( 'Loading library' ) }
+					{ isLoading && __( 'Loading patterns' ) }
 					{ ! isLoading && (
 						<>
 							{ ! hasTemplateParts && ! hasPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									<Item>
 										{ __(
 											'No template parts or patterns found'
@@ -81,8 +91,25 @@ export default function SidebarNavigationScreenLibrary() {
 									</Item>
 								</ItemGroup>
 							) }
+							{ hasMyPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+									<CategoryItem
+										key={ myPatterns.name }
+										count={ myPatterns.count }
+										label={ myPatterns.label }
+										icon={ starFilled }
+										id={ myPatterns.name }
+										type="wp_block"
+										isActive={
+											currentCategory ===
+												`${ myPatterns.name }` &&
+											currentType === 'wp_block'
+										}
+									/>
+								</ItemGroup>
+							) }
 							{ hasTemplateParts && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									{ Object.entries( templatePartAreas ).map(
 										( [ area, parts ] ) => (
 											<CategoryItem
@@ -109,12 +136,38 @@ export default function SidebarNavigationScreenLibrary() {
 								</ItemGroup>
 							) }
 							{ hasPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									{ patternCategories.map( ( category ) => (
 										<CategoryItem
 											key={ category.name }
 											count={ category.count }
-											label={ category.label }
+											label={
+												<Flex
+													justify="left"
+													align="center"
+													gap={ 0 }
+												>
+													{ category.label }
+													<Tooltip
+														position="top center"
+														text={ __(
+															'Theme patterns cannot be edited.'
+														) }
+													>
+														<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
+															<Icon
+																style={ {
+																	fill: 'currentcolor',
+																} }
+																icon={
+																	lockSmall
+																}
+																size={ 24 }
+															/>
+														</span>
+													</Tooltip>
+												</Flex>
+											}
 											icon={ file }
 											id={ category.name }
 											type="pattern"

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

@@ -0,0 +1,3 @@
+.edit-site-sidebar-navigation-screen-patterns__group {
+	margin-bottom: $grid-unit-30;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+export default function useMyPatterns() {
+	const myPatterns = useSelect( ( select ) =>
+		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+			per_page: -1,
+		} )
+	);
+
+	return {
+		myPatterns: {
+			count: myPatterns?.length || 0,
+			name: 'my-patterns',
+			label: __( 'My patterns' ),
+		},
+		hasPatterns: !! myPatterns?.length,
+	};
+}

package/src/components/{sidebar-navigation-screen-library → sidebar-navigation-screen-patterns}/use-pattern-categories.js

@@ -1,10 +1,7 @@
 /**
  * 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
@@ -15,11 +12,6 @@ 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 = {};
@@ -48,17 +40,8 @@ export default function usePatternCategories() {
 			}
 		} );
 
-		// 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 ] );
+	}, [ defaultCategories, themePatterns ] );
 
 	return { patternCategories, hasPatterns: !! patternCategories.length };
 }

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

@@ -11,7 +11,7 @@ import { useMemo } from '@wordpress/element';
 import {
 	CORE_PATTERN_SOURCES,
 	filterOutDuplicatesByName,
-} from '../page-library/utils';
+} from '../page-patterns/utils';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';