Assets - Processing

Minification

Blockstudio is able to automatically minify all CSS and JS files in a block.

Compiled files will be saved to the _dist folder of the block and enqueued when a block is used. When the source file is updated, Blockstudio checks if a compiled file with that timestamp exists, if not, it will be created.

The minify library is used for this purpose.

                    {
  "assets": {
    "minify": {
      "{type}": true
    }
  }
}

        
Copy

                    add_filter('blockstudio/settings/assets/minify/{type}', function() {
    return true;
  });

        
Copy

Alternatively, either CSS or JS minification can be enabled separately using the following filters.

SCSS

                    {
  "assets": {
    "process": {
      "scss": true
    }
  }
}

        
Copy

                    add_filter('blockstudio/settings/assets/process/scss', function() {
    return true;
  });

        
Copy

ES Modules

All scripts (inline and default) in Blockstudio load with type="module" applied to them by default. This means that it is possible to make use of the import syntax for your blocks' scripts.

Let's imagine the following code inside a script.js:

                import { h, render } from "https://esm.sh/preact@10.15.1";
    import htm from "https://esm.sh/htm@3.1.1";
    import confetti from "https://esm.sh/canvas-confetti@1.6.0";

    const html = htm.bind(h);
    const styles =
      `display: block;
        font-family: sans-serif;
        color: black;
        background: #f1f1f1;
        padding: 1rem;
        border-radius: 0.25rem;
        margin: 1rem;
        font-family: sans-serif;
    `;

    function App(props) {
      confetti();
      console.log(confetti);

      return html`<h1 style="${styles}">Hello ${props.name}!</h1>`;
    }

    render(
      html`<${App} name="Hello from Preact!" />`,
      document.querySelector("#element")
    );

        
Copy

The example above would create a component using Preact , importing all necessary components and functions from an ESM compatible CDN, in this case esm.sh. While there is nothing wrong with this approach, it has the disadvantage of needing to request the necessary assets from an external site, risking broken scripts if the CDN is down.

Blockstudio includes a handy way to download ES Modules to the block, eliminating the need for external ESM CDNs during production.

Setup

To download a module to your block directory, simply swap the CDN url.

                import { h, render } from "blockstudio/preact@10.15.1";
    import htm from "blockstudio/htm@3.1.1";
    import confetti from "blockstudio/canvas-confetti@1.6.0";

        
Copy

Blockstudio will automatically check changed .js files for imports and download them to the local block directory. The downloaded files will be placed in a modules folder in the block directory.

The script file will be rewritten on save to accustom for the locally hosted module, in the example above, the generated scripts would have the following import:

                import { h, render } from "./modules/preact/10.15.1.js";
    import htm from "./modules/htm/10.15.1.js";
    import confetti from "./modules/canvas-confetti/1.6.0.js";

        
Copy

When inside the editor, the CDN url will still be used (Blockstudio is using esm.sh) when previewing and working on the block.

There you go! The world of NPM at your fingertips without the boring boilerplate of setting up bundlers and other tools. If you are concerned about performance due to not having a single JS bundle, this article is worth a read.

Since the use of ES modules using the above syntax is completely opt-in, there is no need to activate this feature, it is enabled by default.

Caveats

There are a couple of things to consider when working with ES modules inside the editor.

Version

Normally, modules can be used from CDNs without the version number. In this case the newest version will always be used. Since Blockstudio is not saving any information into the database, a version number is required when using modules.

Same modules

Modules are scoped to their blocks. Even if you use the same module with the same version number across multiple blocks, Blockstudio will still download the requested module to the block. This is mainly because blocks should be self-contained units that can easily be shared across other installs or sites.

On top of that, the same module will be requested twice if both blocks are present on a page. This is not so much of an issue if the block is loading a very specific module like a slider library. However, if you are creating multiple blocks that rely on the same framework like above (Preact), loading the same module multiple times can become a performance issue.

This problem can be solved by using the script-inline.js instead of the script.js file. Blockstudio will rewrite each of the imports to point to the location of the first occurrence of the module if the name and version number are the same.