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.
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.
- Go to Toolset -> Post Types.
- Click to edit the Post Type for which you want to enable the Gutenberg Editor.
- In the Edit Post Type screen, scroll down to the Options section.
- 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 in the Gutenberg Editor:
If you have any custom fields available for this post type, you will see them in the Gutenberg editor:
Toolset provides three new blocks for the Gutenberg Editor:
- View block
- Content Template block
- Toolset Form 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.
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.
The Content Template block allows you to insert a content template into your Gutenberg Editor.
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.
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.
Toolset provides a Fields and Views tab inside 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.
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 also use Gutenberg editor to desig Content Templates. Please review the step-by-step tutorial on how to create Content Templates with Gutenberg.
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.
The development of Toolset integration with the Gutenberg editor is still in progress. Here are some frequently asked questions.
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.
Answer: For inserting Views, use the View block. For accessing other features, use the HTML block -> Fields and Views button.
Answer: For inserting forms use the Toolset Forms block. For accessing other features use the HTML block -> Toolset Forms button.
If you have any other questions on how to use Toolset with Gutenberg, please post them in the comments of the accompanying blog post: