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

Moves category multi select from LatestPosts to QueryControls #20832

Merged
merged 9 commits into from
Mar 16, 2020
Merged

Moves category multi select from LatestPosts to QueryControls #20832

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
958adbe
Implements FormTokenField
Ringish Mar 10, 2020
f66347d
Implements the posts query with multiple categories
Ringish Mar 11, 2020
ddb2c83
Improves code & resolves @draganescu's feedback
Ringish Mar 11, 2020
a0ffc4a
Solves PHP formatting error
Ringish Mar 11, 2020
41ed91a
Merge branch 'master' of https://github.com/Ringish/gutenberg into up…
Ringish Mar 12, 2020
490b221
Moves the category multiselect from LatestPosts to QueryControls
Ringish Mar 12, 2020
ed4ecfa
Adds maxSuggestions prop and renames suggestions variable
Ringish Mar 13, 2020
e24581a
Resolves Lint error
Ringish Mar 13, 2020
213735f
Moves logic from controlled component
Ringish Mar 15, 2020
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
19 changes: 4 additions & 15 deletions packages/block-library/src/latest-posts/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
Spinner,
ToggleControl,
ToolbarGroup,
FormTokenField,
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
Expand Down Expand Up @@ -243,21 +242,11 @@ class LatestPostsEdit extends Component {
onNumberOfItemsChange={ ( value ) =>
setAttributes( { postsToShow: value } )
}
categoriesList={ categoriesList }
onCategoryChange={ selectCategories }
selectedCategories={ categories }
/>
{ categoriesList.length > 0 && (
<FormTokenField
label={ __( 'Categories' ) }
value={
categories &&
categories.map( ( item ) => ( {
id: item.id,
value: item.name || item.value,
} ) )
}
suggestions={ Object.keys( suggestions ) }
onChange={ selectCategories }
/>
) }

{ postLayout === 'grid' && (
<RangeControl
label={ __( 'Columns' ) }
Expand Down
30 changes: 21 additions & 9 deletions packages/components/src/query-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Platform } from '@wordpress/element';
/**
* Internal dependencies
*/
import { RangeControl, SelectControl } from '../';
import { RangeControl, SelectControl, FormTokenField } from '../';
import CategorySelect from './category-select';

const DEFAULT_MIN_ITEMS = 1;
Expand All @@ -26,7 +26,7 @@ const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( {

export default function QueryControls( {
categoriesList,
selectedCategoryId,
selectedCategories,
numberOfItems,
order,
orderBy,
Expand All @@ -37,6 +37,14 @@ export default function QueryControls( {
onOrderChange,
onOrderByChange,
} ) {
const suggestions = categoriesList.reduce(
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's call this categorySuggestions because if we add other flat taxonomies they'll also have suggestions.

( accumulator, category ) => ( {
...accumulator,
[ category.name ]: category,
} ),
{}
);

return [
onOrderChange && onOrderByChange && (
<SelectControl
Expand Down Expand Up @@ -76,16 +84,20 @@ export default function QueryControls( {
/>
),
onCategoryChange && (
<CategorySelect
key="query-controls-category-select"
categoriesList={ categoriesList }
label={ __( 'Category' ) }
noOptionLabel={ __( 'All' ) }
selectedCategoryId={ selectedCategoryId }
<FormTokenField
label={ __( 'Categories' ) }
value={
selectedCategories &&
selectedCategories.map( ( item ) => ( {
id: item.id,
value: item.name || item.value,
} ) )
}
suggestions={ Object.keys( suggestions ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

the FormTokenField has a maxSuggestions prop what we should use for cases when categories are not for content and so are too many in number.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

What value should be max?

Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use a constant and the same value the FlatTermSelector component is using:

const MAX_TERMS_SUGGESTIONS = 20;

onChange={ onCategoryChange }
{ ...MOBILE_CONTROL_PROPS }
/>
),

onNumberOfItemsChange && (
<RangeControl
key="query-controls-range-control"
Expand Down