Wicked Block Builder

Description

Create your own custom blocks with Wicked Block Builder! There’s no setup required and you can build blocks in as little as a few minutes.

Features

🏗 Build Custom Blocks

Easily build custom blocks without any programming or a complicated build process. Simply drag-and-drop HTML elements and components to build your block in minutes.

Make Your Block Editable

Add components such as rich text and images so you can edit your block’s content directly in the editor.

Customize Your Block’s Sidebar

Add text boxes, checkboxes, radio buttons, color palettes, and more to your block’s sidebar. Add panels or HTML elements to organize the sidebar.

Dynamic Blocks

Optionally make your blocks dynamic and use PHP to output your block. Easily access your block’s data via an argument containing your block’s attributes.

Flexible Front-end View

Save time and skip the step of creating a similar (but slightly different) view for the front-end of your block (i.e. the “save” function if you’re a developer).

Automatic Deprecations

Reduce invalid content warnings in the editor. Wicked Block Builder automatically creates a deprecated version of your block when you make changes so your blocks won’t break.

Style Editor

Add your block’s styles in a convenient CSS editor.

Block Patterns

Create block patterns with no code and easily update them as needed.

🚀 Get More With Wicked Block Builder Pro

Take your blocks to the next level with these additional features in Wicked Block Builder Pro. Learn more about Wicked Block Builder Pro.

Repeater

Add repeaters to your block. Add, sort, and delete any number of items in your block. Nest repeaters for even greater functionality.

Conditional Logic

Use conditions to do incredible things with your block. Conditionally add classes, inline styles, and HTML attributes. Even change the output of your block based on conditional logic.

PostSelect

Add a PostSelect component to your block to let people select one or more posts and sort them.

TermSelect

Add a TermSelect component to your block to let people choose one or more terms. Choose from different display types like checkboxes, radios, or dropdown.

InnerBlocks

Add an InnerBlocks component to nest blocks within your block.

Get Wicked Block Builder Pro.

Who is Wicked Block Builder for?

Wicked Block Builder is for anyone who wants to create blocks that can be used in the WordPress editor. This includes non-technical people (there’s no programming required) but also developers.

Non-technical people will appreciate the intuitive drag-and-drop interface. For developers, complete control over the block’s output, conditional logic (pro version only), automatic deprecations, dynamic blocks, and more make it a powerful must-have time-saving development tool.

Screenshots

  • Configure your block's settings
  • Add various attribute types to your block
  • Drag and drop HTML elements and components to build the editor view of your block
  • Add classes, styles, and HTML attributes to elements
  • Drag and drop HTML elements and components to build your block's sidebar
  • Add CSS to your block
  • Sample block created with Wicked Block Builder

Installation

  1. Upload ‘wicked-block-builder’ to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen by searching for ‘Wicked Block Builder’.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress
  3. To add your first block, go to Wicked Block Builder > Add New

FAQ

Is there documentation?

Yes! You can view the documentation here.

How do I create a block pattern?

When editing a page, select the blocks that you want to convert to a pattern, click the three dots in the toolbar that appears above the blocks, and select ‘Save as pattern’.

Do I have to know HTML or CSS to use Wicked Block Builder?

There is no programming or HTML editing required but a basic understanding of HTML and CSS will go a long way. Blocks are created by dragging and dropping HTML elements to form the HTML structure of your block. So it does help to have a basic understanding of how HTML tags work and are nested. You don’t need to know CSS to create a block but you’ll be able to take your blocks farther and make them look better with a little bit of knowledge. The good news is that both are easy to learn! If you’re just getting started, check out HTML & CSS – The VERY Basics from css-tricks.com.

Why am I seeing “This block contains invalid or unexpected content” when my block is loaded in the editor?

This happens when the HTML of your block has unexpectedly changed. This can happen for a number of reasons including: you made changes to the structure of your block; the HTML of the block was changed after it was saved (for example, perhaps a filter ran that added an extra HTML attribute to one of your tags). You can read more about how to troubleshoot this issue in the documentation.

Is there a limit to the number of blocks I can create?

No, you can create as many blocks as you want.

Will my blocks keep working if I deactivate the plugin?

Not really. Your blocks will still appear on the front-end; however, if you used the styled editor in the block builder to add your block’s CSS, your blocks will not appear correctly. Also, you will see an error if you try to edit a page containing one of your blocks. If you just need to deactivate Wicked Block Builder temporarily though, your blocks will still be there when you reactivate the plugin.

Can I export and import blocks?

Yes, blocks can be exported and imported by going to Wicked Block Builder > Home.

Can blocks be synced to/from JSON?

Yes. Simply create a folder named wbb-json in your theme and make sure the folder is writable. Blocks will automatically be saved to JSON when the wbb-json folder exists. Learn more about syncing blocks to JSON in the documentation.

Reviews

April 22, 2022
Exactly what I wanted in a custom block builder plugin. Incredibly simple UI and easy-to-use tutorials on YouTube helped me get started real quick. As a developer and Block Editor fanatic, I believe that this is a gamechanger.
April 29, 2022
Developers rejoice! This is a game changer! Wicked Block Builder has finally made building a bespoke / custom design site for your clients a viable option with the Block Editor! Before this plugin it was very challenging to build truly custom designs with the Block Editor because creating custom blocks was a tedious and time consuming process. I could easily have 5 to 10 custom blocks for a small-medium size business website, and if you had to do that with creating a unique React powered block each time there was no way it would be affordable for you or your client. But with Wicked Block Builder you can whip together complex and powerful blocks on the fly.
Read all 3 reviews

Contributors & Developers

“Wicked Block Builder” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Wicked Block Builder” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.2.2 (May 24, 2022)

  • Really update tested-up-to version this time 🤦

1.2.1 (May 24, 2022)

  • Test with WordPress 6.0 and update tested-up-to version
  • Fix: cursor in wrong location when dragging attributes, elements, and components in block builder

1.2.0 (April 6, 2022)

  • New: ability to change block slug in settings
  • New: ability to import and export blocks
  • New: ability to duplicate blocks
  • New: JSON sync feature allowing blocks to be written to JSON files
  • Fix: HTML entities appearing in TermSelect
  • Fix: dynamic blocks only being output once per page
  • Fix: inline styles stripping double hyphen prefixes

1.1.0 (January 25, 2022)

  • New: ability to select a block icon
  • New: toggle component
  • New: dropdown component
  • New: settings to control block features for anchor, custom class name, font size, line height, multiple, inserter, margin, and padding
  • Fix: conditions sometimes not working inside of repeater
  • Fix: incorrect attribute type in help text for radio component
  • Fix: PHP warning caused by misspelling
  • Tweak: move alignment to new ‘Feature Support’ section

1.0.1 (January 5, 2022)

  • Fix: incorrect version number in main plugin file

1.0.0 (January 5, 2022)

  • New: add ability to create block patterns
  • New: add placeholder component for InnerBlocks
  • Fix: block titles not appearing in REST API
  • Fix: block content not being passed to dynamic blocks
  • Fix: Wicked Block Builder admin menu not expanded when viewing block categories

0.1.0 (November 12, 2021)

  • 🎉 Beta release 🎉