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 ]
. Useselect
(
'core/editor'
)
.getCurrentPostId
to exclude current post ID.parent_exclude
– similar toexclude
, 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 todate
.order
– sort ascending (asc
) or descending (desc
)? Default todesc
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 IDstags
– 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 asprops.query
as well. - Do not forget to declare
compose
,withDispatch
,withSelect
andSelectControl
in Step 3. - Instead of
SelectControl
you can easily useRadioControl
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

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Quick question, how would you implement this if you have over 100 posts? Since the API limit is 100.
Hi Misha,
Based on the ID selected can I filter some specific information from that post, before dispatching?
Cheers!
Dani
Hi Misha,
Thank you for brilliant post!
Now I’m study gutenberg (but don’t know how to do it)
You perfectly describe parameters of getEntityRecords
But WP documentation don’t say anything about it’s parametrs:
https://developer.wordpress.org/block-editor/data/data-core/#getEntityRecords
Frequently I’m try to find answer for my question – but can’t find it in documentation.
Please, tell us how you can find description of parameters for getEntityRecords ?
Hey Gayrat,
Actually I don’t remember 😁
I suppose I found it in another Gutenberg plugin / block.
I’ve found answer :)
Documantation don’t provide any information about getEntityRecords
Available parameters conisit in source code:
https://github.com/WordPress/gutenberg/blob/master/packages/core-data/src/entities.js
Here are options for posts:
context
page
per_page
search
after
author
author_exclude
before
exclude
include
offset
order
orderby
slug
status
categories
categories_exclude
tags
tags_exclude
sticky
Made my day!
Hard to find good documentation or tutorials for (Gutenberg) Blocks.
Awesome! 🙃
Can I add meta_query OR tax_query into the query?
Excellent post, finding your posts really helpful as official documentation is poor.
Love this post. Do you know how you would go about making your Dynamic “SelectControl” repeatable? For example select a post, click add and be able to create another selectControl to select another post?
Anyway, well done, keep them coming.
Thank you!
I’ve been thinking about a repeatable field, yes…