When you create a new custom post type and find out the page or post of that custom post type using the Classic editor instead of Gutenberg editor. This post tells you how to fix it.
Register New Custom Post Type
Normally, you can add the code below to register the new custom post type. Or you can use the Custom Post Type UI plugin.
The example below will create a News custom post type.
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 you create a News post. You find out the Classic editor is used.
Enable Gutenberg Editor
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 editor uses REST API to communicate data between the server and JS.
Now edit the code as shown below in functions.php and refresh the WP dashboard.
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' );When you create or edit the News post, the Gutenberg editor will be used.
Wrapping up
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 and developer create the page faster and more beautifully. For the developers, you can create custom Elementor widgets for the clients as well. Elementor provides a well-document Elementor API. And that’s it for today.
