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 ) => (