Assets

Blockstudio will automatically enqueue following assets if they are found in the same folder as your other block files and if your block is used in the frontend. Assets will always enqueue in the editor.

• style.css: enqueues as a <link> tag in the editor and on the frontend
• style-inline.css: enqueues the contents of the file in an inline <style> tag in the editor and on the frontend
• style-editor.css: enqueues as a <link> tag in the editor only
• style-scoped.css: enqueues scoped contents of the file in an inline <style> tag in the editor and on the frontend
• script.js: enqueues as a <script> tag in the editor and on the frontend
• script-inline.js: enqueues the contents of the file in an inline <script> tag in the editor and on the frontend
• script-editor.js: enqueues as a <script> tag in the editor only
• script-view.js: enqueues as a <script> tag on the frontend only

Inline

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.

• .js files are inlined to the end of the body
• .css files are inlined to the end of the head
• each file is only being inlined once

Scoped

Scoped styles are also inlined, but are prefixed with an ID that is unique to each block. Use the bs_get_scoped_class function to add the class to your template.

                <div class="<?php echo bs_get_scoped_class($b["name"]) ?>">
      <h1>Scope me!</h1>
      <p>Scope me too!</p>
    </div>
Copy

                h1 {
      color: red;
    }

        
Copy

The above will result in the following scoped style:

                <style>
      .bs-62df71e6cc9a h1 {
          color: red;
      }
      .bs-62df71e6cc9a p {
          color: blue;
      }
    </style>

    <div class="bs-62df71e6cc9a">
      <h1>Scope me!</h1>
      <p>Scope me too!</p>
    </div>
Copy

Disable enqueuing

Automatic asset enqueuing can be disabled using the blockstudio/assets filter. This is useful if you want to handle all asset enqueuing by yourself.

                add_filter('blockstudio/assets', '__return_false');

        
Copy