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