Block Code & Assets

Styles & Scripts

Add custom CSS styles and JavaScript to your Lazy Blocks. Assets can be added through the block builder interface or as separate files when using Theme Templates.

Styles and scripts tabs in Lazy Blocks editor

Asset Types

File Type	Description	Loaded
`block.css`	Shared styles for editor and frontend	Editor: Always / Frontend: When block is present
`editor.css`	Editor-specific styles	Editor: Always
`view.js`	Interactive functionality	Frontend: When block is present

Adding Assets

Block Builder Interface

Use the dedicated tabs in the block builder:

block.css - Shared styles (editor + frontend)
editor.css - Editor-only styles
view.js - Frontend JavaScript

Theme Template Files

When using Theme Templates, assets are automatically detected if files exist in your block directory:

/blocks/lazyblock-your-block/
├── block.php        # Required template
├── block.css        # Shared styles
├── editor.css       # Editor styles
└── view.js          # Frontend JavaScript

Assets are checked in child theme first, then parent theme.

Performance & Loading

Editor: Styles (block.css and editor.css) are always loaded in the WordPress block editor
Frontend: Assets are only loaded when your block is present on the current page, ensuring optimal performance

Previous ArticleTheme Template Next ArticleuseBlockProps

Styles & ScriptsPro