Merge pull request #3 from wptrainingteam/part-3-enqueue-additional-assets

add: enqueue additional assets

Author: troychaplin

advanced-multi-block.php

@@ -46,4 +46,36 @@ function register_blocks() {
        return;
    }
 }
-add_action( 'init', 'register_blocks' );
+add_action( 'init', 'register_blocks' );
+
+/**
+* Enqueues the block assets for the editor
+*/
+function enqueue_block_assets() {
+  $asset_file = include plugin_dir_path( __FILE__ ) . 'build/editor-script.asset.php';
+
+  wp_enqueue_script(
+      'editor-script-js',
+      plugin_dir_url( __FILE__ ) . 'build/editor-script.js',
+      $asset_file['dependencies'],
+      $asset_file['version'],
+      false
+  );
+}
+add_action( 'enqueue_block_editor_assets', 'enqueue_block_assets' );
+
+/**
+* Enqueues the block assets for the frontend
+*/
+function enqueue_frontend_assets() {
+  $asset_file = include plugin_dir_path( __FILE__ ) . 'build/frontend-script.asset.php';
+
+  wp_enqueue_script(
+      'frontend-script-js',
+      plugin_dir_url( __FILE__ ) . 'build/frontend-script.js',
+      $asset_file['dependencies'],
+      $asset_file['version'],
+      true
+  );
+}
+add_action( 'wp_enqueue_scripts', 'enqueue_frontend_assets' );

build/editor-script.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '31d6cfe0d16ae931b73c');

build/editor-script.js

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '31d6cfe0d16ae931b73c');

build/frontend-script.asset.php

@@ -0,0 +1,8 @@
+/**
+* Block Editor Script Functionality
+*
+* The following scripts are compiled into a single asset and loaded into the block editor.
+*
+*/
+
+// import editor scripts here.

build/frontend-script.js

@@ -0,0 +1,8 @@
+/**
+* Frontend Script Functionality
+*
+* The following scripts are compiled into a single asset and loaded into the frontend.
+*
+*/
+
+// import frontend scripts here.

src/editor-script.js

@@ -0,0 +1,14 @@
+const [ scriptConfig, moduleConfig, ] = require('@wordpress/scripts/config/webpack.config');
+const path = require('path');
+
+module.exports = [
+   {
+       ...scriptConfig,
+       entry: {
+           ...scriptConfig.entry(),
+           'editor-script': path.resolve(__dirname, 'src/editor-script.js'),
+           'frontend-script': path.resolve(__dirname, 'src/frontend-script.js'),
+       },
+   },
+   moduleConfig,
+];