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
                
                                 
            
            

SCSS

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

    
                    

                Copy
                
                                 
            
            

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

    
                    

                Copy
                
                                 
            
            

Alternatively, you can use the .scss extension and styles will automatically get processed even when the above setting is not true.

Import paths

When using SCSS, it is possible to import other SCSS files. Imports are relative to the file they are imported from.

            @import "modules.scss";
  
                    

                Copy
                
                                 
            
            

Additionally, custom import paths can be defined using the blockstudio/assets/process/scss/importPaths filter, so files can be imported from other directories without specifying any folder structure.

Please note that the .scss extension needs to be present for imports to work properly.

            add_filter('blockstudio/assets/process/scss/importPaths', function() {
      $paths[] = get_template_directory() . '/src/scss/';
      return $paths;
    });
  
                    

                Copy
                
                                   
            
            

Block assets will be recompiled when any of the imported files change.

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 without any additional setup.

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 is 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 installations 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 as 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.

CSS Loader

It is also possible to import CSS files using the same syntax as above.

            import "blockstudio/swiper@11.0.0/swiper.min.css";
  
                    

                Copy
                
                                 
            
            

The CSS file will be downloaded to the modules folder and automatically enqueued when the block is used. As long as the version is the same, only a single version of the CSS file will be enqueued, even if it exists in multiple blocks.