Add page select feature to post grid (#349)

* Add page select feature to post grid
studiopress · Apr 13, 2020 · 2681b5a · 2681b5a
1 parent ad8a323
commit 2681b5a
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-lazy-load": "^3.0.13",
+    "react-select": "^3.1.0",
     "sass-loader": "^8.0.2",
     "webpack": "^4.42.0"
   },

diff --git a/src/blocks/block-post-grid/components/edit.js b/src/blocks/block-post-grid/components/edit.js
@@ -287,12 +287,27 @@ export default compose( [
 			( value ) => ! isUndefined( value )
 		);
 
+		// Grab the page IDs from the array
+		const pageIDs = props.attributes.selectedPages && props.attributes.selectedPages.length > 0 ? props.attributes.selectedPages.map(obj => obj.value) : null;
+
+		// Query for pages
+		const pageQuery = pickBy(
+			{
+				include: pageIDs ? pageIDs : null,
+				orderby: pageIDs ? 'include' : null,
+			},
+			( value ) => ! isUndefined( value )
+		);
+
+		// Return the post or page query
 		return {
 			latestPosts: getEntityRecords(
 				'postType',
 				props.attributes.postType,
-				latestPostsQuery
-			),
+				'page' === props.attributes.postType && pageIDs
+				? pageQuery
+				: latestPostsQuery
+			)
 		};
 	} ),
 ] )( LatestPostsBlock );

diff --git a/src/blocks/block-post-grid/components/inspector.js b/src/blocks/block-post-grid/components/inspector.js
@@ -9,6 +9,7 @@ const { Component, Fragment } = wp.element;
 import compact from 'lodash/compact';
 import map from 'lodash/map';
 import RenderSettingControl from '../../../utils/components/settings/renderSettingControl';
+import Select from 'react-select';
 
 // Import block components
 const { InspectorControls } = wp.blockEditor;
@@ -73,6 +74,18 @@ export default class Inspector extends Component {
 		);
 	}
 
+	/* Get the page list */
+	pageSelect() {
+		const getPages = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page', { per_page: -1 } )
+
+		return compact( map( getPages, ({ id, title }) => {
+			return {
+				value: id,
+				label: title.raw
+			};
+		}) );
+	}
+
 	render() {
 		// Setup the attributes
 		const { attributes, setAttributes, latestPosts } = this.props;
@@ -147,6 +160,9 @@ export default class Inspector extends Component {
 			return 'full';
 		};
 
+		// Setup the page select options
+		const pageOptions = this.pageSelect();
+
 		return (
 			<InspectorControls>
 				<PanelBody
@@ -166,43 +182,51 @@ export default class Inspector extends Component {
 							}
 						/>
 					</RenderSettingControl>
-					<RenderSettingControl id="ab_postgrid_queryControls">
-						<QueryControls
-							{ ...{ order, orderBy } }
-							numberOfItems={ attributes.postsToShow }
-							categoriesList={ categoriesList }
-							selectedCategoryId={ attributes.categories }
-							onOrderChange={ ( value ) =>
-								setAttributes( { order: value } )
-							}
-							onOrderByChange={ ( value ) =>
-								setAttributes( { orderBy: value } )
-							}
-							onCategoryChange={ ( value ) =>
-								setAttributes( {
-									categories:
-										'' !== value ? value : undefined,
-								} )
-							}
-							onNumberOfItemsChange={ ( value ) =>
-								setAttributes( { postsToShow: value } )
-							}
-						/>
-					</RenderSettingControl>
-					<RenderSettingControl id="ab_postgrid_offset">
-						<RangeControl
-							label={ __(
-								'Number of items to offset',
-								'atomic-blocks'
-							) }
-							value={ attributes.offset }
-							onChange={ ( value ) =>
-								setAttributes( { offset: value } )
-							}
-							min={ 0 }
-							max={ 20 }
-						/>
+					{ 'page' === attributes.postType &&
+					<RenderSettingControl id="ab_postgrid_selectedPages">
+						<div className="components-base-control select2-page">
+							<div className="components-base-control__field">
+								<label className="components-base-control__label" htmlFor="inspector-select-control">{ __( 'Pages To Show', 'atomic-blocks') }</label>
+								<Select
+									options={ pageOptions }
+									value={ attributes.selectedPages }
+									onChange={ ( value ) =>
+										this.props.setAttributes( {
+											selectedPages: value,
+										} )
+									}
+									isMulti={ true }
+									closeMenuOnSelect={ false }
+								/>
+							</div>
+						</div>
 					</RenderSettingControl>
+					}
+					{ 'post' === attributes.postType &&
+					<Fragment>
+						<RenderSettingControl id="ab_postgrid_queryControls">
+							<QueryControls
+								{ ...{ order, orderBy } }
+								numberOfItems={ attributes.postsToShow }
+								categoriesList={ categoriesList }
+								selectedCategoryId={ attributes.categories }
+								onOrderChange={ ( value ) => setAttributes({ order: value }) }
+								onOrderByChange={ ( value ) => setAttributes({ orderBy: value }) }
+								onCategoryChange={ ( value ) => setAttributes({ categories: '' !== value ? value : undefined }) }
+								onNumberOfItemsChange={ ( value ) => setAttributes({ postsToShow: value }) }
+							/>
+						</RenderSettingControl>
+						<RenderSettingControl id="ab_postgrid_offset">
+							<RangeControl
+								label={ __( 'Number of items to offset', 'atomic-blocks' ) }
+								value={ attributes.offset }
+								onChange={ ( value ) => setAttributes({ offset: value }) }
+								min={ 0 }
+								max={ 20 }
+							/>
+						</RenderSettingControl>
+					</Fragment>
+					}
 					{ 'grid' === attributes.postLayout && (
 						<RenderSettingControl id="ab_postgrid_columns">
 							<RangeControl

diff --git a/src/blocks/block-post-grid/index.php b/src/blocks/block-post-grid/index.php
@@ -22,11 +22,23 @@ function atomic_blocks_render_block_core_latest_posts( $attributes ) {
 	 */
 	global $post;
 
+	/* Get the post categories */
 	$categories = isset( $attributes['categories'] ) ? $attributes['categories'] : '';
 
-	/* Setup the query */
-	$grid_query = new WP_Query(
-		array(
+	/* Get the selected pages */
+	$page_selection = isset( $attributes['selectedPages'] ) ? array_column( $attributes['selectedPages'], 'value' ) : null;
+
+	if ( isset( $attributes['postType'] ) && 'page' === $attributes['postType'] ) {
+		/* Page query args */
+		$args = array(
+			'post_status' => 'publish',
+			'orderby'     => 'post__in',
+			'post__in'    => $page_selection,
+			'post_type'   => 'page',
+		);
+	} else {
+		/* Post query args */
+		$args = array(
 			'posts_per_page'      => $attributes['postsToShow'],
 			'post_status'         => 'publish',
 			'order'               => $attributes['order'],
@@ -35,9 +47,12 @@ function atomic_blocks_render_block_core_latest_posts( $attributes ) {
 			'offset'              => $attributes['offset'],
 			'post_type'           => $attributes['postType'],
 			'ignore_sticky_posts' => 1,
-			'post__not_in'        => array( $post->ID ), // Exclude the current post from the grid.
-		)
-	);
+			'post__not_in'        => array( $post->ID ),
+		);
+	}
+
+	/* Setup the query */
+	$grid_query = new WP_Query( $args );
 
 	$post_grid_markup = '';
 
@@ -376,6 +391,13 @@ function atomic_blocks_register_block_core_latest_posts() {
 					'type'    => 'string',
 					'default' => 'post',
 				),
+				'selectedPages'       => array(
+					'type'    => 'array',
+					'default' => array(),
+					'items'   => [
+						'type' => 'object',
+					],
+				),
 				'sectionTag'          => array(
 					'type'    => 'string',
 					'default' => 'section',

diff --git a/src/blocks/block-post-grid/styles/editor.scss b/src/blocks/block-post-grid/styles/editor.scss
@@ -75,3 +75,11 @@
 		}
 	}
 }
+
+[data-type="atomic-blocks/ab-post-grid"] .components-placeholder {
+	align-items: center;
+
+	.components-placeholder__fieldset {
+		width: auto;
+	}
+}