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 all 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
27 changes: 11 additions & 16 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 @@ -112,7 +111,13 @@ class LatestPostsEdit extends Component {
} ),
{}
);

const categorySuggestions = categoriesList.reduce(
( accumulator, category ) => ( {
...accumulator,
[ category.name ]: category,
} ),
{}
);
const selectCategories = ( tokens ) => {
// Categories that are already will be objects, while new additions will be strings (the name).
// allCategories nomalizes the array so that they are all objects.
Expand Down Expand Up @@ -243,21 +248,11 @@ class LatestPostsEdit extends Component {
onNumberOfItemsChange={ ( value ) =>
setAttributes( { postsToShow: value } )
}
categorySuggestions={ categorySuggestions }
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
27 changes: 16 additions & 11 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,11 +7,11 @@ import { Platform } from '@wordpress/element';
/**
* Internal dependencies
*/
import { RangeControl, SelectControl } from '../';
import CategorySelect from './category-select';
import { RangeControl, SelectControl, FormTokenField } from '../';

const DEFAULT_MIN_ITEMS = 1;
const DEFAULT_MAX_ITEMS = 100;
const MAX_CATEGORIES_SUGGESTIONS = 20;

// currently this is needed for consistent controls UI on mobile
// this can be removed after control components settle on consistent defaults
Expand All @@ -25,8 +25,8 @@ const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( {
} );

export default function QueryControls( {
categoriesList,
selectedCategoryId,
categorySuggestions,
selectedCategories,
numberOfItems,
order,
orderBy,
Expand Down Expand Up @@ -76,16 +76,21 @@ 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( categorySuggestions ) }
onChange={ onCategoryChange }
{ ...MOBILE_CONTROL_PROPS }
maxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }
/>
),

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