More Control and Improved UX

The focus of GenerateBlocks 1.8 has been on two major improvements; more advanced value & unit controls and overall quality of life (QoL).

Where applicable all block settings value fields now accept a wider range of values and units. Providing more options to create advanced responsive layouts and custom designs. And part of this improvement includes a complete overhaul of Spacing controls and a new dedicated Borders panel.

We also commence our first step in an ongoing program of QoL improvements. With each update, we intend to focus on improving UX and/or UI to help you make the most of our tools. In this update, we focus on improved flexbox controls and Block Labels.

Without further ado let’s take a closer look at GenerateBlocks 1.8.

New Borders Panel and Improved Spacing

With a new dedicated Borders panel, you can now choose from solid, dashed & dotted styles as well as set static & hover colors independently for each side of all blocks. With border radius and responsive controls, you begin to realize just how many border possibilities there are. Which is why it was absolutely necessary to give borders their own dedicated panel.

The Spacing panel was afforded some much-needed space of its own. This allowed us to lay out the fields more logically. But more importantly, it allowed us to increase the size of those fields so they can accept all those lovely new values and units.

Improved Values and Units

CSS values and their units are at the heart of responsive modern web design, and in CSS Level 3 specification there are many to choose from, and those provide a lot of responsive design options. Whether that be:

• using Viewport ( VH & VW ) units to create full-screen containers
• setting max-width using characters ( CH ) to set optimal line lengths to improve text readability
• creating responsive and accessible layouts entirely based on REM units
• applying CSS variables ( --var() ) instead of fixed values for theme-level design controls
• designing your own responsive settings using math functions like clamp() and calc()

More units to choose from

Value option fields now accept more units. Choose from PX, %, EM, REM, CH, VW, and VH.

Mix and match units

Each value field now has its own independent unit picker. This allows users to mix and match units for related properties. Such as PX for block padding and % for inline padding.

Text Values

In addition to the new units, you can use more text values including inherit, initial, unset, auto, max-content, min-content, and fit-content.

Math functions

Math functions in CSS are super cool and allow property values to be truly dynamic. Now, where applicable, you can use calc(), var(), clamp(), min(), and max().

Quality of Life

Flexbox toolbar shortcut and visual guide

Flexbox is one of the most important layout properties in modern web design. But it certainly is not a property for the novice web designer. In fact, I think it’s fair to say that most advanced web developers rely on trial and error to achieve the desired layout.

It is why we have introduced a new Flexbox Matrix function in the blocks toolbar. Providing both a shortcut and a visual guide for defining a block’s flex layout we think this feature will super simplify using the Flex display and layout properties in GenerateBlocks.

Add to Container

Have you ever added several GB blocks to your design and then realized you need to wrap them in a Container? Up until now, this has been resolved by adding a Container Block and then dragging each block inside it. Now that can be resolved by selecting the GenerateBlock(s) and clicking the Add to Container option in the block toolbar.

We can also un-wrap a GenerateBlocks Container by clicking the block icon and choosing “Un-wrap”. This will remove the selected Container block while keeping all of its inner blocks.

Block Labels

Building complex designs in Gutenberg is no longer a challenge, especially if you use GenerateBlocks. But what can prove a challenge is navigating the block list of that design. With a list of Container, Headline, Image, and Button blocks, it’s hard to see at a glance which blocks you need to select.

Well, we couldn’t wait for WordPress Core to deal with this inherent issue, so we have added Block Labels to all GenerateBlocks. With this addition, Blocks will now display a more relevant label in the editor list view:

• Headline and Buttons Blocks now show an excerpt of their text.
• Image Blocks display the Alt / Title for the image.
• And for Container, Query Loop, and Grid blocks, you can add your own custom Block Label from the block’s Advanced settings.

Show All or Disable Google Fonts

Font Family selection in the Typography panel now includes the full list of Google Fonts. But in addition to this, you can completely disable the Google Font list and API in GenerateBlocks > Settings. This we know will be a welcome addition to users facing font-related GDPR issues.

Dev Notes

There are a lot of behind-the-scenes changes in this update. Check out our developer notes post to learn more.

Community Videos

Check out the below videos for an awesome overview of some of the changes in this release.