User Documentation

Installation

Either install Blockade from the WordPress plugin repository, or download the zip file, extract the files, and upload the wp-blockade folder to your site’s wp-content/plugins/ directory. Activate the plugin from the plugins page of the admin panel.

Building your first Page with Blockade

By default, Blockade will only be added to pages (there are filters to add Blockade to other Post Types and Editors). So, go to Pages, click “Add New”, and you will see your first Blockade-enhanced editor.

The Blockade-Enhanced Editor

There are two obvious differences from the standard WordPress editor. One is the Blockade options added to the menu bar, with the show/hide button to preview Blocks as they’ll appear live, and the Blockade menu to select Blocks to insert. The other is the editor’s content. Instead of typing directly into the content area, with Blockade, you add an “Editable Content” Block, then type into that.

To start, click on the dotted box, or choose Editable Content from the Blockade menu to add an editable area.  Then click into that block, and start typing as usual.

Arranging Blocks

New Blocks are normally inserted at the bottom of the current page. However, if you have been working in a specific block, and you add a new one, Blockade will attempt to place the new block directly below the one you’ve been working in.

Drag and Drop Ordering

Unless its position has been locked (we’ll go into that more later), all blocks can be re-positioned by dragging and dropping from anywhere on the block itself.

Adding Some Structure

Blockade contains two types of blocks, Content Blocks (like Editable Content, Images, and Buttons) and Structural Blocks (like Columns, Containers, and Breakout). Structural Blocks (aside from the Spacer block) can contain other Blocks within them. Lets run through the standard types of structure Blockade includes:

  • Container Blocks are used to group multiple blocks into a single group.  It can be useful in editing to make drag-and-drop easier for sets of blocks that should stay together, and on the front end, it can allow you to add styling to an area containing a set of different blocks.
  • Spacer Blocks are a quick way to add vertical rhythm to a page. Just insert the block and set a height. In most cases, however, the preferred method is to set margins and padding on your blocks, rather than adding a non-semantic element to the page.
  • Breakout Blocks are used to expand the content area’s width to the full width of the user’s browser.  They are useful for Hero images, full-width content, and full-width backgrounds
  • Simple Column Blocks provide some of the most common column layouts used in sites. All layouts are designed to be responsive, breaking to a single column at bootstrap’s xs screen sizes (mostly cellphones and tablets in portrait mode).

By combining these blocks with custom background colors and images, you can create a huge number of unique and eye-catching layouts.

Working with Columns

Each Column in a container block is basically its own blockade editor. You can click an empty column to add an Editable Content block, or place other blocks inside it.

Meet the Control Bar

When you hover over any block, a control bar will appear in the upper right hand corner. This bar contains some of the most common tasks you’ll need to perform with a block. Let’s go through the features of the bar:

  • Block Type – It can get confusing telling all your blocks apart, so the type of block is prominently displayed on the left
  • Options – Many blocks, such as images and maps, have required settings, but all blocks have several optional settings, such as margin, padding, and class. We’ll go into more detail on these options later.
  • Lock Content – Sometimes, when you get your content right, you’ll want to make sure no one accidentally edits it. Locked content cannot be edited until the block is actively unlocked.
  • Lock Position – It can also be frustrating to get a block’s position set perfectly, then accidentally move it. Locking a block’s position prevents it from being dragged, until unlocked
  • Lock Structure – Sometimes you need to create a set of blocks that work together, then copy the group several times on the page. Locking the structure makes sure that, while you can change any Editable Content in a set of blocks, you can’t add new blocks or change the position of any blocks inside. 
  • Clone – Once you get a section built, click clone to duplicate it, with all settings, children, and text.
  • Delete – If you no longer need a block, delete it, and all its children, in one easy step.

Why all the Locks?

The content, position, and structure locks exist to help designers show their clients what parts of a design are meant to be edited. They don’t stop the user from making changes, but rather suggest that the original placement or content was intended to remain static, or intended to change.

Gimme some Options!

The options button hides a lot of the nuts and bolts required to properly configure your Blocks. In the case of some Blocks, it will be crucial to set some of these options. In that case, the options panel will appear as soon as you add the Block.  However, the options panel also contains many optional settings, common to all blocks.

With Great Power…

There are  three tabs in the options panel that are common to all Blocks:

  • Spacing – This panel lets you set the margin and padding for your Block
  • Background – Here you can set a background color or image, in several different styles, such as cover
  • Custom – This is the most powerful tab, where you can set custom classes and styles to apply to your block.

Go Build Something!

There are many more features and subtle tricks to using Blockade effectively, but the best way to learn how to use it is to just get started!