Assets

Blockstudio will automatically enqueue a style.css and script.js file (if those exist) for all blocks in the same folder.

blockstudio -- cta.php -- news.php -- button -- style.css -- script.js ---- index.php ---- register.php ---- style.css -- contact ---- index.php ---- newsletter ------ index.php ------ modern.php ------ script.js

The above structure would enqueue following assets for the blocks:

  • cta: style.css, script.js
  • news: style.css, script.js
  • button: style.css, script.js
  • button-register: style.css
  • contact: none
  • contact-newsletter: none
  • contact-newsletter-modern: script.js
/* my-block/style.css */ .my-h1 { color: blue !important; } // my-block/script.js setTimeout(function () { document.querySelector(".my-h1").style.color = 'green'; }, 5000);

It is possible to change the name of those files using the appropriate filter .

Inline

Since 2.1.0, assets can also be rendered inline by appending -inline to the file name.

Please note that this feature currently doesn't work for blocks used in the site editor template parts. As of now, only blocks that are present in the post_content or rendered via the blockstudio_render_block function will work when using inline styles.

/* my-block/style-inline.css */ .my-inline-class { color: red; } <style> .my-inline-class { color: red; } </style>

Inline styles and scripts have the big advantage that they are directly rendered as style or script tags inside the page. This can enhance loading times, since it saves extra requests that would have to be made otherwise.

Some things to consider:

  • .js files are inlined into the wp_footer()
  • .css files are inlined into the wp_head()
  • each file is only being inlined once

Please note that it is possible to use inline assets and non-inlined assets side by side. For example, you could have a style.css, style-inline.css, script.js and script-inline.js in a folder and Blockstudio would enqueue or inline all files appropriately.