{"id":14764,"date":"2020-11-14T02:40:03","date_gmt":"2020-11-14T07:40:03","guid":{"rendered":"https:\/\/wpstackable.com\/?p=14764"},"modified":"2020-11-14T11:31:23","modified_gmt":"2020-11-14T16:31:23","slug":"better-user-interface-and-user-experience","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/better-user-interface-and-user-experience\/","title":{"rendered":"Better User Interface and User Experience"},"content":{"rendered":"\n<p data-block-type=\"core\">In this update, we\u2019re bringing block editing to all new heights by drastically improving our user interface and user experience (UI\/UX). Update to 2.12.0 now!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p data-block-type=\"core\">Prior to this update, we received some valuable insights from a few avid Stackable users from the <a aria-label=\"Stackable Facebook Community (opens in a new tab)\" href=\"https:\/\/www.facebook.com\/groups\/wpstackable\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Stackable Facebook Community<\/a> on how they were using our blocks, what things they were trying to achieve, and what things they had a hard time doing.<\/p>\n\n\n\n<p data-block-type=\"core\">We love listening to what our users have to say, so we took those feedback and investigated further. <\/p>\n\n\n\n<p data-block-type=\"core\">This resulted in an internal audit of our blocks held by every member of the Stackable team. Everyone took a break from their daily tasks to try out a myriad of things with our blocks to see whether it was easy or hard to use.<\/p>\n\n\n\n<p data-block-type=\"core\">This version 2.12 update is the first part of our study which improves Stackable&#8217;s UI\/UX.<\/p>\n\n\n\n<div class=\"wp-block-ugb-container ugb-container ugb-97a83f0 ugb-container--v2 ugb-container--design-basic ugb-main-block\" id=\"\"><style>.ugb-97a83f0-wrapper.ugb-container__wrapper{padding-top:0 !important;padding-bottom:0 !important}.ugb-97a83f0-wrapper > .ugb-container__side{padding-top:35px !important;padding-bottom:35px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-container__wrapper ugb-97a83f0-wrapper\"><div class=\"ugb-container__side\"><div class=\"ugb-container__content-wrapper ugb-97a83f0-content-wrapper\">\n<p data-block-type=\"core\"><strong>Here&#8217;s a breakdown on what&#8217;s new:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" data-block-type=\"core\"><li><a href=\"#Improved-Tabs-and-Panel-Design\" class=\"ek-link\">Improved Tabs and Panel Design<\/a><\/li><li><a href=\"#New-Container-Settings-Panel\" class=\"ek-link\">New Container Settings Panel<\/a><\/li><li><a href=\"#New-Paddings-Option\" class=\"ek-link\">New Paddings Option<\/a><\/li><li><a href=\"#Improved-Number-Slider-Control\" class=\"ek-link\">Improved Number Slider Control<\/a><\/li><li><a href=\"#Improved-Responsive-Toggles\" class=\"ek-link\">Improved Responsive Toggles<\/a><\/li><li><a href=\"#Inspector-Speed-Improvements\" class=\"ek-link\">Inspector Speed Improvements<\/a><\/li><li><a href=\"#Blog-Posts-Block-Multiple-Categories-and-Taxonomies\" class=\"ek-link\">Blog Posts Block Multiple Categories and Taxonomies<\/a><\/li><li><a href=\"#Other-Minor-UI-Improvements-and-Fixes\" class=\"ek-link\">Other Minor UI Improvements and Fixes<\/a><\/li><\/ol>\n\n\n\n<p data-block-type=\"core\"><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Improved-Tabs-and-Panel-Design\" data-block-type=\"core\">Improved Tabs and Panel Design<\/h2>\n\n\n\n<p data-block-type=\"core\">We&#8217;ve enhanced the layout and design of our block inspector, revamping a lot of things from the tabs to the panels and their contents.<\/p>\n\n\n\n<p data-block-type=\"core\">Here&#8217;s what the improved block inspector looks like against the old one:<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1712\" height=\"1322\" src=\"https:\/\/mk0wpstackablecs1ldd.kinstacdn.com\/wp-content\/uploads\/2020\/11\/tab-and-panel-design-2x-arrows-3.png\" alt=\"New and improved block inspector UI\" class=\"wp-image-14807\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/tab-and-panel-design-2x-arrows-3.png 1712w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/tab-and-panel-design-2x-arrows-3-300x232.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/tab-and-panel-design-2x-arrows-3-1024x791.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/tab-and-panel-design-2x-arrows-3-768x593.png 768w\" sizes=\"auto, (max-width: 1712px) 100vw, 1712px\" \/><\/figure>\n\n\n\n<p data-block-type=\"core\">There are many subtle differences between the old and the new inspector. You&#8217;ll notice them more when you start designing your website with our blocks.<\/p>\n\n\n\n<p data-block-type=\"core\">Overall, the design is more Gutenberg-like for a more streamlined experience. <\/p>\n\n\n\n<p data-block-type=\"core\">Here&#8217;s what to expect:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>It\u2019s easier to see what tab you are currently on<\/li><li>It\u2019s easier to see what panel you are currently on<\/li><li>The panel title now sticks to the top of the inspector when scrolling<\/li><li>Better responsive toggles<\/li><li>Added a new <a href=\"#New-Container-Settings-Panel\" class=\"ek-link\">Container panel<\/a> to most blocks<\/li><li>Rearranged some panels and option arrangement<\/li><li>A more compact yet easier on the eyes option layout<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"New-Container-Settings-Panel\" data-block-type=\"core\">New Container Settings Panel<\/h2>\n\n\n\n<p data-block-type=\"core\">We noticed that a few of our &#8220;Container&#8221; related options &#8211; things like border radius, shadows and backgrounds &#8211; were scattered in different areas.<\/p>\n\n\n\n<p data-block-type=\"core\">So we&#8217;ve made a new Container panel to make sure these options are placed well together and make them easier to find.<\/p>\n\n\n\n<p data-block-type=\"core\">We&#8217;ve also combined a lot of the background settings into a single option for less clutter:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1120\" height=\"623\" src=\"https:\/\/mk0wpstackablecs1ldd.kinstacdn.com\/wp-content\/uploads\/2020\/11\/container-panel-3.png\" alt=\"New Container panel\" class=\"wp-image-14808\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/container-panel-3.png 1120w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/container-panel-3-300x167.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/container-panel-3-1024x570.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/container-panel-3-768x427.png 768w\" sizes=\"auto, (max-width: 1120px) 100vw, 1120px\" \/><\/figure>\n\n\n\n<p data-block-type=\"core\">You can just click on the pencil button to pop open the background settings. The background option will also show you a small preview if you&#8217;re using a background image or color, along with an easy way to clear them.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"New-Paddings-Option\" data-block-type=\"core\">New Paddings Option<\/h2>\n\n\n\n<p data-block-type=\"core\">We sometimes receive questions on how to change the inside paddings of containers, and some people even think that we do not have any padding options.<\/p>\n\n\n\n<p data-block-type=\"core\">On the contrary, we do have padding options!<\/p>\n\n\n\n<p data-block-type=\"core\">However, our padding options were tucked inside the advanced tabs. Because of this, some people were having a hard time finding it.<\/p>\n\n\n\n<p data-block-type=\"core\">Also, it didn&#8217;t help that our paddings option for columns (or containers) were a <a href=\"https:\/\/wpstackable.com\/premium\/\" class=\"ek-link\">Premium<\/a> feature, and it kind of felt like a you hit a paywall since. it wasn&#8217;t available to free users. We don&#8217;t like paywalls, and we&#8217;re a big believer that the free version of a plugin should be completely usable.<\/p>\n\n\n\n<p data-block-type=\"core\">So now we&#8217;ve made the paddings option available in Stackable <strong>Free<\/strong> \ud83e\udd73 and placed it inside the <strong>Style \u2192 Spacing<\/strong> panel to make it easier to find.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/Screen-Recording-2020-11-14-at-2.59.13-PM.mp4.mp4\" playsinline><\/video><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Improved-Number-Slider-Control\" data-block-type=\"core\">Improved Number Slider Control<\/h2>\n\n\n\n<p data-block-type=\"core\">Not to take anything away from Gutenberg (we \u2764\ufe0f Gutenberg), but the number \/ range slider is quite difficult to use. It&#8217;s very hard to type in values in the number field.<\/p>\n\n\n\n<p data-block-type=\"core\">For example, typing in <code>-100<\/code> is very cumbersome. It&#8217;s because you can&#8217;t type in non-numeric values, so you can&#8217;t just type in the negative sign <code>-<\/code> since it&#8217;s not a valid number by itself.<\/p>\n\n\n\n<p data-block-type=\"core\">To successfully type in <code>-100<\/code>, you&#8217;d have to type in first <code>100<\/code> then place your cursor at the start, only then will you be able to type in the negative sign.<\/p>\n\n\n\n<p data-block-type=\"core\">Here I am fumbling around trying to type <code>-100<\/code>:<\/p>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/Screen-Recording-2020-11-12-at-11.39.01-PM.mp4.mp4\" playsinline><\/video><figcaption>Me trying to type in a negative number in a Gutenberg range control.<\/figcaption><\/figure>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<p data-block-type=\"core\">There are other quirks that you&#8217;ll surely encounter if you use the number field in a regular basis.<\/p>\n\n\n\n<p data-block-type=\"core\">In this update, we&#8217;ve decided to go ahead and create our own number \/ range control that makes it very easy to type in any numerical value.<\/p>\n\n\n\n<p data-block-type=\"core\">The result is a much more pleasant experience, and makes accurately specifying spacing values a breeze!<\/p>\n\n\n\n<p data-block-type=\"core\">Here I am happily and quickly typing <code>-100<\/code> in the new field:<\/p>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/Screen-Recording-2020-11-14-at-2.24.32-PM.mp4.mp4\" playsinline><\/video><figcaption>Me trying to type in a negative number in Stackable&#8217;s improved range control.<\/figcaption><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Improved-Responsive-Toggles\" data-block-type=\"core\">Improved Responsive Toggles<\/h2>\n\n\n\n<p data-block-type=\"core\">This is not really a new feature since it was released a previous minor update, but we haven\u2019t written about this UI improvement yet.<\/p>\n\n\n\n<p data-block-type=\"core\">Our previous responsive toggles were gray circles which didn\u2019t belong in the crisp Gutenberg interface. They looked old as well, and it wasn&#8217;t obvious that you could actually click on them.<\/p>\n\n\n\n<p data-block-type=\"core\">We\u2019ve changed the responsive toggles to something cleaner, and now when you hover your mouse over them, they\u2019ll respond slightly to give you a hint that you can interact with them.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/Screen-Recording-2020-11-14-at-2.47.30-PM.mp4.mp4\" playsinline><\/video><figcaption>Our new responsive toggle buttons are easier to understand<\/figcaption><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Inspector-Speed-Improvements\" data-block-type=\"core\">Inspector Speed Improvements<\/h2>\n\n\n\n<p data-block-type=\"core\">Stackable blocks have a lot of options and perform a lot of things behind the scenes. Each option you change generates some styles, and with the amount of options we have, some people found that changing options were a bit laggy.<\/p>\n\n\n\n<p data-block-type=\"core\">In this update we&#8217;ve sped up our inspector drastically, and we&#8217;re seeing inspector option performance increase by 80%!<\/p>\n\n\n\n<p data-block-type=\"core\">So now when you adjust block options, you should have a significantly smoother experience.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Blog-Posts-Block-Multiple-Categories-and-Taxonomies\" data-block-type=\"core\">Blog Posts Block Multiple Categories and Taxonomies<\/h2>\n\n\n\n<p data-block-type=\"core\">We\u2019ve gotten a lot of requests to further expand our options for our <a href=\"https:\/\/wpstackable.com\/blog-posts-block\/\" class=\"ek-link\">Blog Posts block<\/a>. One of our recent additions is the <a href=\"https:\/\/wpstackable.com\/blog\/new-advanced-blocks-and-load-more-blog-posts-button\/\" class=\"ek-link\">Load More button<\/a> that dynamically loads your older posts. Now we&#8217;ve added in the ability to pick multiple categories and taxonomies!<\/p>\n\n\n\n<p data-block-type=\"core\">You can now choose more than one post category or taxonomy, and you can also choose whether to include only the posts which belong to all the categories or taxonomies you picked, or exclude them.<\/p>\n\n\n\n<p data-block-type=\"core\">This is a game changer in our Blog Posts block, and allows you to do so much more with it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1120\" height=\"623\" src=\"https:\/\/mk0wpstackablecs1ldd.kinstacdn.com\/wp-content\/uploads\/2020\/11\/blog-categories.png\" alt=\"\" class=\"wp-image-14818\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/blog-categories.png 1120w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/blog-categories-300x167.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/blog-categories-1024x570.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/11\/blog-categories-768x427.png 768w\" sizes=\"auto, (max-width: 1120px) 100vw, 1120px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Other-Minor-UI-Improvements-and-Fixes\" data-block-type=\"core\">Other Minor UI Improvements and Fixes<\/h2>\n\n\n\n<p data-block-type=\"core\">This article update is getting quite long, and we&#8217;ve just mentioned the major UI improvements.<\/p>\n\n\n\n<p data-block-type=\"core\">Here are a few more minor improvements worth noting:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>Button color options now appear higher in the inspector<\/li><li>Title heading html tags now show up first in title settings<\/li><li>Smaller toggles for when picking single or gradient background color types<\/li><li>Smaller buttons for the button design picker<\/li><li>Made some inspector controls more Gutenberg-like <\/li><\/ul>\n\n\n\n<p data-block-type=\"core\">Bug fixes included in this release:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>It&#8217;s now easier to set left\/right paddings to zero<\/li><li>Unable to reset range controls when the value has been previously changed<\/li><li>SEO warning about duplicate id attributes<\/li><li>Some background styles won&#8217;t apply in some block layouts<\/li><li>Fixed a few CSS styling issues with some block layouts<\/li><li>Fixes some JavaScript warnings<\/li><li>Compatibility issue when coming from a Stackable beta build<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Conclusion<\/h2>\n\n\n\n<p data-block-type=\"core\">Thank you to all the Stackable aficionados who gave feedback for this UI-inspired update. \ud83d\ude4c<\/p>\n\n\n\n<p data-block-type=\"core\">I believe that this update is one of the best ones we&#8217;ve had and makes Stackable easier than ever to use.<\/p>\n\n\n\n<p data-block-type=\"core\">This update is just the beginning of the results of our study I mentioned at the start of the article, and we have more in store for you in the coming weeks.<\/p>\n\n\n\n<p data-block-type=\"core\">If you use Stackable, be sure to join the <a aria-label=\"Stackable Community in Facebook (opens in a new tab)\" href=\"https:\/\/www.facebook.com\/groups\/wpstackable\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Stackable Community in Facebook<\/a>. Help us shape the future of WordPress and Gutenberg!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this update, we\u2019re bringing block editing to all new heights by drastically improving our user interface and user experience (UI\/UX). Update to 2.12.0 now!<\/p>\n","protected":false},"author":1,"featured_media":14766,"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-14764","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\/2020\/11\/blog-better-uiux.jpg",1200,624,false]},"post_excerpt_stackable_v2":"<p>In this update, we\u2019re bringing block editing to all new heights by drastically improving our user interface and user experience (UI\/UX). Update to 2.12.0 now! Prior to this update, we received some valuable insights from a few avid Stackable users from the Stackable Facebook Community on how they were using our blocks, what things they were trying to achieve, and what things they had a hard time doing. We love listening to what our users have to say, so we took those feedback and investigated further. This resulted in an internal audit of our blocks held by every member of&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Benjamin Intal","url":"https:\/\/wpstackable.com\/blog\/author\/gambit\/"},"comments_num_v2":"0 comments","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/14764","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=14764"}],"version-history":[{"count":0,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/14764\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/14766"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=14764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=14764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=14764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}