How to Use Block Styles

This is a premium feature

Block Styles let you save a design of a block and easily reuse it across your website. With Block Styles, you can create and manage multiple design styles per block.

Creating a New Block Style

Clicking the Save New Block Style button will save a new style based on the current design settings of the block and make it available for reuse across all blocks of the same type.


Updating Block Style

When changes are made to the selected style, an Update Style button will appear and the selected style label will display “(Modified)”. Clicking the Update button will save the changes made to the current style. All blocks using this style across your site will automatically reflect the updated block style.

Note: Some block attributes add classes to the block but do not generate their own CSS styles. As a result, these attributes may not be included when updating a Block Style. More on this below.

Unlinking Block Style

Unlinking a style will retain the current design and attributes of the block, but it will no longer be connected to the saved Block Style. This is different from selecting the Default Block Style, which will reset the block’s design to its original default settings and clear any custom styles/non-content attributes applied.

This is useful when you want to have a one-off design that won't sync with the block style.

Managing Block Styles

You will find the Block Styles panel when you open the Stackable Design System settings from the upper-right corner of the Editor.

Renaming Block Styles

You can rename the Block Style by clicking on the name in the Block Styles panel.


Rearranging Block Styles

By default, saved Block Styles in the Block Styles panel will appear first. It will be arranged in the order that they were added.

However, you can rearrange it to see your most used Block Styles first. To do this:

  1. Open the Global Block Styles settings
  2. Click and hold the three-line icon on the Block Style that you want to move.
  3. Drag it to the position you want to see it in.

Deleting Block Styles

To delete a saved Block Style, click on the Trash button beside the Block Style you want to remove.

Warning: deleting a block style will result in existing blocks that use it go back to using the default block style. If ever you want to bring back a deleted block style, take note of the deleted block style's slug, then you can create a new one and re-use the slug from the deleted one. Doing so will re-apply the block style.

Why does it warn that some attributes can’t be changed later or cannot be updated?

Block Styles under the hood uses a method called class-based styling. This means that CSS classes are utilized in order to globally apply styling across block styles.

Technically, most of Stackable's block attributes generate some form of CSS, making them ideal for class-based styling. However, there are some block attributes that are not based on CSS (for example, they may change the internal structure of the block or add classes) thereby making them not possible to be included in the class-based styling. In such cases, future updating of the these attributes are not possible. But they are still included in the block style