Merge pull request #643 from contactashish13/issue-638

Visualizer button in Gutenberg's classic block shows no title

Author: rodica-andronache

classes/Visualizer/Module/Admin.php

@@ -198,9 +198,23 @@ public function init() {
 			$this->_addFilter( 'mce_external_languages', 'add_tinymce_lang', 10, 1 );
 			$this->_addFilter( 'mce_external_plugins', 'tinymce_plugin', 10, 1 );
 			$this->_addFilter( 'mce_buttons', 'register_mce_button', 10, 1 );
+			$this->_addFilter( 'tiny_mce_before_init', 'get_strings_for_block', 10, 1 );
 		}
 	}
 
+	/**
+	 * Add the strings required for the TinyMCE buttons for the classic block (not the classic editor).
+	 *
+	 * @since   ?
+	 * @access  friendly
+	 */
+	function get_strings_for_block( $settings ) {
+		$class = new Visualizer_Module_Language();
+		$strings         = $class->get_strings();
+		$array = array( 'visualizer_tinymce_plugin' => json_encode( $strings ) );
+		return array_merge( $settings, $array );
+	}
+
 	/**
 	 * Load plugin translation for - TinyMCE API
 	 *

classes/Visualizer/Module/Language.php

@@ -68,6 +68,18 @@ public function tinymce_translation() {
 		return $translated;
 	}
 
+	/**
+	 *
+	 * The method that returns the strings array
+	 *
+	 * @since    ?
+	 * @access   public
+	 * @return array
+	 */
+	public function get_strings() {
+		return $this->strings;
+	}
+
 }
 
 $visualizerLangClass = new Visualizer_Module_Language();

js/mce.js

@@ -3,8 +3,8 @@
 (function($) {
 	tinymce.PluginManager.add('visualizer_mce_button', function( editor, url ) {
 		editor.addButton( 'visualizer_mce_button', {
-			title: editor.getLang( 'visualizer_tinymce_plugin.plugin_label' ),
-			label: editor.getLang( 'visualizer_tinymce_plugin.plugin_label' ),
+			title: getTranslation( editor, 'plugin_label' ),
+			label: getTranslation( editor, 'plugin_label' ),
 			icon: 'visualizer-icon',
 			onclick: function() {
 				var frame = wp.media({
@@ -16,4 +16,18 @@
 		});
 	});
 
+    /**
+     * Gets the translation from the editor (when classic editor is enabled)
+     * OR
+     * from the settings array inside the editor (when classic block inside gutenberg)
+     */
+    function getTranslation(editor, slug){
+        var string = editor.getLang('visualizer_tinymce_plugin.' + slug);
+        // if the string is the same as the slug being requested for, look in the settings.
+        if(string === '{#visualizer_tinymce_plugin.' + slug + '}'){
+            string = editor.settings.visualizer_tinymce_plugin[slug];
+        }
+        return string;
+    }
+
 })(jQuery);