search ]

How to Allow Gutenberg Editor for Custom Post Types

Gutenberg is the new editor that comes by default in WordPress (version 5.0+). However, it turns out that it does not automatically appear for Custom Post Types.

By default, these use the classic WordPress editor. It’s possible (quite likely, actually) that in the future, they will be natively supported in Gutenberg. But for now, to add support for the new editor, a small change is required when creating the new content type.

Here’s an example:

function savvy_cpt_init() {

    $labels = array(
        // not revelant for this article
    );

    $args = array(
        'labels'             => $labels,
        'description'        => __( 'Description.', 'textdomain' ),
        'public'             => true,
        'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
    );

    register_post_type( 'newcpt', $args );

}
add_action( 'init', 'savvy_cpt_init' );

In order to add support for Gutenberg to the custom content type we created, we need to set show_in_rest to true as follows:

function savvy_cpt_init() {

    $labels = array(
        // not revelant for this article
    );

    $args = array(
        'labels'             => $labels,
        'description'        => __( 'Description.', 'textdomain' ),
        'public'             => true,
        'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
        'show_in_rest'       => true,
    );

    register_post_type( 'newcpt', $args );

}
add_action( 'init', 'savvy_cpt_init' );

In general, enabling the REST API for the custom post type (CPT) you created is necessary for Gutenberg to work with this or any other content type.

Roee Yossef
Roee Yossef

I develop pixel-perfect custom WordPress themes, delivering high-performance, SEO-optimized websites. Have a project in mind? need assistance? Feel free to contact me!

0 Comments...

Leave a Comment

To add code, use the buttons below. For instance, click the PHP button to insert PHP code within the shortcode. If you notice any typos, please let us know!