Toolkit Plugin for Headway

Toolkit Plugin Setup Guide

This is the setup guide for the Toolkit plugin. We’ve tried to make the plugin as easy to use as possible, but if you get stuck at any point, come back and reference this guide.

First, why we built it

While building Headway sites, we often struggled to locate a specific block. So we thought to ourselves, how can we make this easier and from that simple idea, the Block Search was born.

Using Blocks Anywhere

To insert a block into your post or page, simply click on HeadwayRocket icon in your Post or Page editor.

Editor with Toolkit icon

Once the Block Search dialog opens, locate the block you are wanting to insert, then click the “Add Shortcode” button.

Block Search dialogue

Alternatively, you can use your keyboard to navigate the results and hit the return (enter) key on your keyboard to insert the shortcode.

This will then add the necessary shortcode to your content, where the cursor is placed within the post or page editor.

Shortcode example

You can also manually add the Blocks Anywhere shortcode to your posts or pages. Below is an example of the shortcode syntax:

[blocks-anywhere id="4"]

The id attribute is where you enter the relevant block id. Use the Block Index to find out the id of the block you are wanting to add, or alternatively, use the Block Search tool.

Using the Block Search

Accessing the Block Search

The idea is simple. From anywhere in your WordPress admin, you can press a keyboard shortcut and the Block Search dialog will appear, from which you can start typing and locate any block instance on your Headway site.

Using the keyboard shortcut

There are five possible keyboard shortcuts you can choose from, which can be configured in the Toolkit Settings. The default is Alt+f.

Using the post editor button

Alternatively, you can access the Block Search via the top HeadwayRocket > Toolkit > Block Search link in your WordPress admin.

Finding a block

To find a block, simply start typing the block type, name or the block, alias, block id, a specific page or post, or even a specific post type.

We’ve built in a ton of flexibility, making finding your block incredibly easy.

Opening a block in Headway

Once you’ve located the block you are looking for, simply navigate down to the result you want to edit and hit the enter key on your keyboard.

Block search dialogue

Alternatively, you can simply click on the “Open in Visual Editor” button the individual result you would like to edit.

Using the Block Search in Headway

When you activate the Toolkit plugin, the Block Search for the WordPress admin is enabled automatically.

In order to use the Block Search in the Headway Visual Editor, you’ll need to enable it in the plugin settings.

To do so, simply head over to the HeadwayRocket > Toolkit > Settings page in your WordPress admin, then tick the “In Headway Visual Editor” checkbox below the “Enable Block Search” option.

Block search settings

To access the Block Search in the Headway Visual Editor, simply click the Block Search link below the top right Tools menu.

Block search tools link

You are also able to see all the blocks for your site in a handy tabular list, which you can filter by specific block type. Handy when you want to see all instances of a particular block.

Settings overview

Block Search

The Enable Block Search option lets you to enable or disable the Block Search in the WordPress admin, as well in the Headway Visual Editor.

The Block Search is disabled in Headway by default, as it’s less likely to be needed than in the WordPress admin.

The Keyboard Shortcut option lets you choose an alternate sequence for the keyboard shortcut, which used to activate the Block Search. This is set to alt+f by default.

Block’s Anywhere

The Shortcode option lets you to enable or disable the Block’s Anywhere tool. This was added to let you disable the Blocks Anywhere tool if it’s not being used.

Shortcodes Helper

Note: This only applies if you are wanting to display a block that outputs multiple posts, regardless of their format.

The Shortcodes Helper is a meta box that is displayed when editing a post, page or custom post type.

In cases where you want to output a block that contains multiple posts, you will need to register the block in the Shortcode Helper meta box.

Shortcode helper meta

This is needed so that we can load the necessary assets required to display the block properly.

This includes loading any dynamic css, javascript or images.

Register a block using the Shortcode Helper

Registering a block to be included is quick and easy. Simply click the Add Shortcodes button in the meta box, which will then open the block search.

Search for the block you are wanting to include, then click on the “Add Shortcode” button. This will add the block to the Shortcodes Helper meta box.

Block search added

The Shortcodes Helper option lets you decide where the Shortcodes Helper meta box is enabled on.

Practical Example:

Say you want to add your recent WooCommerce products to a blog post. Since WooCommerce uses the WordPress loop (to display your products), you would need to register the block on the post where the shortcode is added.

To do so, you would enable the Shortcode Helper on your Posts. Once enabled, you will see the Shortcodes Helper meta box on your post edit page.

For this example, we’ll assume you have already created an instance of the WooCommerce Headway block and for the sake of simplicity, we’ll assume the block id is “1”.

To register the WooCommerce block, simply click the “Add Shortcode” button and from the Block Search dialog you would start typing “Woo”, which would then filter the results by block type.

Once you have located the block, click on the “Add Shortcode” button.

Now you can save your changes and view the page. The block you added using the shortcode should be outputted on your page.