Helmut Wandl

<p><strong>Design your own custom blocks for the WordPress Gutenberg Block Editor without any line of code.</strong></p>
<p>✔ <strong>fastest way</strong> to create your block for Gutenberg<br />
✔ Incredibly <strong>easy and intuitive</strong> to use<br />
✔ Your custom blocks are <strong>completely WYSIWYG (no form)</strong></p>
<p>—</p>
<h4>Tutorial (create an address block for Gutenberg):</h4>
<p><iframe loading="lazy" title="Create a custom address block for Gutenberg" width="750" height="422" src="https://www.youtube.com/embed/myBzUr0q3UU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p><a href="https://youtu.be/myBzUr0q3UU" rel="nofollow ugc">open tutorial on YouTube</a></p>
<p>—</p>
<h4>Live Preview</h4>
<p>Test the latest version here:<br />
> > > <strong><a href="https://livepreview.blockdesigner.net/" rel="nofollow ugc">open LIVE PREVIEW</a></strong> < < <</p>
<p>—</p>
<h4>Supported Elements</h4>
<ul>
<li>HTML Element</li>
<li>Icon</li>
<li>Static Text</li>
<li>Author Image</li>
<li>Author Link</li>
<li>Author RichText</li>
<li>Inner Blocks</li>
</ul>
<h4>Supported Styles</h4>
<ul>
<li>Display (block, flex, inline-block, inline, none)</li>
<li>Flex (direction, reverse, align, justify, gap, wrap)</li>
<li>Flex Child (shrink, grow, align self)</li>
<li>Spacing (margin, padding)</li>
<li>Size (width, height, min-width, min-height, max-width, max-height)</li>
<li>Overflow (visible, hidden, scroll, auto)</li>
<li>Typography (font-weight, font-style, font-size, line-height, color, text-align, text-decoration)</li>
<li>Border (radius, style, width, color)</li>
<li>Background (color, linear-gradient, radial-gradient)</li>
<li>Effects (box-shadow)</li>
</ul>
<h4>How it works</h4>
<ol>
<li>
<p><strong>Design your block</strong></p>
<p>First you design your block in the <em>Block Designer</em> with different HTML elements and styles.</p>
<p>You can define areas where authors can insert images and text in the <em>WordPress Block Editor</em>.</p>
<p>After you designed your block, you only need to enable and save it.</p>
</li>
<li>
<p><strong>Use your block</strong></p>
<p>If you enabled and saved your block, you will find your block in the Inserter panel of the <em>WordPress Block Editor</em>.</p>
<p>Just insert it as you know it from ordinary blocks.</p>
<p>If you have defined areas for author input, you can add your content now.</p>
<p>Save your page/post and enjoy your result on your site 😉</p>
</li>
</ol>
<h4>More from the same author</h4>
<p>Click here: <a href="https://www.wppeak.com/" rel="nofollow ugc">wppeak.com</a></p>


Block Designer – Create Custom Blocks for Gutenberg Editor

Create and design custom blocks for the WordPress Gutenberg Block Editor without any line of code.

EdwardR

VicToMeyeZR

<p>WPS HTML Blocks, adds custom html blocks to WordPress. The custom blocks have shortcode to give you the ability to add these HTML blocks to anywhere on the wordpress site. It has been tested against most themes. Elementor and WP Bakery both are compatible.</p>


WPS HTML Blocks

This plugin adds a custom HTML post type, with shortcode to place anywhere on your site.

Block Designer – Create Custom Blocks for Gutenberg Editor vs WPS HTML Blocks