Terrible Monster Studio

<p>TMS Blocks adds custom blocks for the WordPress block editor (Gutenberg).</p>
<p>The blocks are meant to act like a transparent interface for the html and css produced by them.</p>
<p>The plugin currently includes the following blocks:<br />
– Link<br />
– Dynamic Field<br />
– Generic Block<br />
– Heading<br />
– Image<br />
– List<br />
– List Item<br />
– Paragraph<br />
– Post Context</p>
<p>These blocks are used to define content structure and render block output in a predictable way.</p>
<h4>Key Features</h4>
<ul>
<li>Block collection focused on text, media, list, anchor, and context-aware output use cases</li>
<li>Dynamic field rendering for displaying values from configured sources</li>
<li>Server-rendered output for selected blocks where runtime data is required</li>
<li>Editor support for configuring block-specific settings through block attributes</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>WordPress 6.3 or higher</li>
<li>PHP 7.4 or higher</li>
<li>The block editor (Gutenberg); Classic Editor is not supported</li>
</ul>
<h3>Development</h3>
<p>The source code for this plugin, including unminified assets, is available at:<br />
https://github.com/andrei-136/tms-blocks</p>


TMS Blocks

A set of custom Gutenberg blocks for WordPress.

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><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/myBzUr0q3UU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></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.

TMS Blocks vs Block Designer – Create Custom Blocks for Gutenberg Editor