TL;DR
This is a tool for developers. Read the documentation before you start. Now is a good time to bookmark the Core Block Reference and the Block Library.

It was considerably harder for me to get started with Wicked Block Builder than I expected. While it makes the layout of blocks very easy, it assumes you have a better understanding of how native blocks work than I apparently do.

For instance, I couldn’t re-create my PDF Thumbnail Block in Wicked Block Builder the way I could with Genesis Custom Blocks because I haven’t figured out whether it’s possible to upload a file that isn’t an image using the free plugin–or even with the premium version. (You’d think it would be possible since there’s a core file block, but…)

Rather than wrestle with that, I decided to try to create another block that I haven’t been able to find: a horizontal spacer block.

It’s true that there isn’t often a need for this kind of block, especially with padding and margin settings coming into core, but the only way I could find to achieve a horizontal space of a particular width was by creating an empty column.

Builder Settings

There are definitely more available options within the UI (like allowing alignment settings and custom padding and margins) than with Genesis Custom Blocks. The hardest thing to do in this pane was choosing an appropriate block icon.

Attributes

Starting with this pane means you need to know not only which elements and components you need in your block, but also what attribute types they use.

You could theoretically postpone creating your attributes until after you’ve added said elements and components to your editor and front-end views, but that means going back to the views and editing all the settings. Unless you already have the necessary attributes written out ahead of time, you’re probably going to go back and forth a bit.

Nevertheless, learning about block attributes is easier than learning React in order to create blocks entirely in code, and the documentation and example block are both helpful and necessary.

Attribute Types

There are only four available attribute types for your various block args.

If you don’t know what type of attribute your block uses, check the block.json file for the block in Block Library. For instance, if you are using an image element, you need a number attribute because the plugin needs the ID of the image in order to be able to retrieve all sizes of that image.

Attribute Source

Each attribute needs a source. For strings, you have a choice between block meta (that’s the HTML comment that stores the block info in the database, and no relation to post_meta, HTML attribute (not to be confused with a block attribute, this means things like the href in a link or the src in an image), text, and HTML. “Text” is for plain text (anything that’s going to go into the code) and HTML is for rich (formatted) text. Number attributes don’t have “HTML” as an option.

I started out with two attributes, width and units. I ended up with five, turning my original horizontal spacer block into a vertical spacer block and a very basic rectangle block.

Editor View

The next step is to set up your editor view, which is the block layout for the editor. All of the panels in Wicked Block Builder use the Gutenberg editor, which means adding and configuring attributes, view elements, and components works pretty much the same way as adding other blocks. And yes, it also means dealing with that annoying Gutenberg sidebar.

Elements

To create your editor view, first add elements and then put components in those elements. By using the “Custom” element, you can insert any HTML tag, e.g. span, h2, p.

My editor view and front-end view turned out to be very simple and consist of only one element, a div.

Element Settings

Available settings depend on the type of element. To configure settings, either click the settings icon when the element is selected or the “Settings” tab in the sidebar.

The “Div” element has settings for HTML Tag, Content, Classes, Styles, (HTML) Attributes, and Conditions (Pro only).

My div has no content, so I skipped that section. I added a custom class and an attribute for ID, but the most important panel for my purposes was Styles, which adds inline styles.

Each style requires a CSS property and value. You can enter a specific value or use an attribute. The most important factor in a horizontal spacer is its width, set here by clicking the attribute inserter in the “Value” field.

I added a couple of style properties for which I don’t have attributes: display: inline-block, border: 1px dashed #ddd, and margin: 4px.I’d initially forgotten that I’d need that display property, because my test block was inserted into a Row block, which uses CSS Flexbox to lay out block elements horizontally.

I only added those because a spacer is normally transparent, and it’s useful to see that your block settings are being applied. There’s a light gray dashed border around the block, and a margin to enable you to see the border.

Editor View Components

Components are meant for either interacting with or displaying the content inside your block elements. Some of the most interesting components are restricted to the Pro version, but there are still quite a few possibilities.

The spacer block doesn’t have any content, so it also doesn’t have any components. The attributes I created don’t have any associated elements in either the editor or front-end views, because they modify the code, not the content. Instead, all my components are in the block sidebar, and we’ll get to them in a minute.

Front-End View

You don’t actually have to build a separate front-end view: Wicked Blocks will use your editor view if you don’t. My front-end view does not have border or margin style properties, but is otherwise identical to the editor view.

The front-end view offers fewer components than the editor view, because the site visitor doesn’t need to interact with them.

Sidebar

The settings for my spacer block all go in the sidebar. I tried doing it in the editor view, but discovered that if I did so, I couldn’t preview my block within the editor. (That’s not true for components like RichText, which work more like core blocks for paragraphs and headings.)

Sidebar Components

I only needed components for my sidebar, not elements. I chose TextControl components for width and height and Dropdown components for units, to allow the user to choose from px, %, em, and rem, as well as ch and vw for width and vh for height.

Figuring out which component to use for which attribute was one of the tricky parts. For instance, it wasn’t obvious to me that you need a TextControl for a number attribute. (Truth, it wasn’t obvious to me that TextControl meant “unformatted text,” which returns us to the twin facts that Wicked Blocks is a developer tool and I have not learned JavaScript deeply, or even shallowly.)

You can group your components into collapsible panels, but I had so few that I didn’t bother.

Component Settings

The settings for the components are straightforward: Attribute, Label, Help (okay, not sure about that one yet), and appropriate values for the attribute. A TextControl component only has one additional setting, for placeholder text. A Dropdown component provides a “Choices” section like a GravityForms dropdown field: click the “+” icon to add your choices and enter a label and a value for each.

Color Palette

Adding a background color setting was not part of my initial idea, but I wanted to be able to see the spacer in the front end to be sure it was working, and then I decided that instead of just using that for my own dev purposes, I could add a color palette and provide the option for the user to create a colored square or rectangle instead of a blank space.

Styles

There is a styles pane for adding CSS to your block, but all the styles I needed are added inline via the views.

Using the Horizontal Spacer Block

After a fair amount of trial and error, I got my attributes, editor view, front-end view, and sidebar set up and added a spacer block between two images in a row block.