GenerateBlocks 1.7 adds more styling controls, advanced layout options, and a refreshed Container block that will allow you to be even more creative with your GenerateBlocks designs.
First off in the list of features is the new Layout > Display settings. This provides a choice of box model layouts for each block, including inline, block, and flexbox. And with this comes the full list of flexbox properties and their own inspector controls.
For those looking for pixel-perfect designs, there’s a new dedicated “Sizing” panel where you can set the exact width, height, and min/max variants.
At the heart of this update is a refactored Container block that changes everything in the way we can add wrappers around other blocks. This is a fundamental change that every existing GenerateBlocks user should be aware of. Please read on to find out more.
But this update has been so much more, with over 120 pull requests, 220 file changes, and over 10,000 lines of code updated, the GenerateBlocks editor code is more streamlined, more modular, and ultimately more performant. With this update, we will be able to develop more and develop quicker all with less code.
These changes also allowed us to reverse some of the decisions we made during the early stages of development. This is primarily to uncover hidden CSS and expose them in the new editor settings. This not only provides users with greater design controls, but it was also necessary to add to the foundations we required to develop new variant blocks for GenerateBlocks Pro.
Above all, we were able to do this without affecting your existing content.
Accordions & Tabs
Accompanying GenerateBlocks 1.7 is GenerateBlocks Pro 1.5. We took full advantage of our new-found flexibility and built what may be the most flexible and powerful Tabs and Accordion blocks ever made.
The beautiful thing about our new Accordion block variant is that it’s not even a new block. It uses our core blocks (Containers and Buttons) to build a powerful accordion system.
Again, this new Tabs block variant isn’t a new block. It’s simply a collection of what we already have, configured to build simple and complex tab layouts. You can use regular buttons as your toggles, or use a Container with anything inside of it as your toggle. The possibilities of what you can design are endless.
We are very proud of these two new variations. We can really begin to realize the flexibility and power of the components available in GenerateBlocks.
These two new block variants are only available in GenerateBlocks Pro. We made the decision to keep GenerateBlocks as light as possible, only providing the necessary building blocks needed for more complex systems.
We make fewer decisions to provide you with more possibilities
From the get-go we set a very clear vision for GenerateBlocks:
To create a plugin that introduces the minimum number of new blocks, which can be combined to create any design that we could hand code with HTML and CSS.
This, as you can imagine, is no easy task. In the early days of the block editor, some things were just not possible. This meant compromises had to be made, resulting in us making decisions for the user instead of providing the granular level of control that we really wanted.
There is no better example of this decision-making than the Container block.
The new Container block adds less HTML to provide more possibilities
The decision we took when first developing the Container block was to add an inner
div.gb-inside-container element to the block’s HTML and control its positioning with hidden CSS.
This meant the Container block could be used to divide full-width pages into sections, where the Container block’s background spans the width of the viewport but the content of the block would never exceed a defined maximum width. This fulfilled a super common pattern in modern web design. However, in the majority of other Container block use cases, this extra HTML was redundant, and for some of our new planned features, this HTML actually gets in the way.
In GenerateBlocks 1.7 we reverse that early decision by:
- Removing the
div.gb-inside-containerHTML and its associated CSS.
- Removing the legacy Container block options from the Layout panel.
- Providing a block toolbar shortcut for adding an inner Container block.
This significant change will no doubt raise important questions. So let’s try and answer some here and now.
What happens to my legacy Container blocks?
It is super important to understand that this update will only apply to new Container blocks you add to your site using GenerateBlocks 1.7. Any Container block that was added to your site prior to GenerateBlocks 1.7 will remain exactly as it was.
How does this change affect me and the way I use Container Blocks?
Previously when using the Container block to create sections on a full-width page, the user did not have to think about adding an inner container block as the block had one built in.
Now if a user requires their content to be no wider than a defined width, the user can add another Container block inside it, and then build their content within that.
Is there some documentation on this?
Yes, of course, you can read more about adding an inner container here.
Can I convert my legacy Container Blocks to the new version?
For sure, and to help with that process you can select any legacy Container block and toggle the “Use legacy layout system” option. We do our best to recommend the best course of action for you to take based on a series of scenarios we check internally for.
Goodbye, Buttons Block
With the new Container block and the addition of the flexbox options, it made perfect sense to deprecate the “Buttons” block. Previously to 1.7, adding a Buttons block to the page actually added two blocks, the Button Container and individual Button block inside of it.
This was another early decision that results in unnecessary HTML when only a single button is required. Now adding a Button block only adds a singular button and you have the option from the blocks toolbar to add a Button Container block variant around it.
Existing Button blocks inside of the now-deprecated Buttons block will remain as they are today – nothing will change on your existing sites.
New Inspector Controls
Within the block inspector controls there is now a new dedicated Sizing panel. This panel is available in our Headline, Button, and Container blocks. It provides both
height options and their related
You can set sizes using various measurement units including
And where applicable the
max-width can be set to the Global Width which is defined in GenerateBlocks > Settings.
These new sizing options allow users to create pixel-precise elements and layouts, including creating perfectly square (or circular) buttons, restricting the length of a title, creating more responsive layouts with min-max widths, creating vertical and horizontal scroll containers and so much more.
With a blocks Layout panel, you can set its Display property to various layouts and flow layout types including:
block / inline / inline block / flex / inline flex.
Of these options,
flex is the most powerful and comes with a whole new set of settings.
Flexbox CSS has been at the heart of GenerateBlocks from the very first release. It’s how the Grid block creates its layout, and it’s used for other options such as positioning an icon before or above a Headline or controlling the vertical and horizontal alignment of a Containers content.
Aside from the recent addition of
flex-basis properties to the Grid block containers, the majority of flex CSS properties are absent or hidden behind a few basic settings.
As of now, Flexbox CSS with its own dedicated inspector controls can be enabled on the Container, Headline, and Button blocks. You can select the option for the Blocks > Layout > Display property. By selecting Flexbox you will be provided with a host of new and powerful layout controls.
With this you can:
- Convert any Container block to a flex row or column layout to build complex and creative layouts.
- Position icons in the Headline and Button blocks before or after or above or below the text with any combination of justification and alignment you need.
- Combine flex with auto margins to create alignment of items across grids with variable height content.
- Impress us with your custom designs and layouts.
GenerateBlocks automatically adds
position: relative where we believe it is required, such as when setting a block’s
z-index value or a Container blocks pseudo element background. This new option exposes the previously hidden CSS in the editor allowing users to set a block’s position to
relative or not. In the future, we will be adding more
position values to choose from.
Users can now define how a Container block handles its content overflow, choosing from
visible / hidden / scroll / auto. As well as exposing the hidden CSS property that is applied when using pseudo backgrounds, users can now make scrollable containers by combining these settings with the max width or height settings.
The margin fields now support the
auto value. This can be used for many things such as controlling the horizontal alignment of nested Container blocks. And when used in combination with new flexbox controls it will provide methods to automatically align variable height content across grid rows.
The WordPress community is truly awesome, and we’re lucky enough to have great users who have gone ahead and created some really cool videos showcasing the new features and changes in 1.7/1.5. Check them out below!
We are very proud of these releases. We were able to bring GenerateBlocks closer to our goal of being able to build anything with only a handful of powerful components.
Thank you for reading! We can’t wait to hear your feedback.