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