Experience Level: Beginner JavaScript
In this tutorial – published in the Gutenberg Handbook – the WordPress docs team does a great job of explaining the basics for enqueuing block editor assets from a plugin or theme for both the editor only and both the editor and front end.
Article:
Topics Covered:
- Enqueuing custom scripts for use in the block editor
- Instructions for how to cite the Blocks API as a dependency
- Enqueuing custom styles for use in both the block editor & front end
- Registering and styling a new custom block style for a core block (Quote block)
- Troubleshooting tips
- Information about the different versions of JavaScript & build steps
Takaways:
This is a great addition to the Gutenbook Designer & Developer Handbook, which continues to be a work in progress. The docs team did a great job getting this tutorial shaped up (special shout out to Marcus Kazmierczak – @mkaz for notable contributions!).
This tutorial is especially useful because it illustrates how established WordPress APIs (like the dependencies API) works together with the new block editor in the admin and display of blocks on the front end. The custom quote block style tutorial near the end was a nice a bonus!
Side note: When you’re reading the tutorial, make sure to draw a distinction between usage of the enqueue_block_editor_assets and enqueue_block_assets hooks in the “Extending the Block Editor” section of the tutorial.
enqueue_block_editor_assets hook only enqueues assets in the editor, whereas enqueue_block_assets enqueues assets in both editor and the front end. Something to keep in mind.