Add action and selector to track access to Patterns page

packages/edit-site/src/components/add-new-pattern/index.js

@@ -8,14 +8,14 @@ import { plus, symbol, symbolFilled } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 
 const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModal } = unlock( editPatternsPrivateApis );
@@ -25,9 +25,8 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme()?.is_block_theme;
 	}, [] );
 
 	function handleCreatePattern( { pattern, categoryId } ) {
@@ -66,9 +65,7 @@ export default function AddNewPattern() {
 		},
 	];
 
-	// Remove condition when command palette issues are resolved.
-	// See: https://github.com/WordPress/gutenberg/issues/52154.
-	if ( ! isTemplatePartsMode ) {
+	if ( isBlockBasedTheme ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),

packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

@@ -10,6 +10,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 
 /**
@@ -23,6 +25,8 @@ import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function TemplatePartGroup( { areas, currentArea, currentType } ) {
 	return (
@@ -81,6 +85,8 @@ function PatternCategoriesGroup( {
 }
 
 export default function SidebarNavigationScreenPatterns() {
+	const { setDidAccessPatternsPage } = unlock( useDispatch( editSiteStore ) );
+	setDidAccessPatternsPage( true );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const currentCategory = categoryId || DEFAULT_CATEGORY;
@@ -89,7 +95,14 @@ export default function SidebarNavigationScreenPatterns() {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
-
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
 	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
@@ -100,14 +113,17 @@ export default function SidebarNavigationScreenPatterns() {
 			>
 				{ __( 'Manage all of my patterns' ) }
 			</SidebarNavigationItem>
-			<SidebarNavigationItem withChevron { ...templatePartsLink }>
-				{ __( 'Manage all template parts' ) }
-			</SidebarNavigationItem>
+			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
+				<SidebarNavigationItem withChevron { ...templatePartsLink }>
+					{ __( 'Manage all template parts' ) }
+				</SidebarNavigationItem>
+			) }
 		</ItemGroup>
 	) : undefined;
 
 	return (
 		<SidebarNavigationScreen
+			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -10,6 +10,7 @@ import { __experimentalUseNavigator as useNavigator } from '@wordpress/component
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const config = {
 	wp_template: {
@@ -32,15 +33,23 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 		params: { postType },
 	} = useNavigator();
 
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
+	const { isTemplatePartsMode, didAccessPatternsPage } = useSelect(
+		( select ) => {
+			return {
+				isTemplatePartsMode:
+					!! select( editSiteStore ).getSettings()
+						.supportsTemplatePartsMode,
+				didAccessPatternsPage: unlock(
+					select( editSiteStore )
+				).didAccessPatternsPage(),
+			};
+		},
+		[]
+	);
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
+			isRoot={ isTemplatePartsMode && ! didAccessPatternsPage }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }

packages/edit-site/src/store/private-actions.js

@@ -49,3 +49,18 @@ export const setEditorCanvasContainerView =
 			view,
 		} );
 	};
+
+/**
+ * Action that set the Patterns page has been accessed.
+ *
+ * @param {boolean} didAccessPatternsPage whether the Patterns page
+ *                                        was accessed or not.
+ */
+export const setDidAccessPatternsPage =
+	( didAccessPatternsPage ) =>
+	( { dispatch } ) => {
+		dispatch( {
+			type: 'SET_DID_ACCESS_PATTERNS_PAGE',
+			didAccessPatternsPage,
+		} );
+	};

packages/edit-site/src/store/private-selectors.js

@@ -19,3 +19,14 @@ export function getCanvasMode( state ) {
 export function getEditorCanvasContainerView( state ) {
 	return state.editorCanvasContainerView;
 }
+
+/**
+ * Returns whether the Patterns page was accessed or not.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Whether the Patterns page was accessed or not.
+ */
+export function didAccessPatternsPage( state ) {
+	return state.didAccessPatternsPage;
+}

packages/edit-site/src/store/reducer.js

@@ -177,6 +177,23 @@ export function hasPageContentFocus( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer used to track whether the Patterns page was accessed or not.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function didAccessPatternsPage( state = undefined, action ) {
+	switch ( action.type ) {
+		case 'SET_DID_ACCESS_PATTERNS_PAGE':
+			return action.didAccessPatternsPage;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -187,4 +204,5 @@ export default combineReducers( {
 	canvasMode,
 	editorCanvasContainerView,
 	hasPageContentFocus,
+	didAccessPatternsPage,
 } );