Patterns: Fix bug with templates in replace template screen showing a…

…s synced patterns (#56407)
WordPress · Nov 22, 2023 · c283c44 · c283c44 · github-actions · Nov 22, 2023
1 parent aa91684
commit c283c44
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -25,6 +25,7 @@ import { Icon, symbol } from '@wordpress/icons';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
+import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -71,7 +72,9 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={ showTooltip && ! pattern.id }
+						showTooltip={
+							showTooltip && ! pattern.type !== PATTERN_TYPES.user
+						}
 						title={ pattern.title }
 					>
 						<CompositeItem
@@ -82,7 +85,8 @@ function BlockPattern( {
 								'block-editor-block-patterns-list__item',
 								{
 									'block-editor-block-patterns-list__list-item-synced':
-										pattern.id && ! pattern.syncStatus,
+										pattern.type === PATTERN_TYPES.user &&
+										! pattern.syncStatus,
 								}
 							) }
 							onClick={ () => {
@@ -107,15 +111,17 @@ function BlockPattern( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.id && ! pattern.syncStatus && (
-									<div className="block-editor-patterns__pattern-icon-wrapper">
-										<Icon
-											className="block-editor-patterns__pattern-icon"
-											icon={ symbol }
-										/>
-									</div>
-								) }
-								{ ( ! showTooltip || pattern.id ) && (
+								{ pattern.type === PATTERN_TYPES.user &&
+									! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
+										</div>
+									) }
+								{ ( ! showTooltip ||
+									pattern.type === PATTERN_TYPES.user ) && (
 									<div className="block-editor-block-patterns-list__item-title">
 										{ pattern.title }
 									</div>

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -18,6 +18,7 @@ import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import {
+	PATTERN_TYPES,
 	allPatternsCategory,
 	myPatternsCategory,
 } from '../block-patterns-tab/utils';
@@ -70,7 +71,10 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 			if ( selectedCategory === allPatternsCategory.name ) {
 				return true;
 			}
-			if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+			if (
+				selectedCategory === myPatternsCategory.name &&
+				pattern.type === PATTERN_TYPES.user
+			) {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {

diff --git a/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -30,6 +30,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	PATTERN_TYPES,
 } from './utils';
 
 const noop = () => {};
@@ -69,7 +70,10 @@ export function PatternCategoryPreviews( {
 				if ( category.name === allPatternsCategory.name ) {
 					return true;
 				}
-				if ( category.name === myPatternsCategory.name && pattern.id ) {
+				if (
+					category.name === myPatternsCategory.name &&
+					pattern.type === PATTERN_TYPES.user
+				) {
 					return true;
 				}
 				if ( category.name !== 'uncategorized' ) {

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js
@@ -14,6 +14,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	PATTERN_TYPES,
 } from './utils';
 
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
@@ -69,7 +70,11 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-		if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+		if (
+			filteredPatterns.some(
+				( pattern ) => pattern.type === PATTERN_TYPES.user
+			)
+		) {
 			categories.unshift( myPatternsCategory );
 		}
 		if ( filteredPatterns.length > 0 ) {

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js
@@ -53,9 +53,11 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 		return true;
 	}
 
-	// If user source selected, filter out theme patterns. Any pattern without
-	// an id wasn't created by a user.
-	if ( sourceFilter === PATTERN_TYPES.user && ! pattern.id ) {
+	// If user source selected, filter out theme patterns.
+	if (
+		sourceFilter === PATTERN_TYPES.user &&
+		pattern.type !== PATTERN_TYPES.user
+	) {
 		return true;
 	}
 

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
@@ -11,6 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { PATTERN_TYPES } from '../block-patterns-tab/utils';
 
 /**
  * Retrieves the block patterns inserter state.
@@ -57,7 +58,8 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.id && pattern.syncStatus !== 'unsynced'
+				pattern.type === PATTERN_TYPES.user &&
+				pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -27,6 +27,7 @@ import { createRegistrySelector } from '@wordpress/data';
  * Internal dependencies
  */
 import { orderBy } from '../utils/sorting';
+import { PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 
 /**
  * A block selection object.
@@ -2287,6 +2288,7 @@ function getUserPatterns( state ) {
 		return {
 			name: `core/block/${ userPattern.id }`,
 			id: userPattern.id,
+			type: PATTERN_TYPES.user,
 			title: userPattern.title.raw,
 			categories: userPattern.wp_pattern_category.map( ( catId ) =>
 				categories && categories.get( catId )

diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -159,7 +159,7 @@ const selectPatterns = createSelector(
 			// User patterns can have their sync statuses checked directly
 			// Non-user patterns are all unsynced for the time being.
 			patterns = patterns.filter( ( pattern ) => {
-				return pattern.id
+				return pattern.type === PATTERN_TYPES.user
 					? pattern.syncStatus === syncStatus
 					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
 			} );

diff --git a/packages/patterns/src/components/duplicate-pattern-modal.js b/packages/patterns/src/components/duplicate-pattern-modal.js
@@ -10,11 +10,11 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import CreatePatternModal from './create-pattern-modal';
-import { PATTERN_SYNC_TYPES } from '../constants';
+import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../constants';
 
 function getTermLabels( pattern, categories ) {
-	// Theme patterns don't have an id and rely on core pattern categories.
-	if ( ! pattern.id ) {
+	// Theme patterns rely on core pattern categories.
+	if ( pattern.type !== PATTERN_TYPES.user ) {
 		return categories.core
 			?.filter( ( category ) =>
 				pattern.categories.includes( category.name )
@@ -52,9 +52,10 @@ export default function DuplicatePatternModal( {
 	const duplicatedProps = {
 		content: pattern.content,
 		defaultCategories: getTermLabels( pattern, categories ),
-		defaultSyncType: ! pattern.id // Theme patterns don't have an ID.
-			? PATTERN_SYNC_TYPES.unsynced
-			: pattern.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
+		defaultSyncType:
+			pattern.type !== PATTERN_TYPES.user // Theme patterns are unsynced by default.
+				? PATTERN_SYNC_TYPES.unsynced
+				: pattern.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
 		defaultTitle: sprintf(
 			/* translators: %s: Existing pattern title */
 			__( '%s (Copy)' ),