From 3ef3bbf233a09c01d5849af593056fab3b779d2f Mon Sep 17 00:00:00 2001 From: Ringish Date: Thu, 12 Mar 2020 13:48:12 +0100 Subject: [PATCH 1/2] First working version with post type control --- .../block-library/src/latest-posts/block.json | 143 +++++++++--------- .../block-library/src/latest-posts/edit.js | 55 ++++++- .../block-library/src/latest-posts/index.php | 5 + 3 files changed, 127 insertions(+), 76 deletions(-) diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json index e730d86162650..1c2df3b59a7cd 100644 --- a/packages/block-library/src/latest-posts/block.json +++ b/packages/block-library/src/latest-posts/block.json @@ -1,72 +1,75 @@ { - "name": "core/latest-posts", - "category": "widgets", - "attributes": { - "align": { - "type": "string", - "enum": ["left", "center", "right", "wide", "full"] - }, - "className": { - "type": "string" - }, - "categories": { - "type": "array" - }, - "postsToShow": { - "type": "number", - "default": 5 - }, - "displayPostContent": { - "type": "boolean", - "default": false - }, - "displayPostContentRadio": { - "type": "string", - "default": "excerpt" - }, - "excerptLength": { - "type": "number", - "default": 55 - }, - "displayPostDate": { - "type": "boolean", - "default": false - }, - "postLayout": { - "type": "string", - "default": "list" - }, - "columns": { - "type": "number", - "default": 3 - }, - "order": { - "type": "string", - "default": "desc" - }, - "orderBy": { - "type": "string", - "default": "date" - }, - "displayFeaturedImage": { - "type": "boolean", - "default": false - }, - "featuredImageAlign": { - "type": "string", - "enum": ["left", "center", "right"] - }, - "featuredImageSizeSlug": { - "type": "string", - "default":"thumbnail" - }, - "featuredImageSizeWidth": { - "type": "number", - "default":null - }, - "featuredImageSizeHeight": { - "type": "number", - "default":null - } - } + "name": "core/latest-posts", + "category": "widgets", + "attributes": { + "align": { + "type": "string", + "enum": ["left", "center", "right", "wide", "full"] + }, + "className": { + "type": "string" + }, + "categories": { + "type": "array" + }, + "postType": { + "type": "string" + }, + "postsToShow": { + "type": "number", + "default": 5 + }, + "displayPostContent": { + "type": "boolean", + "default": false + }, + "displayPostContentRadio": { + "type": "string", + "default": "excerpt" + }, + "excerptLength": { + "type": "number", + "default": 55 + }, + "displayPostDate": { + "type": "boolean", + "default": false + }, + "postLayout": { + "type": "string", + "default": "list" + }, + "columns": { + "type": "number", + "default": 3 + }, + "order": { + "type": "string", + "default": "desc" + }, + "orderBy": { + "type": "string", + "default": "date" + }, + "displayFeaturedImage": { + "type": "boolean", + "default": false + }, + "featuredImageAlign": { + "type": "string", + "enum": ["left", "center", "right"] + }, + "featuredImageSizeSlug": { + "type": "string", + "default": "thumbnail" + }, + "featuredImageSizeWidth": { + "type": "number", + "default": null + }, + "featuredImageSizeHeight": { + "type": "number", + "default": null + } + } } \ No newline at end of file diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index c7ca39a6cd09b..8e1a593a4e1ef 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -19,6 +19,7 @@ import { ToggleControl, ToolbarGroup, FormTokenField, + SelectControl, } from '@wordpress/components'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; @@ -54,6 +55,7 @@ class LatestPostsEdit extends Component { super( ...arguments ); this.state = { categoriesList: [], + postTypeList: [], }; } @@ -72,6 +74,19 @@ class LatestPostsEdit extends Component { this.setState( { categoriesList: [] } ); } } ); + this.fetchRequest = apiFetch( { + path: addQueryArgs( `/wp/v2/types` ), + } ) + .then( ( postTypeList ) => { + if ( this.isStillMounted ) { + this.setState( { postTypeList } ); + } + } ) + .catch( () => { + if ( this.isStillMounted ) { + this.setState( { postTypeList: [] } ); + } + } ); } componentWillUnmount() { @@ -87,7 +102,7 @@ class LatestPostsEdit extends Component { defaultImageWidth, defaultImageHeight, } = this.props; - const { categoriesList } = this.state; + const { categoriesList, postTypeList } = this.state; const { displayFeaturedImage, displayPostContentRadio, @@ -104,24 +119,30 @@ class LatestPostsEdit extends Component { featuredImageSizeSlug, featuredImageSizeWidth, featuredImageSizeHeight, + postType, } = attributes; - const suggestions = categoriesList.reduce( + const categorySuggestions = categoriesList.reduce( ( accumulator, category ) => ( { ...accumulator, [ category.name ]: category, } ), {} ); + const postTypeSuggestions = postTypeList; 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. const allCategories = tokens.map( ( token ) => - typeof token === 'string' ? suggestions[ token ] : token + typeof token === 'string' ? categorySuggestions[ token ] : token ); setAttributes( { categories: allCategories } ); }; + const selectPostTypes = ( val ) => { + setAttributes( { postType: val } ); + }; + const inspectorControls = ( @@ -254,10 +275,25 @@ class LatestPostsEdit extends Component { value: item.name || item.value, } ) ) } - suggestions={ Object.keys( suggestions ) } + suggestions={ Object.keys( categorySuggestions ) } onChange={ selectCategories } /> ) } + { postTypeList && ( + { + return { + label: item.name, + value: item.slug, + }; + } + ) } + /> + ) } { postLayout === 'grid' && ( { order, orderBy, categories, + postType, } = props.attributes; - const { getEntityRecords, getMedia } = select( 'core' ); + const { getEntityRecords, getMedia, getPostTypes } = select( 'core' ); const { getSettings } = select( 'core/block-editor' ); const { imageSizes, imageDimensions } = getSettings(); const catIds = categories && categories.length > 0 ? categories.map( ( cat ) => cat.id ) : []; + const latestPostsQuery = pickBy( { categories: catIds, @@ -463,7 +501,12 @@ export default withSelect( ( select, props ) => { ( value ) => ! isUndefined( value ) ); - const posts = getEntityRecords( 'postType', 'post', latestPostsQuery ); + const posts = getEntityRecords( + 'postType', + postType || 'post', + latestPostsQuery + ); + const imageSizeOptions = imageSizes .filter( ( { slug } ) => slug !== 'full' ) .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php index 2245ae53930af..c649df45fca7a 100644 --- a/packages/block-library/src/latest-posts/index.php +++ b/packages/block-library/src/latest-posts/index.php @@ -49,6 +49,11 @@ function render_block_core_latest_posts( $attributes ) { if ( isset( $attributes['categories'] ) ) { $args['category__in'] = array_column( $attributes['categories'], 'id' ); } + if ( isset( $attributes['postType'] ) ) { + $args['post_type'] = $attributes['postType']; + } + + $recent_posts = get_posts( $args ); From fe2223740903e37eb7f94780fbb68aa1bd4ff4ca Mon Sep 17 00:00:00 2001 From: Ringish Date: Thu, 12 Mar 2020 14:17:21 +0100 Subject: [PATCH 2/2] Migrates postTypeSelector to QueryControls --- .../block-library/src/latest-posts/edit.js | 27 +++++-------------- .../block-library/src/latest-posts/index.php | 2 -- .../components/src/query-controls/index.js | 15 +++++++++++ 3 files changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 8e1a593a4e1ef..07e9d9b5b8711 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -19,7 +19,6 @@ import { ToggleControl, ToolbarGroup, FormTokenField, - SelectControl, } from '@wordpress/components'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; @@ -128,7 +127,6 @@ class LatestPostsEdit extends Component { } ), {} ); - const postTypeSuggestions = postTypeList; const selectCategories = ( tokens ) => { // Categories that are already will be objects, while new additions will be strings (the name). @@ -139,10 +137,6 @@ class LatestPostsEdit extends Component { setAttributes( { categories: allCategories } ); }; - const selectPostTypes = ( val ) => { - setAttributes( { postType: val } ); - }; - const inspectorControls = ( @@ -264,6 +258,11 @@ class LatestPostsEdit extends Component { onNumberOfItemsChange={ ( value ) => setAttributes( { postsToShow: value } ) } + onPostTypeChange={ ( value ) => + setAttributes( { postType: value } ) + } + postTypeList={ postTypeList } + selectedPostType={ postType } /> { categoriesList.length > 0 && ( ) } - { postTypeList && ( - { - return { - label: item.name, - value: item.slug, - }; - } - ) } - /> - ) } + { postLayout === 'grid' && ( ), + onPostTypeChange && ( + ( { + label: item.name, + value: item.slug, + } ) ) } + onChange={ onPostTypeChange } + { ...MOBILE_CONTROL_PROPS } + /> + ), onNumberOfItemsChange && (