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 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.

Gutenberg Custom Post Type

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.

Gutenberg Support with the 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' );

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.