Helmut Wandl

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)
—
<h4>Tutorial (create an address block for Gutenberg):</h4>
<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>
<a href="https://youtu.be/myBzUr0q3UU" rel="nofollow ugc">open tutorial on YouTube</a>
—
<h4>Live Preview</h4>
Test the latest version here: 
> > > <a href="https://livepreview.blockdesigner.net/" rel="nofollow ugc">open LIVE PREVIEW</a> < < <
—
<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>
Design your block
First you design your block in the Block Designer with different HTML elements and styles.
You can define areas where authors can insert images and text in the WordPress Block Editor.
After you designed your block, you only need to enable and save it.
</li>
<li>
Use your block
If you enabled and saved your block, you will find your block in the Inserter panel of the WordPress Block Editor.
Just insert it as you know it from ordinary blocks.
If you have defined areas for author input, you can add your content now.
Save your page/post and enjoy your result on your site 😉
</li>
</ol>
<h4>More from the same author</h4>
Click here: <a href="https://www.wppeak.com/" rel="nofollow ugc">wppeak.com</a>

Block Designer – Create Custom Blocks for Gutenberg Editor

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

David Arnado

Supercharge your WordPress site with Caledros Basic Blocks – a collection of 18 lightweight, performance-optimized Gutenberg blocks designed to extend the capabilities of the WordPress block editor without slowing down your site.
Unlike many block libraries that add unnecessary bloat, Caledros Basic Blocks focuses on efficiency and speed. Each block is crafted to deliver essential functionality while keeping your site lean.
The plugin includes a built-in CSS stylesheet preloader, ensuring faster page load times by optimizing the delivery of block styles. This feature can be easily disabled if preferred, giving you full control over performance tuning.
<h3>Features</h3>
<ul>
<li>Adds 18 new custom Gutenberg blocks, and 2 new variation blocks. 4 blocks and 1 variation block are only available for header template parts. 1 block (Content Renderer) is limited to templates. </li>
<li>Flex and grid containers blocks included</li>
<li>Dark/Light mode block included</li>
<li>Blocks built with performance and minimalism in mind</li>
<li>Includes a toggleable preloader for CSS stylesheets to improve loading speed</li>
<li>Includes toggleable controls for adding/removing pre-defined CSS styles to the “wp-site-blocks” container.</li>
<li>Enable featured images for post categories</li>
<li>Clean, modern design for seamless visual integration</li>
<li>Fully responsive and compatible with Full Site Editing Themes</li>
</ul>
Perfect for developers, designers, and content creators who want more control and better performance without the overhead of large block libraries.
<h3>More Projects & Information</h3>
For more information about my projects, you can visit my website: <a href="https://caledrosforge.com/" rel="nofollow ugc">caledrosforge.com</a>
<h3>Third Party Resources</h3>
Caledros Basic Blocks bundles the following third-party resources:
<h3>1. Icons</h3>
1.1. Bootstrap Icons, Copyright (c) 2019-2024 The Bootstrap Authors
The icons (SVG files) used in the Icon block, Social Icon block, and the Button Block were downloaded from Bootstrap Icons.
Additionally, the four icons used in the Posts Loop block (user, date, category, and tag) as well as the publications icon in the Category Loop block, were all sourced from Bootstrap Icons.
Bootstrap Icons are licensed under the MIT License.
Source: <a href="https://github.com/twbs/icons" rel="nofollow ugc">Bootstrap Icons Github repository</a> and <a href="https://icons.getbootstrap.com/" rel="nofollow ugc">Bootstrap Icons website</a>
License information last verified on: May 21st, 2025
<h3>2. Libraries</h3>
2.1. Swiper JS, Copyright (c) 2019 Vladimir Kharlampidi
Both the Slider block and the Image Gallery block use the Swiper JS library, which is licensed under the MIT License.
Source: <a href="https://github.com/nolimits4web/swiper" rel="nofollow ugc">Swiper JS Github repository</a> and <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper JS website</a>
License information last verified on: May 14th, 2025
<h3>3. Images</h3>
3.1. Placeholder Mountains (placeholder-mountains.webp, placeholder-mountains.7da2eb2d.webp)
Used in the Category Loop and Posts Loop blocks.
<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="nofollow ugc">CC0</a> licensed <a href="https://wordpress.org/photos/photo/85161bd2cb/" rel="ugc">photo</a> by <a href="https://wordpress.org/photos/author/mkaz/" rel="ugc">Marcus Kazmierczak</a> from the <a href="https://wordpress.org/photos/" rel="ugc">WordPress Photo Directory</a>
Source: <a href="https://wordpress.org/photos/photo/85161bd2cb/" rel="ugc">WordPress Photo Directory</a>
License information last verified on: September 7th, 2025
3.2. Bird (bird.webp, bird.8dbbb5a8.webp)
Used in the Image Gallery block.
<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="nofollow ugc">CC0</a> licensed <a href="https://wordpress.org/photos/photo/715678e819/" rel="ugc">photo</a> by <a href="https://wordpress.org/photos/author/snilesh/" rel="ugc">Nilesh Shiragave</a> from the <a href="https://wordpress.org/photos/" rel="ugc">WordPress Photo Directory</a>
Source: <a href="https://wordpress.org/photos/photo/715678e819/" rel="ugc">WordPress Photo Directory</a>
License information last verified on: September 7th, 2025
3.3. Flower (flower.webp, flower.1092b3c8.webp)
Used in the Image Gallery block.
<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="nofollow ugc">CC0</a> licensed <a href="https://wordpress.org/photos/photo/763688069f/" rel="ugc">photo</a> by <a href="https://wordpress.org/photos/author/churaclicks/" rel="ugc">Chura Bhandari</a> from the <a href="https://wordpress.org/photos/" rel="ugc">WordPress Photo Directory</a>
Source: <a href="https://wordpress.org/photos/photo/763688069f/" rel="ugc">WordPress Photo Directory</a>
License information last verified on: September 7th, 2025
3.4. Mountains (mountains.webp, mountains.2b50cd4a.webp)
Used in the Image Gallery block.
<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="nofollow ugc">CC0</a> licensed <a href="https://wordpress.org/photos/photo/62068b050a/" rel="ugc">photo</a> by <a href="https://wordpress.org/photos/author/abishkaarchettri/" rel="ugc">ABISHKAAR CHETTRI</a> from the <a href="https://wordpress.org/photos/" rel="ugc">WordPress Photo Directory</a>
Source: <a href="https://wordpress.org/photos/photo/62068b050a/" rel="ugc">WordPress Photo Directory</a>
License information last verified on: September 7th, 2025

Caledros Basic Blocks

Introduces 18 lightweight blocks for the Gutenberg editor. Also includes an optional preloader for CSS stylesheets to enhance performance.

Block Designer – Create Custom Blocks for Gutenberg Editor vs Caledros Basic Blocks