How to Enable Gutenberg Editor with Custom Post Type

The CPT (Custom Post Type) helps to extend the functionality of WordPress. The Gutenberg Editor is part of the core functionality since WordPress 5.x release. It’s available for default pages and post types. And the default old Classic Editor will see with the CPT.

Table of content

• Register CPT
• Enable Gutenberg for CPT

Register Custom Post Type

Let’s create a simple Project CPT for Gutenberg WordPress. The register_post_type() function is used with init action hooks.

function wp097345_custom_post_type() {

    register_post_type( 'project',
        array(
            'labels' => array(
                'name' => __( 'Project' ),
                'singular_name' => __( 'Project' )
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array('slug' => 'project'),
            'supports' => array('editor')
        )
    );
}

add_action( 'init', 'wp097345_custom_post_type' );

The above code will add the Project CPT and it’s will look like the below screenshot.

As you can see, the default editor is the Classic Editor instead of the Gutenberg.

Enable Gutenberg for Custom Post Type

The previous section added a Project CPT to WordPress and the CPT uses the Classic Editor instead of the Gutenberg. It’s easy to add support for the Gutenberg in CPT but adding the show_in_rest key with true value.

'rewrite' => array('slug' => 'project'),
'show_in_rest' => true,
'supports' => array('editor')

Now if you save the above codes with the CPT and refresh the page, then you will find the Gutenberg Editor supports with your CPT.

You can find the complete codes here to enable the Gutenberg Editor with Custom Post Type.

function wp097345_custom_post_type() {

    register_post_type( 'project',
        array(
            'labels' => array(
                'name' => __( 'Project' ),
                'singular_name' => __( 'Project' )
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array('slug' => 'project'),
            'show_in_rest' => true,
            'supports' => array('editor')
        )
    );
}

add_action( 'init', 'wp097345_custom_post_type' );