Better Responsive Controls, Better List Block Icons and Low-Highlight Effect – Stackable

Today we have a handful of updates: we’ve improved the responsiveness across all our blocks, we’ve added a brand new Low-Highlight text format, enhanced the icons in the Icon List Block, and added support for Kadence Theme global palette. Now in Stackable v2.10.0

Here are the things you’d expect when you update Stackable:

Improved Responsive Controls

Block responsiveness is always a challenge and we’ve been continuously improving how our blocks adapt for different device screens.

Stackable blocks have always been responsive. You can edit desktop, tablet or mobile block properties by simply clicking the responsive toggles found in our options. The last update also brought Live Responsive Editing which took responsive controls to the next level!

However, people have been pointing out to us that after designing their blocks to make them look great in desktop screens, there was a tendency for the blocks to appear broken in tablets and mobile screens. 😯

We’ve been investigating this issue for quite a while now, and we think we’ve pinpointed a few key issues that cause this and addressed them in this update.

Improvement #1: Some Desktop Styles Will No Longer Automatically Apply to Tablet and Mobile

I don’t want to bore you with a lot of details, so I’ll be quick, the issue is that some block options get applied both in large screens and in smaller screens. This normally doesn’t pose a problem, but for some design controls is can mean disaster for small screens.

Here’s a simple example to show the problem. Let’s say you have a Card block and then you added some huge paddings inside it. It might look great in desktops, but here’s what happens when you slowly resize the window to see what it looks like in tablet and in mobile screens:

Clearly, this looks wrong. To fix things, you’d have to dive into the tablet or mobile settings for the paddings and tweak them. This works, but that additional step to further refine for tablet and mobile isn’t second nature to most people. And more often than not, pages are left with huge paddings in mobile.

To address this issue, we’ve adjusted some styling options so that they won’t apply their desktop styles automatically to tablet and mobile screen sizes.

Here’s the new behavior of the same Card block above:

In tablet and mobile mode, the paddings reverted back to the default size.

Much better!

This new behavior only applies to styles which may cause issues in smaller screens. Think of options like paddings or maximum content widths.

If you’re worried about what might happen to your current page designs after updating, don’t be! All your previously created pages will remain the same. This new behavior will only apply for new or updated pages.

Improvement #2: Styles Now Show the Current Value

A concern has been raised a number of times before in the Stackable Community in Facebook that the default values in range controls are always blank. And because of that, you wouldn’t know what the actual default value was.

“Does blank paddings mean that the block had 0 paddings?” was a common question. Sometimes, a blank doesn’t mean the value was0, in some paddings for example, it may mean 35 pixels.

In this update, almost all of the number fields will now show the default values. Now you won’t have to second guess whether you need to remove a padding or not. 😎

Improvement #3: Tablet and Mobile Options Are Now Blank to Signify a Default Value

Continuing on from the previous improvement, tablet and mobile values were sometimes hard to set. Sometimes, they showed a 0 value, but in reality, the value wasn’t zero, instead the value is inherited from the desktop value. This made tablet and mobile values hard to change since typing in zero won’t have any effect.

We’ve changed things, and to make things consistent, now all tablet and mobile values show up as blanks. Now you can set any value (including setting it to zero), and they should now work. Then if you want to reset it to the default, then just put in a blank value (or hit the reset button).

This makes for a much more easy editing experience all throughout, and we’re excited for you to try it!

New: Low-Highlight Text Format

In Stackable, we have a button in your toolbar that allows you to turn any text into highlighted text. While this is helpful, we’ve expanded this and added in a new format style called low-highlight text (sometimes called half-highlights) which I think was popularized by Squarespace.

I find this low-highlighted text very appealing and I’m excited to see whether you can put it to use in your website headings.

Can’t achieve what you want with your Gutenberg blocks?
Get the most powerful page building blocks with Stackable!
Learn more about Stackable Premium.

Icon List Block Icon Enhancements

When we notice something being requested again and again by our users (that’s you!), we take that as a signal to add that feature in. It’s a great feedback system, so if you have any suggestions, let us know in the comments at the end of this post.

We have gotten a lot of requests to allow any icon for the Icon List block, and to allow different icons per list item. Needless to say, we added these requests in, plus more.

Icon List Block Enhancement #1: Pick Any Icon (or Upload Your Own)

The Icon List Block before only had 5 types of icons with 3 variations each. This was very limiting for quite a few people. Now, we made it so you can pick any Font Awesome icon, similar to how you can pick from any icon in the Icon Block and Button Block.

If you have a custom SVG icon that you want to use, you can also just drop it in there to use it in your icon list. Sweet!

Icon List Block Enhancement #2: Pick Different Icons per Row

You can now also pick different icons for every list item you have.

To do this, just click on any bullet icon in the Icon List Block to open up the icon picker. From there, you can pick a different one or upload your own SVG icon.

Icon List Block Enhancement #3: More Icon Options

Lastly, we’ve added in a bunch more options if you want to spruce up your bullet icons. Now you can also change their opacity, rotate them, and specify different icon sizes for desktop, tablet or mobile.

Kadence Theme Global Palette Support

Last, but not the least, if you’re using Kadence Theme, then we’re happy to say that we’ve added in support for their global color palette.

Now, when you pick a color from Kadence’s global color palette in a Stackable block, any future palette changes would also apply to Stackable.

This is similar to the global color palette of the Blocksy Theme.

Final Words

Aside from the new things above, we’ve also fixed and addressed a few notable issues:

  • Font size options now try and detect the actual font sizes of your theme.
  • Responsive columns didn’t take effect in the Icon List Block.
  • Categories and Tag taxonomies now appear custom post types in the Blog Post Block.
  • Container Blocks will no longer add large paddings in mobile.

Whew! This was a lengthy update post.

If you’ve reached this far into the article, I’d like to thank you for your time, and I hope you enjoy this new Stackable update.

Source link

Related Articles

Leave a Reply

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

Back to top button