Black Friday Sale! Get 25% off all plans! Learn more ➝

GenerateBlocks 1.3.3

This is a small update with a couple of fixes for bugs found in WordPress 5.7.

  • Fix: Constant re-rendering of SVG icons in code editor
  • Fix: Broken CSS when empty/non-published re-usable blocks are on the page
  • Tweak: Add missing text domains

GenerateBlocks Pro 1.0.3

This is a minor release that fixes a handful of bugs and adds translation support to the plugin.

  • New: Translation support
  • Fix: Hidden Container link preventing toolbar access
  • Fix: Asset Library error when empty group is saved
  • Fix: Asset Library IDs changing when re-saved before refresh
  • Tweak: Clear horizontal grid default when choosing global style
  • Tweak: Adjust icon button spacing in WP 5.7

GenerateBlocks 1.3.2

GenerateBlocks 1.3.2 is a small release with a number of bug fixes.

  • New: Add generateblocks.editor.buttonDisableFormatting filter
  • Fix: Error when using em unit on a div headline
  • Fix: Icon button spacing in WP 5.7
  • Fix: Responsive block borders when no desktop border is set
  • Tweak: Prevent Global Styles (Pro) from regenerating unique ID
  • Tweak: Integrate Grid block with Global Styles (Pro)
  • Tweak: Always inline CSS on AMP pages to avoid needing to fetch
  • Tweak: Adjust editor grid class name to prevent Sass build error

GenerateBlocks Pro 1.0.2

This is a small update that fixes a few bugs with our Global Styles feature.

  • Fix: Improve how global styles handle block defaults
  • Fix: Allow advanced backgrounds in global styles
  • Fix: Allow effects in global styles
  • Fix: Prevent PHP notices in local templates

GenerateBlocks 1.3.1

This is a small update with a fix that allows Global Styles (Pro) to apply to the standard background images and gradients.

  • Tweak: Apply generateblocks.editor.cssAttrs filter to backgrounds

GenerateBlocks Pro 1.0.1

This is a quick patch with a couple of fixes in our Global Styles feature.

Full Changelog

  • Fix: Global style attributes not saving correctly
  • Fix: Global styles not overwriting default container padding

GenerateBlocks Pro 1.0.0

GenerateBlocks Pro is finally here! To learn more and purchase, check out our Pro page.

With this release, we aimed to provide more options for our Blocks while further increasing performance and overall convenience, and we’re really happy with the results!

Template Library

Our Template Library has over 150 professionally-built templates by the talented Mike Oliver.

These templates can be inserted directly into your page wherever you like. You can also insert them into your Local Templates and adjust them as needed so you can re-use them throughout your content.

Check out the Template Library documentation for more information.

Global Styles

Global Styles allow you to re-use the same styles throughout your website. Not only does this drastically improve the overall usability of the plugin, it decreases the amount of overall CSS that the plugin needs to generate, which increases performance!

We feel that this was a missing aspect of GenerateBlocks, and we couldn’t be happier with it!

Check out the Global Styles documentation for more information.


This is an advanced feature with an infinite number of possibilities. From simple effects like opacity to more complicated effects like filters and transforms, this feature seriously does it all.

While this feature has a learning curve, it offers amazing flexibility once you get the hang of it.

Check out the Effects documentation for more information.

Advanced Backgrounds

Like our normal background options, but better. The Advanced Backgrounds feature allows you to build different backgrounds (image or gradient) based on device or state (hover). This offers unlimited control over your Container backgrounds.

Check out the Advanced Backgrounds documentation for more information.

Container Links

This is one we’ve seen requested a lot, and now it’s here! Link your entire Container block anywhere you want with our Container Link feature. This feature works great with our new Container hover colors, and our Effects!

Check out the Container Links documentation for more information.

Asset Library

Want to add your own icons or shapes? Our Asset Library does that, and then displays them directly in your blocks so you can choose from them.

Check out the Asset Library documentation for more information.

Copy+Paste Styles

This is an awesome one! Easily copy and paste styles from your blocks around your site. This is great if you have non-global styles that share the same styling. Simply copy the styling from one block and paste it to the next block – super easy!

Check out the Copy+Paste Styles documentation for more information.

Device Visibility

Easily hide or show our blocks on desktop, tablet, and mobile devices.

Check out the Device Visibility documentation for more information.

Custom Attributes

Apply any custom data-* attributes to our Blocks with a simple user interface. This feature has some limitation for security purposes, but it will surely grow over time.

Check out the Custom Attributes documentation for more information.

What’s Next?

This is only the beginning! Next, we’ll be focusing on adding some missing blocks (accordions, tabs etc..) while maintaining our minimal block philosophy. We have some super exciting things planned!

Thanks for reading, and we hope you enjoy!

GenerateBlocks 1.3.0

Welcome to GenerateBlocks 1.3.0! While this update is no 1.2.0, it opens the door for us to release GenerateBlocks Pro, finally!

This update has more filters and tweaks that we ended up needing as we continued to fine-tune and add more features to GenerateBlocks Pro.

If you can, please test this version and report any issues you find.

Full Changelog


  • New: Add generateblocks.editor.cssAttrs filter
  • New: Add generateblocks_headline_selector_tagname filter
  • New: Add generateblocks.editor.panelContents filter
  • New: Add Add generateblocks.frontend.containerTagName filter
  • New: Add generateblocks.editor.headlineDisableFormatting filter
  • New: Add generateblocks.editor.beforeHeadlineElement filter
  • New: Add generateblocks.editor.urlInputMoreOptions filter
  • New: Admin header
  • Fix: Fix gradient when no stop value is found
  • Fix: Translations in the editor
  • Fix: Force inner container z-index when pseudo in use
  • Fix: Headline text input when has icon but no text
  • Tweak: Merge bg image and gradient controls into one tab
  • Tweak: Prepare for Global Styles in Pro
  • Tweak: Remove duplicate .gb-container class from CSS
  • Tweak: Add script translations file for settings JS
  • Tweak: Hide color picker label element if no label
  • Tweak: Update domPurify
  • Tweak: Import WP packages instead of defining them
  • Tweak: Add border-radius to pseudo background image elements
  • Tweak: Change Element Tag label to Tag Name
  • Tweak: Add placeholder to Headline block
  • Tweak: Remove add grid item button from toolbar when selecting layout

GenerateBlocks 1.2.0

This is a huge update that brings us one step closer to releasing GenerateBlocks Pro.

This update introduces new features that will help you build beautiful websites, and it has some major internal changes that improve how your content is saved and output on your website. There are also a couple of HTML markup changes we highlight further down in this post that you should take a look at if you’re adding custom CSS to your blocks.

It’s our hope that this version will set us up for stability and performance for a long time, and allow GenerateBlocks Pro to seamlessly integrate with it when it’s released.

Responsive Previews

WordPress 5.5 introduced responsive previews to the block editor. GenerateBlocks 1.2.0 integrates its blocks with these responsive previews, which means you can now design your content using GenerateBlocks on desktop, tablet, and mobile without having to publish or preview on the frontend!

Shape Dividers

The Container block now has shape dividers! These shape dividers can be added inside the Shapes panel in the Container block. There is no limit to the number of shapes you can add to one container!

Gradient Overlays

Similar to our background image feature, you can now tell the background gradient to display as a pseudo element. This allows it to overlay your background image, and also allows for more effects and transitions.

HTML Markup Changes

There are some HTML markup changes in this version that you should be aware of.

Button Block

Previously, your button text was wrapped in a <span> element with the class button-text.

This class name has been changed to gb-button-text, and the <span> element will only be output if the button has an icon.

For example, this:

<a class="gb-button" href="#"><span class="button-text">My button</span></a>

Will now be rendered like this:

<a class="gb-button" href="#">My Button</a>

And this:

<a class="gb-button" href="#"><span class="gb-icon">..</span><span class="button-text">My button</span></a>

Will now be rendered like this:

<a class="gb-button" href="#"><span class="gb-icon">..</span><span class="gb-button-text">My button</span></a>

Also, if a Button has no URL saved, it will output as a <span> element instead of an empty <a> element.

For example, this:

<a class="gb-button"><span class="button-text">My Button</span></a>

Will now be rendered like this:

<span class="gb-button">My Button</span>

Headline Block

In prior versions, a Headline block with an icon had a <div> wrapper with a gb-headline-wrapper class. This has changed in 1.2.0, as we’ve moved the icon inside your Headline element.

For example, this:

<div class="gb-headline-wrapper">
    <span class="gb-icon"><svg>..</svg></span>
    <h2 class="gb-headline">My Headline</h2>

Will now be rendered like this:

<h2 class="gb-headline">
    <span class="gb-icon"><svg>...</svg></span>
    <span class="gb-headline-text">My Headline</span>

This has the advantage of actually rendering like the element you’ve chosen your Headline block to be.

Dynamic HTML Markup

Traditionally (so far) in the block editor, the blocks you use save their HTML markup to your database when you add/edit them.

For example, if you add a Container block to your page, it will save to your database like this:

<div class="gb-container">
    <div class="gb-inside-container">
        Everything I add inside the container here.

This has a few downsides that we wanted to address in this version.

First off, it makes the HTML completely static – if we ever need to make a change to it, you would need to update every single page on your website for that change to take effect.

Secondly, it means if you ever deactivate GenerateBlocks, you’ll be left with a bunch of HTML you really don’t need.

In GenerateBlocks 1.2.0, we broke things down – what should be static, and what should be dynamic?

Let’s go through each block to see what changed.

  • Button – this block has been left as a static block.
  • Button Container – this block is now 100% dynamic. It only saves its contents to your database.
  • Container – this block is now 100% dynamic. It only saves its contents to your database.
  • Grid – this block is now 100% dynamic. It only saves its contents to your database.
  • Headline – this block has been left as a static block.

In 1.2.0, we’ve made a conscious effort to reduce the unnecessary HTML in your database by serving those elements dynamically when it makes sense. This will significantly reduce the clutter in your database and will allow us more control over future changes.

Headline Border Radius

The Headline block now has border-radius options like the Button and Container blocks. This helps design icon-only blocks with the Headline block instead of having to use the Button block with no URL.

Full Changelog


  • Markup change: Remove headline-wrapper element from Headlines with icons
  • Markup change: Change button-text class to gb-button-text in Button block
  • Markup change: Only output inner gb-button-text span if using an icon
  • Markup change: Output Button block as span element if no URL exists
  • Markup change: Add gb-headline-text span if using an icon in Headline block
  • New: Shape dividers in the Container block
  • New: Make all blocks fully responsive when using editor responsive previews
  • New: Add option to apply gradient as a pseudo element
  • New: Add option to choose background image size
  • New: Add border radius options to Headline block
  • New: frontend.insideContainer filter in editor for Container block
  • New: frontend.beforeContainerClose filter in editor for Container block
  • New: generateblocks_after_container_open filter in frontend for Container block
  • New: generateblocks_inside_container filter in frontend for Container block
  • New: generateblocks_before_container_close filter in frontend for Container block
  • New: generateblocks_container_tagname filter in frontend for Container block
  • New: Add div as Headline block element choice
  • New: Add span as Headline block element choice
  • New: Add inner z-index option to Container
  • New: Aside option as Container tag name
  • New: generateblocks_dynamic_css_priority filter
  • New: Add support for desktop/tablet-only CSS
  • Fix: Stacked button alignment in the editor
  • Fix: Broken background image upload when using official AMP plugin
  • Fix: Button mobile border-radius
  • Fix: Check if grid data is an array before looping
  • Fix: Container tablet/mobile font size values
  • Fix: Button text not selectable in editor using Firefox
  • Tweak: Bump required WP version to 5.4
  • Tweak: Make Container block wrapper HTML dynamic
  • Tweak: Make Grid block wrapper HTML dynamic
  • Tweak: Make Button Container block wrapper HTML dynamic
  • Tweak: Move custom classes to core CSS classes field
  • Tweak: Move custom ID to core anchor field
  • Tweak: Remove deprecated isLarge prop in editor
  • Tweak: Better stacked button alignment on frontend
  • Tweak: Remove old browser prefixes
  • Tweak: Update DOMPurify
  • Tweak: Don’t strip protocol from dynamic stylesheet URI
  • Tweak: Move controls from our Advanced panel into core Advanced panel
  • Tweak: Move text alignment options in all blocks to the Block Toolbar
  • Tweak: Remove block margin in the editor
  • Tweak: Reverse grid gap when using RTL
  • Tweak: Add default inherit option to tablet/mobile Headline icon alignment
  • Tweak: Change frontend.insideContainer filter to frontend.afterContainerOpen
  • Tweak: Update color picker component UI
  • Tweak: Make icon sets filterable
  • Tweak: Move Container element tag option to Layout panel
  • Tweak: Move Container z-index options to Spacing panel
  • Tweak: Disable fixed background images on mobile
  • Tweak: Rebuild Headline Element toolbar component
  • Tweak: Add tag name to Headline CSS selector to improve CSS conflicts
  • Tweak: Changed order of generateblocks_block_css_data params
  • Tweak: Use device-specific media queries for remove vertical gap option
  • Tweak: Change generateblocks.editor.desktopCSS filter to generateblocks.editor.mainCSS
  • Tweak: Rebuild settings area using React
  • Tweak: Remove placeholder text from Headline block
  • Tweak: Move GenerateBlocks admin menu item to top level
  • Tweak: Regenerate static CSS files after plugin update
  • Tweak: Adjust unit picker default styling
  • Tweak: Rebuild background image upload UI

GenerateBlocks 1.1.2

This release has a couple more bug fixes from our 1.1.0 release.

Legacy background images are no longer invisible in the editor.

We also reverted our parsed content caching due to some conflicts with caching plugins that was found. We’ll re-visit this in a later version.

Full changelog

  • Fix: Set background image selector default if undefined
  • Fix: Set background image opacity default if undefined
  • Tweak: Remove parsed content caching