diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
index 84cb80f5d59715..e96d1b2321eb26 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
@@ -17,7 +17,7 @@ import InserterListbox from '../../inserter-listbox';
import { searchItems } from '../search-items';
import BlockPatternsPaging from '../../block-patterns-paging';
import usePatternsPaging from '../hooks/use-patterns-paging';
-import { allPatternsCategory } from '../block-patterns-tab';
+import { allPatternsCategory, myPatternsCategory } from '../block-patterns-tab';
function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
if ( ! filterValue ) {
@@ -67,7 +67,9 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
if ( selectedCategory === allPatternsCategory.name ) {
return true;
}
-
+ if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+ return true;
+ }
if ( selectedCategory === 'uncategorized' ) {
const hasKnownCategory = pattern.categories.some(
( category ) =>
diff --git a/packages/block-editor/src/components/inserter/block-patterns-filter.js b/packages/block-editor/src/components/inserter/block-patterns-filter.js
index 4a9cb68fcb19e0..92a65efbd5c54e 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-filter.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-filter.js
@@ -12,6 +12,11 @@ import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { myPatternsCategory } from './block-patterns-tab';
+
export const PATTERN_TYPES = {
all: 'all',
synced: 'synced',
@@ -21,25 +26,6 @@ export const PATTERN_TYPES = {
directory: 'directory',
};
-const patternSourceOptions = [
- { value: PATTERN_TYPES.all, label: __( 'All' ) },
- {
- value: PATTERN_TYPES.directory,
- label: __( 'Directory' ),
- info: __( 'Pattern directory & core' ),
- },
- {
- value: PATTERN_TYPES.theme,
- label: __( 'Theme' ),
- info: __( 'Bundled with the theme' ),
- },
- {
- value: PATTERN_TYPES.user,
- label: __( 'User' ),
- info: __( 'Custom created' ),
- },
-];
-
export const SYNC_TYPES = {
all: 'all',
full: 'fully',
@@ -49,17 +35,37 @@ export const SYNC_TYPES = {
const getShouldDisableSyncFilter = ( sourceFilter ) =>
sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
+const getShouldDisableNonUserSources = ( category ) => {
+ return category.name === myPatternsCategory.name;
+};
+
export function BlockPatternsSyncFilter( {
setPatternSyncFilter,
setPatternSourceFilter,
patternSyncFilter,
patternSourceFilter,
scrollContainerRef,
+ category,
} ) {
+ // If the category is `myPatterns` then we need to set the source filter to `user`, but
+ // we do this by deriving from props rather than calling setPatternSourceFilter otherwise
+ // the user may be confused when switching to another category if the haven't explicity set
+ // this filter themselves.
+ const currentPatternSourceFilter =
+ category.name === myPatternsCategory.name
+ ? PATTERN_TYPES.user
+ : patternSourceFilter;
+
// We need to disable the sync filter option if the source filter is not 'all' or 'user'
// otherwise applying them will just result in no patterns being shown.
- const shouldDisableSyncFilter =
- getShouldDisableSyncFilter( patternSourceFilter );
+ const shouldDisableSyncFilter = getShouldDisableSyncFilter(
+ currentPatternSourceFilter
+ );
+
+ // We also need to disable the directory and theme source filter options if the category
+ // is `myPatterns` otherwise applying them will also just result in no patterns being shown.
+ const shouldDisableNonUserSources =
+ getShouldDisableNonUserSources( category );
const patternSyncMenuOptions = useMemo(
() => [
@@ -80,6 +86,34 @@ export function BlockPatternsSyncFilter( {
[ shouldDisableSyncFilter ]
);
+ const patternSourceMenuOptions = useMemo(
+ () => [
+ {
+ value: PATTERN_TYPES.all,
+ label: __( 'All' ),
+ disabled: shouldDisableNonUserSources,
+ },
+ {
+ value: PATTERN_TYPES.directory,
+ label: __( 'Directory' ),
+ info: __( 'Pattern directory & core' ),
+ disabled: shouldDisableNonUserSources,
+ },
+ {
+ value: PATTERN_TYPES.theme,
+ label: __( 'Theme' ),
+ info: __( 'Bundled with the theme' ),
+ disabled: shouldDisableNonUserSources,
+ },
+ {
+ value: PATTERN_TYPES.user,
+ label: __( 'User' ),
+ info: __( 'Custom created' ),
+ },
+ ],
+ [ shouldDisableNonUserSources ]
+ );
+
function handleSetSourceFilterChange( newSourceFilter ) {
setPatternSourceFilter( newSourceFilter );
if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
@@ -117,7 +151,7 @@ export function BlockPatternsSyncFilter( {
<>
{
handleSetSourceFilterChange( value );
scrollContainerRef.current?.scrollTo(
@@ -125,7 +159,7 @@ export function BlockPatternsSyncFilter( {
0
);
} }
- value={ patternSourceFilter }
+ value={ currentPatternSourceFilter }
/>
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
index 926a9fa9203d30..59f1a4936a241d 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -45,6 +45,11 @@ export const allPatternsCategory = {
label: __( 'All Patterns' ),
};
+export const myPatternsCategory = {
+ name: 'myPatterns',
+ label: __( 'My patterns' ),
+};
+
export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
const isUserPattern = pattern.name.startsWith( 'core/block' );
const isDirectoryPattern =
@@ -144,6 +149,9 @@ export function usePatternsCategories( rootClientId, sourceFilter = 'all' ) {
label: _x( 'Uncategorized' ),
} );
}
+ if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+ categories.unshift( myPatternsCategory );
+ }
if ( filteredPatterns.length > 0 ) {
categories.unshift( {
name: allPatternsCategory.name,
@@ -191,6 +199,7 @@ export function BlockPatternsCategoryDialog( {
className="block-editor-inserter__patterns-category-dialog"
>
{ category.description && (
@@ -398,6 +411,7 @@ function BlockPatternsTabs( {
{ ( category ) => (