Editor - Options

Last modified:

Activating

Options can be found in the contextual menu (three dots next to the save button). All options can be activated two ways.

Using Editor

options

Activating either using this menu will turn on processors sitewide for all blocks.

Using Filter

Options can also be activated using the blockstudio/editor/options filter.


                add_filter( 'blockstudio/editor/options', function() {
      return [
        "formatOnSave"     => true,
        "processorScss"    => true,
        "processorEsbuild" => true,
      ];
    });

        

All activated options using the filter will appear disabled inside the editor.

options filter

Processors

The editor includes handy preprocessors for writing more productive CSS and JavaScript. When enabled, CSS files will be processed and minified using scsssphp , allowing SASS to be used, while JS files will be transpiled and minifed using esbuild. When using the latter, Typescript can be written instead of vanilla Javascript and the use of ES modules will be enabled. Both processors will build valid CSS and JS files upon saving the block and will automatically be enqueued instead of the source files.

Folder Open

cta

Folder Open
_dist
Logo Nodejs
script-inline-1666269686.js
Logo Css3
style-1665960460.css
Document
block.json
Document
index.php
Logo Nodejs
script-inline.js
Logo Css3
style.css

Compiled files will be saved to the _dist folder of the block.