How to enable the Gutenberg (Block) editor for the custom post type

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

When you create a new custom post type (CPT), you find out the page or post of that custom post type using the Classic editor instead of the Gutenberg (Block) editor. That means that custom post types in WordPress use the Classic Editor by default, not the Gutenberg (Block) Editor. This post provides steps to enable Gutenberg for a CPT.

Register New Custom Post Type

To register a new custom post type, you can either add the code below or, for faster development, use the Custom Post Type UI plugin.

The code example below will create a “News” custom post type.

// Initial code (uses Classic Editor)
function news_post_type() {
    register_post_type( 'news',        
        array(
            'labels' => array(
                'name' => __( 'News' ),
                'singular_name' => __( 'News' ),
                'menu_name' => __('News')
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array('slug' => 'news'), 
        )
    );
}
 
add_action( 'init', 'news_post_type' );

Once the code is added to the functions.php then the “News” post type is created. You find out the Classic editor is used for this “News” post type.

Enable Gutenberg (Block) Editor for custom post type

There are two options you need to enable from the register_post_type(). One is the editor support and another one is show_in_rest. The reason we need to enable “show_in_rest” is that the Gutenberg (Block) editor uses REST API to communicate data between the server and JavaScript.

From the previous code, we add more code as shown below in functions.php, and then refresh the WordPress dashboard.

// Modified code (enables Gutenberg)
function news_post_type() {
    register_post_type( 'news',
        
        array(
            'labels' => array(
                'name' => __( 'News' ),
                'singular_name' => __( 'News' ),
                'menu_name' => __('News')
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array('slug' => 'news'),
            'show_in_rest' => true,
            'supports' => array('editor')
        )
    );
}
 
add_action( 'init', 'news_post_type' );

Now, when you create or edit the “News” posts, the Gutenberg (Block) editor will be used.

Wrapping up

The WordPress team has improved and added more functionalities to Gutenberg. We will see more improvement often. In my personal, I like to use Gutenberg for the blog or news since the page will load faster. For the page post type (Home page, About page, etc), I use Elementor Pro, which is the most popular page builder nowadays. Elementor Pro will help the designer, non-tech people, and developers create pages faster and more beautifully. For the developers, you can create custom Elementor widgets for the clients as well. Elementor provides a well-documented Elementor API. And that’s it for today.

Your support helps keep this blog running! Secure payments via Paypal and Stripe.