GenerateBlocks 1.2.0

This is a beta release. Please only test this version on development and staging websites.

If you find any issues at all, please contact us.

Upload .zip in Plugins > Add New > Upload.

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

  • Tweak: Remove featured image as background option
  • Tweak: Rebuild bg image control UI & allow custom URLs

1.2.0-beta.2

  • Tweak: Adjust unit picker design

1.2.0-beta.1

  • Enter beta testing
  • Tweak: Make sure block appender is clickable when using pseudo elements.

1.2.0-alpha.5

  • 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

1.2.0-alpha.4

  • Tweak: Add support for desktop/tablet-only CSS
  • Tweak: Make Remove Vertical Gap option device-specific

1.2.0-alpha.3

  • Fix: Fill horizontal space option for buttons
  • Fix: Responsive grid item vertical gap in the editor
  • Tweak: Replace gradient overlay option with a gradient selector option
  • Tweak: Refactor how background image URL and gradient values are generated

1.2.0-alpha.2

  • Fix: Vertical and horizontal gap in tablet/mobile previews
  • Tweak: Set top and bottom shape divider values to -1px
  • Tweak: Add slightly to shape divider width when set to 100% to prevent off-pixels
  • Tweak: Allow default block margins inside Container block in editor

1.2.0-alpha.1

  • 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 use featured image as Container background image
  • 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

13 thoughts on “GenerateBlocks 1.2.0”

  1. I was hoping for shape dividers and gradient overlays in GBP. And now they’re in the free version? And we aren’t limited to the dividers? 😀
    Damn. Now I can only speculate what will be in Pro.
    Those new elements are highly(!) appreciated.

    Reply
  2. Omg, love the shape dividers. Will now be able tio create an awesome landing page. With the amazing features new added to the base plugin, I cannot wait to see whats in the pro version. Bring it on Tom.

    Reply
  3. Just tried out the alpha. Is it possible to have text alignment options when editing for mobile devices? For example if I set the text align centern on Desktop but I need to set it to left on mobile. The block options doesn’t have text align settings and the pop-up settings disappears when in tablet and mobile preview.

    Reply
  4. Is it possible to have the function to not force display the mobile version when editing blocks in mobile/tablet version?

    My design looks very off and broken (super thin and not realistic at all) when I edit mobile properties on my site.

    I update the page and it looks a lot better than in the preview mode

    Reply

Leave a Comment