{"id":13226,"date":"2020-08-06T23:44:52","date_gmt":"2020-08-07T04:44:52","guid":{"rendered":"https:\/\/wpstackable.com\/?p=13226"},"modified":"2020-08-07T01:26:59","modified_gmt":"2020-08-07T06:26:59","slug":"introducing-live-responsive-editing","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/introducing-live-responsive-editing\/","title":{"rendered":"Introducing: Live Responsive Editing"},"content":{"rendered":"\n<p data-block-type=\"core\">In this update, we&#8217;re proud to say that Stackable is fully compatible with WordPress 5.5. We also bring you a new amazing feature: Live Responsive Editing, now you can both preview and edit your designs in tablet and mobile views! Upgrade to version 2.9.0 now.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">What&#8217;s New in WordPress 5.5?<\/h2>\n\n\n\n<p data-block-type=\"core\">Our newest update makes Stackable fully compatible with WordPress 5.5. But before we jump into the details of our update, let&#8217;s see what new things  are included in 5.5.<\/p>\n\n\n\n<p data-block-type=\"core\">WordPress 5.5 includes a lot of improvements to Gutenberg. I&#8217;ll run through them a bit, but feel free to skip this section.<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>There&#8217;s a new Block Directory &#8211; you can search for a block and install them right away without having to leave the Block Editor.<\/li><li>Block Patterns &#8211; these are groups of blocks that are pre-designed that you can quickly add.<\/li><li>The native image block now comes with some cropping and scaling controls.<\/li><li>The interface got a bit of a facelift &#8211; has more contrast, better accessibility, easier to click and drag things.<\/li><li>You can select multiple blocks of the same type and edit them all at once.<\/li><li><strong>You can now toggle between Desktop, Tablet and Mobile views.<\/strong><\/li><\/ul>\n\n\n\n<p data-block-type=\"core\">We&#8217;re pretty excited about the last improvement in particular (at least in this update). Here&#8217;s why..<\/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\" data-block-type=\"core\">Responsive Designs in Stackable Blocks<\/h2>\n\n\n\n<p data-block-type=\"core\">In Stackable blocks, you can assign different values for Desktop, Tablet and Mobile in some block properties. You can click on the circular <strong>Responsive Toggle<\/strong> to switch between the different values.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Recording-2020-08-06-at-6.57.47-PM.mp4.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">This is a great tool and allows you to tailor fit your designs for smaller screens &#8211; a must have in today&#8217;s world.<\/p>\n\n\n\n<p data-block-type=\"core\">The downside with this is that in order to see what the tablet and mobile values did to your design, you&#8217;d have to preview your page and resize your browser. It wasn&#8217;t a good editing experience.. until now.<\/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\" data-block-type=\"core\">Live Responsive Editing for Tablet and Mobile<\/h2>\n\n\n\n<p data-block-type=\"core\">With the latest Stackable update and WordPress 5.5, you <strong>can now preview your blocks in Tablet and Mobile, <\/strong>and better yet, you can<strong> edit them live<\/strong>!<\/p>\n\n\n\n<p data-block-type=\"core\">Here is live responsive editing in action, where I adjust tablet-only and mobile-only block styles:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/live-responsive-preview.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<p data-block-type=\"core\">If you didn&#8217;t get what was happening, let me explain what I did in the video above.<\/p>\n\n\n\n<p data-block-type=\"core\">You can now toggle Gutenberg to preview the page in <strong>Tablet<\/strong> and <strong>Mobile<\/strong> views, just click on the Preview button beside Publish. (Note that your page has to have a block first, or else the Preview button can&#8217;t be clicked)<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Recording-2020-08-06-at-6.35.57-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<p data-block-type=\"core\">I clicked on Tablet and Mobile preview modes, and it resized the Block Editor. The block&#8217;s design adjusted to Tablet or Mobile mode too. <\/p>\n\n\n\n<p data-block-type=\"core\">Afterwards, I adjusted my block&#8217;s content alignment and paddings to better suit smaller screens. <em>Notice also that the Responsive Toggles in Stackable also changed to indicate that I was editing for Tablets or Mobile devices<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Recording-2020-08-06-at-7.08.45-PM.mp4.mp4\" playsinline><\/video><figcaption>Video is choppy because of the video capturing process.<\/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<p data-block-type=\"core\">Once I had my tablet and mobile block settings set, I toggled back to desktop view. <\/p>\n\n\n\n<p data-block-type=\"core\">If you toggle again between the different device previews, you&#8217;ll see that all the tablet and mobile settings you set would show up in your view. Sweet!<\/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\" data-block-type=\"core\">Toggle Between Different Screen Sizes<\/h2>\n\n\n\n<p data-block-type=\"core\">To make the tablet and mobile editing experience seamless, we&#8217;ve integrated our Responsive Toggles with the Gutenberg Preview Mode picker. It&#8217;s really an amazing page builder-like experience.<\/p>\n\n\n\n<p data-block-type=\"core\">Here it is in action:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/toggle-preview-modes.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\" data-block-type=\"core\">Edit Multiple Blocks at the Same Time<\/h2>\n\n\n\n<p data-block-type=\"core\">You can now also select multiple blocks of the same kind and adjust their settings in the inspector at the same time. This is a time saver and allows you to perform some fine tuning across multiple blocks easier.<\/p>\n\n\n\n<p data-block-type=\"core\">Here I am highlighting multiple Column blocks (shift + click), then adjusting the styles of both blocks simultaneously.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Recording-2020-08-06-at-9.03.09-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\" data-block-type=\"core\">When Does WordPress 5.5 Come Out?<\/h2>\n\n\n\n<p data-block-type=\"core\">So all of the new things above are only available once WordPress 5.5 comes out.<\/p>\n\n\n\n<p data-block-type=\"core\">The new version of WordPress should arrive on August 11, 2020, so you&#8217;ll have to wait until then to use these new features. They&#8217;re worth the wait!<\/p>\n\n\n\n<p data-block-type=\"core\">There is a way if you want to try it out now. If you have a staging site or a local development site <strong>(never try it out in your actual live site)<\/strong>, you can use the <a aria-label=\"WordPress Beta Tester (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/wordpress-beta-tester\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">WordPress Beta Tester<\/a> plugin to install the Beta or Release Candidate for WordPress 5.5. There&#8217;re some <a aria-label=\"instructions here (opens in a new tab)\" href=\"https:\/\/make.wordpress.org\/core\/handbook\/testing\/beta-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">instructions here<\/a> on how to set it up.<\/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\" data-block-type=\"core\">New Admin Settings Design<\/h2>\n\n\n\n<p data-block-type=\"core\">Lastly, our <a href=\"https:\/\/wpstackable.com\/blog\/better-onboarding-for-first-time-users\/\" class=\"ek-link\">new settings area<\/a> has been said to be too.. lively \ud83d\ude01 <\/p>\n\n\n\n<p data-block-type=\"core\">So, we also took this time to further improve how our admin settings pages look. Now our pages are more fitting to WordPress and rocks a more neutral design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"829\" src=\"https:\/\/mk0wpstackablecs1ldd.kinstacdn.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-06-at-6.06.15-PM-1024x829.png\" alt=\"New design for Stackable settings pages\" class=\"wp-image-13239\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-06-at-6.06.15-PM-1024x829.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-06-at-6.06.15-PM-300x243.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-06-at-6.06.15-PM-768x622.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/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\" data-block-type=\"core\">Final Words<\/h2>\n\n\n\n<p data-block-type=\"core\">Aside from those we also fixed a few bugs. More notably we fixed an issue a few users have pointed out regarding a PHP warning notice about <code>register_setting<\/code> being used incorrectly.<\/p>\n\n\n\n<p data-block-type=\"core\">Those are all the new updates for Stackable 2.9. Comment below if you have any thoughts about this update. If you want to discuss, be sure to join our <a href=\"https:\/\/www.facebook.com\/groups\/wpstackable\/\" class=\"ek-link\">Stackable Community in Facebook<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this update, we&#8217;re proud to say that Stackable is fully compatible with WordPress 5.5. We also bring you a new amazing feature: Live Responsive Editing, now you can both preview and edit your designs in tablet and mobile views! Upgrade to version 2.9.0 now.<\/p>\n","protected":false},"author":1,"featured_media":13227,"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-13226","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\/08\/Update.jpg",1200,624,false]},"post_excerpt_stackable_v2":"<p>In this update, we&#8217;re proud to say that Stackable is fully compatible with WordPress 5.5. We also bring you a new amazing feature: Live Responsive Editing, now you can both preview and edit your designs in tablet and mobile views! Upgrade to version 2.9.0 now. What&#8217;s New in WordPress 5.5? Our newest update makes Stackable fully compatible with WordPress 5.5. But before we jump into the details of our update, let&#8217;s see what new things are included in 5.5. WordPress 5.5 includes a lot of improvements to Gutenberg. I&#8217;ll run through them a bit, but feel free to skip this&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":"1 comment","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/13226","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=13226"}],"version-history":[{"count":0,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/13226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/13227"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=13226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=13226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=13226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}