{"id":23820,"date":"2022-04-12T10:57:11","date_gmt":"2022-04-12T15:57:11","guid":{"rendered":"https:\/\/wpstackable.com\/?p=23820"},"modified":"2022-04-12T12:35:15","modified_gmt":"2022-04-12T17:35:15","slug":"saving-block-defaults","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/saving-block-defaults\/","title":{"rendered":"New in Stackable: Saving Block Defaults"},"content":{"rendered":"\n<p data-block-type=\"core\">We are thrilled to introduce default block styles, a new feature available in Stackable version 3.3.0! This new feature will allow Stackable users to work more efficiently, saving you more time as you build websites using Stackable blocks.<\/p>\n\n\n\n<!--more-->\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\">What Does Saving Block Defaults Mean?<\/h2>\n\n\n\n<p data-block-type=\"core\">Have you ever found yourself repeatedly designing blocks? Or duplicating a block and just replacing the content to keep the design? Maybe you\u2019re taking advantage of the copy paste styles feature but feel that there is a more streamlined process?<\/p>\n\n\n\n<p data-block-type=\"core\">This is where saving block defaults comes in! It\u2019s a feature that allows you to save the design of a block as its default style. So that whenever you add this block again, it already adopts the block styles that you\u2019ve saved earlier. This includes all settings, whether it\u2019s the layout, typography, color, hover effects, and even motion effects!&nbsp;<\/p>\n\n\n\n<p data-block-type=\"core\">Here\u2019s an example of us adding a block that already has a default style:<\/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\/2022\/04\/Untitled.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Cool, right?<\/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<h3 class=\"wp-block-heading\" data-block-type=\"core\">So\u2026 How Do I Save Default Block Styles?<\/h3>\n\n\n\n<p data-block-type=\"core\">Great question! It\u2019s actually very easy. Design the block however you want, and once you\u2019re content with how it looks, click the Options icon in the toolbar (the three-dot button).<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"316\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.17.51-PM-1024x316.png\" alt=\"\" class=\"wp-image-23825\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.17.51-PM-1024x316.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.17.51-PM-300x92.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.17.51-PM-768x237.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.17.51-PM.png 1732w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Click on the Save as Default Block option, and that should do it! The next time you add that block, it should follow the design settings of the default styles you\u2019ve set.<\/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<h3 class=\"wp-block-heading\" data-block-type=\"core\">Works With Other Blocks<\/h3>\n\n\n\n<p data-block-type=\"core\">The block defaults feature is so intuitive and useful that it\u2019s applied even in nested blocks. Like for this example:<\/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\/2022\/04\/Adding-nested-block.mov\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">We\u2019ve added a default block style to the button block. Thus, when we added the Card block, which includes a button, it inherited the default style!<\/p>\n\n\n\n<p data-block-type=\"core\">A limitation, however, is that default styles don\u2019t work retroactively. Only newly added blocks are affected, so blocks that are already used in other parts of your site will not be affected if you change the block defaults.<\/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<h3 class=\"wp-block-heading\" data-block-type=\"core\">The Block Defaults Panel<\/h3>\n\n\n\n<p data-block-type=\"core\">You can manage all the default styles you\u2019ve saved from the Block Defaults panel in the Stackable settings. Just click the Stackable icon in the top right corner of the block editor.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"838\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.23.26-PM-1024x838.png\" alt=\"\" class=\"wp-image-23828\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.23.26-PM-1024x838.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.23.26-PM-300x245.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.23.26-PM-768x628.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.23.26-PM-1536x1257.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.23.26-PM.png 1863w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Below the <strong>Global Typography<\/strong> panel, you will find the <strong>Block Defaults<\/strong>. Click this to open up the contents and you should see a list of all Stackable blocks. The ones in bold letters are the blocks that you\u2019ve saved a default style for.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"919\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Bolded.png\" alt=\"\" class=\"wp-image-23832\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Bolded.png 576w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Bolded-188x300.png 188w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Click the corresponding pencil icon of the block that you want to add (or edit) default styles to. This will open up an editor in a new tab where you can edit the block default state. Don\u2019t forget to click <strong>Update<\/strong> to save the default style.<\/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\/2022\/04\/Defaults-panel.mp4\"><\/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<h3 class=\"wp-block-heading\" data-block-type=\"core\">Block Defaults in Wireframes<\/h3>\n\n\n\n<p data-block-type=\"core\">Block defaults are also applied to wireframes. Whenever you add a wireframe, the default style will be carried over to blocks that have it.<\/p>\n\n\n\n<p data-block-type=\"core\">Let\u2019s give it a try. Here\u2019s a designed Stackable Header block, and let\u2019s save it as the default block style.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"1024\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.37.39-PM-894x1024.png\" alt=\"\" class=\"wp-image-23835\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.37.39-PM-894x1024.png 894w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.37.39-PM-262x300.png 262w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.37.39-PM-768x880.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-11-at-9.37.39-PM.png 959w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Now, we shall add a wireframe that includes a Header block.&nbsp;<\/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\/2022\/04\/Screen-Recording-2022-04-11-at-9.39.18-PM.mov\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">See how upon adding the wireframe which consists of a Header block, the default style is inherited in the wireframe. Doesn\u2019t that just make wireframing so much easier? It\u2019s particularly helpful when presenting wireframes to clients, so they have a better idea of how a website prototype or finished product will look like!<\/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\">Other Fixes<\/h2>\n\n\n\n<p data-block-type=\"core\">Aside from the all-new Saving Block Defaults feature, we&#8217;ve included some other major fixes too.<\/p>\n\n\n\n<p data-block-type=\"core\">First, with FSE now in full swing, and many users switching to block themes, we&#8217;ve made Stackable now compatible with most block themes.<\/p>\n\n\n\n<p data-block-type=\"core\">In addition to that, we&#8217;ve added Inline CSS Optimization that will help Stackable users improve site performance. Stackable version 3.3.0 includes a lot of other fixes which you can check out at our <a href=\"https:\/\/wpstackable.com\/changelog\/\" data-type=\"page\" data-id=\"20105\" target=\"_blank\" rel=\"noreferrer noopener\">changelog<\/a>.<\/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\">You\u2019ll Be Hearing More From Us Soon<\/h2>\n\n\n\n<p data-block-type=\"core\">Saving block defaults is available for all users. Update to Stackable version 3.3.0 and have a go at this brand new feature to see all the difference it makes to your design process!<\/p>\n\n\n\n<p data-block-type=\"core\">This is just one of the many features and blocks we have lined up to release. Join our amazing community to stay in the loop with all Stackable updates, news, and deals!<\/p>\n\n\n\n<p data-block-type=\"core\">This is just one of the many features and blocks we have lined up to release. Join our <a href=\"https:\/\/wpstackable.com\/community\/\" data-type=\"page\" data-id=\"6722\" target=\"_blank\" rel=\"noreferrer noopener\">amazing community<\/a> to stay in the loop with all Stackable updates, news, and deals!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are thrilled to introduce default block styles, a new feature available in Stackable version 3.3.0! This new feature will allow Stackable users to work more efficiently, saving you more time as you build websites using Stackable blocks.<\/p>\n","protected":false},"author":18,"featured_media":23821,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-23820","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\/2022\/04\/Saving-Block-Defaults-1.jpg",2400,1248,false]},"post_excerpt_stackable_v2":"<p>We are thrilled to introduce default block styles, a new feature available in Stackable version 3.3.0! This new feature will allow Stackable users to work more efficiently, saving you more time as you build websites using Stackable blocks. What Does Saving Block Defaults Mean? Have you ever found yourself repeatedly designing blocks? Or duplicating a block and just replacing the content to keep the design? Maybe you\u2019re taking advantage of the copy paste styles feature but feel that there is a more streamlined process? This is where saving block defaults comes in! It\u2019s a feature that allows you to save&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":"7 comments","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/23820","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=23820"}],"version-history":[{"count":6,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/23820\/revisions"}],"predecessor-version":[{"id":23876,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/23820\/revisions\/23876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/23821"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=23820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=23820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=23820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}