Assets – Registering

Blockstudio will automatically enqueue all files ending with .css, .scss and .js when your block is being used on a page. It is possible to define how assets are being enqueued by using one of the following file names. The * is a wildcard that can be replaced with any string of your choice.

• *.(s)css: enqueues as a <link> tag in the editor and on the frontend
• *-inline.(s)css: enqueues the contents of the file in an inline <style> tag in the editor and on the frontend
• *-editor.(s)css: enqueues as a <link> tag in the editor only
• *-scoped.(s)css: enqueues scoped contents of the file in an inline <style> tag in the editor and on the frontend
• *.js: enqueues as a <script> tag in the editor and on the frontend
• *-inline.js: enqueues the contents of the file in an inline <script> tag in the editor and on the frontend
• *-editor.js: enqueues as a <script> tag in the editor only
• *-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
• .(s)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

Global

Besides block specific assets, it is also possible to enqueue global assets, which will be available on all pages, regardless if a block is present. Enqueuing a global asset is done by adding the global- prefix to the file name. Any of the suffixes (e.g. -inline) can be used in combination.

Possible combinations are:

• global-styles.(s)css
• global-styles-inline.(s)css
• global-styles-editor.(s)css
• global-styles-scoped.(s)css
• global-scripts.js
• global-scripts-inline.js
• global-scripts-editor.js
• global-scripts-view.js

Admin

Admin assets are enqueued only in the WordPress admin area. The admin- prefix is used to define admin assets.

• admin-styles.(s)css
• admin-scripts.js

Block Editor

Block editor assets are enqueued only in the block editor. The block-editor- prefix is used to define block editor assets.

• block-editor-styles.(s)css
• block-editor-scripts.js

Disable enqueuing

                {
  "assets": {
    "enqueue": false
  }
}

      
Copy

              add_filter('blockstudio/settings/assets/enqueue', function() {
    return false;
  });

      
Copy

Per block

When a block templates returns nothing, Blockstudio will not enqueue any assets for that particular block. This method comes in handy to disable enqueueing when a certain condition is met.

          <?php
    if ( !$a['slides'] ) {
      // or return '';
      return false;
    }
  ?>

  <div>my slider</div>
Copy

          {% if not a.slides %}
    <div>my slider</div>
  {% endif %}

      
Copy