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

De-emphasise pattern filters in inserter #54681

Merged
merged 21 commits into from
Sep 22, 2023
Merged

De-emphasise pattern filters in inserter #54681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
406d3a4
de-emphasise pattern filters in inserter
SaxonF Sep 21, 2023
97b0644
Remove obsolete props from PatternListHeader
aaronrobertshaw Sep 21, 2023
8c2a7ab
Remove unnecessary dependencies comment
aaronrobertshaw Sep 21, 2023
e9b5006
Remove unused pattern source filters
aaronrobertshaw Sep 21, 2023
979d9be
Fix pattern filtering logic
aaronrobertshaw Sep 21, 2023
34293bc
Split theme patterns from core and directory sourced ones
aaronrobertshaw Sep 21, 2023
32f7a31
Allow theme and directory patterns as unsynced
aaronrobertshaw Sep 21, 2023
d4ec9c6
Disable the sync filter options if the pattern source is not user
glendaviesnz Sep 21, 2023
1f0ed2a
Add constants for different all values
glendaviesnz Sep 21, 2023
14f6acd
Keep the menu open while toggling options
glendaviesnz Sep 21, 2023
b55d967
Add sticky header
glendaviesnz Sep 22, 2023
3a2afce
Fix padding and move pagination
glendaviesnz Sep 22, 2023
f42cbc7
Fix pagination scroll to top
glendaviesnz Sep 22, 2023
42e8aa1
Reset pagination if filter changes
glendaviesnz Sep 22, 2023
a75cccf
Revert the update to paging scroll to top
glendaviesnz Sep 22, 2023
b6d5df8
Fix scrolling-to-top after page changes
kevin940726 Sep 22, 2023
cf60dac
Fix scrolling-to-top after filter changes
kevin940726 Sep 22, 2023
023e034
Scroll to top on category change
kevin940726 Sep 22, 2023
74188d4
Fix scroll-to-top on category change
kevin940726 Sep 22, 2023
d00e6f8
Derive pattern sync menu options
kevin940726 Sep 22, 2023
f9c7827
Update the translators comment
kevin940726 Sep 22, 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
33 changes: 21 additions & 12 deletions packages/block-editor/src/components/block-patterns-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { useState, forwardRef } from '@wordpress/element';
import {
VisuallyHidden,
__unstableComposite as Composite,
Expand All @@ -24,6 +24,7 @@ import { Icon, symbol } from '@wordpress/icons';
*/
import BlockPreview from '../block-preview';
import InserterDraggableBlocks from '../inserter-draggable-blocks';
import BlockPatternsPaging from '../block-patterns-paging';

const WithToolTip = ( { showTooltip, title, children } ) => {
if ( showTooltip ) {
Expand Down Expand Up @@ -140,23 +141,28 @@ function BlockPatternPlaceholder() {
);
}

function BlockPatternList( {
isDraggable,
blockPatterns,
shownPatterns,
onHover,
onClickPattern,
orientation,
label = __( 'Block Patterns' ),
showTitlesAsTooltip,
} ) {
function BlockPatternList(
{
isDraggable,
blockPatterns,
shownPatterns,
onHover,
onClickPattern,
orientation,
label = __( 'Block Patterns' ),
showTitlesAsTooltip,
pagingProps,
},
ref
) {
const composite = useCompositeState( { orientation } );
return (
<Composite
{ ...composite }
role="listbox"
className="block-editor-block-patterns-list"
aria-label={ label }
ref={ ref }
>
{ blockPatterns.map( ( pattern ) => {
const isShown = shownPatterns.includes( pattern );
Expand All @@ -174,8 +180,11 @@ function BlockPatternList( {
<BlockPatternPlaceholder key={ pattern.name } />
);
} ) }
{ pagingProps && pagingProps.numPages > 1 && (
<BlockPatternsPaging { ...pagingProps } />
) }
</Composite>
);
}

export default BlockPatternList;
export default forwardRef( BlockPatternList );
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-patterns-paging/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function Pagination( {
totalItems,
} ) {
return (
<VStack>
<VStack className="block-editor-patterns__grid-pagination-wrapper">
<Text variant="muted">
{
// translators: %s: Total number of patterns.
Expand Down
29 changes: 16 additions & 13 deletions packages/block-editor/src/components/block-patterns-paging/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
.block-editor-patterns__grid-pagination {
border-top: 1px solid $gray-800;
padding: $grid-unit-05;
.block-editor-patterns__grid-pagination-wrapper {

.components-button.is-tertiary {
width: auto;
height: $button-size-compact;
.block-editor-patterns__grid-pagination {
border-top: 1px solid $gray-800;
padding: $grid-unit-05;
justify-content: center;
.components-button.is-tertiary {
width: auto;
height: $button-size-compact;
justify-content: center;

&:disabled {
color: $gray-600;
background: none;
}
&:disabled {
color: $gray-600;
background: none;
}

&:hover:not(:disabled) {
color: $white;
background-color: $gray-700;
&:hover:not(:disabled) {
color: $white;
background-color: $gray-700;
}
}
}
}
Expand Down
80 changes: 13 additions & 67 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
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
import { useMemo, useEffect, useRef } from '@wordpress/element';
import { _n, sprintf } from '@wordpress/i18n';
import { useDebounce } from '@wordpress/compose';
import { __experimentalHeading as Heading } from '@wordpress/components';
Expand All @@ -17,58 +17,33 @@ 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, isPatternFiltered } from '../block-patterns-tab';
import { BlockPatternsSyncFilter } from '../block-patterns-sync-filter';
import {
PATTERN_TYPES,
PATTERN_SOURCE_FILTERS,
} from '../block-patterns-source-filter';

function PatternsListHeader( {
filterValue,
filteredBlockPatternsLength,
selectedCategory,
patternCategories,
} ) {
import { allPatternsCategory } from '../block-patterns-tab';

function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
if ( ! filterValue ) {
return null;
}
let filter = filterValue;
if ( selectedCategory !== allPatternsCategory.name ) {
const category = patternCategories.find(
( patternCategory ) => patternCategory.name === selectedCategory
);
if ( category ) {
filter = `${ filter } - ${ category?.label }`;
}
}

return (
<Heading
level={ 2 }
lineHeight={ '48px' }
className="block-editor-block-patterns-explorer__search-results-count"
>
{ sprintf(
/* translators: %d: number of patterns. %s: block pattern search query */
/* translators: %d: number of patterns. */
_n(
'%1$d pattern found for "%2$s"',
'%1$d patterns found for "%2$s"',
'%d pattern found',
'%d patterns found',
filteredBlockPatternsLength
),
filteredBlockPatternsLength,
filter
filteredBlockPatternsLength
) }
</Heading>
);
}

function PatternList( {
searchValue,
patternSourceFilter,
selectedCategory,
patternCategories,
} ) {
const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
function PatternList( { searchValue, selectedCategory, patternCategories } ) {
const container = useRef();
const debouncedSpeak = useDebounce( speak, 500 );
const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
Expand All @@ -89,16 +64,6 @@ function PatternList( {

const filteredBlockPatterns = useMemo( () => {
const filteredPatterns = patterns.filter( ( pattern ) => {
if (
isPatternFiltered(
pattern,
patternSourceFilter,
patternSyncFilter
)
) {
return false;
}

if ( selectedCategory === allPatternsCategory.name ) {
return true;
}
Expand All @@ -119,18 +84,12 @@ function PatternList( {
return filteredPatterns;
}

return searchItems(
filteredPatterns,
searchValue,
patternSourceFilter
);
return searchItems( filteredPatterns, searchValue );
}, [
searchValue,
patternSourceFilter,
patterns,
selectedCategory,
registeredPatternCategories,
patternSyncFilter,
] );

// Announce search results on change.
Expand All @@ -150,8 +109,7 @@ function PatternList( {
const pagingProps = usePatternsPaging(
filteredBlockPatterns,
selectedCategory,
container,
patternSourceFilter
container
);

const hasItems = !! filteredBlockPatterns?.length;
Expand All @@ -161,23 +119,11 @@ function PatternList( {
ref={ container }
>
<PatternsListHeader
filterValue={
searchValue || PATTERN_SOURCE_FILTERS[ patternSourceFilter ]
}
filterValue={ searchValue }
filteredBlockPatternsLength={ filteredBlockPatterns.length }
selectedCategory={ selectedCategory }
patternCategories={ patternCategories }
/>

<InserterListbox>
{ patternSourceFilter === PATTERN_TYPES.user &&
! searchValue && (
<BlockPatternsSyncFilter
patternSyncFilter={ patternSyncFilter }
setPatternSyncFilter={ setPatternSyncFilter }
/>
) }

{ hasItems && (
<BlockPatternsList
shownPatterns={ pagingProps.categoryPatternsAsyncList }
Expand Down
15 changes: 0 additions & 15 deletions packages/block-editor/src/components/inserter/block-patterns-explorer/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@
import { Button, SearchControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { default as BlockPatternsSourceFilter } from '../block-patterns-source-filter';
import { allPatternsCategory } from '../block-patterns-tab';

function PatternCategoriesList( {
selectedCategory,
patternCategories,
Expand Down Expand Up @@ -56,8 +50,6 @@ function PatternExplorerSidebar( {
selectedCategory,
patternCategories,
onClickCategory,
patternSourceFilter,
setPatternSourceFilter,
searchValue,
setSearchValue,
} ) {
Expand All @@ -68,13 +60,6 @@ function PatternExplorerSidebar( {
searchValue={ searchValue }
setSearchValue={ setSearchValue }
/>
<BlockPatternsSourceFilter
value={ patternSourceFilter }
onChange={ ( value ) => {
setPatternSourceFilter( value );
onClickCategory( allPatternsCategory.name );
} }
/>
{ ! searchValue && (
<PatternCategoriesList
selectedCategory={ selectedCategory }
Expand Down
Loading