Toolset Blocks is our new plugin, currently in beta. Use it to test the new way of visually designing your Toolset templates using the WordPress Block Editor. Toolset Blocks is in a dynamic stage so you can expect frequent beta updates but you should not yet use it for live production sites. Let us know how it goes and what features you are missing.

What to install

To start, you need to install the following plugins:

You can install Toolset plugins from your account’s Downloads page.

We recommend using the Kadence Blocks for adding columns to your Block Editor designs. This is because, at this time, we find the built-in Block Editor’s columns to be lacking some important features. Kadence Blocks is a free, third-party plugin.

Enabling the Block Editor for Content Templates

To start designing templates using the Block Editor, you need to set it as a default template editor. If needed, you can later switch to the standard editor for any specific template.

Go to the Toolset -> Settings page and select the Block Editor option in the Editor to use for Content Templates section.

Making the Block Editor the default editor for templates
Making the Block Editor the default editor for templates

Once you set this option, you can create a new Content Template and you will see an empty Block Editor for designing it.

Go to the Toolset -> Dashboard page. In the row of the post type you want to create a template for, click the Create Content Template button.

An empty Block Editor for a newly created Content Template
An empty Block Editor for a newly created Content Template

 

Adding, editing, moving and deleting blocks

Watch this short video to learn how to edit with the Block Editor:

Designing templates using blocks

Templates are the basis of designing a custom site and displaying your content on the front-end.

You use templates to design the output of three main types of content on your site:

  • Single posts of a certain post type
  • Archive pages
  • Custom lists of content, i.e. Views

The process of designing all of these types of templates is basically the same.

Displaying Fields in your Block Editor Designs

You can display fields using three methods:

  1. Set block attributes from field values
  2. Display fields as individual blocks
  3. Combine fields with text in one block

Let’s look at these different options and see where each of them makes sense. We’re using our Travel Destinations example and we’ll show how to build different parts of the “travel destination” template.

Setting block attributes from field values

Every block in the Toolset Blocks library allows setting the value of every attribute from fields. Let’s look at a few examples to illustrate how this works and what you can do with it.

Here is a quick video that shows how to create a dynamic heading, “contact the tour operator” button and “featured image”:

Displaying fields as individual blocks

You can display any post field or Toolset custom field as a block. For example, the main tour description is the “post body”. To display it, add the Single Field block and select the Post Content (Body) field.

Displaying fields and text in a single block

Some parts of our template require a mix of fields and texts. For example, our list of tours displays the custom fields for price and duration, along with their labels which are “static texts”.

The easiest way to create this kind of table is using the “Fields and texts” block.

You can easily allow adding multiple images at once using repeating image fields. To create an image gallery from your repeating image field, simply insert the TB Repeating Field block into your template.

Adding TB Repeating Field
Adding TB Repeating Field

Creating multi-column layouts

When designing your pages and templates, you will want to arrange elements in columns. This means putting certain elements side-by-side.

The columns functionality in the WordPress Block Editor is still “work in progress”. To enjoy rich and convenient layout design, we recommend using a plugin called Kadence Blocks.

Sometimes, your Kadence columns can be displayed wider than the width of the main contents. In most cases, you can solve this by editing your Row Layout options and adjusting the Column Gutter.

Adjusting the Column Gutter option
Adjusting the Column Gutter option

Also, there are three Block Editor features that help you design and tweak your multi-column layouts:

  1. Use the Fullscreen mode (work without distraction)
  2. Use the Block Navigation feature to navigate between columns
  3. Use a one-column block for grouping a set of blocks

Watch this short video to see how to use columns in your designs:

Designing Toolset Blocks in the editor

Often, you will need to tweak the design of individual Toolset blocks. For example, you might want to change the output colors for fonts, backgrounds, and more. Or, you might want to change the margin or padding for specific fields output by Toolset.

Toolset allows you to easily do this in two ways:

  • Using the styling controls in the sidebar
  • Selecting a block container and applying CSS to it

Styling items using the interface

Toolset blocks provide you with an interface to adjust the most useful styling options. For example, you can adjust margins, paddings, colors, and more.

Simply select the Toolset block and Styling section in the Block Editor sidebar.

Please note that different types of Toolset blocks can have different styling options available.

Selecting block containers and using custom CSS

Applying custom CSS to Toolset blocks gives you unlimited styling possibilities.

First, you can select which HTML element you want to use for the container. You can choose from div, headerspan, and more.

Then, you can add any CSS classes to the block and applying styling right from the editor.

Designing archive pages with the Block Editor

Until now, we saw how to design Content Templates with the Block Editor. Now let’s see how to use the Block Editor to design archives and Views.

Toolset allows you to create custom archive pages for your content. An archive page outputs a list of all posts, usually ordered by date.

Go to the Toolset -> Dashboard page. In the row of the post type you want to create an archive for, click the Create Archive button.

You are now on the archive editing page.

Watch this short video to learn how to start designing the output of an archive page:

Now, use the Block Editor and design the template as seen in the previous section.

Designing Views with the Block Editor

Toolset allows you to create and display custom lists of any content on your site.

Watch this short video to learn how to start designing custom lists:

Again, use the Block Editor and design the template as seen in the first section.

Inserting Views and Forms into Block Editor designs

Toolset provides dedicated blocks to insert Views and Forms into single pages you design using the Block Editor. You will find these together with other Toolset blocks.

Toolset provides dedicated blocks for inserting your Views and Forms
Toolset provides dedicated blocks for inserting your Views and Forms

Adding dynamic map markers to Block Editor designs

While you can insert maps using our Toolset Maps Block you cannot select dynamic markers when designing templates using Toolset Blocks and Block Editor.

We are already working on this and it will be available very soon.

In the meantime, we prepared a short video that showcases an easy workaround for this:

Known Issues

Toolset Blocks is currently in beta so there will still be many changes and updates, as well as new features added.

We have a list of all known issues for your convenience and will update it frequently.