Flexbox, Sizing, Tabs, Accordions & More

GenerateBlocks 1.7 and GenerateBlocks Pro 1.5 are both alpha versions. This means things may change/be removed without efforts to maintain backward compatibility. Please only install these versions on testing/staging environments.

Download 1.7.0-beta.2view changelog

Download GenerateBlocks Pro 1.5.0-beta.1 inside your accountview changelog


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.

Our new fully-featured Accordion variation.

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.

Our new Tabs variation using Containers as the toggles.

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:

  1. Removing the div.gb-inside-container HTML and its associated CSS.
  2. Removing the legacy Container block options from the Layout panel.
  3. 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

Sizing

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 width and height options and their related min- / max- settings.

You can set sizes using various measurement units including px, %, em, rem, vw, and vh.

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.

Layout: Display

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 controls

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-grow, flex-shrink, and 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.
Example use of Flex Columns and Auto Margins

Layout: Position

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.

Layout: Overflow

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.

Auto Margins

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.

Community Videos

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!


Moving Forward

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.

25 thoughts on “Flexbox, Sizing, Tabs, Accordions & More”

  1. Absolutely loving GP & GB together. With these latest updates, I’m one step closer to purely building sites with only GP & GB. IMO the only thing missing from GB now is a gallery.

    Reply
  2. Fantastic! Thank you for all the good work.
    Here’s my wish for the next release:
    – Mega menu
    – Some container entry effects
    – Dark theme switcher

    Reply
  3. Great writeup David!

    Regret that I haven’t had time to test or give feedback yet this dev cycle, but have been watching eagerly for the alpha to drop. You guys continue to knock it out of the park. Really appreciate your vision, work, and all you do.

    Kudos and thank you!!

    Reply
  4. Woooooow. What you are building is incredible. Thank you so much for your efforts. Every update so far has been awesome, but this is world class. thank you! Please keep up the good work.

    Reply
  5. Yes, this is really world class, i have to agree. Thank you for that!
    For people who know what they are doing, this is a fantastic update. However, i am a bit worried how to explain these complex customization options to your clients soon. They might be very overwhelmed with it.

    Reply
    • Then Paterns are THE solution. The path GB is taking is totally logical and future-oriented.

      If Gutenberg still restricts the rights a bit who may use which paterns, we have a perfect combi….

      Reply
    • I think one important thing to remember is that you don’t have to use these flex controls if you don’t want to. GenerateBlocks itself uses these options when you add icons to Headlines (and other things) automatically so you don’t have to set them.

      Flexbox exists in GB 1.6, it just happens behind the scenes when needed, and you have no control over it. In 1.7, those same scenarios exist, we just set the options for you now, and you can change them (or leave them alone).

      Reply
  6. If I read this correctly… it will be possible to make conversions of existing content to match the new way of doing things?

    If so… meow! ๐Ÿ˜€

    Reply
  7. Is there an option to migrate all the old blocks of all the pages of my website to the new ones with a single click?
    If not, should I go to each block of each page and migrate them individually?

    Reply
    • Right now it has to be done individually for each Container block.

      We played with a one-click option, but it just wasn’t very stable in the editor. On top of that, it’s not a bad idea to manually do it to make sure everything migrates correctly for each of your Container blocks.

      Reply
  8. Gee, and I just used some alternative solutions when it comes to accordion and tabs ;-(
    Still happy to have these features built in now ๐Ÿ™‚

    When can we expect the final release? Because I can’t wait to change everything to new containers?

    Reply
  9. Thank you so much for these very extensive updates to Generate Blocks! I’ve been waiting for them for a long time, and I’m thrilled to finally be able to customize my site with all the new and improved flex updates.

    With these updates, I’m sure I’ll be able to take my website to the next level, with more options and features than ever before. I’m excited to see what the future holds with these updates and what other amazing things I can do with my website.

    Reply
  10. Hiya,
    Bit late to the party – but do we have a date for this release?
    (I’ve got users chomping at the bit for accordions).
    Thanks
    Laura

    Reply

Leave a Comment