Enqueueing Editor-Only Scripts and Styles for Block Editor

[sumitsinghwp]

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.

<?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' );

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.

[bph]

Thank you @sumitsinghwp for submitting the topic. It was approved. Conversation continues on the issue:

• Enqueueing Editor-Only Scripts and Styles for Block Editor #478