---
title: "Styles & Scripts"
description: "Add block.css, editor.css and view.js to a Lazy Blocks Pro block. Its styles and script load on the front end only on pages where the block is present."
url: "https://www.lazyblocks.com/docs/blocks-code/styles-scripts/"
lastUpdated: 2026-09-23
source: "blocks-code/styles-scripts.mdx"
---
# Styles & Scripts [Pro]

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](https://www.lazyblocks.com/docs/blocks-code/theme-template/).

## 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](https://www.lazyblocks.com/docs/blocks-code/theme-template/), assets are automatically detected if files exist in your block directory:

```bash
/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

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt