Create Dynamic “SelectControl” with Posts in Gutenberg

In this tutorial – how to get posts in Gutenberg using REST API and create a select dropdown from these posts.

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:

Create Dynamic SelectControl with Posts in Sidebar settings
You can use this SelectControl as a custom block Inspector Control as well but in this tutorial I will show you a sidebar approach.

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' );

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 );

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,
			}
		);
 
	}
 
);

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

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with Gutenberg?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code

I will only use your personal information to contact you. Privacy Policy