Make WordPress Core

Changeset 38897


Ignore:
Timestamp:
10/25/2016 01:39:15 AM (7 years ago)
Author:
azaozz
Message:

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

Props mor10, azaozz.
Fixes #38063.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-editor.php

    r38803 r38897  
    2727    private static $drag_drop_upload = false;
    2828    private static $old_dfw_compat = false;
     29    private static $translation;
    2930
    3031    private function __construct() {}
     
    358359                $no_captions = (bool) apply_filters( 'disable_captions', '' );
    359360                $ext_plugins = '';
     361                $shortcut_labels = array();
     362
     363                foreach ( self::get_translation() as $name => $value ) {
     364                    if ( is_array( $value ) ) {
     365                        $shortcut_labels[$name] = $value[1];
     366                    }
     367                }
    360368
    361369                if ( $set['teeny'] ) {
     
    551559                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
    552560                    'plugins' => implode( ',', $plugins ),
    553                     'wp_lang_attr' => get_bloginfo( 'language' )
     561                    'wp_lang_attr' => get_bloginfo( 'language' ),
     562                    'wp_shortcut_labels' => wp_json_encode( $shortcut_labels ),
    554563                );
    555564
     
    813822    }
    814823
    815     /**
    816      * Translates the default TinyMCE strings and returns them as JSON encoded object ready to be loaded with tinymce.addI18n().
    817      * Can be used directly (_WP_Editors::wp_mce_translation()) by passing the same locale as set in the TinyMCE init object.
    818      *
    819      * @static
    820      * @param string $mce_locale The locale used for the editor.
    821      * @param bool $json_only optional Whether to include the JavaScript calls to tinymce.addI18n() and tinymce.ScriptLoader.markDone().
    822      * @return string Translation object, JSON encoded.
    823      */
    824     public static function wp_mce_translation( $mce_locale = '', $json_only = false ) {
    825 
    826         $mce_translation = array(
     824    private static function get_translation() {
     825        if ( empty( self::$translation ) ) {
     826            self::$translation = array(
    827827            // Default TinyMCE strings
    828828            'New document' => __( 'New document' ),
     
    830830
    831831            'Headings' => _x( 'Headings', 'TinyMCE' ),
    832             'Heading 1' => __( 'Heading 1' ),
    833             'Heading 2' => __( 'Heading 2' ),
    834             'Heading 3' => __( 'Heading 3' ),
    835             'Heading 4' => __( 'Heading 4' ),
    836             'Heading 5' => __( 'Heading 5' ),
    837             'Heading 6' => __( 'Heading 6' ),
     832            'Heading 1' => array( __( 'Heading 1' ), 'access1' ),
     833            'Heading 2' => array( __( 'Heading 2' ), 'access2' ),
     834            'Heading 3' => array( __( 'Heading 3' ), 'access3' ),
     835            'Heading 4' => array( __( 'Heading 4' ), 'access4' ),
     836            'Heading 5' => array( __( 'Heading 5' ), 'access5' ),
     837            'Heading 6' => array( __( 'Heading 6' ), 'access6' ),
    838838
    839839            /* translators: block tags */
    840840            'Blocks' => _x( 'Blocks', 'TinyMCE' ),
    841             'Paragraph' => __( 'Paragraph' ),
    842             'Blockquote' => __( 'Blockquote' ),
     841            'Paragraph' => array( __( 'Paragraph' ), 'access7' ),
     842            'Blockquote' => array( __( 'Blockquote' ), 'accessQ' ),
    843843            'Div' => _x( 'Div', 'HTML tag' ),
    844844            'Pre' => _x( 'Pre', 'HTML tag' ),
     
    847847
    848848            'Inline' => _x( 'Inline', 'HTML elements' ),
    849             'Underline' => __( 'Underline' ),
    850             'Strikethrough' => __( 'Strikethrough' ),
     849            'Underline' => array( __( 'Underline' ), 'metaU' ),
     850            'Strikethrough' => array( __( 'Strikethrough' ), 'accessD' ),
    851851            'Subscript' => __( 'Subscript' ),
    852852            'Superscript' => __( 'Superscript' ),
    853853            'Clear formatting' => __( 'Clear formatting' ),
    854             'Bold' => __( 'Bold' ),
    855             'Italic' => __( 'Italic' ),
    856             'Code' => __( 'Code' ),
     854            'Bold' => array( __( 'Bold' ), 'metaB' ),
     855            'Italic' => array( __( 'Italic' ), 'metaI' ),
     856            'Code' => array( __( 'Code' ), 'accessX' ),
    857857            'Source code' => __( 'Source code' ),
    858858            'Font Family' => __( 'Font Family' ),
    859859            'Font Sizes' => __( 'Font Sizes' ),
    860860
    861             'Align center' => __( 'Align center' ),
    862             'Align right' => __( 'Align right' ),
    863             'Align left' => __( 'Align left' ),
    864             'Justify' => __( 'Justify' ),
     861            'Align center' => array( __( 'Align center' ), 'accessC' ),
     862            'Align right' => array( __( 'Align right' ), 'accessR' ),
     863            'Align left' => array( __( 'Align left' ), 'accessL' ),
     864            'Justify' => array( __( 'Justify' ), 'accessJ' ),
    865865            'Increase indent' => __( 'Increase indent' ),
    866866            'Decrease indent' => __( 'Decrease indent' ),
    867867
    868             'Cut' => __( 'Cut' ),
    869             'Copy' => __( 'Copy' ),
    870             'Paste' => __( 'Paste' ),
    871             'Select all' => __( 'Select all' ),
    872             'Undo' => __( 'Undo' ),
    873             'Redo' => __( 'Redo' ),
     868            'Cut' => array( __( 'Cut' ), 'metaX' ),
     869            'Copy' => array( __( 'Copy' ), 'metaC' ),
     870            'Paste' => array( __( 'Paste' ), 'metaV' ),
     871            'Select all' => array( __( 'Select all' ), 'metaA' ),
     872            'Undo' => array( __( 'Undo' ), 'metaZ' ),
     873            'Redo' => array( __( 'Redo' ), 'metaY' ),
    874874
    875875            'Ok' => __( 'OK' ),
     
    878878            'Visual aids' => __( 'Visual aids' ),
    879879
    880             'Bullet list' => __( 'Bulleted list' ),
    881             'Numbered list' => __( 'Numbered list' ),
     880            'Bullet list' => array( __( 'Bulleted list' ), 'accessU' ),
     881            'Numbered list' => array( __( 'Numbered list' ), 'accessO' ),
    882882            'Square' => _x( 'Square', 'list style' ),
    883883            'Default' => _x( 'Default', 'list style' ),
     
    905905
    906906            // Media, image plugins
    907             'Insert/edit image' => __( 'Insert/edit image' ),
     907            'Insert/edit image' => array( __( 'Insert/edit image' ), 'accessM' ),
    908908            'General' => __( 'General' ),
    909909            'Advanced' => __( 'Advanced' ),
     
    939939            'Horizontal space' => __( 'Horizontal space' ),
    940940            'Restore last draft' => __( 'Restore last draft' ),
    941             'Insert/edit link' => __( 'Insert/edit link' ),
    942             'Remove link' => __( 'Remove link' ),
     941            'Insert/edit link' => array( __( 'Insert/edit link' ), 'metaK' ),
     942            'Remove link' => array( __( 'Remove link' ), 'accessS' ),
    943943
    944944            'Color' => __( 'Color' ),
     
    10441044
    10451045            // WordPress strings
    1046             'Toolbar Toggle' => __( 'Toolbar Toggle' ),
    1047             'Insert Read More tag' => __( 'Insert Read More tag' ),
    1048             'Insert Page Break tag' => __( 'Insert Page Break tag' ),
     1046            'Toolbar Toggle' => array( __( 'Toolbar Toggle' ), 'accessZ' ),
     1047            'Insert Read More tag' => array( __( 'Insert Read More tag' ), 'accessT' ),
     1048            'Insert Page Break tag' => array( __( 'Insert Page Break tag' ), 'accessP' ),
    10491049            'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor (no ellipsis)
    1050             'Distraction-free writing mode' => __( 'Distraction-free writing mode' ),
     1050            'Distraction-free writing mode' => array( __( 'Distraction-free writing mode' ), 'accessW' ),
    10511051            'No alignment' => __( 'No alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
    10521052            'Remove' => __( 'Remove' ), // Tooltip for the 'remove' button in the image toolbar
     
    10571057
    10581058            // Shortcuts help modal
    1059             'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
     1059            'Keyboard Shortcuts' => array( __( 'Keyboard Shortcuts' ), 'accessH' ),
    10601060            'Default shortcuts,' => __( 'Default shortcuts,' ),
    10611061            'Additional shortcuts,' => __( 'Additional shortcuts,' ),
     
    10801080            '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.' =>
    10811081                __( '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.' ),
    1082         );
     1082            );
     1083        }
    10831084
    10841085        /**
     
    10931094         */
    10941095
     1096        return self::$translation;
     1097    }
     1098
     1099    /**
     1100     * Translates the default TinyMCE strings and returns them as JSON encoded object ready to be loaded with tinymce.addI18n().
     1101     * Can be used directly (_WP_Editors::wp_mce_translation()) by passing the same locale as set in the TinyMCE init object.
     1102     *
     1103     * @static
     1104     * @param string $mce_locale The locale used for the editor.
     1105     * @param bool $json_only optional Whether to include the JavaScript calls to tinymce.addI18n() and tinymce.ScriptLoader.markDone().
     1106     * @return string Translation object, JSON encoded.
     1107     */
     1108    public static function wp_mce_translation( $mce_locale = '', $json_only = false ) {
    10951109        if ( ! $mce_locale ) {
    10961110            $mce_locale = self::$mce_locale;
     1111        }
     1112
     1113        $mce_translation = self::get_translation();
     1114       
     1115        foreach ( $mce_translation as $name => $value ) {
     1116            if ( is_array( $value ) ) {
     1117                $mce_translation[$name] = $value[0];
     1118            }
    10971119        }
    10981120
  • trunk/src/wp-includes/css/editor.css

    r38801 r38897  
    589589.mce-menu .mce-menu-item-preview.mce-active {
    590590    background: #0073aa; /* See color scheme. */
     591    color: #fff;
    591592}
    592593
     
    649650.mce-menu-has-icons i.mce-ico:before {
    650651    margin-left: -2px;
     652}
     653
     654/* Keyboard shortcuts position */
     655.mce-menu.mce-menu-align .mce-menu-item-normal {
     656    position: relative;
     657}
     658
     659.mce-menu.mce-menu-align .mce-menu-shortcut {
     660    bottom: 0.5em;
    651661}
    652662
  • trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

    r38160 r38897  
    232232            table1 = [],
    233233            table2 = [],
     234            row1 = {},
     235            row2 = {},
     236            i1 = 0,
     237            i2 = 0,
     238            labels = editor.settings.wp_shortcut_labels,
    234239            header, html, dialog, $wrap;
    235240
    236         each( [
    237             { c: 'Copy',      x: 'Cut'              },
    238             { v: 'Paste',     a: 'Select all'       },
    239             { z: 'Undo',      y: 'Redo'             },
    240             { b: 'Bold',      i: 'Italic'           },
    241             { u: 'Underline', k: 'Insert/edit link' }
    242         ], function( row ) {
    243             table1.push( tr( row ) );
     241        if ( ! labels ) {
     242            return;
     243        }
     244
     245        function tr( row, columns ) {
     246            var out = '<tr>';
     247            var i = 0;
     248
     249            columns = columns || 1;
     250
     251            each( row, function( text, key ) {
     252                out += '<td><kbd>' + key + '</kbd></td><td>' + __( text ) + '</td>';
     253                i++;
     254            });
     255
     256            while ( i < columns ) {
     257                out += '<td></td><td></td>';
     258                i++;
     259            }
     260
     261            return out + '</tr>';
     262        }
     263
     264        each ( labels, function( label, name ) {
     265            var letter;
     266
     267            if ( label.indexOf( 'meta' ) !== -1 ) {
     268                i1++;
     269                letter = label.replace( 'meta', '' ).toLowerCase();
     270
     271                if ( letter ) {
     272                    row1[ letter ] = name;
     273
     274                    if ( i1 % 2 === 0 ) {
     275                        table1.push( tr( row1, 2 ) );
     276                        row1 = {};
     277                    }
     278                }
     279            } else if ( label.indexOf( 'access' ) !== -1 ) {
     280                i2++;
     281                letter = label.replace( 'access', '' ).toLowerCase();
     282
     283                if ( letter ) {
     284                    row2[ letter ] = name;
     285
     286                    if ( i2 % 2 === 0 ) {
     287                        table2.push( tr( row2, 2 ) );
     288                        row2 = {};
     289                    }
     290                }
     291            }
    244292        } );
    245293
    246         each( [
    247             { 1: 'Heading 1',             2: 'Heading 2'                     },
    248             { 3: 'Heading 3',             4: 'Heading 4'                     },
    249             { 5: 'Heading 5',             6: 'Heading 6'                     },
    250             { l: 'Align left',            c: 'Align center'                  },
    251             { r: 'Align right',           j: 'Justify'                       },
    252             { d: 'Strikethrough',         q: 'Blockquote'                    },
    253             { u: 'Bullet list',           o: 'Numbered list'                 },
    254             { a: 'Insert/edit link',      s: 'Remove link'                   },
    255             { m: 'Insert/edit image',     t: 'Insert Read More tag'          },
    256             { h: 'Keyboard Shortcuts',    x: 'Code'                          },
    257             { p: 'Insert Page Break tag', w: 'Distraction-free writing mode' }
    258         ], function( row ) {
    259             table2.push( tr( row ) );
    260         } );
    261 
    262         function tr( row ) {
    263             var out = '<tr>';
    264 
    265             each( row, function( text, key ) {
    266                 if ( ! text ) {
    267                     out += '<td></td><td></td>';
    268                 } else {
    269                     out += '<td><kbd>' + key + '</kbd></td><td>' + __( text ) + '</td>';
    270                 }
    271             });
    272 
    273             return out + '</tr>';
     294        // Add remaining single entries.
     295        if ( i1 % 2 > 0 ) {
     296            table1.push( tr( row1, 2 ) );
     297        }
     298
     299        if ( i2 % 2 > 0 ) {
     300            table2.push( tr( row2, 2 ) );
    274301        }
    275302
     
    521548                });
    522549            });
     550        }
     551
     552        if ( editor.settings.wp_shortcut_labels ) {
     553            var labels = {};
     554            var access = 'Shift+Alt+';
     555            var meta = 'Ctrl+';
     556
     557            // For Mac: shift = \u2303, ctrl = \u21E7, cmd = \u2318, alt = \u2325
     558
     559            if ( tinymce.Env.mac ) {
     560                access = '\u2303\u2325 ';
     561                meta = '\u2318';
     562            }
     563
     564            each( editor.settings.wp_shortcut_labels, function( value, name ) {
     565                labels[ name ] = value.replace( 'access', access ).replace( 'meta', meta );
     566            } );
     567
     568            each( editor.theme.panel.find('button'), function( button ) {
     569                if ( button && button.settings.tooltip && labels.hasOwnProperty( button.settings.tooltip ) ) {
     570                    // Need to translate now. We are changing the string so it won't match and cannot be translated later.
     571                    button.settings.tooltip = editor.translate( button.settings.tooltip ) + ' (' + labels[ button.settings.tooltip ] + ')';
     572                }
     573            } );
     574
     575            // listbox for the "blocks" drop-down
     576            each( editor.theme.panel.find('listbox'), function( listbox ) {
     577                if ( listbox && listbox.settings.text === 'Paragraph' ) {
     578                    each( listbox.settings.values, function( item ) {
     579                        if ( item.text && labels.hasOwnProperty( item.text ) ) {
     580                            item.shortcut = '(' + labels[ item.text ] + ')';
     581                        }
     582                    } );
     583                }
     584            } );
    523585        }
    524586    });
Note: See TracChangeset for help on using the changeset viewer.