Gutenberg is the new default in WordPress since the 5.0 release.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

Choosing an editor for custom post types

Switching existing sites to use the new Block (Gutenberg) editor can be very challenging. This is especially true when using many plugins and a complex site structure. This is why Toolset allows you to select the editor on a per-post basis. This way, you can switch to the new editor gradually. You can enable Gutenberg to edit new posts. When you see that it’s all good, you can switch it over for editing old posts. And so on. This allows you to make sure you’re not breaking anything and that nothing is missing.

There are two way to select an editor you want to use for a certain post type: Toolset Dashboard or when editing a post type from the Toolset -> Post Types page.

You can choose between the Block (Gutenberg), Classic editor or Per post. On the same page, you can select custom taxonomies that will be shown when using the (Gutenberg) editor.

Choosing editor in Toolset Dashboard
Choosing editor in Toolset Dashboard

Set editor options for post type
Set editor options for post type

If you have selected Per post option you will be able to choose an editor for each post individually when editing it. This also means that If you have started editing a post in one editor you can switch to another one at any time.

Switch to Classic Editor
Switch to Classic Editor

Switch to Block Editor
Switch to Block Editor

If you are using the Gutenberg plugin

If you are using the Gutenberg plugin, you must enable the show_in_rest option for the custom post type you want to use this editor for.

  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.

If you now add a new post for this post type, you will be able to edit it with 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.

Inserting Toolset shortcodes into native blocks

When you want to enter shortcodes you can do it both in the native Classic editor and the Paragraph blocks. You can also use shortcodes with the existing button for conditional output by Views.

Toolset button in the native Paragraph block
Toolset button in the native Paragraph block

Toolset blocks in the Gutenberg Editor

Toolset provides four new blocks for the Gutenberg Editor:

  • View block
  • Content Template block
  • Toolset Form block
  • Map block

 

 

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.

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.

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. You can insert any type of a Toolset form, including Post, User and Relationship.

Edit Form from Gutenberg editor
Edit Form from Gutenberg editor

Designing View Loops using Gutenberg

When creating a View, you can use the Gutenberg Editor inside the View Template to design 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.
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.

Design Content Templates using Gutenberg

You can also use Gutenberg editor to design 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.

FAQ

The development of Toolset integration with the Gutenberg editor is still in progress, as well as the Gutenberg core itself. Here are some frequently asked questions about this integration.

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

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

Can I use Layouts and Gutenberg at the same time?

Using Gutenberg and Toolset Layouts at the same time is not possible. If you try to use Gutenberg to edit a post that was designed with Layouts then Gutenberg will be blocked.

Where is the Access button located?

The Access button for conditional output based on user roles is located in the Paragraph block.

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