Title: Block Designer – Create Custom Blocks for Gutenberg Editor
Author: Helmut Wandl
Published: <strong>July 15, 2022</strong>
Last modified: December 3, 2025

---

Search plugins

![](https://ps.w.org/block-designer/assets/banner-772x250.png?rev=2760803)

![](https://ps.w.org/block-designer/assets/icon-256x256.png?rev=2757044)

# Block Designer – Create Custom Blocks for Gutenberg Editor

 By [Helmut Wandl](https://profiles.wordpress.org/ehtmlu/)

[Download](https://downloads.wordpress.org/plugin/block-designer.1.10.1.zip)

[Live Preview](https://pcd.wordpress.org/plugins/block-designer/?preview=1)

 * [Details](https://pcd.wordpress.org/plugins/block-designer/#description)
 * [Reviews](https://pcd.wordpress.org/plugins/block-designer/#reviews)
 * [Development](https://pcd.wordpress.org/plugins/block-designer/#developers)

 [Support](https://wordpress.org/support/plugin/block-designer/)

## Description

**Design your own custom blocks for the WordPress Gutenberg Block Editor without
any line of code.**

✔ **fastest way** to create your block for Gutenberg
 ✔ Incredibly **easy and intuitive**
to use ✔ Your custom blocks are **completely WYSIWYG (no form)**

—

#### Tutorial (create an address block for Gutenberg):

[open tutorial on YouTube](https://youtu.be/myBzUr0q3UU)

—

#### Live Preview

Test the latest version here:
 > > > **[open LIVE PREVIEW](https://livepreview.blockdesigner.net/)**
< < <

—

#### Supported Elements

 * HTML Element
 * Icon
 * Static Text
 * Author Image
 * Author Link
 * Author RichText
 * Inner Blocks

#### Supported Styles

 * Display (block, flex, inline-block, inline, none)
 * Flex (direction, reverse, align, justify, gap, wrap)
 * Flex Child (shrink, grow, align self)
 * Spacing (margin, padding)
 * Size (width, height, min-width, min-height, max-width, max-height)
 * Overflow (visible, hidden, scroll, auto)
 * Typography (font-weight, font-style, font-size, line-height, color, text-align,
   text-decoration)
 * Border (radius, style, width, color)
 * Background (color, linear-gradient, radial-gradient)
 * Effects (box-shadow)

#### How it works

 1.  **Design your block**
 2.  First you design your block in the _Block Designer_ with different HTML elements
     and styles.
 3.  You can define areas where authors can insert images and text in the _WordPress
     Block Editor_.
 4.  After you designed your block, you only need to enable and save it.
 5.  **Use your block**
 6.  If you enabled and saved your block, you will find your block in the Inserter 
     panel of the _WordPress Block Editor_.
 7.  Just insert it as you know it from ordinary blocks.
 8.  If you have defined areas for author input, you can add your content now.
 9.  Save your page/post and enjoy your result on your site 😉

#### More from the same author

Click here: [wppeak.com](https://www.wppeak.com/)

## Screenshots

 * [[
 * This is the overview of all your created blocks.
 * [[
 * This is the view when you design one of your blocks.
 * [[
 * In the WordPress Block Editor, you can always preview your block by hovering 
   over your block icon.
 * [[
 * Use your block as often as you want.

## Reviews

![](https://secure.gravatar.com/avatar/04e55ceface1221c9c7933e128d5e39fb04ef1bac69671a6749362977cc19982?
s=60&d=retro&r=g)

### 󠀁[incredible](https://wordpress.org/support/topic/incredible-285/)󠁿

 [José Jefferson](https://profiles.wordpress.org/ojosejefferson/) June 20, 2025 
1 reply

This is incredible, the WordPress core could have something of this level for creating
your own blocks directly in WordPress, this project is promising and I see a great
future, thank you and congratulations

![](https://secure.gravatar.com/avatar/fb15c3cad21df1f206b1a6f84325e0a752d330a28b9d60c5016a36ed53a8f64e?
s=60&d=retro&r=g)

### 󠀁[I am thrilled!](https://wordpress.org/support/topic/i-am-thrilled/)󠁿

 [mxpppe](https://profiles.wordpress.org/mxpppe/) January 24, 2023

With its intuitive interface and many customizable options, I was able to easily
create my own blocks for the Gutenberg editor and make my WordPress website more
appealing. The support is fast and helpful. I highly recommend it to anyone who 
wants to make their WordPress sites more customized. 5 stars!

![](https://secure.gravatar.com/avatar/f2949e1420c186ba7fe9eafb8f5c406b6b29ddebb639e7c7da6f93d39b784643?
s=60&d=retro&r=g)

### 󠀁[The best visual custom block creator so far](https://wordpress.org/support/topic/the-best-visual-custom-block-creator-so-far/)󠁿

 [Martin Sauter](https://profiles.wordpress.org/martinsauter/) September 19, 2022

If you have tried Lazy Blocks or Genesis Custom Blocks and are looking for a more
visual way to both create and use custom blocks, this plugin is for you: Creating
a custom block is very much like building a post in the Gutenberg block editor (
no coding required), and using your custom block is completely WYSIWYG (no form).

![](https://secure.gravatar.com/avatar/105cab2ef268b92c358cbe1631d3c4824b41c8f02a03fb248316377c31448769?
s=60&d=retro&r=g)

### 󠀁[Awesome plugin, easy to use!](https://wordpress.org/support/topic/awesome-plugin-easy-to-use-21/)󠁿

 [dreiviertelneun](https://profiles.wordpress.org/dreiviertelneun/) August 22, 2022

This is a great plugin for creating custom blocks to your site. Very easy and intuitive
to use. I highly recommend!

 [ Read all 4 reviews ](https://wordpress.org/support/plugin/block-designer/reviews/)

## Contributors & Developers

“Block Designer – Create Custom Blocks for Gutenberg Editor” is open source software.
The following people have contributed to this plugin.

Contributors

 *   [ Helmut Wandl ](https://profiles.wordpress.org/ehtmlu/)

“Block Designer – Create Custom Blocks for Gutenberg Editor” has been translated
into 3 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/block-designer/contributors)
for their contributions.

[Translate “Block Designer – Create Custom Blocks for Gutenberg Editor” into your language.](https://translate.wordpress.org/projects/wp-plugins/block-designer)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/block-designer/), check
out the [SVN repository](https://plugins.svn.wordpress.org/block-designer/), or 
subscribe to the [development log](https://plugins.trac.wordpress.org/log/block-designer/)
by [RSS](https://plugins.trac.wordpress.org/log/block-designer/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.10.1 – 2025-12-03

 * Made Block Designer compatible with WordPress 6.9

#### 1.10.0 – 2023-11-01

 * Make block content translatable via WPML plugin

#### 1.9.5 – 2023-07-12

 * Added help text about adding custom CSS classes

#### 1.9.4 – 2023-07-12

 * Fix small style implementation issue

#### 1.9.3 – 2023-04-09

 * Fix small compatibility issue with WP 6.2

#### 1.9.2 – 2023-04-09

 * Fix small compatibility issues with WP 6.2

#### 1.9.1 – 2022-11-02

 * Fix small compatibility issue with WP 6.1

#### 1.9.0 – 2022-10-04

 * Fix issue with theme style switch
 * Make the plugin translatable
 * Optimize various small things

#### 1.8.2 – 2022-09-29

 * Fix small issue with paste command

#### 1.8.1 – 2022-09-29

 * Fix small issue with copy, cut and paste commands

#### 1.8.0 – 2022-09-29

 * Implement a better way for copy, cut and paste commands

#### 1.7.5 – 2022-09-28

 * Fix issue when copying an author link with other author elements in it

#### 1.7.4 – 2022-09-16

 * Fix two small issues in the site editor

#### 1.7.3 – 2022-09-16

 * Fix: style settings for tablet and mobile had no effect in the backend

#### 1.7.2 – 2022-09-15

 * Fix: overview preview did not work on multisite installations

#### 1.7.1 – 2022-09-15

 * Fix: canvas did not work on multisite installations

#### 1.7.0 – 2022-09-13

 * Support of block alignment “wide” and “full”
 * New element “authorlink”

#### 1.6.5 – 2022-08-30

 * Fix issue about copy, cut or delete elements

#### 1.6.4 – 2022-08-25

 * Fix safari issue

#### 1.6.3 – 2022-08-24

 * Fix two small issues

#### 1.6.2 – 2022-08-23

 * Fix small issue

#### 1.6.1 – 2022-08-22

 * Fix various small issues

#### 1.6.0 – 2022-08-17

 * Show indicators when styles are set
 * New element “Icon”

#### 1.5.1 – 2022-08-10

 * Fix for older PHP versions

#### 1.5.0 – 2022-08-10

 * Use CSS classes instead of style attributes
 * Add responsive styles (desktop, tablet, mobile)

#### 1.4.0 – 2022-07-31

 * Add drag and drop to element tree

#### 1.3.1 – 2022-07-26

 * Fix: BD crashed when saving a new block while an element was selected

#### 1.3.0 – 2022-07-25

 * Add support for many more HTML tags
 * Add support for custom HTML attributes
 * Small optimizations

#### 1.2.1 – 2022-07-20

 * Fix: canvas height was too high
 * Fix: capability issue

#### 1.2.0 – 2022-07-19

 * Add options to change canvas view

#### 1.1.1 – 2022-07-17

 * Optimize box-shadow controls to support different units

#### 1.1.0 – 2022-07-16

 * Add options for background gradients
 * Add options for box shadows
 * Add feedback panel

#### 1.0.1 – 2022-07-16

 * Fix: Canvas height was too small in Firefox

#### 1.0.0 – 2022-07-15

 * Initial release

## Meta

 *  Version **1.10.1**
 *  Last updated **4 months ago**
 *  Active installations **100+**
 *  WordPress version ** 5.9.0 or higher **
 *  Tested up to **6.9.4**
 *  PHP version ** 7.3 or higher **
 *  Languages
 * [English (US)](https://wordpress.org/plugins/block-designer/), [German](https://de.wordpress.org/plugins/block-designer/),
   [German (Switzerland)](https://de-ch.wordpress.org/plugins/block-designer/), 
   and [Portuguese (Portugal)](https://pt.wordpress.org/plugins/block-designer/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/block-designer)
 * Tags
 * [block-editor](https://pcd.wordpress.org/plugins/tags/block-editor/)[custom blocks](https://pcd.wordpress.org/plugins/tags/custom-blocks/)
   [design](https://pcd.wordpress.org/plugins/tags/design/)[gutenberg](https://pcd.wordpress.org/plugins/tags/gutenberg/)
   [style](https://pcd.wordpress.org/plugins/tags/style/)
 *  [Advanced View](https://pcd.wordpress.org/plugins/block-designer/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  4 5-star reviews     ](https://wordpress.org/support/plugin/block-designer/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/block-designer/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/block-designer/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/block-designer/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/block-designer/reviews/?filter=1)

[Add my review](https://wordpress.org/support/plugin/block-designer/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/block-designer/reviews/)

## Contributors

 *   [ Helmut Wandl ](https://profiles.wordpress.org/ehtmlu/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/block-designer/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://www.paypal.com/donate/?hosted_button_id=2G6L8NWVXZ4T4)