Better User Interface and User Experience

Better User Interface and User Experience

In this update, we’re bringing block editing to all new heights by drastically improving our user interface and user experience (UI/UX). Update to 2.12.0 now!

Prior to this update, we received some valuable insights from a few avid Stackable users from the Stackable Facebook Community on how they were using our blocks, what things they were trying to achieve, and what things they had a hard time doing.

We love listening to what our users have to say, so we took those feedback and investigated further.

This resulted in an internal audit of our blocks held by every member of the Stackable team. Everyone took a break from their daily tasks to try out a myriad of things with our blocks to see whether it was easy or hard to use.

This version 2.12 update is the first part of our study which improves Stackable’s UI/UX.

Improved Tabs and Panel Design

We’ve enhanced the layout and design of our block inspector, revamping a lot of things from the tabs to the panels and their contents.

Here’s what the improved block inspector looks like against the old one:

New and improved block inspector UI

There are many subtle differences between the old and the new inspector. You’ll notice them more when you start designing your website with our blocks.

Overall, the design is more Gutenberg-like for a more streamlined experience.

Here’s what to expect:

  • It’s easier to see what tab you are currently on
  • It’s easier to see what panel you are currently on
  • The panel title now sticks to the top of the inspector when scrolling
  • Better responsive toggles
  • Added a new Container panel to most blocks
  • Rearranged some panels and option arrangement
  • A more compact yet easier on the eyes option layout

New Container Settings Panel

We noticed that a few of our “Container” related options – things like border radius, shadows and backgrounds – were scattered in different areas.

So we’ve made a new Container panel to make sure these options are placed well together and make them easier to find.

We’ve also combined a lot of the background settings into a single option for less clutter:

New Container panel

You can just click on the pencil button to pop open the background settings. The background option will also show you a small preview if you’re using a background image or color, along with an easy way to clear them.

New Paddings Option

We sometimes receive questions on how to change the inside paddings of containers, and some people even think that we do not have any padding options.

On the contrary, we do have padding options!

However, our padding options were tucked inside the advanced tabs. Because of this, some people were having a hard time finding it.

Also, it didn’t help that our paddings option for columns (or containers) were a Premium feature, and it kind of felt like a you hit a paywall since. it wasn’t available to free users. We don’t like paywalls, and we’re a big believer that the free version of a plugin should be completely usable.

So now we’ve made the paddings option available in Stackable Free 🥳 and placed it inside the Style → Spacing panel to make it easier to find.

Improved Number Slider Control

Not to take anything away from Gutenberg (we ❤️ Gutenberg), but the number / range slider is quite difficult to use. It’s very hard to type in values in the number field.

For example, typing in -100 is very cumbersome. It’s because you can’t type in non-numeric values, so you can’t just type in the negative sign - since it’s not a valid number by itself.

To successfully type in -100, you’d have to type in first 100 then place your cursor at the start, only then will you be able to type in the negative sign.

Here I am fumbling around trying to type -100:

Me trying to type in a negative number in a Gutenberg range control.

There are other quirks that you’ll surely encounter if you use the number field in a regular basis.

In this update, we’ve decided to go ahead and create our own number / range control that makes it very easy to type in any numerical value.

The result is a much more pleasant experience, and makes accurately specifying spacing values a breeze!

Here I am happily and quickly typing -100 in the new field:

Me trying to type in a negative number in Stackable’s improved range control.

Improved Responsive Toggles

This is not really a new feature since it was released a previous minor update, but we haven’t written about this UI improvement yet.

Our previous responsive toggles were gray circles which didn’t belong in the crisp Gutenberg interface. They looked old as well, and it wasn’t obvious that you could actually click on them.

We’ve changed the responsive toggles to something cleaner, and now when you hover your mouse over them, they’ll respond slightly to give you a hint that you can interact with them.

Our new responsive toggle buttons are easier to understand

Inspector Speed Improvements

Stackable blocks have a lot of options and perform a lot of things behind the scenes. Each option you change generates some styles, and with the amount of options we have, some people found that changing options were a bit laggy.

In this update we’ve sped up our inspector drastically, and we’re seeing inspector option performance increase by 80%!

So now when you adjust block options, you should have a significantly smoother experience.

Blog Posts Block Multiple Categories and Taxonomies

We’ve gotten a lot of requests to further expand our options for our Blog Posts block. One of our recent additions is the Load More button that dynamically loads your older posts. Now we’ve added in the ability to pick multiple categories and taxonomies!

You can now choose more than one post category or taxonomy, and you can also choose whether to include only the posts which belong to all the categories or taxonomies you picked, or exclude them.

This is a game changer in our Blog Posts block, and allows you to do so much more with it.

Other Minor UI Improvements and Fixes

This article update is getting quite long, and we’ve just mentioned the major UI improvements.

Here are a few more minor improvements worth noting:

  • Button color options now appear higher in the inspector
  • Title heading html tags now show up first in title settings
  • Smaller toggles for when picking single or gradient background color types
  • Smaller buttons for the button design picker
  • Made some inspector controls more Gutenberg-like

Bug fixes included in this release:

  • It’s now easier to set left/right paddings to zero
  • Unable to reset range controls when the value has been previously changed
  • SEO warning about duplicate id attributes
  • Some background styles won’t apply in some block layouts
  • Fixed a few CSS styling issues with some block layouts
  • Fixes some JavaScript warnings
  • Compatibility issue when coming from a Stackable beta build

Conclusion

Thank you to all the Stackable aficionados who gave feedback for this UI-inspired update. 🙌

I believe that this update is one of the best ones we’ve had and makes Stackable easier than ever to use.

This update is just the beginning of the results of our study I mentioned at the start of the article, and we have more in store for you in the coming weeks.

If you use Stackable, be sure to join the Stackable Community in Facebook. Help us shape the future of WordPress and Gutenberg!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.