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
This commit is contained in:
Andrew Ozz 2016-10-25 01:40:31 +00:00
parent 7d24c2cb2a
commit 913926c1bd
9 changed files with 186 additions and 82 deletions

View File

@ -26,6 +26,7 @@ final class _WP_Editors {
private static $editor_buttons_css = true; private static $editor_buttons_css = true;
private static $drag_drop_upload = false; private static $drag_drop_upload = false;
private static $old_dfw_compat = false; private static $old_dfw_compat = false;
private static $translation;
private function __construct() {} private function __construct() {}
@ -357,6 +358,13 @@ final class _WP_Editors {
/** This filter is documented in wp-admin/includes/media.php */ /** This filter is documented in wp-admin/includes/media.php */
$no_captions = (bool) apply_filters( 'disable_captions', '' ); $no_captions = (bool) apply_filters( 'disable_captions', '' );
$ext_plugins = ''; $ext_plugins = '';
$shortcut_labels = array();
foreach ( self::get_translation() as $name => $value ) {
if ( is_array( $value ) ) {
$shortcut_labels[$name] = $value[1];
}
}
if ( $set['teeny'] ) { if ( $set['teeny'] ) {
@ -550,7 +558,8 @@ final class _WP_Editors {
'wpeditimage_disable_captions' => $no_captions, 'wpeditimage_disable_captions' => $no_captions,
'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ), 'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
'plugins' => implode( ',', $plugins ), '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 ) ) { 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 // Default TinyMCE strings
'New document' => __( 'New document' ), 'New document' => __( 'New document' ),
'Formats' => _x( 'Formats', 'TinyMCE' ), 'Formats' => _x( 'Formats', 'TinyMCE' ),
'Headings' => _x( 'Headings', '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 */ /* translators: block tags */
'Blocks' => _x( 'Blocks', 'TinyMCE' ), 'Blocks' => _x( 'Blocks', 'TinyMCE' ),
'Paragraph' => __( 'Paragraph' ), 'Paragraph' => array( __( 'Paragraph' ), 'access7' ),
'Blockquote' => __( 'Blockquote' ), 'Blockquote' => array( __( 'Blockquote' ), 'accessQ' ),
'Div' => _x( 'Div', 'HTML tag' ), 'Div' => _x( 'Div', 'HTML tag' ),
'Pre' => _x( 'Pre', 'HTML tag' ), 'Pre' => _x( 'Pre', 'HTML tag' ),
'Preformatted' => _x( 'Preformatted', 'HTML tag' ), 'Preformatted' => _x( 'Preformatted', 'HTML tag' ),
'Address' => _x( 'Address', 'HTML tag' ), 'Address' => _x( 'Address', 'HTML tag' ),
'Inline' => _x( 'Inline', 'HTML elements' ), 'Inline' => _x( 'Inline', 'HTML elements' ),
'Underline' => __( 'Underline' ), 'Underline' => array( __( 'Underline' ), 'metaU' ),
'Strikethrough' => __( 'Strikethrough' ), 'Strikethrough' => array( __( 'Strikethrough' ), 'accessD' ),
'Subscript' => __( 'Subscript' ), 'Subscript' => __( 'Subscript' ),
'Superscript' => __( 'Superscript' ), 'Superscript' => __( 'Superscript' ),
'Clear formatting' => __( 'Clear formatting' ), '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' ), 'Source code' => __( 'Source code' ),
'Font Family' => __( 'Font Family' ), 'Font Family' => __( 'Font Family' ),
'Font Sizes' => __( 'Font Sizes' ), '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' ), 'Increase indent' => __( 'Increase indent' ),
'Decrease indent' => __( 'Decrease 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' ), 'Ok' => __( 'OK' ),
'Cancel' => __( 'Cancel' ), 'Cancel' => __( 'Cancel' ),
'Close' => __( 'Close' ), 'Close' => __( 'Close' ),
'Visual aids' => __( 'Visual aids' ), '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' ), 'Square' => _x( 'Square', 'list style' ),
'Default' => _x( 'Default', 'list style' ), 'Default' => _x( 'Default', 'list style' ),
'Circle' => _x( 'Circle', 'list style' ), 'Circle' => _x( 'Circle', 'list style' ),
@ -904,7 +904,7 @@ final class _WP_Editors {
'Author' => __( 'Author' ), 'Author' => __( 'Author' ),
// Media, image plugins // Media, image plugins
'Insert/edit image' => __( 'Insert/edit image' ), 'Insert/edit image' => array( __( 'Insert/edit image' ), 'accessM' ),
'General' => __( 'General' ), 'General' => __( 'General' ),
'Advanced' => __( 'Advanced' ), 'Advanced' => __( 'Advanced' ),
'Source' => __( 'Source' ), 'Source' => __( 'Source' ),
@ -938,8 +938,8 @@ final class _WP_Editors {
'Horizontal line' => __( 'Horizontal line' ), 'Horizontal line' => __( 'Horizontal line' ),
'Horizontal space' => __( 'Horizontal space' ), 'Horizontal space' => __( 'Horizontal space' ),
'Restore last draft' => __( 'Restore last draft' ), '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' ), 'Color' => __( 'Color' ),
'Custom color' => __( 'Custom color' ), 'Custom color' => __( 'Custom color' ),
@ -1043,11 +1043,11 @@ final class _WP_Editors {
'Format' => _x( 'Format', 'TinyMCE menu' ), 'Format' => _x( 'Format', 'TinyMCE menu' ),
// WordPress strings // 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) '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 'No alignment' => __( 'No alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
'Remove' => __( 'Remove' ), // Tooltip for the 'remove' 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 '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 'Link options' => __( 'Link options' ), // Tooltip for the 'link options' button in the inline link dialog
// Shortcuts help modal // Shortcuts help modal
'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ), 'Keyboard Shortcuts' => array( __( 'Keyboard Shortcuts' ), 'accessH' ),
'Default shortcuts,' => __( 'Default shortcuts,' ), 'Default shortcuts,' => __( 'Default shortcuts,' ),
'Additional shortcuts,' => __( 'Additional shortcuts,' ), 'Additional shortcuts,' => __( 'Additional shortcuts,' ),
'Focus shortcuts:' => __( 'Focus 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 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.' =>
__( '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): * Link plugin (not included):
@ -1092,10 +1093,31 @@ final class _WP_Editors {
* Url * 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 ) { if ( ! $mce_locale ) {
$mce_locale = self::$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. * Filters translated strings prepared for TinyMCE.
* *

View File

@ -588,6 +588,7 @@ div.mce-path {
.mce-menu .mce-menu-item-normal.mce-active, .mce-menu .mce-menu-item-normal.mce-active,
.mce-menu .mce-menu-item-preview.mce-active { .mce-menu .mce-menu-item-preview.mce-active {
background: #0073aa; /* See color scheme. */ background: #0073aa; /* See color scheme. */
color: #fff;
} }
.mce-menu .mce-menu-item-preview.mce-active { .mce-menu .mce-menu-item-preview.mce-active {
@ -650,6 +651,15 @@ div.mce-menu .mce-menu-item-sep,
margin-right: -2px; 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 */ /* Buttons in modals */
.mce-primary button, .mce-primary button,
.mce-primary button i { .mce-primary button i {

File diff suppressed because one or more lines are too long

View File

@ -588,6 +588,7 @@ div.mce-path {
.mce-menu .mce-menu-item-normal.mce-active, .mce-menu .mce-menu-item-normal.mce-active,
.mce-menu .mce-menu-item-preview.mce-active { .mce-menu .mce-menu-item-preview.mce-active {
background: #0073aa; /* See color scheme. */ background: #0073aa; /* See color scheme. */
color: #fff;
} }
.mce-menu .mce-menu-item-preview.mce-active { .mce-menu .mce-menu-item-preview.mce-active {
@ -650,6 +651,15 @@ div.mce-menu .mce-menu-item-sep,
margin-left: -2px; 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 */ /* Buttons in modals */
.mce-primary button, .mce-primary button,
.mce-primary button i { .mce-primary button i {

File diff suppressed because one or more lines are too long

View File

@ -231,48 +231,75 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ), meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ),
table1 = [], table1 = [],
table2 = [], table2 = [],
row1 = {},
row2 = {},
i1 = 0,
i2 = 0,
labels = editor.settings.wp_shortcut_labels,
header, html, dialog, $wrap; 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 out = '<tr>';
var i = 0;
columns = columns || 1;
each( row, function( text, key ) { 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>'; 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 = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
header = '<tr><th>' + header.join( '</th><th>' ) + '</th></tr>'; 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 ) { editor.on( 'SaveContent', function( event ) {

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.