WordPress Plugins

GenerateBlocks Pro: lightweight Gutenberg blocks for WordPress builders

GenerateBlocks Pro is the GeneratePress team lightweight Gutenberg blocks plugin. Container, Grid, Headline, Button, Image, Query Loop, plus carousel, accordion, tabs, site header.

John M. 18 min read
GenerateBlocks Pro: lightweight Gutenberg blocks for WordPress builders review on GPL Times

If you’ve spent any time in the Gutenberg blocks market, you’ve probably noticed a pattern: most blocks plugins compete on bulk. Stackable ships 50+ blocks. Kadence Blocks ships 30+. Spectra (UAG) ships dozens more. GenerateBlocks went the opposite direction. The free plugin has six blocks. Six. Container, Grid, Headline, Button, Image, Query Loop. That’s it. And then the Pro add-on adds maybe eight more for things like carousels and tabs. The pitch is performance: keep the block count low, keep the CSS payload tiny, give the builder enough primitives to construct anything else they need.

This article is a working tour of GenerateBlocks Pro from a builder’s perspective: what the blocks actually do, what the Pro add-on gives you beyond the free core, how the dynamic data integration works, and how the developer surface looks if you want to extend things.

Table of contents

What is GenerateBlocks Pro?

GenerateBlocks Pro is the paid extension of GenerateBlocks, a free Gutenberg blocks plugin from Tom Usborne (the developer behind the GeneratePress theme). Released in 2020 as a companion to GeneratePress Premium, the plugin has gradually become a standalone product in the same way that Kadence Blocks did for the Kadence theme team.

The core plugin sits on WordPress.org with 600,000+ active installs. It’s the kind of plugin that doesn’t market itself loudly but ends up on every GeneratePress site by default. The Pro add-on layers on more blocks (carousel, accordion, tabs, site header, navigation, classic menu), dynamic data (pulling values from ACF, Meta Box, custom post type fields), display rules (conditional visibility), animations, local fonts, and an asset library of pre-designed sections.

The plugin’s official home is generatepress.com/blocks. The free core is at wordpress.org/plugins/generateblocks.

Direct competitors: Stackable, Kadence Blocks Pro, Spectra (UAG), GenerateBlocks Pro, Gutenslider, CoBlocks. Of these, GenerateBlocks stands out for two reasons: the smallest CSS footprint, and the most generic, primitive-style block set.

The lightweight blocks philosophy

A few words on why GenerateBlocks is structured the way it is, because it’s the central design decision that everything else flows from.

Most Gutenberg blocks plugins ship one specialized block per layout pattern. Want a hero with a heading, subheading, button, and background image? They ship a "Hero" block. Want a three-column features section with an icon, title, and text per column? They ship a "Features" block. Want a pricing table with three columns of features and a CTA? They ship a "Pricing Table" block.

The problem with this approach: every block carries its own CSS and JS. Twenty blocks across a page means twenty mini-stylesheets shipped to the browser. The cumulative payload is significant, even when only two or three of the blocks are actually used.

GenerateBlocks takes a different approach. Instead of one block per pattern, it ships primitives: Container, Grid, Headline, Button, Image, Query Loop. You build the hero by nesting a Container with a background image, a Headline, a sub-Headline, and a Button. You build the features section with a Grid of three Containers each with a Headline and text. You build the pricing table the same way.

The mental model is closer to flexbox or CSS Grid than to a page builder’s UI. Once you’ve internalized the primitives, you can build almost any layout pattern by composing them.

The payoff: a typical GenerateBlocks site ships around 2KB of CSS total. Compare that to 50-100KB for Stackable or Kadence Blocks. That difference matters for Core Web Vitals.

Free version blocks

The six core blocks from the free version:

  • Container. Wraps anything. The plugin’s foundation: every layout starts with a Container. Configurable padding, margin, background (color, gradient, image), borders, shadows, transforms, breakpoints (different settings for mobile/tablet/desktop), and links (turn the whole container into a clickable link).
  • Grid. A CSS Grid wrapper. Configurable columns (different at each breakpoint), gap, alignment, vertical stacking order on mobile.
  • Headline. Heading with full typography control. Choose the HTML tag (h1-h6, p, span, div), set font family / size / weight / line-height / letter-spacing per breakpoint.
  • Button. A styled button. Full color, padding, border, hover-state control. Can link anywhere.
  • Image. Standard image with object-fit, aspect ratio, link wrapping, alt text. The Pro version adds image effects (parallax, sticky, hover transforms).
  • Query Loop. A dynamic loop block that renders any WordPress query as a grid of cards. This is where dynamic data starts to matter.

Six blocks. That’s the entire free toolkit.

Pro blocks added on top

GenerateBlocks Pro adds a curated set of additional blocks for things that genuinely can’t be built efficiently from primitives:

  • Accordion. Expandable/collapsible content sections. Useful for FAQs, mobile menus, and grouping long content.
  • Tabs. Tabbed content with horizontal or vertical tab navigation. Each tab is a full content area you can fill with any other blocks.
  • Carousel. A slider/carousel of any content. Configurable slides per view (different at each breakpoint), autoplay, navigation arrows, pagination dots, transition speed.
  • Site Header. A full FSE (full site editing) header block. Sticky options, transparent options, mobile breakpoint behavior, ad-hoc background colors.
  • Navigation. A modern navigation menu block that works well inside the Site Header.
  • Classic Menu. A bridge to WordPress’s classic Appearance -> Menus system. Use existing nav menu data, render it with GenerateBlocks styling.
  • Classic Menu Item / Sub Menu. The building blocks of Classic Menu.
  • Menu Container / Menu Toggle. For building mobile-friendly menu interactions (hamburger toggle, off-canvas drawer).

These additions cover the gaps where building from primitives would be tedious. Carousel, accordion, and tabs require state management (which slide is showing, which tab is active) that you can’t reasonably reconstruct from CSS-only primitives. The Site Header and Navigation blocks fill the FSE site-editing role.

Each Pro block ships under the generateblocks-pro/ block namespace, so they show up alongside the free blocks in the Gutenberg inserter under the "GenerateBlocks" category.

Key features

Beyond the blocks themselves, the Pro add-on’s feature surface:

  • Asset Library. A pre-designed pattern library you import into your site. Hundreds of pre-built sections, layouts, and pages. Browse, click "Import", and the patterns drop straight into the block editor with all the styles already set.
  • Dynamic Data. Bind any block attribute (text, image, link, background) to a dynamic source: a post’s meta field, an ACF field, a Meta Box field, the current post’s title/excerpt/author, a user’s profile field, etc. Lets you build a Query Loop that pulls custom values per loop iteration without writing PHP.
  • Display Rules. Conditional visibility for any block. Show only to logged-in users; show only to subscribers; show only on the homepage; show only between certain dates; show only on mobile. The condition system is composable, so you can combine rules.
  • Animations. CSS animations on scroll. Fade in, slide in from left/right/top/bottom, zoom, with configurable delay and duration. Pure CSS, no JS dependency.
  • Effects. Parallax backgrounds, sticky elements (sticky to a parent container), hover transforms (scale, rotate, lift on hover).
  • Local Fonts. Self-host Google Fonts locally for GDPR compliance. Fonts download to your server, served from your domain.
  • Global Styles. A site-wide style system. Define your color palette, typography scale, spacing scale once; all blocks pull from those values. Change the global value, and every block on the site updates.
  • Pattern Library Builder. Save your own custom blocks as patterns, organize them in collections, share with team members.

The Asset Library and Dynamic Data are arguably the two features that make Pro worth the upgrade. Asset Library because it dramatically speeds up page building (you start from a polished design instead of a blank canvas). Dynamic Data because it unlocks the Query Loop’s full potential.

How the dynamic data integration works

Dynamic Data is GenerateBlocks Pro’s most powerful feature, and the one that distinguishes it from other blocks plugins.

The idea: any text, image, or link attribute on any block can be bound to a dynamic source. Instead of typing "John Smith" into a Headline, you bind the Headline to the name field on the current post. Instead of uploading an image, you bind the Image block to the featured_image of the current post.

What you can bind:

  • The current post’s title, excerpt, content, author, date, comment count, permalink.
  • A post meta field (any custom field).
  • An Advanced Custom Fields field.
  • A Meta Box field.
  • A taxonomy term’s name or description.
  • A user’s profile field.
  • A WooCommerce product price, SKU, stock status, etc.

What this enables: a single template page that renders different content depending on which post is being viewed. The Query Loop block iterates through a WordPress query; each iteration renders the same template; each block in the template uses Dynamic Data to pull values from the current loop item.

So you can build a "Latest Posts" section once, point it at any post type, and it works for blog posts, custom products, events, anything. You can build a single-post template that pulls the post’s title, featured image, author name, and metadata from the current post automatically.

Before Dynamic Data, you had two options: either write a PHP template in your theme (high friction, requires developer skills) or use the block editor and accept that everything is hardcoded (low flexibility). Dynamic Data is the bridge: you stay in the block editor, but your blocks are template-aware.

This is the same conceptual model as Bricks Builder, Elementor Pro’s Theme Builder, or Oxygen’s Dynamic Data. GenerateBlocks Pro implements it inside Gutenberg’s native UI, which is a meaningful advantage.

Installation and setup

GenerateBlocks Pro requires the free GenerateBlocks plugin to be installed and active. The Pro plugin extends the free core; it doesn’t replace it.

Installation:

  1. Install GenerateBlocks from WordPress.org -> Plugins -> Add New -> search "GenerateBlocks". Activate.
  2. Install GenerateBlocks Pro zip via Plugins -> Add New -> Upload Plugin. Activate.
  3. Navigate to GenerateBlocks in the admin sidebar. The settings page lives at /wp-admin/admin.php?page=generateblocks.

The first-time experience:

  • General Settings. Toggle which blocks are enabled site-wide, set defaults for new blocks, configure the Asset Library API.
  • Asset Library. Browse the pattern collections. Pick the one(s) you want to import.
  • Dynamic Data. Enable Dynamic Data, configure which data sources to expose (post meta, ACF, etc.).
  • Display Rules. Enable the conditional visibility system.
  • Animations & Effects. Enable the animation engine site-wide.
  • License. Enter your license key for automatic updates.

From there, the workflow is: open the block editor on any post or page, click the [+] block inserter, browse to the GenerateBlocks category, drop in a Container, and start composing.

Real-world use cases

GenerateBlocks Pro fits cleanly into a few common builds:

GeneratePress + GenerateBlocks Pro for the whole site. The pair the plugin was designed to work with. GeneratePress Premium handles the theme, GenerateBlocks Pro handles the content composition. Together they’re one of the lightest performance footprints you can ship.

Custom post type single-templates. Use the FSE template editor + GenerateBlocks Pro to build single-template views for custom post types. Real estate listings, restaurant menus, event pages, portfolio items. Dynamic Data binds the template to the post’s fields.

Archive and category pages. Query Loop block with Dynamic Data bindings on the loop’s card template. Customize the look of the archive without touching theme files.

WooCommerce product templates. Bind dynamic data to WooCommerce fields (price, SKU, stock, gallery). Build a product card layout that matches your brand exactly.

ACF-heavy sites. If you’re already using ACF Pro, GenerateBlocks Pro is the obvious bridge from "data in ACF" to "rendered in Gutenberg". Skip the theme template work.

Performance-focused content sites. Where Core Web Vitals matter (news sites, ad-supported blogs, lead-gen sites), the small CSS footprint translates to faster LCP scores than you’d get with a heavier blocks plugin.

Pattern-driven agencies. Build a library of branded patterns, reuse across client projects. The Pattern Library Builder feature is explicitly designed for this.

Site-wide style governance. Use Global Styles to enforce a design system. Color palette, spacing scale, typography. Changes propagate.

SEO-clean markup. GenerateBlocks emits semantic HTML by default (<section>, <article>, <nav> where appropriate). The Tag Name attribute on Container lets you pick exactly which element to render, which helps with both accessibility and SEO crawling.

Static-site export / headless WordPress. Because GenerateBlocks emits clean HTML+CSS and doesn’t depend on a JS framework on the frontend, the rendered pages work well with static-site exporters (Simply Static, WP2Static) and as the rendered HTML layer in a headless WordPress build.

Editorial newsrooms. For sites that publish dozens of posts per day, the block primitives let editors compose layouts without designer help. The Asset Library provides starting points; editors customize from there.

Comparing GenerateBlocks Pro with the alternatives

Where GenerateBlocks Pro sits in the Gutenberg blocks ecosystem:

  • Stackable Premium. More blocks, more variety in design presets, more visual polish out of the box. Heavier CSS payload. Stackable is the better choice if you want "design-first" with lots of built-in styling. GenerateBlocks is better if you want "build-first" with minimal CSS overhead.
  • Kadence Blocks Pro. Largest block ecosystem of the three, tightly integrated with the Kadence theme. Slightly heavier than GenerateBlocks. Good choice if you want the most features per plugin.
  • Spectra (UAG) by Brainstorm Force. Fully free for the main block set, tied to the Astra theme ecosystem. Lower-cost option, comparable feature count to Kadence.
  • CoBlocks. Recently acquired by GoDaddy. Smaller block set, focused on Gutenberg-native patterns. Free.
  • EditorsKit. A different category entirely. Tools for editors to extend Gutenberg with hidden text, full-height blocks, visibility rules. Pairs well with any blocks plugin.
  • GeneratePress + GenerateBlocks Pro. The natural pairing. GeneratePress provides theme structure (header, footer, sidebar, template hierarchy); GenerateBlocks Pro provides content composition. The lightest WordPress stack you can build today.

A rough heuristic: if performance is your top priority and you’re comfortable composing from primitives, pick GenerateBlocks Pro. If you want the maximum feature surface and you don’t mind a heavier payload, pick Kadence Blocks Pro. If you want design-first with lots of styling defaults, pick Stackable.

Developer reference: hooks, filters, block names

The plugin’s hook surface is well-organized, though not as documented as some others. The plugin source is at wp-content/plugins/generateblocks-pro/ and wp-content/plugins/generateblocks/ if you want to dig in.

Block names

All blocks ship under the generateblocks/ (free) and generateblocks-pro/ (pro) namespaces:

  • generateblocks/container
  • generateblocks/grid
  • generateblocks/headline
  • generateblocks/button
  • generateblocks/image
  • generateblocks/query-loop
  • generateblocks-pro/accordion
  • generateblocks-pro/accordion-item
  • generateblocks-pro/accordion-toggle
  • generateblocks-pro/accordion-content
  • generateblocks-pro/carousel
  • generateblocks-pro/carousel-item
  • generateblocks-pro/carousel-control
  • generateblocks-pro/carousel-pagination
  • generateblocks-pro/tabs
  • generateblocks-pro/tab-item
  • generateblocks-pro/tab-menu-item
  • generateblocks-pro/site-header
  • generateblocks-pro/navigation
  • generateblocks-pro/classic-menu
  • generateblocks-pro/classic-menu-item

Useful filters

// Customize the attributes passed to a Container's wrapper element.
// Use to inject data-attributes, ARIA properties, or extra classes.
add_filter( 'generateblocks_attr_container', function( $attributes, $block ) {
 $attributes['data-analytics-id'] = $block['attrs']['uniqueId'] ?? '';
 return $attributes;
}, 10, 2 );

// Same, but for the Image block.
add_filter( 'generateblocks_attr_image', function( $attributes, $block ) {
 $attributes['loading'] = 'lazy';
 return $attributes;
}, 10, 2 );

// Add or remove conditions from the Display Rules condition picker.
add_filter( 'generateblocks_condition_types', function( $types ) {
 $types['my_custom_condition'] = [
 'label' => 'My custom condition',
 'callback' => 'my_callback_function',
 ];
 return $types;
} );

// Customize the CSS that GenerateBlocks emits for a specific block.
add_filter( 'generateblocks_block_css', function( $css, $block ) {
 // Append a custom rule for blocks of a particular type.
 return $css;
}, 10, 2 );

// Restrict who can manage Global Styles.
add_filter( 'generateblocks_can_manage_styles', function( $can ) {
 return current_user_can( 'manage_options' );
} );

// Restrict who can view the Pattern Library.
add_filter( 'generateblocks_can_view_pattern_library', function( $can ) {
 return current_user_can( 'edit_pages' );
} );

Useful actions

// Fires before a Container element opens. Inject HTML above it.
add_action( 'generateblocks_before_container_open', function( $block ) {
 echo '<!-- container start -->';
} );

// Fires after a Container element closes.
add_action( 'generateblocks_after_container_close', function( $block ) {
 echo '<!-- container end -->';
} );

// Customize the asset library area in the admin.
add_action( 'generateblocks_asset_library_area', function() {
 echo '<div class="my-custom-library-cta">...</div>';
} );

Programmatically inserting blocks

If you’re scripting a migration from another blocks plugin or generating posts programmatically, you can construct the block markup directly:

$content = '<!-- wp:generateblocks/container {"uniqueId":"abc123","backgroundColor":"#f7f7f5"} -->
<div class="gb-container gb-container-abc123">
 <!-- wp:generateblocks/headline {"uniqueId":"def456","content":"Hello World","element":"h2"} -->
 <h2 class="gb-headline gb-headline-def456">Hello World</h2>
 <!-- /wp:generateblocks/headline -->
</div>
<!-- /wp:generateblocks/container -->';

wp_insert_post( [
 'post_type' => 'post',
 'post_title' => 'My new post',
 'post_status' => 'publish',
 'post_content' => $content,
] );

REST API

GenerateBlocks Pro exposes a small REST API for pattern library management and global style sync. Endpoints under /wp-json/generateblocks-pro/v1/ are mostly for the plugin’s own admin UI, but you can call them from custom scripts if you’re building bulk-import or migration tooling.

Performance, compatibility, and gotchas

A few things worth knowing.

CSS payload. GenerateBlocks loads styles dynamically per block. A page that uses only Container and Headline ships only the CSS for those two. Compare to plugins that ship a single mega-stylesheet for all blocks (much heavier).

FSE compatibility. Works with both Classic and FSE themes. With FSE themes (Twenty Twenty-Three, Twenty Twenty-Four, GeneratePress with FSE enabled), you can use the Site Header and Navigation blocks in the FSE template editor.

Theme compatibility. Works with any WordPress theme that supports the block editor. Officially endorsed pairing: GeneratePress. Also works fine with Astra, Kadence, Blocksy, etc.

Page builder compatibility. Don’t double up. If you’re using Elementor, Beaver Builder, or Oxygen, don’t also use GenerateBlocks for the same pages. Pick one composition tool per page.

Cache compatibility. Fully compatible with WP Rocket, WP Fastest Cache, and other major caching plugins. The plugin’s CSS generation respects the cache layer.

Dynamic Data on cached pages. Dynamic Data resolves on render (server-side), so cached pages contain the resolved values. If you change the dynamic source (e.g. edit a custom field), purge the cache to see the update.

Migration from other blocks plugins. No automatic migration. If you’re switching from Kadence or Stackable, the old blocks remain in your posts as their original block type; only new content uses GenerateBlocks. Either accept the mixed-blocks state or do a manual reformatting pass.

Animations and Core Web Vitals. The CSS animations are lightweight, but if you animate something above the fold, the animation can push LCP later. Test specific page renderings to confirm.

Local Fonts and ad blockers. Some aggressive ad blockers (uBlock Origin with custom rules) treat self-hosted fonts as tracking. Rare, but you’ll occasionally see fonts blocked. Test in incognito mode without extensions.

Multilingual sites. GenerateBlocks works with WPML, Polylang, TranslatePress. Translatable blocks are detected automatically. Dynamic Data bindings to translated fields work as expected.

Block library bloat. With many blocks plugins active simultaneously (GenerateBlocks Pro + Kadence + Stackable), the block inserter gets crowded. Disable the ones you don’t use from each plugin’s settings.

Pricing and licensing

GenerateBlocks Pro pricing (current at time of writing):

  • Pro Yearly: ~$39/year, single site, 1 year of updates and support.
  • Pro Lifetime: ~$249 one-time.
  • Pro Bundle with GeneratePress Premium: ~$59/year or ~$299 lifetime.

The Bundle is the better value if you also want GeneratePress Premium. The yearly Pro alone is one of the cheaper options in the premium blocks market (Stackable Premium is ~$59/year for 1 site).

The plugin is GPL-licensed (WordPress requires it), which is why GPL Times can legally redistribute.

For production sites where you also use GeneratePress, the Bundle is the natural choice.

FAQ

Do I need GenerateBlocks Pro if I have GenerateBlocks free? Only if you need: Asset Library, Dynamic Data, Display Rules, Animations, Effects, Local Fonts, Carousel/Accordion/Tabs blocks. The free version is fully capable for basic content composition with the six core blocks.

Does it require the GeneratePress theme? No. Works with any theme that supports the block editor. The plugin is theme-agnostic.

Will my posts break if I deactivate the Pro plugin? Pro blocks (Accordion, Tabs, Carousel, etc.) become broken-block placeholders. Core blocks (Container, Grid, Headline, etc.) keep working. Re-activating the Pro plugin restores the Pro blocks.

Is it faster than Kadence Blocks? In raw CSS payload, yes. GenerateBlocks loads ~2KB CSS for a basic page; Kadence Blocks loads ~50KB. In actual user-perceived load time, the difference is usually 50-150ms on slow connections.

Can I use it inside a Gutenberg block theme (FSE)? Yes. The Site Header and Navigation blocks are explicitly built for FSE.

Does it work with ACF? Yes, via Dynamic Data. Bind any block attribute to any ACF field.

Does it work with WooCommerce? Yes. Dynamic Data can pull from WooCommerce product fields. Useful for building custom product templates.

Can I export my GenerateBlocks pages to another site? Yes. The blocks are stored as standard Gutenberg block markup in post_content, so export/import works through the WordPress Tools -> Export.

Does it have a free trial? No, but the free version is permanent and feature-rich enough to evaluate the plugin’s approach. Try free for a week, decide if Pro is worth it.

How does it compare to Spectra (UAG)? Spectra is fully free with more blocks. GenerateBlocks Pro has a smaller block count but a stronger Dynamic Data engine and a tighter performance focus. Spectra is good for "everything in one plugin"; GenerateBlocks Pro is good for "lean, fast, primitive-based composition".

Is there a roadmap? Yes. The GeneratePress team publishes a roadmap on the project’s main page. Major releases happen 2-3 times a year.

Final thoughts

GenerateBlocks Pro is one of those tools that’s easy to underestimate because it doesn’t try to compete on block count. The free version’s six blocks look minimal compared to the 50+ that competitors ship. But after you’ve used it for a while, you realize the primitives compose into anything the specialized blocks can do, with less code, smaller pages, and less plugin lock-in.

The Pro add-on is worth buying for two specific features: the Asset Library, which dramatically reduces the time-to-page on a new build, and Dynamic Data, which unlocks the Query Loop’s full power. The other Pro features (Animations, Effects, Local Fonts, the extra blocks) are nice-to-haves. The first two are the difference between "interesting" and "essential".

If you’re building a site where Core Web Vitals matter, where the design system needs to be consistent, and where you’d rather compose layouts from primitives than tweak one specialized block at a time, GenerateBlocks Pro is one of the better choices in the Gutenberg ecosystem.

Install both the free WordPress.org plugin and the Pro add-on, browse the Asset Library, build a Container + Grid + Headline composition, and see whether the primitives match how you think about layouts. Twenty minutes is enough to know whether the philosophy fits.

Tags