Skip to content

Commit 076a7a5

Browse files
glendaviesnzglendaviesnz
committed
very rough addition of filter and paging in order to get designs
1 parent 903ee91 commit 076a7a5

File tree

9 files changed

+185
-34
lines changed

9 files changed

+185
-34
lines changed

‎packages/block-editor/src/components/block-patterns-list/index.js

+7-32
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import {
88
__unstableUseCompositeState as useCompositeState,
99
__unstableCompositeItem as CompositeItem,
1010
Tooltip,
11-
__experimentalToggleGroupControl as ToggleGroupControl,
12-
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
1311
} from '@wordpress/components';
1412
import { useInstanceId } from '@wordpress/compose';
1513
import { __ } from '@wordpress/i18n';
@@ -20,15 +18,8 @@ import { Icon, symbolFilled } from '@wordpress/icons';
2018
*/
2119
import BlockPreview from '../block-preview';
2220
import InserterDraggableBlocks from '../inserter-draggable-blocks';
23-
const SYNC_TYPES = {
24-
full: 'fully',
25-
unsynced: 'unsynced',
26-
};
27-
const SYNC_FILTERS = {
28-
all: __( 'All' ),
29-
[ SYNC_TYPES.full ]: __( 'Synced' ),
30-
[ SYNC_TYPES.unsynced ]: __( 'Standard' ),
31-
};
21+
import BlockPatternsSyncFilter from '../block-patterns-sync-filter';
22+
3223
const WithToolTip = ( { showTooltip, title, children } ) => {
3324
if ( showTooltip ) {
3425
return <Tooltip text={ title }>{ children }</Tooltip>;
@@ -121,7 +112,7 @@ function BlockPattern( {
121112
>
122113
<span>
123114
<Icon
124-
className="edit-site-patterns__pattern-icon"
115+
className="block-editor-patterns__pattern-icon"
125116
icon={ symbolFilled }
126117
/>
127118
</span>
@@ -162,26 +153,10 @@ function BlockPatternList( {
162153
aria-label={ label }
163154
>
164155
{ category === 'custom' && (
165-
<ToggleGroupControl
166-
className="edit-site-patterns__sync-status-filter"
167-
hideLabelFromVision
168-
label={ __( 'Filter by sync status' ) }
169-
value={ syncFilter }
170-
isBlock
171-
onChange={ ( value ) => setSyncFilter( value ) }
172-
__nextHasNoMarginBottom
173-
>
174-
{ Object.entries( SYNC_FILTERS ).map(
175-
( [ key, optionLabel ] ) => (
176-
<ToggleGroupControlOption
177-
className="edit-site-patterns__sync-status-filter-option"
178-
key={ key }
179-
value={ key }
180-
label={ optionLabel }
181-
/>
182-
)
183-
) }
184-
</ToggleGroupControl>
156+
<BlockPatternsSyncFilter
157+
syncFilter={ syncFilter }
158+
setSyncFilter={ setSyncFilter }
159+
/>
185160
) }
186161
{ blockPatterns.map( ( pattern ) => {
187162
const isShown = shownPatterns.includes( pattern );

‎packages/block-editor/src/components/block-patterns-list/style.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,14 @@
4040
@include button-style-outset__focus(var(--wp-admin-theme-color));
4141
}
4242

43-
4443
&:hover .block-editor-block-patterns-list__item-title,
4544
&:focus .block-editor-block-patterns-list__item-title {
4645
color: var(--wp-admin-theme-color);
4746
}
47+
48+
.block-editor-patterns__pattern-icon {
49+
fill: #fff;
50+
background: var(--wp-block-synced-color);
51+
border-radius: 4px;
52+
}
4853
}

‎packages/block-editor/src/components/block-patterns-paging/index.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
__experimentalHStack as HStack,
6+
__experimentalText as Text,
7+
Button,
8+
} from '@wordpress/components';
9+
import { __, _x, _n, sprintf } from '@wordpress/i18n';
10+
11+
export default function Pagination( {
12+
currentPage,
13+
numPages,
14+
changePage,
15+
totalItems,
16+
} ) {
17+
return (
18+
<HStack
19+
expanded={ false }
20+
spacing={ 3 }
21+
justify="flex-start"
22+
className="block-editor-patterns__grid-pagination"
23+
>
24+
<Text variant="muted">
25+
{
26+
// translators: %s: Total number of patterns.
27+
sprintf(
28+
// translators: %s: Total number of patterns.
29+
_n( '%s item', '%s items', totalItems ),
30+
totalItems
31+
)
32+
}
33+
</Text>
34+
<HStack expanded={ false } spacing={ 1 }>
35+
<Button
36+
variant="tertiary"
37+
onClick={ () => changePage( 1 ) }
38+
disabled={ currentPage === 1 }
39+
aria-label={ __( 'First page' ) }
40+
>
41+
«
42+
</Button>
43+
<Button
44+
variant="tertiary"
45+
onClick={ () => changePage( currentPage - 1 ) }
46+
disabled={ currentPage === 1 }
47+
aria-label={ __( 'Previous page' ) }
48+
>
49+
‹
50+
</Button>
51+
</HStack>
52+
<Text variant="muted">
53+
{ sprintf(
54+
// translators: %1$s: Current page number, %2$s: Total number of pages.
55+
_x( '%1$s of %2$s', 'paging' ),
56+
currentPage,
57+
numPages
58+
) }
59+
</Text>
60+
<HStack expanded={ false } spacing={ 1 }>
61+
<Button
62+
variant="tertiary"
63+
onClick={ () => changePage( currentPage + 1 ) }
64+
disabled={ currentPage === numPages }
65+
aria-label={ __( 'Next page' ) }
66+
>
67+
›
68+
</Button>
69+
<Button
70+
variant="tertiary"
71+
onClick={ () => changePage( numPages ) }
72+
disabled={ currentPage === numPages }
73+
aria-label={ __( 'Last page' ) }
74+
>
75+
»
76+
</Button>
77+
</HStack>
78+
</HStack>
79+
);
80+
}

‎packages/block-editor/src/components/block-patterns-paging/style.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.block-editor-patterns__grid-pagination {
2+
border-top: 1px solid $gray-800;
3+
padding: $grid-unit-05;
4+
5+
.components-button.is-tertiary {
6+
width: $button-size-compact;
7+
height: $button-size-compact;
8+
justify-content: center;
9+
10+
&:disabled {
11+
color: $gray-600;
12+
background: none;
13+
}
14+
15+
&:hover:not(:disabled) {
16+
background-color: $gray-700;
17+
}
18+
}
19+
}

‎packages/block-editor/src/components/block-patterns-sync-filter/index.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
__experimentalToggleGroupControl as ToggleGroupControl,
6+
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
7+
} from '@wordpress/components';
8+
9+
import { __ } from '@wordpress/i18n';
10+
11+
const SYNC_TYPES = {
12+
full: 'fully',
13+
unsynced: 'unsynced',
14+
};
15+
const SYNC_FILTERS = {
16+
all: __( 'All' ),
17+
[ SYNC_TYPES.full ]: __( 'Synced' ),
18+
[ SYNC_TYPES.unsynced ]: __( 'Standard' ),
19+
};
20+
21+
export default function BlockPatternsSyncFilter( {
22+
setSyncFilter,
23+
syncFilter,
24+
} ) {
25+
return (
26+
<ToggleGroupControl
27+
className="block-editor-patterns__sync-status-filter"
28+
hideLabelFromVision
29+
label={ __( 'Filter by sync status' ) }
30+
value={ syncFilter }
31+
isBlock
32+
onChange={ ( value ) => setSyncFilter( value ) }
33+
__nextHasNoMarginBottom
34+
>
35+
{ Object.entries( SYNC_FILTERS ).map( ( [ key, optionLabel ] ) => (
36+
<ToggleGroupControlOption
37+
className="block-editor-patterns__sync-status-filter-option"
38+
key={ key }
39+
value={ key }
40+
label={ optionLabel }
41+
/>
42+
) ) }
43+
</ToggleGroupControl>
44+
);
45+
}

‎packages/block-editor/src/components/block-patterns-sync-filter/style.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.block-editor-patterns__sync-status-filter {
2+
margin-bottom: $grid-unit-10;
3+
}

‎packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { useMemo, useEffect } from '@wordpress/element';
4+
import { useMemo, useEffect, useState } from '@wordpress/element';
55
import { _n, sprintf } from '@wordpress/i18n';
66
import { useDebounce, useAsyncList } from '@wordpress/compose';
77
import { __experimentalHeading as Heading } from '@wordpress/components';
@@ -16,6 +16,8 @@ import useInsertionPoint from '../hooks/use-insertion-point';
1616
import usePatternsState from '../hooks/use-patterns-state';
1717
import InserterListbox from '../../inserter-listbox';
1818
import { searchItems } from '../search-items';
19+
import BlockPatternsSyncFilter from '../../block-patterns-sync-filter';
20+
import BlockPatternsPaging from '../../block-patterns-paging';
1921

2022
const INITIAL_INSERTER_RESULTS = 2;
2123

@@ -44,6 +46,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
4446
}
4547

4648
function PatternList( { filterValue, selectedCategory, patternCategories } ) {
49+
const [ syncFilter, setSyncFilter ] = useState( 'all' );
4750
const debouncedSpeak = useDebounce( speak, 500 );
4851
const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
4952
shouldFocusBlock: true,
@@ -112,6 +115,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
112115
) }
113116
<InserterListbox>
114117
{ ! hasItems && <InserterNoResults /> }
118+
{ selectedCategory === 'custom' && (
119+
<BlockPatternsSyncFilter
120+
syncFilter={ syncFilter }
121+
setSyncFilter={ setSyncFilter }
122+
/>
123+
) }
115124
{ hasItems && (
116125
<BlockPatternsList
117126
shownPatterns={ currentShownPatterns }
@@ -120,6 +129,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
120129
isDraggable={ false }
121130
/>
122131
) }
132+
<BlockPatternsPaging
133+
currentPage={ 1 }
134+
numPages={ 2 }
135+
changePage={ () => {} }
136+
totalItems={ 40 }
137+
/>
123138
</InserterListbox>
124139
</div>
125140
);

‎packages/block-editor/src/components/inserter/block-patterns-tab.js

+7
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import usePatternsState from './hooks/use-patterns-state';
2727
import BlockPatternList from '../block-patterns-list';
2828
import PatternsExplorerModal from './block-patterns-explorer/explorer';
2929
import MobileTabNavigation from './mobile-tab-navigation';
30+
import BlockPatternsPaging from '../block-patterns-paging';
3031

3132
const noop = () => {};
3233

@@ -194,6 +195,12 @@ export function BlockPatternsCategoryPanel( {
194195
isDraggable
195196
showTitlesAsTooltip={ showTitlesAsTooltip }
196197
/>
198+
<BlockPatternsPaging
199+
currentPage={ 1 }
200+
numPages={ 2 }
201+
changePage={ () => {} }
202+
totalItems={ 40 }
203+
/>
197204
</div>
198205
);
199206
}

‎packages/block-editor/src/style.scss

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
@import "./components/block-navigation/style.scss";
1313
@import "./components/block-parent-selector/style.scss";
1414
@import "./components/block-patterns-list/style.scss";
15+
@import "./components/block-patterns-paging/style.scss";
16+
@import "./components/block-patterns-sync-filter/style.scss";
1517
@import "./components/block-popover/style.scss";
1618
@import "./components/block-preview/style.scss";
1719
@import "./components/block-settings-menu/style.scss";

0 commit comments

Comments
 (0)