{"id":20022,"date":"2021-06-11T23:14:14","date_gmt":"2021-06-12T04:14:14","guid":{"rendered":"https:\/\/wpstackable.com\/?p=20022"},"modified":"2021-07-14T16:58:02","modified_gmt":"2021-07-14T21:58:02","slug":"custom-attributes-and-optimization","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/custom-attributes-and-optimization\/","title":{"rendered":"New in Stackable: Custom Attributes & Optimization"},"content":{"rendered":"\n

This latest update includes a Custom Attributes, a new way to optimize your site, and some important fixes. Update to Stackable v2.17 now!<\/p>\n\n\n\n\n\n\n\n

Custom Attributes<\/h2>\n\n\n\n

We\u2019ve added a section in the Advanced tab of the Inspector wherein you can add custom attributes to each block. This field will allow you to add custom attributes that are not already in use in the markup of each block. <\/p>\n\n\n\n

\"\"
Custom Attributes in the inspector<\/figcaption><\/figure><\/div>\n\n\n\n

Here are some things you can do or achieve using custom attributes:<\/p>\n\n\n\n

Gain more control over accessibility<\/h3>\n\n\n\n

You can add ARIA attributes to your block, which give you the ability to define string values that label various elements on your website. ARIA attributes were especially designed for assistive technology, such as screen readers.<\/p>\n\n\n\n

You can also add an id<\/code> attribute to a header block (e.g. product-features<\/code>) then reference it as a custom attribute of a block containing the content for the header (e.g. aria-labelledby=\"product-features\"<\/code>)<\/p>\n\n\n\n

Add any custom data<\/h3>\n\n\n\n

Attach any type of data to your block (e.g. data-my-custom-attribute=\"some-value\"<\/code> or data-id=\"12345\"<\/code>)<\/p>\n\n\n\n

Create great looking effects<\/h3>\n\n\n\n

You can use it in conjunction with CSS’s  attr()<\/code> function to create some great looking effects<\/p>\n\n\n\n

New Optimization Settings<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

While Stackable doesn’t affect your website’s page loading speed<\/a> that much since majority of our blocks do not require any server-side PHP processing, we’d still like to give you further control over how Stackable blocks are loaded on your website.<\/p>\n\n\n\n

In an effort to help your websites perform better, we’ve added a setting where you are given the option to load Stackable’s frontend JavaScript and CSS files only on pages and posts that have Stackable blocks OR<\/em> on your entire site.<\/p>\n\n\n\n

Stackable’s JavaScript and CSS files are loaded across entire websites by default. If you want to toggle this setting on or off, go to the Stackable settings from the WordPress dashboard by hovering over Settings<\/strong> on the left menu panel and clicking Stackable<\/strong>.<\/p>\n\n\n\n

You will then see the new Optimization Settings<\/strong>. Simply toggle the new setting depending on your preference and your settings will be saved!<\/p>\n\n\n\n

Other fixes<\/h2>\n\n\n\n
  • Fixed a block error when switching responsiveness modes while global colors is empty<\/li>
  • Issues with the alignment in the icon block is now working properly<\/li>
  • Review stars from WP Review Pro now appear properly in the Posts block<\/li>
  • Increased cap for the block paddings<\/li>
  • Fixed an issue where the alt text for featured images in the Posts block was pulling the wrong information<\/li><\/ul>\n\n\n\n

    Final Words<\/h2>\n\n\n\n

    We appreciate all Stackable users and so we’re always working to make sure you are able to make the most out of Stackable! If you want to read more about this new feature, read our documentation on Custom Attributes<\/a> and the new optimization<\/a> settings.<\/p>\n\n\n\n

    We hope you enjoy this release. If you have any additional questions, don’t hesitate to reach out<\/a> to us!<\/p>\n\n\n\n