Updated JS injection to use wordpress-toolkit

Author: dmhendricks

README.md

@@ -73,12 +73,9 @@ See the [Getting Started](https://github.com/dmhendricks/wordpress-base-plugin/w
 ## Future Plans
 
 * Add Customizer example
-* Add dynamically-created CSS/JS files based on settings
-* Refactor the Plugin class for better organization and self-documentation
-* Create decent documentation and perform cleanup on the [wordpress-toolkit](https://github.com/dmhendricks/wordpress-toolkit) dependency
+* Refactor the Plugin base class for better organization and self-documentation
 * Add [phpdotenv](https://github.com/etelford/phpdotenv) support
-* Add encrypted text field example
-* Add some useful Carbon Fields CSS classes
+* Add some Carbon Fields CSS helper classes
 
 ## Change Log
 

app/EnqueueScripts.php

@@ -1,16 +1,18 @@
 <?php
 namespace VendorName\PluginName;
+use WordPress_ToolKit\ScriptObject;
 
 class EnqueueScripts extends Plugin {
 
   function __construct() {
 
-    // Enqueue frontend/backend scripts and global JavaScript variables
-    add_action( 'wp_head', array( $this, 'inject_javascript_settings' ) );
-    add_action( 'admin_head', array( $this, 'inject_javascript_settings' ) );
+    // Enqueue frontend/backend scripts
     add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_frontend_scripts') );
     add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts') );
 
+    // Inject plugin settings into page head
+    $this->inject_javascript_settings();
+
     // Example - Load Font Awesome from CDN, if enabled in Settings Page
     $enqueue_font_awesome = $this->get_plugin_option( 'enqueue_font_awesome' );
     if( $enqueue_font_awesome ) {
@@ -80,19 +82,25 @@ public function enqueue_font_awesome() {
   }
 
   /**
-    * Add global JavaScript settings variables. You can add any variables/settings
-    *    that you want to make available to your JavaScripts
+    * Inject JavaScript settings into header. You can add any variables/settings
+    *    that you want to make available to your JavaScripts.
     * @since 0.3.0
     */
-  public function inject_javascript_settings() {
+  private function inject_javascript_settings() {
+
+    $args = array(
+      'variable_name' => $this->prefix( 'plugin_settings', '_' ),
+      'target' => ['wp', 'admin']
+    );
 
-    $javascript_variables = array(
+    $values = array(
       'admin_bar_add_clear_cache' => $this->get_plugin_option( 'admin_bar_add_clear_cache' ),
       'admin_bar_add_clear_cache_success' => __( 'WordPress cache has been cleared.', self::$textdomain ),
-      'show_clear_cache_link' => current_user_can( 'manage_options' )
+      'show_clear_cache_link' => current_user_can( 'manage_options' ),
     );
 
-    echo "<script>var _wpbp_plugin_settings = JSON.parse('" . json_encode( $javascript_variables ) . "');</script>";
+    $js = new \WordPress_ToolKit\ScriptObject( $values );
+    $js->injectJS( $args );
 
   }
 

src/js/common/common.js

@@ -19,7 +19,7 @@
 		      },
 		      success: function(result)
 		      {
-            alert( result.success ? _wpbp_plugin_settings['admin_bar_add_clear_cache_success'] : 'Error: ' + result.message );
+            alert( result.success ? _myplugin_plugin_settings['admin_bar_add_clear_cache_success'] : 'Error: ' + result.message );
 		      }
 		  });
 
@@ -28,7 +28,7 @@
   }
 
   // Bind event to clear theme cache Admin Bar link
-  if( typeof _wpbp_plugin_settings !== 'undefined' && _wpbp_plugin_settings['show_clear_cache_link'] && _wpbp_plugin_settings['admin_bar_add_clear_cache'] ) {
+  if( typeof _myplugin_plugin_settings !== 'undefined' && _myplugin_plugin_settings['show_clear_cache_link'] && _myplugin_plugin_settings['admin_bar_add_clear_cache'] ) {
     $( '#wpadminbar' ).waitUntilExists(function() {
       $('#wp-admin-bar-clear_object_cache').on( 'click', function( event ) {
     		event.preventDefault();