Build & Assets

The build toolchain — npm scripts, webpack, gulp, JavaScript path aliases — and how AssetManager registers editor, frontend, and dashboard assets.

Styble Pro has three JavaScript bundles (block editor, block frontend, admin dashboard) plus SCSS that is compiled in two ways. This page covers the commands you run and how the compiled output is enqueued.

Prerequisites

Install dependencies once:

npm install

The build uses @wordpress/scripts (webpack under the hood) for JavaScript and Gulp with sass for standalone SCSS.

npm scripts

Development

# Block editor dev server (watch + rebuild) → assets/editor
npm start

# Admin dashboard dev server → assets/dashboard
npm run start:admin

# Watch/compile standalone SCSS (run alongside the dev server)
npx gulp

Production build

# Full build: editor bundle, frontend bundles, block.json copy, dashboard
npm run build

# Individual targets
npm run build:dashboard   # Admin dashboard only → assets/dashboard

# Compile standalone SCSS
npx gulp

npm run build chains several steps (see package.json): it builds the editor bundle to assets/editor, builds per-block frontend bundles (e.g. Advanced Video, Popup Builder) into blocks/assets/js/, copies block JSON, and builds the dashboard. The dashboard build also copies dashboard images first.

Code quality

npm run lint       # Lint src/ with @wordpress/scripts (WordPress preset)
npm run lint:fix   # Auto-fix lint issues
npm run format     # Prettier format src/

Script	What it does	Output
npm start	Editor dev server (watch)	assets/editor/
npm run start:admin	Dashboard dev server (watch)	assets/dashboard/
npm run build	Full production build (all bundles)	assets/editor/, blocks/assets/js/, assets/dashboard/
npm run build:dashboard	Dashboard bundle only	assets/dashboard/
npx gulp	Compile standalone SCSS	assets/css/, assets/dashboard/
npm run lint / lint:fix / format	JS lint & formatting	—

Two ways SCSS is compiled

SCSS imported from JavaScript (e.g. src/blocks/style.scss, editor.scss) is handled by webpack during the JS build. Standalone SCSS (admin dashboard styles and the block frontend style.css) is compiled by Gulp — so run npx gulp after editing those files. Gulp skips source files that do not exist.

webpack configuration

webpack.config.js extends the default @wordpress/scripts config and adds path aliases so imports stay short and stable. The entry points are set by the npm scripts (src/blocks/index.js, src/admin/index.js, and per-block frontend.js files).

JavaScript path aliases

The following aliases are configured in webpack.config.js (and mirrored for ESLint):

Alias	Resolves to
@styble-pro/components	src/components/
@styble-pro/controls	src/controls/controls.js
@styble-pro/constants	src/controls/constants.js
@styble-pro/hooks	src/hooks/
@styble-pro/icons	src/icons/icons.js
@styble-pro/blocksIcons	src/icons/blocksIcons.js
@styble-pro/helpFn	src/blocks/shared/helpFn.js
@styble-pro/registerStybleBlock	src/blocks/shared/registerStybleBlock.js
@styble-pro/templates	src/templates/

import { registerStybleBlock } from '@styble-pro/registerStybleBlock';
import { __ } from '@wordpress/i18n';
import { StybleSeparatorIcon } from '@styble-pro/blocksIcons';

AssetManager

AssetManager (blocks/Includes/AssetManager.php, namespace ShapedPlugin\StyblePro\Includes) registers and enqueues every compiled asset. It is a singleton booted from Block_Init::init_styble_blocks():

$asset_manager = AssetManager::instance();
add_action( 'init', array( $asset_manager, 'register_block_editor_assets' ), 10 );
add_action( 'enqueue_block_editor_assets', array( $asset_manager, 'enqueue_block_assets' ) );
add_action( 'enqueue_block_assets', array( $asset_manager, 'register_frontend_assets' ) );
add_action( 'wp_enqueue_scripts', array( $asset_manager, 'enqueue_global_settings_css' ), 15 );

Method	Hook	Responsibility
register_block_editor_assets()	init	Registers the editor script/styles from assets/editor/ (index.js, index.css, style-index.css).
enqueue_block_assets()	enqueue_block_editor_assets	Enqueues the editor bundle in Gutenberg.
register_frontend_assets()	enqueue_block_assets	Registers frontend block scripts/styles.
enqueue_global_settings_css()	wp_enqueue_scripts	Outputs global settings CSS variables (handle sp-styble-global-root).

The editor script handle is sp-styble-blocks-editor; its dependencies come from the generated assets/editor/index.asset.php (with WordPress packages — wp-blocks, wp-block-editor, wp-components, wp-i18n, wp-element — as the fallback). Assets are versioned with SP_STYBLE_VERSION for cache busting.

Asset locations

Bundle	Built from	Output
Block editor	src/blocks/index.js	assets/editor/
Block frontend (per-block)	src/blocks/<block>/frontend.js	blocks/assets/js/
Admin dashboard	src/admin/index.js	assets/dashboard/
Standalone SCSS	blocks/admin/*.scss, blocks/blocks/style.scss	assets/dashboard/, assets/css/

Global settings CSS

enqueue_global_settings_css() emits CSS custom properties (e.g. --styble-primary, --sp-styble-font-size-heading-1) from the saved global settings option, falling back to sensible defaults. Blocks reference these variables, so design tokens stay site-wide. See Dynamic CSS Generation and the user-facing Global Settings.

Related

• Architecture — where the build output fits in.
• Creating a Custom Block — adding a block to the editor bundle.
• Dynamic CSS Generation — server-side CSS that complements these assets.