Create Dynamic “SelectControl” with Posts in Gutenberg

First things first, I want to clarify one moment – we are going to create a select dropdown with not just only latest posts, but also:

• Of any post type and post status,
• From certain categories or tagged with certain tags,
• Macthed a search query

Get Posts with getEntityRecords()

You will be surprised but to get an array of posts ordered by date – you can use just this single line of code:

var posts = select( 'core' ).getEntityRecords( 'postType', 'post' );

• Of course you can not use it anywhere you want, it must be wrapped into withSelect higher order component (HOC), you can jump to the example if you want.
• Yes, it is possible to pass the post type name if you want to get the posts of a certain type only, not possible to pass multiple values.
• It can be used to get not only posts but also terms! I will talk about it in a separate tutorial.

Query Parameters

Do you think that the only parameter you can pass to getEntityRecords() is a post type name? 😁 It is not even close – check this:

var query = { 
	per_page : 10, // set -1 to display ALL
	exclude : 50, // or pass multiple values in an array, e.g. [ 1, 9098 ]
	parent_exclude : 43, // or [ 43, 44, 98 ]
	orderby : 'date',
	order : 'asc',
	status : 'publish', // or [ 'publish', 'draft', 'future' ]
	categories : [ 5, 10, 15 ], // category ID or IDs
	tags : 4, // tag ID, you can pass multiple too [ 4, 7 ]
	search : 'search query',
}

var posts = select( 'core' ).getEntityRecords( 'postType', 'post', query );

• per_page – how much posts to get, defaults 10, does not depend on the number of posts set in Settings > Reading. Set to -1 to display all the available posts.
• exclude – allows to exlude a post with a certain ID, or multiple posts passed in an array, example 'exclude' : [ 1, 10 ]. Use select('core/editor').getCurrentPostId to exclude current post ID.
• parent_exclude – similar to exclude, but it excludes only all the direct children of a selected post. Accepts multiple values in an array.
• orderby – how to order posts. Accepts: id, title, date, menu_order, author values. Defaults to date.
• order – sort ascending (asc) or descending (desc)? Default to desc
• status – post status, accepts values: publish, draft, future, pending, private, multiple values can be presented as an array or separated by commas.
• categories – category ID or an array of IDs
• tags – tag ID or an array of IDs.
• search – you can also search for specific posts, uses the default WordPress search algorithm.

Create PostsDropdownControl Component

If you already bored by the theory, here is the ready code for you!

But remember, when we are talking about Gutenberg tutorials we never expect to have a ready to use code which you can insert to your functions.php or somewhere else.

This tutorial is just some kind of extension to this main tutorial about Gutenberg Sidebars. You have to use Step 1, Step 2, Step 3 and Step 4 (!!!) from that tut. Step 5 is presented below:

const PostsDropdownControl = compose.compose(
	// withDispatch allows to save the selected post ID into post meta
	withDispatch( function( dispatch, props ) {
		return {
			setMetaValue: function( metaValue ) {
				dispatch( 'core/editor' ).editPost(
					{ meta: { [ props.metaKey ]: metaValue } }
				);
			}
		}
	} ),
	// withSelect allows to get posts for our SelectControl and also to get the post meta value
	withSelect( function( select, props ) {
		return {
			posts: select( 'core' ).getEntityRecords( 'postType', 'post' ),
			metaValue: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaKey ],
		}
	} ) )( function( props ) {
		
		// options for SelectControl
		var options = [];
		
		// if posts found
		if( props.posts ) {
			options.push( { value: 0, label: 'Select something' } );
			props.posts.forEach((post) => { // simple foreach loop
				options.push({value:post.id, label:post.title.rendered});
			});
		} else {
			options.push( { value: 0, label: 'Loading...' } )
		}

		return el( SelectControl,
			{
				label: 'Select a post',
				options : options,
				onChange: function( content ) {
					props.setMetaValue( content );
				},
				value: props.metaValue,
			}
		);

	}

);

• As you can see on lines 7 and 16 we are using props.metaKey which is passed from outside the componenet as a component parameter. It allows us to use this component for multiple meta keys and purposes.
• I didn’t pass any query args to getEntityRecords() on line 15, you know we can, so it is possible to make this component much more flexible if you pass it as props.query as well.
• Do not forget to declare compose, withDispatch, withSelect and SelectControl in Step 3.
• Instead of SelectControl you can easily use RadioControl which is very similar. You can find an example in the tutorial about Gutenberg Inspector Controls.

I hope this tutorial was not too tough for you, I tried my best to explain it as simple as possible.

Good luck and have a perfect day! 🔥

More Sweet Gutenberg Tuts

• Create Gutenberg Sidebars using only PHP
• Inspector Controls for a Custom Gutenberg Block

Misha Rudrastyh

I develop websites since 2008, so it is total of 14 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me

Follow me on Twitter