When you create Content Templates, you can use the classic Content Template editor (as you have been doing thus far) or you can switch to the Gutenberg Editor.

In the Gutenberg Editor, you design your post content using Blocks.

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

Step 1 – Switch to the Gutenberg Editor when creating a Content Template

  1. Go to Toolset -> Dashboard.
  2. Locate the custom post type for which you want to create the template; for example, “Books.”
  3. Click on the Create Content Template button. You are taken to the Content Template editor.
  4. Click on the Gutenberg button to begin designing the template using the Gutenberg Editor.

Switching to the Gutenberg Editor in the Content Template screen.
Switching to the Gutenberg Editor in the Content Template screen.

  1. Click on the Edit with Gutenberg Editor button.

Click Edit with Gutenberg
Switching to the Gutenberg Editor

Step 2 – Design the template in the Gutenberg Editor

In Gutenberg, you design the post content using blocks. You can use any block.

Toolset developers are working on making it possible to create separate blocks for fields and that what is explained below is what’s currently available.

To insert your custom fields and post meta-information (such as the post date, post featured image, and post body), do the following:

  1. Insert the Custom HTML block.

Inserting the Custom HTML block.
Inserting the Custom HTML block.

  1. Click the Fields and Views button.

Use the Fields and Views button in the Custom HTML block to insert custom fields and post meta-information.
Use the Fields and Views button in the Custom HTML block to insert custom fields and post meta-information.

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

Fields and Views shortcodes
Fields and Views shortcodes

The fields you choose will be inserted as shortcodes surrounded by curly brackets. You can wrap them in additional HTML tags, if necessary.

The following is an example of how a content template for a “Book” page may look:

Example of a content template designed using Gutenberg Editor.
Example of a content template designed using Gutenberg Editor.

In this example, the blocks that include the Toolset shortcodes in curly brackets are Custom HTML blocks. All other blocks are standard paragraph blocks.

The preview option for posts based on custom post types currently does not work. This will be implemented in Gutenberg at a later time. For the time being, you must save your content template, visit your post, and view it on the front-end.

The following is how the post from the previous example will look on the front-end.

Example content template designed using Gutenberg Editor (front-end view).
Example content template designed using Gutenberg Editor (front-end view).

To add Views to your content template, use the Views block.

Use the Views block to add Views to your content template when designing in Gutenberg.
Use the Views block to add Views to your content template when designing in Gutenberg.

Review the tutorial on How to design the Views output using Gutenberg Editor to see how you can create Views using Gutenberg.