How to Use Gutenberg with WordPress Custom Post Types

Over the years, the WordPress community has been using WordPress Custom Post Types (CPT) for extending the functionality of the default WordPress platform. Given the popularity, the feature is an integral part of WordPress 5.x.

The Latest “Super” Tool in WordPress: Gutenberg Editor
With the current version of WordPress ( 5.1 RC), Gutenberg is only visible for the default pages and post types. Since WordPress custom post types are almost everywhere, the unavailability of Gutenberg editor is something that the community has been talking about since the release of WordPress 5.0.

This means that if you have CPT on your WordPress 5.x website, you will see the dear old Classic Editor when you create or edit a CPT. While there are plans to take care of this peculiar state of affairs in the upcoming versions, you don’t have to wait for the WordPress core maintenance team to release that update.

In fact, if you wish to use Gutenberg editor with the current CPT on your website, all you have to do is read on!

I will begin by explaining how to register a Gutenberg WordPress custom post type. Next, I will show you how to enable Gutenberg for WordPress custom post types.

Register Gutenberg WordPress Custom Post Type

Start by registering a Gutenberg WordPress custom type. The process is fairly easy and involves adding the following the code snippet.

/*Register WordPress  Gutenberg CPT */
function cw_post_type() {

    register_post_type( 'portfolio',
        // WordPress CPT Options Start
        array(
            'labels' => array(
                'name' => __( 'Portfolio' ),
                'singular_name' => __( 'Portfolio' )
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array('slug' => 'portfolio'),
 
        )
    );
}
 
add_action( 'init', 'cw_post_type' );

Once the snippet in place, the custom post type has been registered. However, in a surprising twist, when you try to create or edit a custom post type, you will still see the old Classic editor.

Add Gutenberg Support to WordPress Custom Post Types

Now, in order to make the Gutenberg editor visible on WordPress custom posts, you need to carry out an additional easy step of adding the following code snippet to the code snippet in the previous section:

add support for the editor.

add the show_in_rest key and set it to true via your custom post type.

'show_in_rest' => true,
   'supports' => array('editor')

As you can see, the above code snippet just set the ‘show_in_rest’ parameter to ‘TRUE’. After this step, when you create or edit a custom post type, you will see the Gutenberg editor visible and enabled.

The Complete Code

Here is the complete code which you put in functions.php, located in the theme folder:

/*Register WordPress  Gutenberg CPT */
function cw_post_type() {

    register_post_type( 'portfolio',
        // WordPress CPT Options Start
        array(
            'labels' => array(
                'name' => __( 'Portfolio' ),
                'singular_name' => __( 'Portfolio' )
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array('slug' => 'portfolio'),
            'show_in_rest' => true,
            'supports' => array('editor')
        )
    );
}
 
add_action( 'init', 'cw_post_type' );

Wrapping up!

Using Gutenberg editor with WordPress custom post types is a simple matter of setting the right parameters in the functions.php file. Once the right snippet is in place, you can easily access Gutenberg editor on your custom posts.

If you need help with this process, do leave a comment and I will get back to you ASAP.

https://www.cloudways.com/blog/gutenberg-wordpress-custom-post-type/