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.

Masud Hasan

<p>Design without limits | Commerce ready | Data connected | Lead capture focused | Lightning fast</p>
<p>Gutengrow Blocks turns the native WordPress editor into a growth platform. Build popups, capture leads, sell with Stripe, sync Google Sheets, and publish data-rich layouts without custom code. Each block ships with intuitive controls, responsive presets, and selective asset loading so that every page stays lean.</p>
<p>Whether you are launching funnels, publishing resources, or managing subscriptions, Gutengrow centralizes the tooling: Gutenberg blocks for the front end and a React-powered dashboard for analytics, Stripe transactions, and email submissions on the back end.</p>
<h4>Why Choose Gutengrow?</h4>
<ul>
<li><strong>Works with core Gutenberg</strong> – No need for additional builders. All blocks are native to the WordPress editor.</li>
<li><strong>Performance first</strong> – Assets load only when a block is present. Minified CSS/JS and caching-friendly markup keep pages fast.</li>
<li><strong>Conversion toolkit</strong> – Popups, opt-ins, countdowns, testimonials, and pricing tables are ready to drop into any page.</li>
<li><strong>Stripe automation</strong> – Manage products, one-time payments, and recurring subscriptions from the same interface.</li>
<li><strong>Data integrations</strong> – Google Sheets, Instagram, and dynamic charts keep content fresh and connected to live sources.</li>
<li><strong>Admin visibility</strong> – View Stripe transactions, audit email submissions, and toggle block availability from one dashboard.</li>
<li><strong>Scales with you</strong> – Modular architecture, regular updates, and REST-ready endpoints support advanced customization.</li>
</ul>
<h4>Perfect For:</h4>
<ul>
<li><strong>Agencies & Freelancers</strong> – Deliver marketing sites and funnels quickly with reusable blocks.</li>
<li><strong>Course Creators & Memberships</strong> – Sell access, handle Stripe subscriptions, and monitor conversions.</li>
<li><strong>Marketers & Growth Teams</strong> – Launch popups, A/B offers, and gated content without developer queues.</li>
<li><strong>Ecommerce & Service Brands</strong> – Showcase products, highlight benefits, and collect testimonials with minimal setup.</li>
<li><strong>Ops & Data Teams</strong> – Surface Google Sheets, KPIs, and timelines directly inside CMS-driven pages.</li>
</ul>
<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/KvJIjBogSlY?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>
<h3>Gutengrow Block Library Highlights</h3>
<p>Gutengrow bundles high-impact blocks organized by outcome:</p>
<h4>Lead Generation & Audience Growth</h4>
<p><strong>1. Email Subscription Forms</strong> – Inline opt-in blocks with multiple layouts, tag-based segmenting, success messaging, and duplicate prevention for clean lists.</p>
<p><strong>2. Popup Builder</strong> – Launch modals from buttons, exit intent, timers, or manual triggers. Supports reusable templates, countdown timers, CTA analytics, and responsive design presets.</p>
<p><strong>3. Unlock Popup</strong> – Content locker that reveals premium sections after opt-in or payment confirmation; perfect for lead magnets and gated downloads.</p>
<h4>Commerce & Monetization</h4>
<p><strong>4. Stripe Product Manager</strong> – Sync Stripe products and prices, list them in Gutenberg, and launch secure checkout overlays. Includes REST endpoints, inventory helpers, and catalog filtering.</p>
<p><strong>5. Stripe Subscriptions</strong> – Display membership tiers, connect recurring plans, and hand off to Stripe-hosted checkout with localized currencies and success/cancel routes.</p>
<p><strong>6. Checkout Pages & Receipts</strong> – Ready-to-use success, cancel, and diagnostic templates keep the post-purchase journey on brand and trackable.</p>
<p><strong>7. Feature Grid & Benefit Callouts</strong> – Present product advantages, pricing options, and plan comparisons with icons, badges, and contextual CTAs.</p>
<h4>Data Visualization & Automation</h4>
<p><strong>8. Dynamic Chart</strong> – Animated bar, line, and pie charts with live color controls, conditional tooltips, and REST-friendly data feeds.</p>
<p><strong>9. Dynamic Table</strong> – Searchable, sortable tables with pagination, zebra styles, and responsive stacking for large datasets.</p>
<p><strong>10. Google Sheet Sync</strong> – Connect a published or web-app-enabled sheet and render real-time data in WordPress without manual imports.</p>
<p><strong>11. Content Timeline</strong> – Showcase roadmaps, project milestones, or brand history with vertical or horizontal layouts and scroll animations.</p>
<h4>Content & Engagement</h4>
<p><strong>12. Content Tabs</strong> – Organize long-form content into accessible tab sets with keyboard navigation and deep-linking support.</p>
<p><strong>13. FAQ & Dynamic Accordions</strong> – Manage Q&A, help desks, or feature breakdowns with nested layouts, icons, and individually tracked panels.</p>
<p><strong>14. Progress Bar</strong> – Linear and circular progress indicators with percentage counters, milestones, and animation delay controls.</p>
<p><strong>15. Team, Testimonials, and Sliders</strong> – Highlight people, reviews, and case studies with customizable cards, star ratings, and autoplay sliders.</p>
<p><strong>16. Dynamic Team</strong> – Pull team data from the database or REST endpoint and render it with filtering, categories, and per-member meta fields.</p>
<p><strong>17. Popup Announcements</strong> – Deliver time-sensitive messaging (product launches, promos, alerts) with scheduling windows and reusable presets.</p>
<h4>Social & Media</h4>
<p><strong>18. Instagram Feed</strong> – Authenticate with the Instagram Graph API and embed grids, masonry layouts, or sliders with live caching and failure fallbacks.</p>
<h4>Admin & Workflow Tools</h4>
<ul>
<li>Toggle block availability per site to keep editor palettes lean.</li>
<li>React dashboard surfaces Stripe transactions, subscription analytics, and email submission exports (CSV ready).</li>
<li>Built-in database updater keeps custom tables (email log, Stripe cache) in sync across plugin versions.</li>
<li>Debug screens for Stripe webhooks, Google Sheets connectivity, and popup diagnostics accelerate support.</li>
</ul>
<h3>Getting Started in 3 Simple Steps</h3>
<ol>
<li><strong>Install & Activate</strong> – Upload the plugin ZIP or install from your WordPress dashboard, then activate Gutengrow Blocks.</li>
<li><strong>Open the Block Editor</strong> – Edit any page or post with Gutenberg and find the “GutenGrow Blocks” category in the inserter.</li>
<li><strong>Drag, Drop & Configure</strong> – Place a block, adjust content and styling controls, and publish. Optional: connect Stripe, Google Sheets, or Instagram from the Gutengrow admin page.</li>
</ol>
<h3>Use Cases & Examples</h3>
<p><strong>Conversion Landing Pages</strong></p>
<ul>
<li>Email Capture Overlay for hero opt-ins</li>
<li>Popup Builder for exit-intent offers and timers</li>
<li>Testimonial Slider for user proof</li>
<li>Progress Bar to showcase roadmap progress</li>
</ul>
<p><strong>Subscription & Membership Sites</strong></p>
<ul>
<li>Stripe Product Manager for plan listings</li>
<li>Stripe Subscriptions block for checkout handoff</li>
<li>Unlock Popup to gate premium lessons</li>
<li>Content Tabs for modular course outlines</li>
</ul>
<p><strong>SaaS & Data Dashboards</strong></p>
<ul>
<li>Google Sheet Sync to surface KPIs</li>
<li>Dynamic Chart for usage metrics</li>
<li>Dynamic Table for changelog or release notes</li>
<li>Feature Grid for highlighting tiers or integrations</li>
</ul>
<p><strong>Editorial & Community Hubs</strong></p>
<ul>
<li>Content Timeline for project history</li>
<li>Team block for contributor bios</li>
<li>FAQ Accordion for support centers</li>
<li>Instagram Feed for live community updates</li>
</ul>
<h3>Performance & Optimization</h3>
<ul>
<li>Selective asset loading ensures only used blocks enqueue styles/scripts.</li>
<li>Build output is minified and RTL-ready for global sites.</li>
<li>Works seamlessly with popular caching plugins and CDNs.</li>
<li>Optional lazy loading on image-heavy blocks keeps Largest Contentful Paint in check.</li>
<li>REST endpoints cache responses to reduce API calls (Stripe, Google, Instagram). </li>
<li>Admin tooling includes database repair utilities and cron health checks.</li>
</ul>
<h3>Security & Privacy</h3>
<ul>
<li>GDPR-aware lead capture with explicit consent fields and per-request IP logging.</li>
<li>All Stripe requests use official SDKs and WordPress nonces for secure checkout flows.</li>
<li>Google Sheets and Instagram tokens are stored via WordPress options with capability checks.</li>
<li>Regular code reviews keep the plugin aligned with WordPress coding standards.</li>
<li>Logging controls help diagnose integrations without exposing sensitive data.</li>
</ul>
<h3>Mobile Responsive</h3>
<p>Every block honors responsive breakpoints out of the box:</p>
<ul>
<li>Desktop layouts for marketing sites and dashboards.</li>
<li>Tablet breakpoints for grid-to-stack transitions.</li>
<li>Mobile-first layouts with touch-friendly controls, swipeable sliders, and accessible accordions.</li>
<li>Device-specific controls per block for typography, spacing, and visibility.</li>
</ul>
<h3>Design Flexibility</h3>
<ul>
<li>Native Gutenberg controls for typography, spacing, borders, and media.</li>
<li>Preset styles to jump-start layouts, with ability to override via global styles.</li>
<li>Support for gradients, background media, and animation delays.</li>
<li>Custom classes and data attributes for advanced theming or targeting.</li>
<li>Works with theme.json, block patterns, and full-site editing templates.</li>
</ul>
<h3>From WordPress Dashboard</h3>
<ol>
<li>Navigate to <strong>Plugins <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong>.</li>
<li>Search for <strong>Gutengrow Blocks</strong>.</li>
<li>Click <strong>Install Now</strong>, then <strong>Activate</strong>.</li>
</ol>
<h3>Manual Installation</h3>
<ol>
<li>Download the plugin ZIP from <a href="https://gutengrow.com" rel="nofollow ugc">https://gutengrow.com</a>.</li>
<li>Go to <strong>Plugins <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New <span aria-hidden="true" class="wp-exclude-emoji">→</span> Upload Plugin</strong>.</li>
<li>Upload the ZIP file, click <strong>Install Now</strong>, then <strong>Activate Plugin</strong>.</li>
</ol>
<h3>Requirements</h3>
<ul>
<li>WordPress 6.0 or higher</li>
<li>Gutenberg / Block Editor (bundled with core WordPress)</li>
<li>PHP 7.2 or higher</li>
<li>Optional: Stripe account, Google Sheets web app URL, Instagram Business access token</li>
</ul>
<h3>External Services</h3>
<p>Gutengrow optionally connects to:</p>
<ul>
<li><strong>Stripe</strong> – Payment and subscription processing (Stripe Privacy Policy: https://stripe.com/privacy)</li>
<li><strong>Google Sheets</strong> – Data sync via Apps Script web apps (Google Privacy Policy: https://policies.google.com/privacy)</li>
<li><strong>Instagram Graph API</strong> – Social feed embedding (Instagram Privacy Policy: https://privacycenter.instagram.com/policy)</li>
</ul>
<h3>Privacy Policy and Terms of Service</h3>
<p>Please review our policies when enabling integrations:</p>
<ul>
<li>Privacy Policy: https://gutengrow.com/privacy-policy/</li>
<li>Terms of Service: https://gutengrow.com/terms-of-service/</li>
<li>Stripe Services Agreement: https://stripe.com/legal</li>
<li>Google API Terms: https://developers.google.com/terms</li>
<li>Instagram Platform Policy: https://developers.facebook.com/terms/</li>
</ul>
<h3>Support</h3>
<p>Need a hand?</p>
<p><strong>Documentation</strong>: https://gutengrow.com/docs<br />
<strong>Support Portal</strong>: https://gutengrow.com/support<br />
<strong>Video Tutorials</strong>: https://gutengrow.com/tutorials<br />
<strong>Community Updates</strong>: https://gutengrow.com/blog</p>
<p>We provide:</p>
<ul>
<li>Step-by-step setup guides and developer docs</li>
<li>Video walkthroughs for each block and integration</li>
<li>Ticket-based support with SLA-backed responses</li>
<li>Regular product updates and beta previews</li>
</ul>
<h3>Credits</h3>
<p><strong>Developed by</strong>: WPRealizer<br />
<strong>Official Website</strong>: https://gutengrow.com<br />
<strong>Support</strong>: https://gutengrow.com/support</p>
<h3>Additional Information</h3>
<p><strong>Plugin URI</strong>: https://gutengrow.com<br />
<strong>Author URI</strong>: https://profiles.wordpress.org/wprealizer/<br />
<strong>License</strong>: GPLv2 or later<br />
<strong>License URI</strong>: https://www.gnu.org/licenses/gpl-2.0.html</p>
<p>Thank you for building with Gutengrow Blocks! Please leave a 5-star review if the plugin helps you grow faster.</p>


Gutengrow Blocks

Transform Gutenberg into a conversion-ready builder with 20+ marketing, ecommerce, and automation blocks, Stripe-powered checkouts, and lead managemen …

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