This update, we’re bringing you a game-changing way to design once and apply everywhere: Global Block Styles. With Global Block Styles, you design a block once — and instantly reuse it anywhere on your site. Need to make a change? Update it once and every instance updates like magic. Total control, zero repetition. This is how site-wide consistency should work.
The Old Way: Design Per-Block
Stackable used to be only a provider of advanced blocks. Hence, the old way of using Stackable was you would add a Stackable block, tweak it, then copy and paste the block to other pages. Ugh. Very inefficient.
That was before, now our goal is all about providing you with an amazing workflow. We’ve introduced before the Design System — a central place where you can adjust the “design system” followed by all Stackable blocks. Now, we’re bringing it a huge step further.
Block Styles are here!
For every Stackable block, now you can save their current styles into a “Block Style“. You can then head over to any block and pick that Block Style as your new base style.
Here’s Block Styles in action:
Here’s how you use it. To create a Block Style, you just select any block, and you’ll notice this new area at the top that says “Block Style: Default” — this means that the block is currently using the “default” block style as its base.
Now, make sure that you have a block with some cool styles applied to it. Then you can click on your Block style and click on the Save New Block Style button. Enter in a name (optionally a slug for it, more on the slug later), then click on Save Block Style.
Afterwards, when you open the Block Styles for any block, you’ll see the new entry we just created. All same-type blocks will have this new option. To use it, just choose it.
It’s easy as that!
What Problem Do Block Styles Solve?
Block Styles is for Reusability and workflow efficiency!
Block Styles remove the need for you to copy and paste styles or blocks, and gives you more design workflow options at your disposal.
Now your blocks can adjust to your design requirements. If your design has 3 types of buttons: let’s say a normal one, a secondary one, and a plain one, each having their own distinct looks; you can simply save each design as a block style.. design once and and reuse everywhere.
This new feature gives you a ton of major benefits, let me show you below.
1. Block Styles Are Reusable Class-Based Styles
Whenever you create a new block style, under the hood, Stackable converts all your block options into a class-based style. This class is then used whenever a block uses the block style. Class-based styling (or in our case, should we call it block-based styling?) drastically reduces the amount of CSS generated in your page, resulting in leaner markup.
stk-block-column--style-gradient class changing to stk-block-column--style-outilne near the bottom of the browser inspector.The slug I mentioned earlier is used in this class-based style naming. We allow you to change the slug because just incase the block style got deleted or is not available, you can quickly create a new block style for the missing one by using the same slug.
2. Block Styles Are Synced
In addition to being a form of class-based styling, all block styles are synced with each other. This syncing mechanism gives you the ability to easily tweak block styles after-the-fact.
If you want to update your block style with some changes, you can simply do your adjustments on a block that has your block style, then when you’re ready to sync your changes, just click on the Update style button. All blocks that use the block style will follow suit!
There is also an unlink block style option, in case you want the styles to be “un-synced” from the rest.
3. Block Styles Are Overridable
If you select a block style, Stackable doesn’t restrain you from doing additional adjustments to it (not unlike synced patterns where you can’t override the styles at all). You are free to further adjust the styles of your block. In fact, all the block options are still available for you to use.
Your changes go on top of the block style you picked, and block styles retain their syncable nature, even if you have additional adjustments.
To illustrate, let’s say you’re already using a block style for one of your buttons, but for this instance, you want the button to have a heavier shadow. If you do this one-off shadow adjustment, the block style would still be synced, and your button would still get any style update changes if any.
Other Changes
Version 3.18.0 comes with a slew of other changes and fixes, the most notable ones are:
- We have removed the Freemius SDK from the free version
- The Stackable settings sidebar is now called Stackable Design System
- Block Defaults feature has been sunset, replaced with Block Styles and the Design System – but still with backward compatibility
You can read the full change log here.
Conclusion
I hope you enjoy this new innovation as much as we did creating it! Block Styles has been on our radar for quite some time, and we’re so excited to finally get it out to everyone.
