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.
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.
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.
There are only four available attribute types for your various block
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.
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.
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.
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.
My editor view and front-end view turned out to be very simple and consist of only one element, a
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).
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:
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.
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
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.
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.)
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
rem, as well as
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
You can group your components into collapsible panels, but I had so few that I didn’t bother.
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.
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.
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.