Editor - Options

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

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,
      ];
    });

        
Copy

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

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.

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