Update custom patterns label to 'My patterns' (#51949)

* rename custom patterns to my patterns * Add my patterns label to inserter and show at the top --------- Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
WordPress · Jun 28, 2023 · 2c604ed · 2c604ed
1 parent 90b3a50
commit 2c604ed
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -33,6 +33,7 @@ const noop = () => {};
 // Preferred order of pattern categories. Any other categories should
 // be at the bottom without any re-ordering.
 const patternCategoriesOrder = [
+	'custom',
 	'featured',
 	'posts',
 	'text',

diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../../store';
 
 const CUSTOM_CATEGORY = {
 	name: 'custom',
-	label: __( 'Custom patterns' ),
+	label: __( 'My patterns' ),
 	description: __( 'Custom patterns add by site users' ),
 };
 

diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
@@ -67,7 +67,7 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 						post_type: 'wp_block',
 					} ) }
 				>
-					{ __( 'Manage custom patterns' ) }
+					{ __( 'Manage my patterns' ) }
 				</Button>
 			</div>
 		</>

diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
@@ -24,7 +24,7 @@ export function useAdminNavigationCommands() {
 	} );
 	useCommand( {
 		name: 'core/manage-reusable-blocks',
-		label: __( 'Manage all custom patterns' ),
+		label: __( 'Manage all of my patterns' ),
 		callback: () => {
 			document.location.href = 'edit.php?post_type=wp_block';
 		},

diff --git a/packages/edit-site/src/components/page-library/utils.js b/packages/edit-site/src/components/page-library/utils.js
@@ -1,9 +1,9 @@
-export const DEFAULT_CATEGORY = 'header';
-export const DEFAULT_TYPE = 'wp_template_part';
+export const DEFAULT_CATEGORY = 'my-patterns';
+export const DEFAULT_TYPE = 'wp_block';
 export const PATTERNS = 'pattern';
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const USER_PATTERNS = 'wp_block';
-export const USER_PATTERN_CATEGORY = 'custom-patterns';
+export const USER_PATTERN_CATEGORY = 'my-patterns';
 
 export const CORE_PATTERN_SOURCES = [
 	'core',

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -10,7 +10,7 @@ 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 } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,6 +23,7 @@ import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-library/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 = {
@@ -41,6 +42,7 @@ 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();
@@ -58,7 +60,7 @@ export default function SidebarNavigationScreenLibrary() {
 				href="edit.php?post_type=wp_block"
 				withChevron
 			>
-				{ __( 'Manage all custom patterns' ) }
+				{ __( 'Manage all of my patterns' ) }
 			</SidebarNavigationItem>
 		</ItemGroup>
 	) : undefined;
@@ -86,6 +88,23 @@ export default function SidebarNavigationScreenLibrary() {
 									</Item>
 								</ItemGroup>
 							) }
+							{ hasMyPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__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">
 									{ Object.entries( templatePartAreas ).map(

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-my-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/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,
+	};
+}
diff --git a/...ages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/...ages/edit-site/src/components/sidebar-navigation-screen-library/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 };
 }