Title: Block Designer – Create Custom Blocks for Gutenberg Editor
Author: Helmut Wandl
Published: <strong>2022-07-15</strong>
Last modified: 2025-12-03

---

Szukaj wtyczek

![](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

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

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

[Podgląd na żywo](https://pl.wordpress.org/plugins/block-designer/?preview=1)

 * [Szczegóły](https://pl.wordpress.org/plugins/block-designer/#description)
 * [Recenzje](https://pl.wordpress.org/plugins/block-designer/#reviews)
 * [Rozwój](https://pl.wordpress.org/plugins/block-designer/#developers)

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

## Opis

**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/)

## Zrzuty ekranu

[⌊This is the overview of all your created blocks.⌉⌊This is the overview of all 
your created blocks.⌉[

This is the overview of all your created blocks.

[⌊This is the view when you design one of your blocks.⌉⌊This is the view when you
design one of your 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.⌉⌊In the WordPress Block Editor, you can always preview your block
by hovering over your block icon.⌉[

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.⌉⌊Use your block as often as you want.⌉[

Use your block as often as you want.

## Recenzje

![](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/) 2025-06-20 1 odpowiedź

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/) 2023-01-24

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/) 2022-09-19

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/) 2022-08-22

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

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

## Kontrybutorzy i deweloperzy

„Block Designer – Create Custom Blocks for Gutenberg Editor” jest oprogramowaniem
open source. Poniższe osoby miały wkład w rozwój wtyczki.

Zaangażowani

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

Wtyczka „Block Designer – Create Custom Blocks for Gutenberg Editor” została przetłumaczona
na 3 języki. Podziękuj [tłumaczom](https://translate.wordpress.org/projects/wp-plugins/block-designer/contributors)
za ich wkład.

[Przetłumacz wtyczkę “Block Designer – Create Custom Blocks for Gutenberg Editor” na swój język.](https://translate.wordpress.org/projects/wp-plugins/block-designer)

### Interesuje cię rozwój wtyczki?

[Przeglądaj kod](https://plugins.trac.wordpress.org/browser/block-designer/), sprawdź
[repozytorium SVN](https://plugins.svn.wordpress.org/block-designer/) lub czytaj
[dziennik rozwoju](https://plugins.trac.wordpress.org/log/block-designer/) przez
[RSS](https://plugins.trac.wordpress.org/log/block-designer/?limit=100&mode=stop_on_copy&format=rss).

## Rejestr zmian

#### 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

 *  Wersja **1.10.1**
 *  Ostatnia aktualizacja **7 miesięcy temu**
 *  Włączone instalacje **100+**
 *  Wersja WordPressa ** 5.9.0 lub nowszej **
 *  Testowano do **6.9.4**
 *  Wersja PHP ** 7.3 lub nowszej **
 *  Języki
 * [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/), 
   i [Portuguese (Portugal)](https://pt.wordpress.org/plugins/block-designer/).
 *  [Przetłumacz na swój język](https://translate.wordpress.org/projects/wp-plugins/block-designer)
 * Tagi
 * [block-editor](https://pl.wordpress.org/plugins/tags/block-editor/)[custom blocks](https://pl.wordpress.org/plugins/tags/custom-blocks/)
   [design](https://pl.wordpress.org/plugins/tags/design/)[gutenberg](https://pl.wordpress.org/plugins/tags/gutenberg/)
   [style](https://pl.wordpress.org/plugins/tags/style/)
 *  [Widok zaawansowany](https://pl.wordpress.org/plugins/block-designer/advanced/)

## Oceny

 5 na 5 gwiazdek.

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

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

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

## Zaangażowani

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

## Wsparcie

Masz coś do dodania? Potrzebujesz pomocy?

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

## Złóż datek

Czy chcesz wesprzeć rozwój wtyczki?

 [ Wspomóż wtyczkę ](https://www.paypal.com/donate/?hosted_button_id=2G6L8NWVXZ4T4)