<?php
/**
* Enqueue editor-only scripts and styles for the Block Editor
*/
function myplugin_enqueue_block_editor_assets() {
// Enqueue editor JS
wp_enqueue_script(
'myplugin-editor-js', // Handle
plugin_dir_url(__FILE__) . 'build/editor.js', // Path to JS file
array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-i18n' ), // Dependencies
filemtime( plugin_dir_path(__FILE__) . 'build/editor.js' ), // Version for cache-busting
true // Load in footer
);
// Enqueue editor CSS
wp_enqueue_style(
'myplugin-editor-css', // Handle
plugin_dir_url(__FILE__) . 'build/editor.css', // Path to CSS file
array( 'wp-edit-blocks' ), // Dependency for editor styles
filemtime( plugin_dir_path(__FILE__) . 'build/editor.css' ) // Version
);
}
add_action( 'enqueue_block_editor_assets', 'myplugin_enqueue_block_editor_assets' );
Discussed in #473
Originally posted by sumitsinghwp May 15, 2026
It would be super helpful to have a snippet showing how to enqueue scripts and styles that load only in the WordPress block editor, not on the front-end. This ensures custom JS/CSS for blocks doesn’t affect site performance or interfere with front-end styling.
How it Works:
The enqueue_block_editor_assets hook ensures scripts/styles load only in the editor.
JS dependencies like wp-blocks and wp-element allow seamless integration with the block editor environment.
Editor CSS depends on wp-edit-blocks so that it overrides editor styles cleanly without affecting front-end appearance.
Why Useful:
Keeps front-end performance optimized.
Provides a clean, reusable pattern for developers creating custom blocks or editor enhancements.
Prevents conflicts between front-end and editor-specific styles.