Gutenberg is a new editor for WordPress that will be incorporated into the WordPress core with WordPress 5.0.

This page, along with its child pages, explains how to use the new Gutenberg editor with Toolset.

What you will learn:

  • How to enable Gutenberg editor for your custom post types.
  • What are the new Toolset blocks in the Gutenberg editor.
  • How to design Views, Content Templates, and Pages using the Gutenberg editor.

Watch the video

How to enable the Gutenberg editor for custom post types

When you work with regular posts and pages, they open in the Gutenbergeditor by default.

However, this does not occur with posts that are based on a custom post type unless you enable the show_in_rest option for that post type. Compare the screenshots that follow.

What occurs by default: your Book post opens in the classic editor
What occurs by default: your Book post opens in the classic editor

What is desired: to be able to open your Book post in the Gutenberg Editor
What is desired: to be able to open your Book post in the Gutenberg Editor

Classic editor
Classic editor

Gutenberg editor
Gutenberg editor

How to enable the show_in_rest_option for a custom post type

  1. Go to Toolset -> Post Types.
  2. Click to edit the Post Type for which you want to enable the Gutenberg Editor.
  3. In the Edit Post Type screen, scroll down to the Options section.
  4. Check the show_in_rest option and click to save the changes.

How to enable the show_in_rest option for a custom post type.
How to enable the show_in_rest option for a custom post type.

If you now add a new post for this post type, you will be able to edit it in the Gutenberg Editor:

Opening posts based on a Custom Post Type in Gutenberg
Opening posts based on a Custom Post Type in Gutenberg

 

If you have any custom fields available for this post type, you will see them in the Gutenberg editor:

Custom fields created with the Toolset Types plugin will appear automatically in the Gutenberg Editor.
Custom fields created with the Toolset Types plugin will appear automatically in the Gutenberg Editor.

New Toolset blocks in the Gutenberg Editor

Toolset provides three new blocks for the Gutenberg Editor:

  • View block
  • Content Template block
  • Toolset Form block

New Toolset blocks in the Gutenberg Editor
New Toolset blocks in the Gutenberg Editor

View block

The View block allows you to insert a View into your Gutenberg Editor and control the View output by using the block attributes.

When you change the attributes, the View preview is updated on-the-fly and reflects your parameters.

View block displaying “Books.” We limited the number of books displayed to three and changed the default order by using block attributes.
View block displaying “Books.” We limited the number of books displayed to three and changed the default order by using block attributes.

Using the View block, you insert one of your existing Views.

Review the tutorial on How to design the Views output using the Gutenberg Editor to learn how to create Views with Gutenberg.

Content Template block

The Content Template block allows you to insert a content template into your Gutenberg Editor.

 

Page that includes a Content Template block. The content template in our example displays some information about the author of the page.
A page that includes a Content Template block. The content template in our example displays some information about the author of the page.

Note that when using the Content Template block, you insert existing content templates into your content. You can choose only from “stand-alone” Content Templates. This means that the content templates that are used in a View loop will not appear in the list of your Content Template block.

To learn how to design a content template using Gutenberg, please review the tutorial on How to use Content Templates with the Gutenberg Editor.

Toolset Form block

The Toolset Form block allows you to insert a form into your Gutenberg design. Using this block, you insert one of your existing Forms. If needed you can then edit the inserted form.

Edit Form from Gutenberg editor
Edit Form from Gutenberg editor

Inserting Toolset fields into a Custom HTML Block

Toolset provides a Fields and Views tab inside the Custom HTML block.

Toolset includes the Fields and Views button in the Custom HTML block.
Toolset includes the Fields and Views button in the Custom HTML block.

When you click the Fields and Views button, the classic Fields and Views shortcodes dialog opens. You can then insert fields as shortcodes.

How to design the layout for the output of Views using Gutenberg Editor

When you create a View, you can use the Gutenberg Editor inside your View Template to design the layout for the output of the current item in the View loop. Please review the step-by-step tutorial on how to create Views with Gutenberg.

You can use the Gutenberg Editor inside your View Template to design the layout for the output of the current item in the View loop.
You can use the Gutenberg Editor inside your View Template to design the layout for the output of the current item in the View loop.

How to design the Content Template output using Gutenberg Editor

You can also use Gutenberg editor to desig Content Templates. Please review the step-by-step tutorial on how to create Content Templates with Gutenberg.

When you design content templates, you can also use the Gutenberg Editor.
When you design content templates, you can also use the Gutenberg editor.

How to create a page in Gutenberg that uses different Views

With View blocks, you can create an entire page in the Gutenberg editor more conveniently.

For example, if you need to change some of your View attributes, such as the number of posts displayed or the sorting order, you use the View controls in the Inspector (block settings region).

The preview of posts in your View block allows you to see the posts that will be included in your view.

Page created with Gutenberg and View blocks (back-end)
Page created with Gutenberg and View blocks (back-end)

Page created with Gutenberg and View blocks (back-end)
Page created with Gutenberg and View blocks (back-end)

FAQ

The development of Toolset integration with the Gutenberg editor is still in progress. Here are some frequently asked questions.

Can I insert my custom fields directly into my Gutenberg content using dedicated blocks?

For example, I have the “Publishing Date” custom field, but I want to insert the field as a block and choose the date format through my block controls.

Answer: For the time being, you can only use the Custom HTML block to do this. We are currently developing new blocks that will allow you to insert custom fields directly into your Gutenberg editor.

How to access the functionality provided by the “Fields and Views” button?

Answer: For inserting Views, use the View block. For accessing other features, use the HTML block -> Fields and Views button.

How to access the functionality provided by the “Toolset Forms” button?

Answer: For inserting forms use the Toolset Forms block. For accessing other features use the HTML block -> Toolset Forms button.

Ask your question

If you have any other questions on how to use Toolset with Gutenberg, please post them in the comments of the accompanying blog post:

Leave Your Comment