Using Stackable Block Layouts

One of the unique features of Stackable is having the option of choosing between different layouts for each block. Learn more about the basics of Stackable layouts and how you can maximize the benefits of this very cool feature.

What are Layouts?

Layouts are the pre-set placement of different blocks elements for each block. You can think of layouts as the “base” to start you off in designing your blocks.

Here is a feature block with a basic layout. We’ve included an image to make it easier to visualize.

Feature Block Basic Layout

Description for this block. Use this space for describing your block.

How can I choose a layout?

Choosing the layout that would best fit your website is one of the first steps you will take in designing with Stackable, and it’s very easy.

Each Stackable block already comes with two layouts for free – basic and plain layouts. To choose your block layout, go to the Layout tab in the inspector and you can already choose the layout that you want to use.

Can I get more layout options?

If you want even more layout options than the basic and plain, Stackable Premium will let you choose from more than 120+ layout options across all Stackable blocks. Here are some premium layouts for the feature block:

Can I change the layout I originally chose?

Yes, you can always change the layout you’ve chosen even after inputting your block contents. To do this, just go back to the Layout tab and switch to the layout that you prefer.

Don’t worry if you’ve already designed your block extensively. You can always switch between block layouts with just one click without losing any of your content.

Let us know what else you want to learn about layouts and other Stackable features.

Want to engage more?

Join the Stackable Facebook Community.

Learn more about Stackable, engage with the Stackable team, and share interesting insights and with fellow Stackable users.

Be part of our community today.

What Happens If I Uninstall Stackable

If you’re using Stackable in your site and decided to stop using the plugin, the following things would happen:

1. The blocks would show an error

In the block editor, the Stackable blocks would show an error since the plugin that supplied the blocks aren’t available anymore.

This is the normal behavior across any block that gets uninstalled, but it just means that they become uneditable in the block editor.

The blocks themselves would still remain in your page’s content though, and if needed you can still edit them manually via Code Editor.

2. Some blocks would lose their styles in the frontend

Since Stackable was removed, the main stylesheet that supplies all the styles for our blocks won’t be loaded anymore. Some Stackable blocks would look a bit wonky since they’re going to be missing some essential styling.

Some Stackable blocks would somewhat continue to look fine though, like Button blocks and Icon List blocks. And your buttons should still jump to the link they’re pointing at.

3. Some blocks would stop working in the frontend

In the frontend, for some functional Stackable blocks such as the Accordion block, Video Popup block or the Expand block, they would stop working.

The accordions would remain open, the video popup won’t pop up anymore and the expand block won’t show the expanded text.

This would happen because the scripts that contain the functionality for those blocks won’t be loaded anymore.

Troubleshooting after Updating to Version 2

Updated December 1, 2019

After months and months of hard work, V2 is finally here! This update has changed the face of Stackable, and together with such a huge update comes the risk of some (minor) kinks that may temporarily affect blocks that were built with Version 1.

We’ve spent a considerable amount of time testing this latest version to make sure that it does not break anything on your published site. However, since some minor hiccups might occur, here are some troubleshooting guides on what to do just in case you do encounter a problem. We will update this post as more and more people upgrade to v2.

1. Everything looks broken in the frontend

If everything looks broken in your frontend after upgrading, please try out these solutions:

Solution 1

The styles being loaded in your frontend may still be the old styles from version 1.

  • Please try clearing or purging the caches created by your caching plugin (like W3 Total Cache or WP Super Cache), server-side caching solution (like SG Optimizer), or DNS caching (like CloudFlare).
  • If you have speed optimization or minification plugins that remove query var strings from files loaded; or minify and combine stylesheets, it’s possible that these may force your site to load cached copies of the old stylesheets. Please try clearing or purging their current files.
Solution 2
  • It’s possible that Stackable may have failed to load the backward compatibility styles. Please head over to your backend admin, then navigate to the “Stackable” menu. Once there, scroll to the very bottom and make sure that the “Load version 1 block stylesheet for backward compatibility” is checked.

For those who curious about how this works, this option is automatically checked if you upgraded from version 1. There are a lot of changes between version 1 and version 2, and in order to ensure fast loading speeds of your site, all the old styles have been separated into another stylesheet. This stylesheet is only needed if you use version 1 blocks.

2. Reusable blocks that have Stackable blocks look broken

After updating, and you’re using reusable blocks, there’s a chance that you may notice your reusable blocks to look broken.

  • When this happens, you may need to edit your reusable blocks and update them (even without changes) in order to trigger the blocks inside it to migrate to the new Stackable blocks.

Unfortunately, this needs to be done because the block editor doesn’t yet handle block updating in reusable blocks well.

3. Space between a Separator Block and another block

After updating, you might see a space between a Stackable Separator block and an adjacent block.

When this happens, you have 2 possible solutions depending on the adjacent block you are using:

Solution 1
  • If the adjacent block you are using is another Stackable block, you can turn on the built-in separator for the adjacent block (yes, all Stackable blocks now have built-in separators), and remove the stand-alone Stackable separator block
Solution 2
  • You can also adjust the margin in the Stackable Separator block you are already using so the space will no longer appear in the front end

4. Some Text Colors Inside Containers might Reset when Editing Existing Pages

While all text colors are maintained in the published view, you might encounter some text colors reverting back to the theme colors. This will not automatically happen and might occur only after you edit your existing page.

  • In case this happens, it would be safest to manually change the text colors to your preferred colors

5. Block Error Prompt

While this is not expected to happen, in editing mode you might encounter the prompt “This block contains unexpected or invalid content”.

Solution 1
  • If this happens, the first step is to attempt recovery. You can do this by clicking on the three dots within the error prompt panel and clicking “attempt block recovery”.
Solution 2
  • While your block showed errors in the block editor, there’s a chance that your block would still look great in the frontend. So a possible solution would also be to leave the block as-is with an error.
Solution 3
  • When all else fails, you can recreate your block. The best thing about this solution is you get to explore the different new features of the block.

6. Other Errors after Updating to V2

If there are any other errors that you encounter after updating to V2 that cannot be solved by the troubleshooting tips above, please let us know. Our support team is always ready to help you out!

You can also report any bugs on the Stackable Git Hub Repository.

Want to engage more?

Join the Stackable Facebook Community.

Learn more about Stackable, engage with the Stackable team, and share interesting insights and with fellow Stackable users.

Be part of our community today.