Changelog

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

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 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.

Effects

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!

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

1.3.0

• 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

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>
</div>

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>
</h2>

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.
    </div>
</div>

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

1.2.0

• 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

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

Quick bug fix here. Somehow an undefined index notice slipped under our radar during testing. All fixed now. Sorry for the hassle!

Changelog

• Fix: Undefined index notice when using background images

Our first feature release!

This update has a few new features, and fixes a handful of bugs.

Persistent responsive controls

One thing we’ve noticed when building blocks is the number of times we need to click the responsive tabs for each block. If I’m doing something for mobile and switch to another block, I shouldn’t have to click on the mobile tab again.

Now, the responsive tab you click is remembered, so it will remain even when switching to another block.

Pseudo background images

Container background images can now be applied to the Container pseudo element instead of the element itself.

We’ve deprecated the background color overlay option, which used CSS gradients to apply the background color over the background image. The overall experience of this method wasn’t very user-friendly, and it didn’t allow for more advanced effects (color transitions etc..).

Now you can add the image as a pseudo element and adjust the opacity of the background image with a simple range slider right below the option. This is way more user-friendly than the old background color method. It also opens up doors when it comes to more advanced effects.

Align-wide/full support for Containers

Previously, we relied on the theme to provide full width content if you wanted to build out full width containers. This is still the preferred method in GeneratePress.

However, other themes may prefer using the align-wide/full options that Gutenberg provides, so we’ve added support for those options to the Container block if your theme supports them.

Color component palette

Our color component now displays the color palette by default, instead of a custom color picker. You can still toggle the color picker, or you can tell GenerateBlocks to display the picker by default in Settings > GenerateBlocks.

Full changelog

This release has various other bug fixes and tweaks.

1.1.0

• New: Persistent responsive controls across blocks
• New: Filter all HTML attributes
• New: Filter Container tagNames
• New: Add containerAfterElementTag filter
• New: Add option to apply background image as pseudo element
• New: Add support for alignwide/alignfull in Container block
• New: Display color palette by default in Color component
• New: Add option to choose default view in Color component
• New: Add aria-label option for Buttons into advanced panel
• Tweak: Deprecate background image overlay option
• Tweak: Move hexToRGBA to utils
• Tweak: Fix repeated common CSS
• Tweak: Re-design normal/hover state buttons
• Tweak: Filter default background image size
• Tweak: Cache parsed blocks on front-end
• Tweak: Better display of admin notices in Dashboard
• Tweak: Change Container Width label to Contained Width
• Tweak: Add future framework for migrating/updating old options
• Tweak: Don’t allow single button to be saved as reusable
• Tweak: Don’t allow element tagName to be filtered
• Tweak: Allow all standard richText formats in Headline block
• Tweak: Better iconSize responsive placeholders
• Tweak: Allow decimal values in gradient start/stop
• Tweak: Move block name to the end of editor.desktopCSS filter args
• Tweak: Add buttonColorsHover to editor.controls filter
• Tweak: Change editor.insideContainerWrapper filter to frontend.insideContainer
• Tweak: Pass attributes to frontend.insideContainer instead of props
• Fix: gridId value in nested grids
• Fix: Use inline-block for inline headlines with no icon
• Fix: Missing text domains
• Fix: Display Headline highlight option in Headline block only
• Fix: Headline icon center alignment in IE
• Fix: Headline highlight background color in IE
• Fix: Mobile selector for width in min-height container
• Fix: Add box-sizing to min-height container on tablet/mobile
• Fix: Headline text alignment when using an icon
• Fix: Allow 0 as iconSize value

Our first update!

Just a small one which should fix translation issues in the block editor.

= 1.0.1 =

• Fix: Add wp_set_script_translations() to translate block editor
• Tweak: Add spacing to update nag in Settings area

Welcome to GenerateBlocks 1.0!

GenerateBlocks is a small collection of WordPress blocks for the Gutenberg editor. There are more and more block plugins emerging, but this one is different.

Instead of building a plugin with 30+ blocks you have to sort your way through, we built one with only 4 blocks. The magic here is that these 4 blocks can be used to build nearly anything. When combined, you no longer need specific blocks for testimonials, price boxes or call to actions (to name a few). These blocks can do it all.

One of the things I love about this approach is that you can become super familiar with only a handful of blocks. You don’t need to memorize and rely on 10 different blocks to build a page – your pages can be built using unique combinations of these few blocks.

It also means none of our blocks will become outdated next year. The plugin will remain lightweight and clean, without a bunch of deprecated blocks well into the future.

Another aspect of the plugin we’ve focused heavily on is performance, which is no surprise if you’re coming from our GeneratePress theme. GenerateBlocks only adds one CSS file per page, which contains all of the CSS generated by your options. There is no javascript or inline CSS – it’s all in one, tidy place.

The HTML generated by the plugin is as minimal as possible, as well. You won’t find yourself digging through layers and layers of elements to find your content.

To download the current version of the plugin, head over to our Install page or search for GenerateBlocks in the plugins area of your Dashboard.

If you need help using the plugin, check out our documentation. If something is missing from the documentation, or you need more help, please don’t hesitate to contact us.