{"id":27362,"date":"2023-05-16T10:47:41","date_gmt":"2023-05-16T15:47:41","guid":{"rendered":"https:\/\/wpstackable.com\/?p=27362"},"modified":"2023-05-16T10:47:42","modified_gmt":"2023-05-16T15:47:42","slug":"introducing-new-stackable-ui","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/introducing-new-stackable-ui\/","title":{"rendered":"Introducing: New Stackable UI"},"content":{"rendered":"\n<p data-block-type=\"core\">At Stackable, we\u2019re always thinking about how we can make our plugin better for our users. For the past few months, we\u2019ve 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.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p data-block-type=\"core\">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\u2019re excited to introduce the new and improved Stackable UI!<\/p>\n\n\n\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-2fea819\" data-block-id=\"2fea819\"><p class=\"stk-table-of-contents__title\">Table of Contents<\/p><ul class=\"stk-table-of-contents__table\"><li><a href=\"#about-this-update\">About this Update<\/a><\/li><li><a href=\"#why-change-the-ui\">Why change the UI?<\/a><ul><li><a href=\"#better-quality-of-life\">Better Quality of Life<\/a><\/li><li><a href=\"#additional-controls\">Additional Controls<\/a><\/li><li><a href=\"#better-organization-of-controls\">Better Organization of Controls<\/a><\/li><\/ul><\/li><li><a href=\"#whats-new-with-stackables-ui\">What\u2019s New with Stackable\u2019s UI?<\/a><ul><li><a href=\"#inspector\">Inspector<\/a><ul><li><a href=\"#new-inspector-organization\">New Inspector Organization<\/a><\/li><li><a href=\"#opens-most-relevant-panel\">Opens Most Relevant Panel<\/a><\/li><\/ul><\/li><li><a href=\"#controls\">Controls<\/a><ul><li><a href=\"#content-width\">Content Width<\/a><\/li><li><a href=\"#better-column-width-adjustment-controls\">Better Column Width Adjustment Controls<\/a><\/li><li><a href=\"#flexbox-controls\">Flexbox Controls<\/a><\/li><li><a href=\"#align-last-block-to-bottom\">Align Last Block to Bottom<\/a><\/li><li><a href=\"#tablet-and-mobile-column-arrangement\">Tablet and Mobile Column Arrangement<\/a><\/li><li><a href=\"#inner-column-spacing-control\">Inner Column Spacing Control<\/a><\/li><li><a href=\"#better-support-for-margin-auto\">Better Support for Margin Auto<\/a><\/li><li><a href=\"#support-for-floating-columns\">Support for Floating Columns<\/a><\/li><\/ul><\/li><li><a href=\"#visual-guides\">Visual Guides<\/a><\/li><li><a href=\"#lightbox\">Lightbox<\/a><\/li><\/ul><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"about-this-update\" data-block-type=\"core\">About this Update<\/h2>\n\n\n\n<p data-block-type=\"core\">The new UI is released with Stackable version 3.8.0. Throughout the development process of the new UI, we\u2019ve 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.<\/p>\n\n\n\n<p data-block-type=\"core\">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:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Get to know the New Stackable Inspector UI\" width=\"900\" height=\"506\" src=\"https:\/\/www.youtube.com\/embed\/RukT93hvzn8?start=1&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-change-the-ui\" data-block-type=\"core\">Why change the UI?<\/h2>\n\n\n\n<p data-block-type=\"core\">We realize that this is a big change and it hasn\u2019t even been that long since the jump from Stackable V2 to V3 but we wanted to change the Stackable UI for three reasons:<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"better-quality-of-life\" data-block-type=\"core\">Better Quality of Life<\/h3>\n\n\n\n<p data-block-type=\"core\">We\u2019ve 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\u2019ve 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\u2019ll explain these in more detail later on!<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"additional-controls\" data-block-type=\"core\">Additional Controls<\/h3>\n\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"better-organization-of-controls\" data-block-type=\"core\">Better Organization of Controls<\/h3>\n\n\n\n<p data-block-type=\"core\">We\u2019ve changed the tabs in the inspector and made it more organized. We\u2019ve 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"whats-new-with-stackables-ui\" data-block-type=\"core\">What\u2019s New with Stackable\u2019s UI?<\/h2>\n\n\n\n<p data-block-type=\"core\">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:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"inspector\" data-block-type=\"core\">Inspector<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"new-inspector-organization\" data-block-type=\"core\">New Inspector Organization<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-1-522x1024.png\" alt=\"\" class=\"wp-image-27420\" width=\"261\" height=\"512\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-1-522x1024.png 522w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-1-153x300.png 153w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-1.png 560w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Control panels used to be scattered among the old tabs of the Stackable Inspector. Now, we\u2019ve 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.<\/p>\n\n\n\n<p data-block-type=\"core\"><\/p>\n\n\n\n<p data-block-type=\"core\">As an example, here\u2019s 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.<\/p>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-eb4a66c\" data-block-id=\"eb4a66c\"><style>.stk-eb4a66c-column{--stk-column-gap:50px !important}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-eb4a66c-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-53bd3fc\" data-v=\"4\" data-block-id=\"53bd3fc\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-53bd3fc-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-53bd3fc-inner-blocks\">\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-6bbc7e0\" data-block-id=\"6bbc7e0\"><style>.stk-6bbc7e0{box-shadow:0 5px 30px -10px rgba(18,63,82,0.3) !important}<\/style><figure class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-27422\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-2-1.png\" width=\"560\" height=\"1152\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-2-1.png 560w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-2-1-146x300.png 146w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-2-1-498x1024.png 498w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/figure><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-e62be22\" data-v=\"4\" data-block-id=\"e62be22\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e62be22-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e62be22-inner-blocks\">\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-faf586d\" data-block-id=\"faf586d\"><style>.stk-faf586d{box-shadow:0 5px 30px -10px rgba(18,63,82,0.3) !important}<\/style><figure class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-27423\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-3.png\" width=\"562\" height=\"1174\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-3.png 562w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-3-144x300.png 144w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-3-490x1024.png 490w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/figure><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p data-block-type=\"core\">This change really makes it easier to locate different control panels and making designers\u2019 workflows easier to create complex layouts.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"opens-most-relevant-panel\" data-block-type=\"core\">Opens Most Relevant Panel<\/h4>\n\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_open_relevant_panel.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Additionally, when you\u2019re in the process of designing a whole page and you\u2019re going back between different blocks, it opens up the last opened panel.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-12.17.29-PM-1.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"controls\" data-block-type=\"core\">Controls<\/h3>\n\n\n\n<p data-block-type=\"core\">Moving forward, we\u2019ve 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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"content-width\" data-block-type=\"core\">Content Width<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-4.png\" alt=\"\" class=\"wp-image-27426\" width=\"348\" height=\"309\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-4.png 696w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-4-300x266.png 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">We\u2019ve had the Content Width control before but what it did wasn\u2019t 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 <em>inside<\/em> a block, so you can have the block occupy the full width, but limit the content to only the middle. Just like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-5-1024x543.png\" alt=\"\" class=\"wp-image-27427\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-5-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-5-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-5-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-5-1536x815.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-5-2048x1087.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"better-column-width-adjustment-controls\" data-block-type=\"core\">Better Column Width Adjustment Controls<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_3.png\" alt=\"\" class=\"wp-image-27369\" width=\"346\" height=\"267\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_3.png 692w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_3-300x232.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Aside from dragging the sides of your columns, there\u2019s now a new inspector control to adjust column widths.<\/p>\n\n\n\n<p data-block-type=\"core\">The context for this change was that it wasn\u2019t 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_4.png\" alt=\"\" class=\"wp-image-27370\" width=\"344\" height=\"217\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_4.png 688w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_4-300x189.png 300w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"flexbox-controls\" data-block-type=\"core\">Flexbox Controls<\/h4>\n\n\n\n<p data-block-type=\"core\">Previously, we had a \u201cFit all columns to content\u201d toggle which was a partial implementation of flexbox. You won\u2019t 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6.png\" alt=\"\" class=\"wp-image-27428\" width=\"414\" height=\"382\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6.png 828w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6-300x277.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6-768x709.png 768w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">You also have additional flexbox controls for your vertical or horizontal inner blocks! This brings much more layout options at your fingertips.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-7.png\" alt=\"\" class=\"wp-image-27429\" width=\"344\" height=\"415\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-7.png 688w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-7-249x300.png 249w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">It\u2019s now easy to create this type of layout:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_12.png\" alt=\"\" class=\"wp-image-27378\" width=\"347\" height=\"134\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_12.png 694w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_12-300x116.png 300w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">The example above is just 1 column, with 2 blocks inside, the column\u2019s Inner Block Direction is set to Horizontal, and Inner Block Justify to Space Between, and Inner Block Alignment to Center.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-1.07.12-PM-1.mov\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"align-last-block-to-bottom\" data-block-type=\"core\">Align Last Block to Bottom<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_align_last_block.png\" alt=\"\" class=\"wp-image-27432\" width=\"347\" height=\"134\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_align_last_block.png 694w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_align_last_block-300x116.png 300w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">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\u2019s how it looks like in the Block Editor:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-1.10.43-PM-1.mov\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"tablet-and-mobile-column-arrangement\" data-block-type=\"core\">Tablet and Mobile Column Arrangement<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_6.png\" alt=\"\" class=\"wp-image-27372\" width=\"345\" height=\"172\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_6.png 690w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_6-300x150.png 300w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Rearranging column order for tablet and mobile is now a <strong>Free Feature<\/strong>, and will now be found inside the Layout tab &gt; Layout panel. It\u2019s 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.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_7.mp4\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"inner-column-spacing-control\" data-block-type=\"core\">Inner Column Spacing Control<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_8.png\" alt=\"\" class=\"wp-image-27374\" width=\"348\" height=\"160\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_8.png 696w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_8-300x138.png 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Moving on, there\u2019s now a way to control all the column spacing of all Inner Columns in one single go. Before, you\u2019d used to go to each Inner Column block and adjust their column spacing one by one.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"better-support-for-margin-auto\" data-block-type=\"core\">Better Support for Margin Auto<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_14.png\" alt=\"\" class=\"wp-image-27380\" width=\"347\" height=\"305\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_14.png 694w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_14-300x264.png 300w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">In CSS, when you use margin \u201cauto\u201d it usually results in the element pushing the other elements &#8211; and is very helpful if you want to build layouts where the last one sticks to the bottom, or to the side.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-4.01.57-PM-1.mov\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">This didn\u2019t really work well before and while the \u201cauto\u201d was applied in the frontend (sometimes), it didn\u2019t appear well in the editor. Now we\u2019ve added support for margin auto, so if you add it into a block that\u2019s inside a column with other blocks, it should push the block correctly.<\/p>\n\n\n\n<p data-block-type=\"core\">This also works for Button Groups!<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-4.18.54-PM.mov\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"support-for-floating-columns\" data-block-type=\"core\">Support for Floating Columns<\/h4>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_17.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">It\u2019s also now possible to <strong>float<\/strong> an Inner Column block (provided you set it to align to top).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"visual-guides\" data-block-type=\"core\">Visual Guides<\/h3>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-4.23.28-PM.mov\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">We\u2019ve 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.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-10-at-4.24.53-PM.mov\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Additionally, outlines appear every time you select justify or alignment options in our flexbox controls so users can see how the block changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"lightbox\" data-block-type=\"core\">Lightbox<\/h3>\n\n\n\n<p data-block-type=\"core\">Now you can display media, such as images, videos, and embeds in an overlay on top of a website through the <a href=\"https:\/\/wpstackable.com\/lightbox\/\" data-type=\"URL\" data-id=\"https:\/\/wpstackable.com\/lightbox\/\">Stackable Lightbox<\/a> feature. This gives users the ability to have a closer look at a selected medium. This is applicable to columns, images, or even buttons.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/stackable_new_ui_18.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" data-block-type=\"core\">Conclusion<\/h2>\n\n\n\n<p data-block-type=\"core\">We\u2019re continuously improving Stackable and in this release, we\u2019ve made it easier for you to create better layouts and be more efficient in building websites with the WordPress block editor.<\/p>\n\n\n\n<p data-block-type=\"core\">We have a lot more in store for you so watch out for any updates on our end.<\/p>\n\n\n\n<p data-block-type=\"core\">Update Stackable now and see these changes for yourself. Let us know how you like this brand new user interface in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At Stackable, we\u2019re always thinking about how we can make our plugin better for our users. For the past few months, we\u2019ve 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.<\/p>\n","protected":false},"author":18,"featured_media":27363,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-27362","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Saving-Block-Defaults-1.jpg",2400,1248,false]},"post_excerpt_stackable_v2":"<p>At Stackable, we\u2019re always thinking about how we can make our plugin better for our users. For the past few months, we\u2019ve 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\u2019re excited to introduce the new and improved Stackable UI!&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Alexandra Yap","url":"https:\/\/wpstackable.com\/blog\/author\/alex\/"},"comments_num_v2":"14 comments","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=27362"}],"version-history":[{"count":22,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27362\/revisions"}],"predecessor-version":[{"id":27484,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27362\/revisions\/27484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/27363"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=27362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=27362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=27362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}