How to make a dropdown list control that fetches names of custom posts types

If creating a dropdown list (select) for the edit() function of a Gutenberg block, registered post types can be retrieved with getPostTypes() via useSelect() in JavaScript. An example of this is the dropdown in the Query Block to select a Post Type.

Below is a simplified example that uses a <SelectControl/> to display a list of all viewable post types, and enables a selected postType to be saved the blocks attributes.


    "attributes": {
        "postType": {
            "type": "string",
            "default": "post"


import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { SelectControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
    // postType defined in block.json
    const { postType } = attributes;

    // useSelect to retrieve all post types
    const postTypes = useSelect(
        (select) => select(coreStore).getPostTypes({ per_page: -1 }), []

    // Options expects [{label: ..., value: ...}]
    var postTypeOptions = !Array.isArray(postTypes) ? postTypes : postTypes
            // Filter out internal WP post types eg: wp_block, wp_navigation, wp_template, wp_template_part..
            postType => postType.viewable == true)
            // Format the options for display in the <SelectControl/>
            (postType) => ({
                label: postType.labels.singular_name,
                value: postType.slug, // the value saved as postType in attributes

    return (
        <div {...useBlockProps()}>
                label="Select a Post Type"
                onChange={(value) => setAttributes({ postType: value })}

The advantage of using JavaScript for the Editor instead of falling back to PHP is you can keep the UI consistent by using Gutenberg controls like <SelectControl/>.

The Settings Sidebar may be a good place to put your <SelectControl/> depending on your goal.

Leave a Comment