Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Patterns: Add My patterns back to post editor inserter categories #54767

Merged
merged 12 commits into from
Sep 25, 2023
Merged

Patterns: Add My patterns back to post editor inserter categories #54767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
83747b0
Add My patterns back to inserter categories
glendaviesnz Sep 24, 2023
efbcd70
Switch to a constant
glendaviesnz Sep 24, 2023
0b0a814
Make sure my patterns category also works in patterns explorer
glendaviesnz Sep 24, 2023
c643945
Just use the myPatternsCategory constant as is
glendaviesnz Sep 25, 2023
207a69c
Disable the non-user sources if the myPatterns category is selected
glendaviesnz Sep 25, 2023
3239296
Fix typo
glendaviesnz Sep 25, 2023
20a79bb
explicitly select the user type filter if category is myPatterns
glendaviesnz Sep 25, 2023
56ba44a
Fix issue with order of setting vars
glendaviesnz Sep 25, 2023
14fd9a9
Fix typo
glendaviesnz Sep 25, 2023
6158a4a
Add comment about why we are deriving the source when myPatterns cate…
glendaviesnz Sep 25, 2023
54b7c09
Fix resetting filters when switching categories
kevin940726 Sep 25, 2023
04e5fae
Make comment clearer
glendaviesnz Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 ) =>
Expand Down
80 changes: 57 additions & 23 deletions packages/block-editor/src/components/inserter/block-patterns-filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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,
} ) {
Copy link
Contributor Author

@glendaviesnz glendaviesnz Sep 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thinking below is that we don't want to explicitly update the parent components patternSourceFilter state if the user switches to My patterns as otherwise it is then set to this filter when they switch to another category, but it is still good to show the User option as selected I think. So deriving it from the props here achieves this and avoids them being confused if they switch from My patterns to another category without themselves having explicitly chosen the user filter.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have added a comment to source to explain this.

// 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(
() => [
Expand All @@ -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 ) ) {
Expand Down Expand Up @@ -117,15 +151,15 @@ export function BlockPatternsSyncFilter( {
<>
<MenuGroup label={ __( 'Author' ) }>
<MenuItemsChoice
choices={ patternSourceOptions }
choices={ patternSourceMenuOptions }
onSelect={ ( value ) => {
handleSetSourceFilterChange( value );
scrollContainerRef.current?.scrollTo(
0,
0
);
} }
value={ patternSourceFilter }
value={ currentPatternSourceFilter }
/>
</MenuGroup>
<MenuGroup label={ __( 'Type' ) }>
Expand Down
14 changes: 14 additions & 0 deletions packages/block-editor/src/components/inserter/block-patterns-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -191,6 +199,7 @@ export function BlockPatternsCategoryDialog( {
className="block-editor-inserter__patterns-category-dialog"
>
<BlockPatternsCategoryPanel
key={ category.name }
rootClientId={ rootClientId }
onInsert={ onInsert }
onHover={ onHover }
Expand Down Expand Up @@ -237,6 +246,9 @@ export function BlockPatternsCategoryPanel( {
if ( category.name === allPatternsCategory.name ) {
return true;
}
if ( category.name === myPatternsCategory.name && pattern.id ) {
return true;
}
if ( category.name !== 'uncategorized' ) {
return pattern.categories?.includes( category.name );
}
Expand Down Expand Up @@ -290,6 +302,7 @@ export function BlockPatternsCategoryPanel( {
setPatternSyncFilter={ setPatternSyncFilter }
setPatternSourceFilter={ setPatternSourceFilter }
scrollContainerRef={ scrollContainerRef }
category={ category }
/>
</HStack>
{ category.description && (
Expand Down Expand Up @@ -398,6 +411,7 @@ function BlockPatternsTabs( {
<MobileTabNavigation categories={ categories }>
{ ( category ) => (
<BlockPatternsCategoryPanel
key={ category.name }
onInsert={ onInsert }
rootClientId={ rootClientId }
category={ category }
Expand Down