When developing Block for Gutenberg we start by enqueuing the JavaScript and CSS. There is two way to hook the enqueue block: enqueue_block_editor_assets and enqueue_block_assets.
The enqueue_block_editor_assets is used to enqueue the block only in the editor side of WordPress. This is used for main JavaScript Block and CSS that overrides the Block editor only styles.
/** * Enqueue block editor only JavaScript and CSS */ function sample_block_editor_scripts() { $blockPath = '/assets/js/editor.blocks.js'; $editorStylePath = '/assets/css/blocks.editor.css'; wp_enqueue_script( 'sample-blocks-js', plugins_url( $blockPath, __FILE__ ), [ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-editor' ], filemtime( plugin_dir_path(__FILE__) . $blockPath ) ); wp_enqueue_style( 'sample-blocks-editor-css', plugins_url( $editorStylePath, __FILE__), [], filemtime( plugin_dir_path( __FILE__ ) . $editorStylePath ) ); } add_action( 'enqueue_block_editor_assets', 'sample_block_editor_scripts' );
The enqueue_block_assets is used when the Block
/** * Enqueue front end and editor JavaScript and CSS */ function sample_block_scripts() { $blockPath = '/assets/js/frontend.blocks.js'; $stylePath = '/assets/css/blocks.style.css'; wp_enqueue_script( 'sample-blocks-frontend-js', plugins_url( $blockPath, __FILE__ ), [ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-api', 'wp-editor' ], filemtime( plugin_dir_path(__FILE__) . $blockPath ) ); wp_enqueue_style( 'sample-blocks-css', plugins_url($stylePath, __FILE__), null, filemtime(plugin_dir_path(__FILE__) . $stylePath ) ); } add_action('enqueue_block_assets', 'sample_block_scripts');