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.
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 JavaScriptAssets are checked in child theme first, then parent theme.
Performance & Loading
- Editor: Styles (
block.cssandeditor.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