Tag: Updates

In our latest release, we’re delighted to announce that the Tabs block has now finally been added to our wide selection of Stackable blocks! Make sure you update to v3.10.0.

One of the biggest challenges in web design is managing a wealth of information within the constraints of a screen. This is where Stackable’s Tabs block shine. You can effectively divide content into different tabs to manage your screen space. The Tabs block comes in handy if you don’t want users to scroll through long pages of content!

The Stackable Tabs block is robust and can go beyond the typical looks and usage of tabs. For example, with a little tweaking of the designs, you can leverage the Tabs block to build a pricing table switcher that can let your visitors toggle between “monthly” and “annual” payment plans.

Beyond functionality, tabs can contribute significantly to the aesthetics of a website when blended within your page. Customizable tab designs allow for consistency with the overall look and feel of a site, which is crucial for brand identity. Stackable’s Tabs block includes various design controls and settings to adjust the color, size, typography, and even add icons, ensuring they perfectly match your site’s design theme.

Dive into Stackable’s New Tabs Block

Like some of Stackable’s blocks, the Tabs block is actually comprised of multiple smaller blocks. When you add a Tabs block, the hierarchy looks like this in the List View:

The Tabs block is the main block that contains everything. If you need to change something in the overall appearance of a Tabs block, then make sure this is the block that is selected.

The Tab Labels block will contain your “tab” buttons. Select this if you want to change the appearance of the clickable tab “buttons”.

The Tab Content block is the wrapper around the entire tab content area. Select this if you want to change the appearance of the entire panel that will contain the content of the tabs.

The Inner Column blocks correspond to the tabs inside the main Tabs block. This is what will contain the blocks or content that you want to add to each tab.

Here’s a video to see how each block pertains to different “sections” of Stackable’s Tabs block:

This multi-block approach enables you to have finer control of how each part of the tabs look like.

Within each tab, or Inner Column block, you can populate it with as much content as needed, allowing you to include blocks like Heading, Image, Card, Button, Feature, and so much more, all neatly organized under individual tabs.

All you have to do is select a tab and click the plus (+) button to add a block. You can search for a block in the Search bar, or you can click on the Browse all button to open the Inserter.

The Stackable Tabs Block comes packed with an array of customizing features that bring your content to life. Here are the various settings and design controls we’ve jam packed into the Tabs block:

Tab Orientation

Stackable’s Tabs Block allows you to choose between horizontal and vertical orientations. This gives you the option to have a completely different flow of your webpage. This control can be found in the main Tabs block’s Inspector settings (Layout tab > Layout panel).

Horizontal tabs are the most common and work well for most websites, but vertical tabs can provide a unique visual appeal and are a good fit for certain design concepts.

Tab Panel Offset

The Tab Panel Offset feature enables you to adjust the space between your tab labels and the tab content. By default, this is set to 16px.

Having control over this spacing allows you to somewhat detach the Tab Labels from their contents, to achieve those designs that do not look like your typical tabs.

You will find this setting by selecting the main Tabs block, and navigating to the Layout panel of the Layout tab.

Initial Tab Open

This feature gives you control over the user’s first interaction with your tabbed content. You can specify which tab should be opened first when the page loads, directing your visitors’ attention to the content you deem most important or relevant.

This can be particularly useful for highlighting featured products, special offers, or key information about your services.

Tab Styling

Click on the Tab Labels block, and you’ll see four different preset styles that you can choose from: Default, Classic, Button, and Centered Pills. You can further refine the design to your liking after picking one.

You can change the button and text colors, adjust button padding, and add customizable borders.

Each of these styling options ensures that your tabs are not only functional but also visually appealing. These options help your tabs to stand out, guide your user’s navigation, and maintain a seamless look and feel throughout your website.

Tab Active State Styling

The ‘active state’ is the state of a tab when it is currently selected or being interacted with. With Stackable’s Tabs Block, you can customize the look of this active state, allowing you to provide visual feedback to your users about their current location within your content.

You can opt to change the button and text color, and add customizable borders to the active tab, differentiating it from the other tabs. This helps make navigation more intuitive and less confusing for your website visitors.

Icon Option:

Stackable’s Tabs Block allows you to add icons to your tabs. This feature takes your tab design a step further by incorporating visual cues to guide your user’s interaction.

You can assign different icons for each tab to represent each tab. Just click on the icons on each Tab to open the icon selector.

Icons are particularly helpful when screen real estate is limited, such as on mobile devices, as they convey information efficiently without taking up much space.

Conclusion

Stackable’s new Tabs Block, packed with advanced features and customization options, takes the tabbed interface to the next level. Whether it’s styling the tabs and their active states, adding icons for better visual communication, or adjusting the layout with options for initial tab open, tab orientation, tab panel offset, and tab panel effect – Stackable’s Tabs Block offers you an unprecedented level of control and flexibility.

Update your Stackable to the latest version now and start exploring the potentials of Stackable’s Tabs Block today and redefine your web design experience!

When it comes to engaging and captivating website visitors, the layout and presentation of the content is as crucial as the content itself. There are now many ways to present information—one of them being a carousel.

Carousels are very versatile because it can be utilized in different use cases, like storytelling, presenting a gallery, or highlighting featured content. With this in mind, Stackable brings to you our new Carousel block—a dynamic and highly customizable tool to showcase content on your website through sliders and carousels.

In this article, we will introduce you to the power-packed features of the Carousel block and what you can create with it.

What is a Carousel or Slider?

A carousel, often synonymous with a slider, allows you to display multiple pieces of content (such as images, text, videos) in a rotating or sliding format. It saves space, keeps the design uncluttered, and enables the audience to interact with or consume content in an engaging manner.

Stackable’s Carousel Block

We’ve made creating carousels and sliders very effortless and easy. With the Carousel block, you don’t need any coding knowledge or separate slider plugins. Here’s what makes Stackable’s Carousel block a great asset for any web creator:

What are the features of the Carousel block?

Customizable

You can add literally any block inside the Carousel block. Whether it is text, images, videos, buttons, or a combination of these elements. Simply add a block by clicking the plus button like in the video below:

If you want to add more blocks, just select the Inner Column and click on the inserter.

Autoplay and Looping

Stackable’s Carousel block has an autoplay toggle that will slide content automatically after a set interval. This is so that you can display the different slides without requiring any interaction. When the autoplay toggle is turned on, it also automatically loops the carousel so that when the carousel reaches the last slide, it loops back to the first.

You will find this setting by navigating to Layout tab > Layout Panel.

Transition Effects

You can set what type of carousel you will be displaying on your page with the Carousel Type controls.

Here’s what it looks like when the carousel is set to Slide.

And with the slide option, you can also set the carousel to show one or more slides at a time.

On the other hand, here is an example of a carousel with the Fade option selected.

User Control

You can opt to add some controls so that website visitors have the ability to manually navigate through a carousel. You can even further customize how the dots look like in the Inspector.

Responsiveness

The Carousel block can be made responsive to adapt to different screen sizes and devices. On smaller screens, the carousel may resize or show fewer items at once.

How to Create a Slider or Carousel using Stackable’s Carousel Block

To get started, simply add the Carousel block to where you want your slider to appear. From there, you can start adding slides, customizing content, and styling the appearance and animations.

Here’s an example of a Carousel block:

We’ll teach you how easy it is to recreate this slider using the Stackable Carousel block. Below is a sample homepage for a yoga studio. We’ll add a carousel as its hero section and we’ll walk you through how to create it.

First add the Carousel block. Heading over to the Layout tab > Layout Panel, we’ve adjusted this to have one column for now and set the Block and Content Widths to Align Full.

Moving on to the content inside the carousel, we’re adding a Columns block. We’ve selected the 50 / 50 option for this, however, in the Layout tab > Layout panel, we’re adjusting the widths to be 40 / 60 to allot space for our image. Selecting the right inner column, we’ve headed to the Advanced tab > Position panel and set the Right position to 100. Selecting the inner column on the left, we stayed in the Advanced tab > Position panel and set the Z-index to 2 so that it will appear on top of the right column. Going further, we’ve set the left position to 100.

Now let’s add content to our columns inside the first slide of the Carousel block. Inside the right inner column, we’ve added the image and set the height to 600. We’ve also added a beige overlay. Inside the left inner column, we’re adding a heading and a button.

For the button, we headed to the Style tab > Styles panel and selected the Ghost option. We set a custom color for the text and the border. We’ve also changed the font to Hind and changed the transform to Uppercase.

Finally, we just need to change the alignment of the left inner column so it’s centered vertically. Select the Inner Column block, and in the Layout tab > Layout Panel, select Center for the Column Alignment.

Going back to the Carousel block, we navigated to the Layout tab > Layout panel. For the Slides control, we made sure the Clone button was selected and changed the slide number to 3. This was done so that the new slides will clone what we’ve added in the first slide. This makes it so much easier and faster to reproduce similar content.

Now all that’s left to do is to change up the content of each of the slides, such as the heading texts, button texts, and the images.

To finish up, let’s make some finishing touches for our carousel. We’ll leave the Autoplay toggle turned on and the speed as it is so that our carousel plays automatically when users visit this website.

Moving on to the Style tab, we toggled the arrows off and finally, customized the dots to make it cohesive with the rest of the website motif.

Once that’s done, save your draft (or publish) and preview how your Carousel block looks like! Wasn’t that easy?

Conclusion

The Carousel is a great way to showcase content on your website. Thanks to Stackable’s Carousel block, you have a powerful and customizable tool for creating engaging web content. With its ease of use, versatile content options, and customizable features, it’s a fantastic asset for any web designer or content creator using WordPress. Slide into an exciting new way to present your content with the Stackable Carousel block!

Stackable is the ultimate toolkit that turns the WordPress Block Editor (Gutenberg) into a page builder. It’s packed with a lot of features and design options that make designing professional websites much easier. In our latest release, we’ve added a new feature that gives users the ability to create complex layouts without the hassle — Flexbox. This feature enables designers to create responsive layouts with ease. This article will walk you through the new Flexbox controls in Stackable.

What is Flexbox?

Flexbox, short for the Flexible Box Layout Module, is a CSS3 web layout model. It’s used for the arrangement, alignment, and distribution of space among items in a container. Flexbox is widely used due to its ability to create simplified layouts and it’s especially useful in making layout designs responsive.

Flexbox in CSS usually looks like this:

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
}

.flex-item {
    flex: 1;
    padding: 10px;
    margin: 5px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #fff;
}

Flexbox in Stackable

The WordPress Block Editor has very limited options for the arrangement of blocks. With Stackable and the addition of flexbox controls, users can now take advantage of this layout module without writing a single line of code.

Stackable’s flexbox controls will be found in the Layout tab of the Inspector and it’s available for most blocks, mainly the Columns block and the Inner Columns block. Here are the controls to create flexible box layouts with Stackable:

Column Justify: This property sets the horizontal position and spacing of the inner columns.

Column Alignment: This property sets the vertical position of the inner columns relative to the columns block.

Content Vertical Align: This property sets the placement of the column container to top, center or bottom. Available when the min. block height is set to higher than default.

Inner Block Justify: This property sets the horizontal position and spacing of the inner columns.

Inner Block Alignment: This property sets the vertical position of the inner columns relative to the columns block.

Why Use Flexbox in Stackable?

Flexbox provides a more efficient method of creating layouts. Its dynamic nature makes it perfect for creating designs that adjust responsively, which is essential in this day and age. With Stackable’s user-friendly interface, you can make the most out of flexbox without having to write any code.

Significantly enhance your designs and create layouts that are not just visually appealing but also responsive. Whether you are a beginner, web designer or an experienced developer, Stackable’s flexbox is a feature that definitely upgrades your web design toolkit!

At Stackable, we’re always thinking about how we can make our plugin better for our users. For the past few months, we’ve been developing a new user interface that will revolutionize how users design with the WordPress Block Editor. This unlocks a lot of capabilities and design opportunities when it comes to creating layouts.

On March 29, 2023, we opened up a beta program for Stackable users to test the new UI. 60 people signed up for the beta and we received a lot of valuable feedback and suggestions. Now, we’re excited to introduce the new and improved Stackable UI!

About this Update

The new UI is released with Stackable version 3.8.0. Throughout the development process of the new UI, we’ve made sure that all blocks in published pages and websites will be able to transition to the new user interface. It is fully backwards compatible, and will not affect the design of old pages and websites in any way.

To easily transition to the new Stackable UI, you can watch this short video to quickly learn about all the changes that come with this new user interface:

Why change the UI?

We realize that this is a big change and it hasn’t even been that long since the jump from Stackable V2 to V3 but we wanted to change the Stackable UI for three reasons:

Better Quality of Life

We’ve made creating layouts easier with a more efficient workflow and more intuitive interface. The new UI was designed to lessen the jumping between tabs and panels in the inspector. We’ve also added some visual guides for layouts options so you can easily see how your adjustments such as margin and padding value changes affect your block. We’ll explain these in more detail later on!

Additional Controls

This release includes several new features and improvements to existing functionality. The additional controls will give our users the ability to easily create complex layouts without having to jump through hoops.

Better Organization of Controls

We’ve changed the tabs in the inspector and made it more organized. We’ve also improved the panels to make the Inspector simpler to navigate through and more user-friendly. For example, layout controls which you would most likely use for wireframing or building layouts are in its own tab, and style controls which you use to stylize blocks will be in another.

What’s New with Stackable’s UI?

The new Stackable UI promises to be a major improvement over the previous version and here are all the new changes that come with it:

Inspector

New Inspector Organization

Control panels used to be scattered among the old tabs of the Stackable Inspector. Now, we’ve categorized controls into three main purposes: Layout, Style, and Advanced. Now, all controls that are used for customizing block layouts are in the Layout tab, all controls used to stylize blocks are in the Style tab, and all complex controls will be in the Advanced tab.

As an example, here’s the Inspector for an Inner Column block. The Container panel will now be in the Layout tab. When turned on, Container styling panels will be available in the Style tab.

This change really makes it easier to locate different control panels and making designers’ workflows easier to create complex layouts.

Opens Most Relevant Panel

Adding a block will open the most relevant panel to design it. For example, if you add any text block (e.g. Heading, Text), it will open up the Typography panel in the Style tab. Or if you add an image block, it will open up the Image panel.

Additionally, when you’re in the process of designing a whole page and you’re going back between different blocks, it opens up the last opened panel.

Users can now easily access to panels they have recently interacted with, without having to navigate through the inspector. Ultimately, even though these were minimal added features, we thought it can save users time and effort, and make the overall user experience more efficient.

Controls

Moving forward, we’ve made a lot of enhancements to Stackable controls to make designing hassle-free and uncomplicated. In the old UI, there were a lot of settings and options that were not so apparent. With that in mind, our development team created solutions that would make the capabilities of our controls easy enough to understand, even for beginners.

Content Width

We’ve had the Content Width control before but what it did wasn’t obvious before, so we brought in the block width option near it. The main use of the Content Width option is to change the width of the content inside a block, so you can have the block occupy the full width, but limit the content to only the middle. Just like this:

Better Column Width Adjustment Controls

Aside from dragging the sides of your columns, there’s now a new inspector control to adjust column widths.

The context for this change was that it wasn’t so obvious before that you have control over how your columns collapsed and have different column widths for tablet and mobile views. Now if you go into tablet or mobile views, the control will change into multiple sliders so you can adjust each column width individually like in the photo below, making it easier to create responsive pages and websites:

Flexbox Controls

Previously, we had a “Fit all columns to content” toggle which was a partial implementation of flexbox. You won’t find this option anymore as this has been replaced by the new Flexbox controls, such as the Column Justify and Column Alignment. This makes arranging blocks inside a column easier. The Flexbox controls will be found in the Layout panel of the Layout tab.

You also have additional flexbox controls for your vertical or horizontal inner blocks! This brings much more layout options at your fingertips.

It’s now easy to create this type of layout:

The example above is just 1 column, with 2 blocks inside, the column’s Inner Block Direction is set to Horizontal, and Inner Block Justify to Space Between, and Inner Block Alignment to Center.

Align Last Block to Bottom

We get a lot of questions on how to create multi-column layouts where the last button is aligned to the bottom (think multiple pricing tiers or multi-column cards), now we have a dedicated button for this! Here’s how it looks like in the Block Editor:

Tablet and Mobile Column Arrangement

Rearranging column order for tablet and mobile is now a Free Feature, and will now be found inside the Layout tab > Layout panel. It’s now easily accessible, and is easy to use as well. You just have to drag the column number to fix the arrangement of your columns.

Inner Column Spacing Control

Moving on, there’s now a way to control all the column spacing of all Inner Columns in one single go. Before, you’d used to go to each Inner Column block and adjust their column spacing one by one.

Better Support for Margin Auto

In CSS, when you use margin “auto” it usually results in the element pushing the other elements – and is very helpful if you want to build layouts where the last one sticks to the bottom, or to the side.

This didn’t really work well before and while the “auto” was applied in the frontend (sometimes), it didn’t appear well in the editor. Now we’ve added support for margin auto, so if you add it into a block that’s inside a column with other blocks, it should push the block correctly.

This also works for Button Groups!

Support for Floating Columns

It’s also now possible to float an Inner Column block (provided you set it to align to top).

Visual Guides

We’ve added a visual aid that helps users see how padding and margin values affect blocks. These appear every time you adjust the paddings and margins in a block.

Additionally, outlines appear every time you select justify or alignment options in our flexbox controls so users can see how the block changes.

Lightbox

Now you can display media, such as images, videos, and embeds in an overlay on top of a website through the Stackable Lightbox feature. This gives users the ability to have a closer look at a selected medium. This is applicable to columns, images, or even buttons.

Conclusion

We’re continuously improving Stackable and in this release, we’ve made it easier for you to create better layouts and be more efficient in building websites with the WordPress block editor.

We have a lot more in store for you so watch out for any updates on our end.

Update Stackable now and see these changes for yourself. Let us know how you like this brand new user interface in the comments below.

Want to up your marketing campaigns and user interface with Stackable? We’ve got you covered with two new Stackable blocks!

In Stackable version 3.7.0, we’re coming out with the new Horizontal Scroller Block and the new Countdown block.

New Horizontal Scroller block

We’re excited to release the new Horizontal Scroller block which is essentially like a slider and a carousel, but it’s more unique.

The Horizontal Scroller block will allow you to create interactive sections that your visitors can scroll through from left to right. It’s an interactive option to display multiple media and text without making your website look too lengthy. With this, you can achieve designs similar to the Netflix’s scrollable show list.

Here’s what a Horizontal Scroller block looks like with Image blocks inside:

You can swipe horizontally by swiping on your touchpad, or by horizontally scrolling using your mouse wheel (shift + mouse wheel) or by dragging with your mouse. Swiping feels very smooth in touch devices!

The Horizontal Scroller block is highly customizable, each slide is a Column block can do just about anything for your content. You can add anything inside each column in your scroller, like headings, text, images, videos, you name it! You can even create a carousel of cards:

You can change the number of columns, the type of snapping, and the size of each slide.

For us, one of the best things in the Horizontal Scroller block is its responsiveness, so you can curate the scrolling experience across different devices. For example, you can set a different Item Width for desktop, tablet or mobile. So you can have a scroller with lots of items when viewed in desktop, but will show one large item when on mobile.

Lastly, you have the option to add a scrollbar or not. And when you do, you have full control over its styling, such as the colors that will be applied to it, the height of the track, and even the radius of the slider.

As an added bonus, you can turn the Horizontal Scroller block into a carousel if you set each item to occupy the whole width!

New Countdown Block

The Countdown block will allow you to add a countdown timer anywhere on your website. Countdown timers are perfect if you want to create a sense of urgency or exclusivity for your marketing campaigns. People usually use these to indicate the start or end of a sale or a launch.

The Countdown block is highly customizable with its different settings and styling options. For the General settings, you have the option to make the countdown timer have a due date or be recurring. If you pick recurring, the countdown will restart after a delay that you specify.

When you choose the Due Date, you can also select what timezone you want to base the timer on. If you select the timezone, the countdown will be synchronized across all your website visitors, no matter what timezone they are located. If you choose the Local Timezone, the countdown will follow the local time of your website visitor’s location.

Once your timer with a due date expires, you can control what happens. You can opt for nothing to happen, hide the block, or display a message once it’s done.

Other than that, you have font and typography styling options for the digits.

You can also choose to hide some countdown items if you don’t need them. You can choose to display only the hours, minutes and seconds without the days if you’re only counting down for less than a day only.

Additionally, you can customize what each time measurement will be labeled as. These are set to the default days, hours, minutes, and seconds. In the example below, we changed the labels to another language, in this case, Filipino.

Other than those styling options, all the usual features that are available to all blocks are also applicable.

Other Notable Updates

In addition to the two blocks we’ve just discussed, here are other notable updates we’ve done the last couple of months. These aren’t new in this version, but we haven’t yet written about them.

Heading Blocks Now Don’t Have Theme Margins

Before when you insert a heading block, it came with some margins that were dictated by the theme. We got a lot of reports that this caused the headings to look broken. We’ve inverted this behavior. We added a toggle that removes the theme-provided margins. Now, when you insert a new Heading block, no theme margins will be added when this toggle is turned off. If you change your mind, you can always go back and turn it on.

Built-in Table of Contents Title

Adding a Heading or Title to your table of contents have always been good for SEO as it will help search engines find your TOC faster. You had to manually add a Heading block to label the Table of Contents block before. Now we’ve added a new title panel to the table of contents. You can toggle it on if you want to directly add it to the TOC block. Or toggle it off if you don’t want it on your page.

Customizable Posts Block Query String

You can now change the Query String of the Posts block’s Pagination Block. Before, when you had a pagination block with the posts block, when you navigate to page 2, you’ll get a url ending with ?stk-query-1=2, which didn’t look pretty and didn’t describe the page well. Now you can customize this and you can set it to something more appealing like ?news-page=2 instead.

Table and Mobile Column Arrangement Option

We added new Advanced Tab > Responsive > Tablet and mobile column arrangement options. Before you could only change the column arrangement for mobile, now you can also change it for tablet as well.

Other improvements and upgrades:

• Editor performance improvements
• Better Dynamic Content database performance
• Fixed the issue where some tablet and mobile styling options were being overwritten by desktop values
• Better PHP 8.1 compatibility
• Lots of small minor bug fixes

Final Words

We continue to give you a better experience with Stackable! With the introduction of our new blocks, we hope that Stackable version 3.7.0 gives you more design opportunities for your website. From the ability to create a highly intuitive horizontal scroller, to creating a fully-customized countdown block that will boost your sales campaigns, and even to the numerous improvements and performance fixes.

Update your Stackable to the latest version now, and let us know what you think!

It’s been a while since we last released a new block. In case you missed it, we’ve been busy upgrading Stackable’s performance so you can have a seamless experience building websites. You can read this article to learn more. Now, we’re excited to present to you our new blocks: the Progress Bar and the Progress Circle.

Visual content is easier to consume compared to text, especially when it comes to data! If you update Stackable to version 3.6.0, you can now present data in a bar or a circle. These are usually used to track progress, whether for projects, goals, or even skill mastery!

These blocks have very flexible controls and styling options! You can set the maximum limit of your progress bar or circle so you have control over what values you can use for it.

Additionally, you get to customize the sizing of the bars. The Progress Bar’s width and the Progress Circle’s size and thickness are responsive, so you can set different values for different viewports.

Make your graphs stand out with colorful hues. When you add a Progress Bar or Progress Circle, you can use single or gradient colors and even change the color of the bar’s background.

You can also choose to animate the Progress Bar or Progress Circle so that when a website visitor scrolls to the section of the page where you added it, the bar will fill up! See how that looks here:

Lastly, you can add text to your progress bar to label it. And you can also add a prefix or a suffix, which will be added before or after the progress value; this could be a unit of measurement, like a percentage.

The Progress Bar and Progress Circle blocks are a great way to make content on your website easier to consume for your audience. To get these blocks, update Stackable to version 3.6.0 now and let us know what you think!

Our latest release greatly improves the editor performance and experience. Stackable is now leaner and faster. Update now to version 3.5.0.

Improved Editor Performance

For the past weeks we’ve been concentrating on greatly enhancing the performance of Stackable in the Block Editor. We actually started introducing speed improvements 4 versions ago, but this by far is the biggest one.

We’ve combed through everything to identify performance bottlenecks and optimized them. We had to do some out-of-the-box thinking in order to refactor and speed things up. This resulted in a huge performance increase in the overall editing experience!

It’s not enough to say that we’ve improved the editing performance, let’s see some numbers!

We performed some tests in order to quantify just how much the performance has changed. We performed common actions one would typically do in the Block Editor and timed them. Then we compared the times from an older version of Stackable (v3.4.1) – this version was the last release before we introduced speed improvements.

Here are the parameters of our tests:

• We created a web page that contained over 225 Stackable blocks
• The blocks on the page are styled and are placed in different columns and in different layouts,
• Each action was timed from the point the action was initiated to when it ended
• We used the timer from our mobile phone (we pressed the start and clicking on the mouse at the same time, then watched like a hawk for when the action finished and quickly hit the stop button),
• Each action was done 3 times then averaged

Here’s how our test page looked like, it contains columns, buttons, images, text, and heading blocks. These are duplicated to reach the 200+ blocks.

We performed the tests using a machine with the specs: AMD Ryzen 5 3500U 2.1Ghz, 16Gb RAM, using Windows 11 and Chrome. Specs aside, the most important thing to note here is that the tests were done using the same machine before and after the speed improvements so we can the relative difference in performance. Your results may vary.

Action	Performance Improvement (v3.4.1 vs v3.5.0)	How It Was Timed
Switching preview from Desktop to Tablet	79% speed improvement	From desktop preview, click the tablet preview button
Switching preview from Tablet to Desktop	78% speed improvement	From tablet preview, click the desktop preview button
Switching preview from Tablet to Mobile	33% speed improvement	From tablet preview, click the mobile preview button
Typing text	Lag decreased significantly	Typing fast on a text block
Sliding a block option	Lag decreased significantly	In a text block, slide the font size option left to right
List View dragging	25% speed improvement	Dragging a block down from the List View
Duplicating block	40% speed improvement	Duplicating a columns block with nested blocks inside
Deleting a block	46% speed improvement	Deleting a columns block with nested blocks inside
Saving the post	7% speed improvement	Clicking the update button and waiting for it to become active again
Autosave	59% speed improvement	Typing on a block, then waiting for autosave to kick in

So as you can see, the speed has drastically improved across the board with Stackable. And you can really feel the difference!

No Bloat

Another improvement is that we’ve restructured how we compiled our JavaScript code. This wasn’t a small feat, but it’s well worth it because it resulted in up to 24% decrease in total JavaScript loaded in the Block Editor.

Smaller JavaScript files mean that your browser will load less when inside the Block Editor, and the less stuff you load, the less memory your browser will consume. So this brings us some memory savings.

If you notice in the chart above, the free plugin’s JavaScript total filesize actually increased by a bit – this is because of some refactored code or newly introduced optimization code. The decrease size can be better seen in the premium version of the plugin.

Another good news is that the plugin zip file saw at most a 34% decrease in filesize as well. This means faster plugin updates, and frees up a little bit more disk space.

Frontend Performance

There are no frontend performance improvements included in this update – only the editor experience has been improved. Don’t fret though, the frontend performance is already very fast!

Just a refresher on what happens in the frontend:

• The frontend loads one 7.1kb CSS file (the premium version loads an additional 1.7kb CSS)
• JavaScript files are loaded only if the block or feature needs it (if you only use the essential blocks, then no JavaScript files are loaded)
• Almost no PHP processes run for the frontend
• CSS is grouped together and optimized to a single style tag
• Images are lazy loaded
• Responsive images are used for reduced image sizes in smaller screens
• And more!

Other Fixes

Here are the other fixes which are included in this release:

• New: Support for block theme contentSize and wideSize
• Fixed: Wide and fullwidth blocks sometimes showed centered in the editor
• Fixed: Some block options not showing up in the editor
• Fixed: Column block’s Content Vertical Align not displaying correctly in the editor
• Fixed: Icon block margin and size options not displaying correctly in the editor #2426
• Fixed: Card block horizontal layout image resizing issues in tablet and mobile
• Fixed: Hero block can get an error when switching layouts
• Fixed: Accordion content in the editor overlapped sometimes
• Fixed: Some styles did not show in the editor when changing hover states
• Fixed: Some shadows flicker or get clipped in Safari #2328
• Fixed: Accordions close adjacent doesn’t work with reduced motion OS setting #2352
• Fixed: Custom Fields PHP warnings #2415
• Fixed: Using custom SVGs with colors can sometimes cause block errors #2411

Conclusion

I hope you guys enjoy the new speed with your Stackable blocks!

If you’ve reached the end of this article, let me give you a tiny reward.. a hint about our next release: progress circle and progress bar blocks.

Creating dynamic websites just got easier: Stackable is now integrated with JetEngine!

Stackable now has support for JetEngine–this means that you can use data stored through JetEngine’s meta boxes in Stackable blocks. Update to the latest version of Stackable and the integration will be automatic!

How to Use JetEngine Meta Boxes with Stackable

To use data from meta boxes you’ve created using JetEngine, click on the Stackable block that you want to insert it to. Then click on the Dynamic Fields icon on the toolbar and select the Dynamic Source. Here, you have four options: Current post, Other posts, Site, and Latest post.

Next, in the Field menu, select the field that you want to fetch data from. You can scroll to look for the specific custom field which will be grouped under “JetEngine”. You can also just type the label you’ve used to name it! Once you click Apply, the text will be replaced with a placeholder. But not to worry, when you preview the page or reload the editor, it should display the data itself!

How to Use JetEngine Taxonomies with Stackable

You will also find the metadata you store for taxonomies made with JetEngine!

To do this, click on the Stackable block you want to insert it to. Click on the Dynamic Fields icon on the toolbar and in the Fields, select Post Taxonomy. There, you can select the Taxonomy you’ve created with JetEngine.

Next, choose the Field you want to fetch data from. Here, since we only have one field, it’s the only one that’s available. We’re going to apply that and then that should be updated in the page or post.

Using JetEngine with Stackable and Query Loops

You could use JetEngine meta boxes wherever dynamic content is available. One example is the core Query Loop block. This is helpful because you can create archives or lists of pages, posts, or just about any post type.

When you add the Query Loop block, just add a Stackable block and click on the Dynamic Fields icon. Select which field you want to display, in this case, we’ll be using the Availability field to display which rental the website visitors can get. 

Once you’re finished making your website dynamic, you may then customize the blocks as you usually would using Stackable’s extensive design controls and features! You could even use Stackable’s ready-made UI kits and have a dynamic website ready in no time. 

To learn more about this integration, you may go through our documentation.

Build with Stackable and JetEngine

This integration is available for Stackable Premium users. If you’re not a Stackable Premium user yet, check out our plans and upgrade now!