How to enable the Gutenberg WordPress editor for a custom post type

/
wp tips

Introduction

Custom post types are a great feature of WordPress which allow us to extend the functionality to adapt to our needs.

WordPress has already 5 default post types (post, page, attachment, revision, navigation menu), but using some custom PHP code, we can create custom ones.

One issue which you can encounter when you create custom post types is that the edit area can miss some important features.

Such a feature is the ability to use the Gutenberg editor.

How to add a custom post type to your WordPress theme

I will not go into details as the purpose is to show you how to enable the Gutenberg WordPress editor for the custom post type.

Let's say that you want to create a custom post type called "Events". In order to do this, you will need to add the following code to your functions.php file in your WP theme's folder:

function zi_custom_post_type() {

	$labels = array(
		'name'                  => _x( 'Events', 'Post Type General Name', 'text_domain' ),
		'singular_name'         => _x( 'Event', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'             => __( 'Events', 'text_domain' ),
		'name_admin_bar'        => __( 'Events', 'text_domain' ),
		'archives'              => __( 'Item Archives', 'text_domain' ),
		'attributes'            => __( 'Item Attributes', 'text_domain' ),
		'parent_item_colon'     => __( 'Parent Item:', 'text_domain' ),
		'all_items'             => __( 'All Items', 'text_domain' ),
		'add_new_item'          => __( 'Add New Item', 'text_domain' ),
		'add_new'               => __( 'Add New', 'text_domain' ),
		'new_item'              => __( 'New Item', 'text_domain' ),
		'edit_item'             => __( 'Edit Item', 'text_domain' ),
		'update_item'           => __( 'Update Item', 'text_domain' ),
		'view_item'             => __( 'View Item', 'text_domain' ),
		'view_items'            => __( 'View Items', 'text_domain' ),
		'search_items'          => __( 'Search Item', 'text_domain' ),
		'not_found'             => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
		'featured_image'        => __( 'Featured Image', 'text_domain' ),
		'set_featured_image'    => __( 'Set featured image', 'text_domain' ),
		'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
		'use_featured_image'    => __( 'Use as featured image', 'text_domain' ),
		'insert_into_item'      => __( 'Insert into item', 'text_domain' ),
		'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
		'items_list'            => __( 'Items list', 'text_domain' ),
		'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
		'filter_items_list'     => __( 'Filter items list', 'text_domain' ),
	);
	$args = array(
		'label'                 => __( 'Event', 'text_domain' ),
		'description'           => __( 'Post Type Description', 'text_domain' ),
		'labels'                => $labels,
		'supports'              => array( 'title', 'editor', 'thumbnail', 'comments', 'trackbacks', 'revisions', 'custom-fields', 'page-attributes', 'post-formats' ),
		'taxonomies'            => array( 'category', 'post_tag' ),
		'hierarchical'          => false,
		'public'                => true,
		'show_ui'               => true,
		'show_in_menu'          => true,
		'menu_position'         => 5,
		'show_in_admin_bar'     => true,
		'show_in_nav_menus'     => true,
		'can_export'            => true,
		'has_archive'           => true,
		'exclude_from_search'   => false,
		'publicly_queryable'    => true,
		'capability_type'       => 'page',
	);
	register_post_type( 'events', $args );

}
add_action( 'init', 'zi_custom_post_type', 0 );

The first array (labels) contains all the working related to this new post type.

The second array (args) contains info related to new custom post type features. An important one is supports parameter which is also an array and it contains editor.

This means that editor will be enabled when you will edit an Event custom post type. Here's how the edit page looks:

wordpress custom post type edit

As you can see, the WP classic editor is used. If you want to use Gutenberg, then you will need to add something to your PHP code from above.

Enable the Gutenberg WordPress editor for a custom post type

To use Gutenberg editor when you will edit Events post type, you will need to add some code to your PHP.

In the args array you will need to add a new parameter called show_in_rest. This parameter, when it is set to true, the Gutenberg block editor is available for the custom post type. In the same time, the custom post type is included in the REST API (REpresentational State Transfer API).

So the args array will look like this:

	$args = array(
		'label'                 => __( 'Event', 'text_domain' ),
		'description'           => __( 'Post Type Description', 'text_domain' ),
		'labels'                => $labels,
		'supports'              => array( 'title', 'editor', 'thumbnail', 'comments', 'trackbacks', 'revisions', 'custom-fields', 'page-attributes', 'post-formats' ),
		'taxonomies'            => array( 'category', 'post_tag' ),
		'hierarchical'          => false,
		'public'                => true,
		'show_ui'               => true,
		'show_in_menu'          => true,
		'menu_position'         => 5,
		'show_in_admin_bar'     => true,
    'show_in_nav_menus'     => true,
    'show_in_rest'          => true,
		'can_export'            => true,
		'has_archive'           => true,
		'exclude_from_search'   => false,
		'publicly_queryable'    => true,
		'capability_type'       => 'page',
	);

The edit page will look like this:

gutenberg editor custom post type

Conclusion

When you create a custom post type, if you are not able to edit it with Gutenberg, then you will need to add the right code. I hope that the above is useful.

Comments closed

Please contact me, if you have any questions or suggestions.