Introducing: New Stackable UI

At Stackable, we’re always thinking about how we can make our plugin better for our users. For the past few months, we’ve been developing a new user interface that will revolutionize how users design with the WordPress Block Editor. This unlocks a lot of capabilities and design opportunities when it comes to creating layouts.

On March 29, 2023, we opened up a beta program for Stackable users to test the new UI. 60 people signed up for the beta and we received a lot of valuable feedback and suggestions. Now, we’re excited to introduce the new and improved Stackable UI!

About this Update

The new UI is released with Stackable version 3.8.0. Throughout the development process of the new UI, we’ve made sure that all blocks in published pages and websites will be able to transition to the new user interface. It is fully backwards compatible, and will not affect the design of old pages and websites in any way.

To easily transition to the new Stackable UI, you can watch this short video to quickly learn about all the changes that come with this new user interface:

Why change the UI?

We realize that this is a big change and it hasn’t even been that long since the jump from Stackable V2 to V3 but we wanted to change the Stackable UI for three reasons:

Better Quality of Life

We’ve made creating layouts easier with a more efficient workflow and more intuitive interface. The new UI was designed to lessen the jumping between tabs and panels in the inspector. We’ve also added some visual guides for layouts options so you can easily see how your adjustments such as margin and padding value changes affect your block. We’ll explain these in more detail later on!

Additional Controls

This release includes several new features and improvements to existing functionality. The additional controls will give our users the ability to easily create complex layouts without having to jump through hoops.

Better Organization of Controls

We’ve changed the tabs in the inspector and made it more organized. We’ve also improved the panels to make the Inspector simpler to navigate through and more user-friendly. For example, layout controls which you would most likely use for wireframing or building layouts are in its own tab, and style controls which you use to stylize blocks will be in another.

What’s New with Stackable’s UI?

The new Stackable UI promises to be a major improvement over the previous version and here are all the new changes that come with it:

Inspector

New Inspector Organization

Control panels used to be scattered among the old tabs of the Stackable Inspector. Now, we’ve categorized controls into three main purposes: Layout, Style, and Advanced. Now, all controls that are used for customizing block layouts are in the Layout tab, all controls used to stylize blocks are in the Style tab, and all complex controls will be in the Advanced tab.

As an example, here’s the Inspector for an Inner Column block. The Container panel will now be in the Layout tab. When turned on, Container styling panels will be available in the Style tab.

This change really makes it easier to locate different control panels and making designers’ workflows easier to create complex layouts.

Opens Most Relevant Panel

Adding a block will open the most relevant panel to design it. For example, if you add any text block (e.g. Heading, Text), it will open up the Typography panel in the Style tab. Or if you add an image block, it will open up the Image panel.

Additionally, when you’re in the process of designing a whole page and you’re going back between different blocks, it opens up the last opened panel.

Users can now easily access to panels they have recently interacted with, without having to navigate through the inspector. Ultimately, even though these were minimal added features, we thought it can save users time and effort, and make the overall user experience more efficient.

Controls

Moving forward, we’ve made a lot of enhancements to Stackable controls to make designing hassle-free and uncomplicated. In the old UI, there were a lot of settings and options that were not so apparent. With that in mind, our development team created solutions that would make the capabilities of our controls easy enough to understand, even for beginners.

Content Width

We’ve had the Content Width control before but what it did wasn’t obvious before, so we brought in the block width option near it. The main use of the Content Width option is to change the width of the content inside a block, so you can have the block occupy the full width, but limit the content to only the middle. Just like this:

Better Column Width Adjustment Controls

Aside from dragging the sides of your columns, there’s now a new inspector control to adjust column widths.

The context for this change was that it wasn’t so obvious before that you have control over how your columns collapsed and have different column widths for tablet and mobile views. Now if you go into tablet or mobile views, the control will change into multiple sliders so you can adjust each column width individually like in the photo below, making it easier to create responsive pages and websites:

Flexbox Controls

Previously, we had a “Fit all columns to content” toggle which was a partial implementation of flexbox. You won’t find this option anymore as this has been replaced by the new Flexbox controls, such as the Column Justify and Column Alignment. This makes arranging blocks inside a column easier. The Flexbox controls will be found in the Layout panel of the Layout tab.

You also have additional flexbox controls for your vertical or horizontal inner blocks! This brings much more layout options at your fingertips.

It’s now easy to create this type of layout:

The example above is just 1 column, with 2 blocks inside, the column’s Inner Block Direction is set to Horizontal, and Inner Block Justify to Space Between, and Inner Block Alignment to Center.

Align Last Block to Bottom

We get a lot of questions on how to create multi-column layouts where the last button is aligned to the bottom (think multiple pricing tiers or multi-column cards), now we have a dedicated button for this! Here’s how it looks like in the Block Editor:

Tablet and Mobile Column Arrangement

Rearranging column order for tablet and mobile is now a Free Feature, and will now be found inside the Layout tab > Layout panel. It’s now easily accessible, and is easy to use as well. You just have to drag the column number to fix the arrangement of your columns.

Inner Column Spacing Control

Moving on, there’s now a way to control all the column spacing of all Inner Columns in one single go. Before, you’d used to go to each Inner Column block and adjust their column spacing one by one.

Better Support for Margin Auto

In CSS, when you use margin “auto” it usually results in the element pushing the other elements – and is very helpful if you want to build layouts where the last one sticks to the bottom, or to the side.

This didn’t really work well before and while the “auto” was applied in the frontend (sometimes), it didn’t appear well in the editor. Now we’ve added support for margin auto, so if you add it into a block that’s inside a column with other blocks, it should push the block correctly.

This also works for Button Groups!

Support for Floating Columns

It’s also now possible to float an Inner Column block (provided you set it to align to top).

Visual Guides

We’ve added a visual aid that helps users see how padding and margin values affect blocks. These appear every time you adjust the paddings and margins in a block.

Additionally, outlines appear every time you select justify or alignment options in our flexbox controls so users can see how the block changes.

Lightbox

Now you can display media, such as images, videos, and embeds in an overlay on top of a website through the Stackable Lightbox feature. This gives users the ability to have a closer look at a selected medium. This is applicable to columns, images, or even buttons.

Conclusion

We’re continuously improving Stackable and in this release, we’ve made it easier for you to create better layouts and be more efficient in building websites with the WordPress block editor.

We have a lot more in store for you so watch out for any updates on our end.

Update Stackable now and see these changes for yourself. Let us know how you like this brand new user interface in the comments below.