TinyMCE: make keyboard shortcuts more discoverable by adding them to the buttons tooltips and in the Formats drop-down.

Props mor10, azaozz.
Fixes #38063.
Built from https://develop.svn.wordpress.org/trunk@38897


git-svn-id: http://core.svn.wordpress.org/trunk@38840 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-editor.php

@@ -26,6 +26,7 @@ final class _WP_Editors {
 	private static $editor_buttons_css = true;
 	private static $drag_drop_upload = false;
 	private static $old_dfw_compat = false;
+	private static $translation;
 
 	private function __construct() {}
 
@@ -357,6 +358,13 @@ final class _WP_Editors {
 				/** This filter is documented in wp-admin/includes/media.php */
 				$no_captions = (bool) apply_filters( 'disable_captions', '' );
 				$ext_plugins = '';
+				$shortcut_labels = array();
+
+				foreach ( self::get_translation() as $name => $value ) {
+					if ( is_array( $value ) ) {
+						$shortcut_labels[$name] = $value[1];
+					}
+				}
 
 				if ( $set['teeny'] ) {
 
@@ -550,7 +558,8 @@ final class _WP_Editors {
 					'wpeditimage_disable_captions' => $no_captions,
 					'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
 					'plugins' => implode( ',', $plugins ),
-					'wp_lang_attr' => get_bloginfo( 'language' )
+					'wp_lang_attr' => get_bloginfo( 'language' ),
+					'wp_shortcut_labels' => wp_json_encode( $shortcut_labels ),
 				);
 
 				if ( ! empty( $mce_external_plugins ) ) {
@@ -812,73 +821,64 @@ final class _WP_Editors {
 		) );
 	}
 
-	/**
+	private static function get_translation() {
-	 * Translates the default TinyMCE strings and returns them as JSON encoded object ready to be loaded with tinymce.addI18n().
+		if ( empty( self::$translation ) ) {
-	 * Can be used directly (_WP_Editors::wp_mce_translation()) by passing the same locale as set in the TinyMCE init object.
+			self::$translation = array(
-	 *
-	 * @static
-	 * @param string $mce_locale The locale used for the editor.
-	 * @param bool $json_only optional Whether to include the JavaScript calls to tinymce.addI18n() and tinymce.ScriptLoader.markDone().
-	 * @return string Translation object, JSON encoded.
-	 */
-	public static function wp_mce_translation( $mce_locale = '', $json_only = false ) {
-
-		$mce_translation = array(
 			// Default TinyMCE strings
 			'New document' => __( 'New document' ),
 			'Formats' => _x( 'Formats', 'TinyMCE' ),
 
 			'Headings' => _x( 'Headings', 'TinyMCE' ),
-			'Heading 1' => __( 'Heading 1' ),
+			'Heading 1' => array( __( 'Heading 1' ), 'access1' ),
-			'Heading 2' => __( 'Heading 2' ),
+			'Heading 2' => array( __( 'Heading 2' ), 'access2' ),
-			'Heading 3' => __( 'Heading 3' ),
+			'Heading 3' => array( __( 'Heading 3' ), 'access3' ),
-			'Heading 4' => __( 'Heading 4' ),
+			'Heading 4' => array( __( 'Heading 4' ), 'access4' ),
-			'Heading 5' => __( 'Heading 5' ),
+			'Heading 5' => array( __( 'Heading 5' ), 'access5' ),
-			'Heading 6' => __( 'Heading 6' ),
+			'Heading 6' => array( __( 'Heading 6' ), 'access6' ),
 
 			/* translators: block tags */
 			'Blocks' => _x( 'Blocks', 'TinyMCE' ),
-			'Paragraph' => __( 'Paragraph' ),
+			'Paragraph' => array( __( 'Paragraph' ), 'access7' ),
-			'Blockquote' => __( 'Blockquote' ),
+			'Blockquote' => array( __( 'Blockquote' ), 'accessQ' ),
 			'Div' => _x( 'Div', 'HTML tag' ),
 			'Pre' => _x( 'Pre', 'HTML tag' ),
 			'Preformatted' => _x( 'Preformatted', 'HTML tag' ),
 			'Address' => _x( 'Address', 'HTML tag' ),
 
 			'Inline' => _x( 'Inline', 'HTML elements' ),
-			'Underline' => __( 'Underline' ),
+			'Underline' => array( __( 'Underline' ), 'metaU' ),
-			'Strikethrough' => __( 'Strikethrough' ),
+			'Strikethrough' => array( __( 'Strikethrough' ), 'accessD' ),
 			'Subscript' => __( 'Subscript' ),
 			'Superscript' => __( 'Superscript' ),
 			'Clear formatting' => __( 'Clear formatting' ),
-			'Bold' => __( 'Bold' ),
+			'Bold' => array( __( 'Bold' ), 'metaB' ),
-			'Italic' => __( 'Italic' ),
+			'Italic' => array( __( 'Italic' ), 'metaI' ),
-			'Code' => __( 'Code' ),
+			'Code' => array( __( 'Code' ), 'accessX' ),
 			'Source code' => __( 'Source code' ),
 			'Font Family' => __( 'Font Family' ),
 			'Font Sizes' => __( 'Font Sizes' ),
 
-			'Align center' => __( 'Align center' ),
+			'Align center' => array( __( 'Align center' ), 'accessC' ),
-			'Align right' => __( 'Align right' ),
+			'Align right' => array( __( 'Align right' ), 'accessR' ),
-			'Align left' => __( 'Align left' ),
+			'Align left' => array( __( 'Align left' ), 'accessL' ),
-			'Justify' => __( 'Justify' ),
+			'Justify' => array( __( 'Justify' ), 'accessJ' ),
 			'Increase indent' => __( 'Increase indent' ),
 			'Decrease indent' => __( 'Decrease indent' ),
 
-			'Cut' => __( 'Cut' ),
+			'Cut' => array( __( 'Cut' ), 'metaX' ),
-			'Copy' => __( 'Copy' ),
+			'Copy' => array( __( 'Copy' ), 'metaC' ),
-			'Paste' => __( 'Paste' ),
+			'Paste' => array( __( 'Paste' ), 'metaV' ),
-			'Select all' => __( 'Select all' ),
+			'Select all' => array( __( 'Select all' ), 'metaA' ),
-			'Undo' => __( 'Undo' ),
+			'Undo' => array( __( 'Undo' ), 'metaZ' ),
-			'Redo' => __( 'Redo' ),
+			'Redo' => array( __( 'Redo' ), 'metaY' ),
 
 			'Ok' => __( 'OK' ),
 			'Cancel' => __( 'Cancel' ),
 			'Close' => __( 'Close' ),
 			'Visual aids' => __( 'Visual aids' ),
 
-			'Bullet list' => __( 'Bulleted list' ),
+			'Bullet list' => array( __( 'Bulleted list' ), 'accessU' ),
-			'Numbered list' => __( 'Numbered list' ),
+			'Numbered list' => array( __( 'Numbered list' ), 'accessO' ),
 			'Square' => _x( 'Square', 'list style' ),
 			'Default' => _x( 'Default', 'list style' ),
 			'Circle' => _x( 'Circle', 'list style' ),
@@ -904,7 +904,7 @@ final class _WP_Editors {
 			'Author' => __( 'Author' ),
 
 			// Media, image plugins
-			'Insert/edit image' => __( 'Insert/edit image' ),
+			'Insert/edit image' => array( __( 'Insert/edit image' ), 'accessM' ),
 			'General' => __( 'General' ),
 			'Advanced' => __( 'Advanced' ),
 			'Source' => __( 'Source' ),
@@ -938,8 +938,8 @@ final class _WP_Editors {
 			'Horizontal line' => __( 'Horizontal line' ),
 			'Horizontal space' => __( 'Horizontal space' ),
 			'Restore last draft' => __( 'Restore last draft' ),
-			'Insert/edit link' => __( 'Insert/edit link' ),
+			'Insert/edit link' => array( __( 'Insert/edit link' ), 'metaK' ),
-			'Remove link' => __( 'Remove link' ),
+			'Remove link' => array( __( 'Remove link' ), 'accessS' ),
 
 			'Color' => __( 'Color' ),
 			'Custom color' => __( 'Custom color' ),
@@ -1043,11 +1043,11 @@ final class _WP_Editors {
 			'Format' => _x( 'Format', 'TinyMCE menu' ),
 
 			// WordPress strings
-			'Toolbar Toggle' => __( 'Toolbar Toggle' ),
+			'Toolbar Toggle' => array( __( 'Toolbar Toggle' ), 'accessZ' ),
-			'Insert Read More tag' => __( 'Insert Read More tag' ),
+			'Insert Read More tag' => array( __( 'Insert Read More tag' ), 'accessT' ),
-			'Insert Page Break tag' => __( 'Insert Page Break tag' ),
+			'Insert Page Break tag' => array( __( 'Insert Page Break tag' ), 'accessP' ),
 			'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor (no ellipsis)
-			'Distraction-free writing mode' => __( 'Distraction-free writing mode' ),
+			'Distraction-free writing mode' => array( __( 'Distraction-free writing mode' ), 'accessW' ),
 			'No alignment' => __( 'No alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
 			'Remove' => __( 'Remove' ), // Tooltip for the 'remove' button in the image toolbar
 			'Edit ' => __( 'Edit' ), // Tooltip for the 'edit' button in the image toolbar
@@ -1056,7 +1056,7 @@ final class _WP_Editors {
 			'Link options'  => __( 'Link options' ), // Tooltip for the 'link options' button in the inline link dialog
 
 			// Shortcuts help modal
-			'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
+			'Keyboard Shortcuts' => array( __( 'Keyboard Shortcuts' ), 'accessH' ),
 			'Default shortcuts,' => __( 'Default shortcuts,' ),
 			'Additional shortcuts,' => __( 'Additional shortcuts,' ),
 			'Focus shortcuts:' => __( 'Focus shortcuts:' ),
@@ -1079,7 +1079,8 @@ final class _WP_Editors {
 				__( 'The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.' ),
 			'The next group of formatting shortcuts are applied as you type or when you insert them around plain text in the same paragraph. Press Escape or the Undo button to undo.' =>
 				__( 'The next group of formatting shortcuts are applied as you type or when you insert them around plain text in the same paragraph. Press Escape or the Undo button to undo.' ),
-		);
+			);
+		}
 
 		/**
 		 * Link plugin (not included):
@@ -1092,10 +1093,31 @@ final class _WP_Editors {
 		 *	Url
 		 */
 
+		return self::$translation;
+	}
+
+	/**
+	 * Translates the default TinyMCE strings and returns them as JSON encoded object ready to be loaded with tinymce.addI18n().
+	 * Can be used directly (_WP_Editors::wp_mce_translation()) by passing the same locale as set in the TinyMCE init object.
+	 *
+	 * @static
+	 * @param string $mce_locale The locale used for the editor.
+	 * @param bool $json_only optional Whether to include the JavaScript calls to tinymce.addI18n() and tinymce.ScriptLoader.markDone().
+	 * @return string Translation object, JSON encoded.
+	 */
+	public static function wp_mce_translation( $mce_locale = '', $json_only = false ) {
 		if ( ! $mce_locale ) {
 			$mce_locale = self::$mce_locale;
 		}
 
+		$mce_translation = self::get_translation();
+		
+		foreach ( $mce_translation as $name => $value ) {
+			if ( is_array( $value ) ) {
+				$mce_translation[$name] = $value[0];
+			}
+		}
+
 		/**
 		 * Filters translated strings prepared for TinyMCE.
 		 *

wp-includes/css/editor-rtl.css

@@ -588,6 +588,7 @@ div.mce-path {
 .mce-menu .mce-menu-item-normal.mce-active,
 .mce-menu .mce-menu-item-preview.mce-active {
 	background: #0073aa; /* See color scheme. */
+	color: #fff;
 }
 
 .mce-menu .mce-menu-item-preview.mce-active {
@@ -650,6 +651,15 @@ div.mce-menu .mce-menu-item-sep,
 	margin-right: -2px;
 }
 
+/* Keyboard shortcuts position */
+.mce-menu.mce-menu-align .mce-menu-item-normal {
+	position: relative;
+}
+
+.mce-menu.mce-menu-align .mce-menu-shortcut {
+	bottom: 0.5em;
+}
+
 /* Buttons in modals */
 .mce-primary button,
 .mce-primary button i {

wp-includes/css/editor.css

@@ -588,6 +588,7 @@ div.mce-path {
 .mce-menu .mce-menu-item-normal.mce-active,
 .mce-menu .mce-menu-item-preview.mce-active {
 	background: #0073aa; /* See color scheme. */
+	color: #fff;
 }
 
 .mce-menu .mce-menu-item-preview.mce-active {
@@ -650,6 +651,15 @@ div.mce-menu .mce-menu-item-sep,
 	margin-left: -2px;
 }
 
+/* Keyboard shortcuts position */
+.mce-menu.mce-menu-align .mce-menu-item-normal {
+	position: relative;
+}
+
+.mce-menu.mce-menu-align .mce-menu-shortcut {
+	bottom: 0.5em;
+}
+
 /* Buttons in modals */
 .mce-primary button,
 .mce-primary button i {

wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -231,48 +231,75 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 			meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ),
 			table1 = [],
 			table2 = [],
+			row1 = {},
+			row2 = {},
+			i1 = 0,
+			i2 = 0,
+			labels = editor.settings.wp_shortcut_labels,
 			header, html, dialog, $wrap;
 
-		each( [
+		if ( ! labels ) {
-			{ c: 'Copy',      x: 'Cut'              },
+			return;
-			{ v: 'Paste',     a: 'Select all'       },
+		}
-			{ z: 'Undo',      y: 'Redo'             },
-			{ b: 'Bold',      i: 'Italic'           },
-			{ u: 'Underline', k: 'Insert/edit link' }
-		], function( row ) {
-			table1.push( tr( row ) );
-		} );
 
-		each( [
+		function tr( row, columns ) {
-			{ 1: 'Heading 1',             2: 'Heading 2'                     },
-			{ 3: 'Heading 3',             4: 'Heading 4'                     },
-			{ 5: 'Heading 5',             6: 'Heading 6'                     },
-			{ l: 'Align left',            c: 'Align center'                  },
-			{ r: 'Align right',           j: 'Justify'                       },
-			{ d: 'Strikethrough',         q: 'Blockquote'                    },
-			{ u: 'Bullet list',           o: 'Numbered list'                 },
-			{ a: 'Insert/edit link',      s: 'Remove link'                   },
-			{ m: 'Insert/edit image',     t: 'Insert Read More tag'          },
-			{ h: 'Keyboard Shortcuts',    x: 'Code'                          },
-			{ p: 'Insert Page Break tag', w: 'Distraction-free writing mode' }
-		], function( row ) {
-			table2.push( tr( row ) );
-		} );
-
-		function tr( row ) {
 			var out = '<tr>';
+			var i = 0;
+
+			columns = columns || 1;
 
 			each( row, function( text, key ) {
-				if ( ! text ) {
+				out += '<td><kbd>' + key + '</kbd></td><td>' + __( text ) + '</td>';
-					out += '<td></td><td></td>';
+				i++;
-				} else {
-					out += '<td><kbd>' + key + '</kbd></td><td>' + __( text ) + '</td>';
-				}
 			});
 
+			while ( i < columns ) {
+				out += '<td></td><td></td>';
+				i++;
+			}
+
 			return out + '</tr>';
 		}
 
+		each ( labels, function( label, name ) {
+			var letter;
+
+			if ( label.indexOf( 'meta' ) !== -1 ) {
+				i1++;
+				letter = label.replace( 'meta', '' ).toLowerCase();
+
+				if ( letter ) {
+					row1[ letter ] = name;
+
+					if ( i1 % 2 === 0 ) {
+						table1.push( tr( row1, 2 ) );
+						row1 = {};
+					}
+				}
+			} else if ( label.indexOf( 'access' ) !== -1 ) {
+				i2++;
+				letter = label.replace( 'access', '' ).toLowerCase();
+
+				if ( letter ) {
+					row2[ letter ] = name;
+
+					if ( i2 % 2 === 0 ) {
+						table2.push( tr( row2, 2 ) );
+						row2 = {};
+					}
+				}
+			}
+		} );
+
+		// Add remaining single entries.
+		if ( i1 % 2 > 0 ) {
+			table1.push( tr( row1, 2 ) );
+		}
+
+		if ( i2 % 2 > 0 ) {
+			table2.push( tr( row2, 2 ) );
+		}
+
 		header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
 		header = '<tr><th>' + header.join( '</th><th>' ) + '</th></tr>';
 
@@ -521,6 +548,41 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 				});
 			});
 		}
+
+		if ( editor.settings.wp_shortcut_labels ) {
+			var labels = {};
+			var access = 'Shift+Alt+';
+			var meta = 'Ctrl+';
+
+			// For Mac: shift = \u2303, ctrl = \u21E7, cmd = \u2318, alt = \u2325
+
+			if ( tinymce.Env.mac ) {
+				access = '\u2303\u2325 ';
+				meta = '\u2318';
+			}
+
+			each( editor.settings.wp_shortcut_labels, function( value, name ) {
+				labels[ name ] = value.replace( 'access', access ).replace( 'meta', meta );
+			} );
+
+			each( editor.theme.panel.find('button'), function( button ) {
+				if ( button && button.settings.tooltip && labels.hasOwnProperty( button.settings.tooltip ) ) {
+					// Need to translate now. We are changing the string so it won't match and cannot be translated later.
+					button.settings.tooltip = editor.translate( button.settings.tooltip ) + ' (' + labels[ button.settings.tooltip ] + ')';
+				}
+			} );
+
+			// listbox for the "blocks" drop-down
+			each( editor.theme.panel.find('listbox'), function( listbox ) {
+				if ( listbox && listbox.settings.text === 'Paragraph' ) {
+					each( listbox.settings.values, function( item ) {
+						if ( item.text && labels.hasOwnProperty( item.text ) ) {
+							item.shortcut = '(' + labels[ item.text ] + ')';
+						}
+					} );
+				}
+			} );
+		}
 	});
 
 	editor.on( 'SaveContent', function( event ) {

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-alpha-38896';
+$wp_version = '4.7-alpha-38897';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.