Toolset has a completely new workflow, currently in beta. Test the new way of visually designing your Toolset templates and Views using the WordPress Block Editor. Let us know how it goes and what features you are missing.

What to install

To start, you need to install the following plugins:

  • Toolset Types
  • Toolset Views beta
  • Toolset Maps beta for map-related features

You can install Toolset beta versions by going to your account’s Downloads page and switching the channel to “Beta”.

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

Apply maximum width to Block Editor

Depending on the theme you use, the Block Editor interface can appear too narrow and impractical for editing. You can easily fix this by activating the Maximize the width of the Block Editor option after Toolset Blocks installation.

Enable Maximize the width of the Block Editor option
Enable Maximize the width of the Block Editor option

You can always access this setting in the Block Editor by clicking the Toolset Settings icon. Each user can set their own value.

Adjust Editor Maximum Width values
Adjust Editor Maximum Width values

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, you may want to add labels next to the output of your custom fields. The easiest way to create this kind of table is by using the Fields and Text block.

You can use this block to insert Fields, Views or Forms. You can also use Conditional output for custom fields. All of this can be done using the block’s Visual or HTML editor.

Adding a mix of custom text and custom fields using the "Fields and Text" block
Adding a mix of custom text and custom fields using the “Fields and Text” 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 Repeating Field / Gallery block into your template.

Adding TB Repeating Field / Gallery
Adding TB Repeating Field / Gallery

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.

Using Container blocks

You can use the Container block to group and style multiple blocks. For example, you can set a background for the container. For the background, you can use a solid color, color gradient, or an image. You can also use Container blocks within other Container blocks.

Typography controls

Toolset blocks offer a Typography section in the sidebar settings allowing you to style and format text.

You can adjust the following typography-related options:

  • Font type – choose from a huge selection of fonts
  • Font size, line height, and letter spacing
  • Font style
  • Text transform – capitalize, uppercase, lowercase
  • Text color
  • Text shadow

Typography options in Toolset blocks
Typography options in Toolset blocks

Designing Views with the Block Editor

Toolset allows you to display custom lists of any content on your site. You can now create and design these lists visually, right from the Block Editor.

Start by inserting the View Editor block into Block Editor. Use different blocks to design your View. To display standard and custom fields, use Toolset Blocks.

Visually create Views from the Block Editor
Visually create Views from the Block Editor

Create Custom Searches

Creating your own custom searches is easy and simple. You can set up a custom search for any content type in a matter of minutes, including your unique design for the search box and the results. Custom searches can include inputs by custom fields, taxonomy, relationship, and text searches.

Create custom searches visually using the Block Editor
Create custom searches visually using the Block Editor

Add pagination to your Views

Pagination lets you split large amounts of content into pages. You can enable different kinds of pagination controls such as page numbers, previous and next controls and controls for going straight to the first or the last page of your View.

Designing archive pages with the Block Editor

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. Add any blocks inside the WordPress Archive block. Use Toolset blocks to display dynamic fields coming from your custom fields, taxonomies, post fields, and more.

Designing a WordPress Archive using Toolset and the Block Editor
Designing a WordPress Archive using Toolset and the Block Editor

Inserting Views, Forms, and Maps into Block Editor designs

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

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

Toolset Conditional block

The Toolset Conditional block allows you to display or hide elements based on conditions you set. You can display a simple message or whole blocks, Views, and Forms. You can use one or more conditions and check them against the content of standard or custom fields.

Editing the conditions for displaying content placed inside a Conditional block
Editing the conditions for displaying content placed inside a Conditional block

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.