Discover How to Load Scripts and Styles in WordPress Blocks with Block.json

Block.json is the preferred and recommended way to register your block’s metadata and its attributes.

Loading scripts and styles via Block.json is fairly straightforward, but it’s important to know what loads where.

In this tutorial, I’ll show you how to use Block.json to load your block’s scripts and styles.

The block.json script and style parameters

Pin itShare

Before we go through the innards, let’s look at the various parameters you can use to load scripts and styles.

Pin itShare

• editorScript: file location to your script, or enqueue handle (loads in the Block Editor)
• script: file location to your frontend/backend scripts, or enqueue handle (loads on the frontend and backend)
• viewScript: any scripts you’d like to load on the frontend (takes a file location or enqueue handle)
• editorStyle: file location to your script, or enqueue handle (loads in the Block Editor)
• style: file location to your frontend/backend styles, or enqueue handle (loads on the frontend and backend)

Let’s go over the difference between supplying your own file path and script handles.

Loading scripts and styles by file location

For single-block plugins, it makes sense to load your scripts by location. When including by location, you have to assume a path relative to where the block.json file is in the file structure.

Let’s assume the following structure:

.
├── build/
│   └── my-block/
│       └── block.json
└── src/
    ├── my-block/
    │   └── block.json
    └── index.jsCode language: AsciiDoc (asciidoc)

If you are using @wordpress/scripts, create-block, or something similar, your Block.json file will be placed in the build folder and follow the structure of the src folder.

Your build scripts are usually placed directly inside the build folder.

.
├── build/
│   ├── my-block/
│   │   └── block.json
│   ├── index.js
│   └── index.css
└── src/
    ├── my-block/
    │   └── block.json
    └── index.jsCode language: AsciiDoc (asciidoc)

To include the block JavaScript using block.json, we’ll traverse backward two directories to reach index.js.

file:../../index.jsCode language: AsciiDoc (asciidoc)

Since this is our block code and we only want to run it in the editor, we’ll use editorScript to load the file.

"editorScript": "file:../../index.js",Code language: JSON / JSON with Comments (json)

If you have styles, you can load styles the same way.

"editorScript": "file:../../index.js",
"editorStyle": "file:../../index.css",Code language: JSON / JSON with Comments (json)

You can also load multiple items using array format.

"editorScript": ["file:../../index.js", "file:../../index2.js"],
"editorStyle": ["file:../../index.css", "my-style-handle"],Code language: JSON / JSON with Comments (json)

As mentioned earlier, if you are using multiple blocks, it is not recommended to use file paths in your block.json file. Opt for script and style handles instead.

Loading scripts and styles via handles

To load scripts and styles via handles, you’ll need to make use of functions wp_register_script and wp_register_style.

If you need scripts to load on the frontend, register them using action wp_enqueue_scripts. For assets in the block editor, it’s recommended to use hook enqueue_block_assets.

Pin itShare

Armed with the handles, you can use them in your block.json file:

"editorScript": "alerts-dlx-block",
"editorStyle": "alerts-dlx-block-editor-styles",
"style": [
	"alerts-dlx-shoelace-light-css",
	"alerts-dlx-shoelace-dark-css",
	"alerts-dlx-block-editor-styles-lato"
]Code language: JSON / JSON with Comments (json)

Conclusion

In conclusion, using block.json to load scripts and styles provides a straightforward and efficient method for managing the assets of your blocks. Whether you choose to load them by file location or via handles, the flexibility offered by block.json empowers you to organize and optimize your block development.

Like this tutorial? There's more like it. Subscribe today!

Name(Required)

First Last

Email(Required)

Δ

Published On: on September 21, 2023

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.