From 958adbe1a0c8d928440f811a35e9368091735fcf Mon Sep 17 00:00:00 2001 From: Ringish Date: Tue, 10 Mar 2020 16:54:42 +0100 Subject: [PATCH 1/4] Implements FormTokenField --- .../block-library/src/latest-posts/edit.js | 29 +++++++++++++++++++ .../block-library/src/latest-posts/index.php | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 8fa27ca78686c..0dd45a1ba79a2 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -18,6 +18,7 @@ import { Spinner, ToggleControl, ToolbarGroup, + FormTokenField, } from '@wordpress/components'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; @@ -96,6 +97,23 @@ class LatestPostsEdit extends Component { featuredImageSizeWidth, featuredImageSizeHeight, } = attributes; + var suggestions = categoriesList.reduce( + ( accumulator, category ) => ( { + ...accumulator, + [ category.name ]: category, + } ), + {} + ); + + const handleOnChange = ( tokens ) => { + // Categories that are already will be objects, while new additions will be strings (the name). + // allValues nomalizes the array so that they are all objects. + const allValues = tokens.map( ( token ) => + typeof token === 'string' ? suggestions[ token ] : token + ); + + setAttributes( { categories: allValues } ); + }; const inspectorControls = ( @@ -226,6 +244,17 @@ class LatestPostsEdit extends Component { setAttributes( { postsToShow: value } ) } /> + ( { + id: item.id, + value: item.name, + } ) ) + } + suggestions={ Object.keys( suggestions ) } + onChange={ handleOnChange } + /> { postLayout === 'grid' && ( 'string', ), 'categories' => array( - 'type' => 'string', + 'type' => 'array', ), 'postsToShow' => array( 'type' => 'number', From f66347d85b6ad03f4939d365a56ab93466999245 Mon Sep 17 00:00:00 2001 From: Ringish Date: Wed, 11 Mar 2020 09:43:52 +0100 Subject: [PATCH 2/4] Implements the posts query with multiple categories --- .../block-library/src/latest-posts/edit.js | 24 +++++++------------ .../block-library/src/latest-posts/index.php | 2 +- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 0dd45a1ba79a2..4672adc611cf7 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -105,14 +105,13 @@ class LatestPostsEdit extends Component { {} ); - const handleOnChange = ( tokens ) => { + const selectCategories = ( tokens ) => { // Categories that are already will be objects, while new additions will be strings (the name). - // allValues nomalizes the array so that they are all objects. - const allValues = tokens.map( ( token ) => + // allCategories nomalizes the array so that they are all objects. + const allCategories = tokens.map( ( token ) => typeof token === 'string' ? suggestions[ token ] : token ); - - setAttributes( { categories: allValues } ); + setAttributes( { categories: allCategories } ); }; const inspectorControls = ( @@ -227,33 +226,27 @@ class LatestPostsEdit extends Component { setAttributes( { order: value } ) } onOrderByChange={ ( value ) => setAttributes( { orderBy: value } ) } - onCategoryChange={ ( value ) => - setAttributes( { - categories: '' !== value ? value : undefined, - } ) - } onNumberOfItemsChange={ ( value ) => setAttributes( { postsToShow: value } ) } /> ( { id: item.id, - value: item.name, + value: item.name || item.value, } ) ) } suggestions={ Object.keys( suggestions ) } - onChange={ handleOnChange } + onChange={ selectCategories } /> { postLayout === 'grid' && ( { const { getEntityRecords, getMedia } = select( 'core' ); const { getSettings } = select( 'core/block-editor' ); const { imageSizes, imageDimensions } = getSettings(); + const catIds = categories.map( ( cat ) => cat.id ); const latestPostsQuery = pickBy( { - categories, + categories: catIds, order, orderby: orderBy, per_page: postsToShow, diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php index d2d17afdc71fa..6fd245839ecf9 100644 --- a/packages/block-library/src/latest-posts/index.php +++ b/packages/block-library/src/latest-posts/index.php @@ -47,7 +47,7 @@ function render_block_core_latest_posts( $attributes ) { add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 ); if ( isset( $attributes['categories'] ) ) { - $args['category'] = $attributes['categories']; + $args['category__in'] = array_column($attributes['categories'], "id"); } $recent_posts = get_posts( $args ); From ddb2c833dce78d4f9d32db5cb0248adc7fd4e895 Mon Sep 17 00:00:00 2001 From: Ringish Date: Wed, 11 Mar 2020 13:31:21 +0100 Subject: [PATCH 3/4] Improves code & resolves @draganescu's feedback --- .../block-library/src/latest-posts/edit.js | 33 +++++++++++-------- .../block-library/src/latest-posts/index.php | 2 +- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 4672adc611cf7..2726b5e20d169 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -97,7 +97,7 @@ class LatestPostsEdit extends Component { featuredImageSizeWidth, featuredImageSizeHeight, } = attributes; - var suggestions = categoriesList.reduce( + const suggestions = categoriesList.reduce( ( accumulator, category ) => ( { ...accumulator, [ category.name ]: category, @@ -236,18 +236,20 @@ class LatestPostsEdit extends Component { setAttributes( { postsToShow: value } ) } /> - ( { - id: item.id, - value: item.name || item.value, - } ) ) - } - suggestions={ Object.keys( suggestions ) } - onChange={ selectCategories } - /> + { categoriesList.length > 0 && ( + ( { + id: item.id, + value: item.name || item.value, + } ) ) + } + suggestions={ Object.keys( suggestions ) } + onChange={ selectCategories } + /> + ) } { postLayout === 'grid' && ( { const { getEntityRecords, getMedia } = select( 'core' ); const { getSettings } = select( 'core/block-editor' ); const { imageSizes, imageDimensions } = getSettings(); - const catIds = categories.map( ( cat ) => cat.id ); + const catIds = + categories && categories.length > 0 + ? categories.map( ( cat ) => cat.id ) + : []; const latestPostsQuery = pickBy( { categories: catIds, diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php index 6fd245839ecf9..99eb1530bfb12 100644 --- a/packages/block-library/src/latest-posts/index.php +++ b/packages/block-library/src/latest-posts/index.php @@ -47,7 +47,7 @@ function render_block_core_latest_posts( $attributes ) { add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 ); if ( isset( $attributes['categories'] ) ) { - $args['category__in'] = array_column($attributes['categories'], "id"); + $args['category__in'] = array_column($attributes['categories'], 'id'); } $recent_posts = get_posts( $args ); From a0ffc4a299572adc01c082aaa879d0223c4316d5 Mon Sep 17 00:00:00 2001 From: Ringish Date: Wed, 11 Mar 2020 15:38:48 +0100 Subject: [PATCH 4/4] Solves PHP formatting error --- packages/block-library/src/latest-posts/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php index 99eb1530bfb12..346c4085b3c42 100644 --- a/packages/block-library/src/latest-posts/index.php +++ b/packages/block-library/src/latest-posts/index.php @@ -47,7 +47,7 @@ function render_block_core_latest_posts( $attributes ) { add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 ); if ( isset( $attributes['categories'] ) ) { - $args['category__in'] = array_column($attributes['categories'], 'id'); + $args['category__in'] = array_column( $attributes['categories'], 'id' ); } $recent_posts = get_posts( $args );