When you create a View, you can use the Gutenberg Editor inside your View Template to create the output of the current item in the View loop

The image below illustrates how this works.

View displaying books. A single book item was created using the Gutenberg Editor.
View displaying books. A single book item was created using the Gutenberg Editor.

Step 1 – Create and set up a View

You create and set up your View in the same manner as you would normally:

  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 View button.
  4. Give your View a name. You are then taken to the Edit View screen.
  5. Scroll down to the Loop Output Editor.
  6. Click the Loop Wizard button.
  7. Choose your Loop output style, for example, the Bootstrap grid. Click Next.
  8. In the Choose fields tab:
    1. Add one field; for example, Post title.
    2. Check the Use a Content Template (…) option.

      Check the Use a Content Template (...) option
      Check the Use a Content Template (…) option

    3. Click Finish.
  9. Click Scroll Down to the Content Template.

Step 2 – Switch to the Gutenberg Editor in your View

In the Template for this View screen:

  1. Click the Update button. You need to save the template before switching to the Gutenberg Editor to avoid losing the changes you will make in the editor.

    Click the Update button
    Click the Update button

  2. Click the Gutenberg

    Click the Edit with Gutenberg Editor button again.
    Click the Edit with Gutenberg Editor button again.

    button.

  3. Click the Edit with Gutenberg button. The Edit Content Template screen opens in a new tab of your browser.
  4. Click the Edit with Gutenberg Editor button again.

    Click the Edit with Gutenberg Editor button again.
    Click the Edit with Gutenberg Editor button again.

The Gutenberg Editor opens.

Step 3 – Design the loop item in the Gutenberg Editor

In the Gutenberg Editor, you design your content by inserting blocks on your template.

You can use any block.

To insert your post fields and custom fields, you use the Custom HTML block:

  1. Insert the Custom HTML block.
  2. Click the Fields and View button.

Click the Fields and View button
Click the Fields and View button

After clicking the Fields and Views button, the classing dialog for inserting Toolset shortcodes opens and you can select any field to be inserted.

  1. You may add any other blocks to your template.

For example, in our template for the Recommended Books View, we added a paragraph block with fixed text (“Must read!”). Please see the screenshot that follows.

Content Template that will be used in a View loop
Content Template that will be used in a View loop

  1. Click Update to save your content template and return to your View.
  2. Save your View.

Your View is now ready. It can be inserted in a page, another View, or a content template.

Review the information in How to create a page in Gutenberg that uses different Views