Changeset 45066

Timestamp:

03/29/2019 12:48:31 AM (5 years ago)

Author:

azaozz

Message:

TinyMCE:

• Fix adding the keyboard shortcuts to all button tooltips in the classic editor and classic block.
• Fix translating the aria labels for all buttons.

Fixes #35710;

Location:

trunk/src

Files:

• js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js (modified) (5 diffs)
• wp-includes/class-wp-editor.php (modified) (1 diff)

trunk/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js

@@ -13 +13 @@
         $ = window.jQuery,
         wp = window.wp,
-        hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) );
+        hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) ),
+        wpTooltips = false;
 
     if ( $ ) {
@@ -581 +582 @@
                 }
             });
-        }
-
-        if ( editor.settings.wp_shortcut_labels && editor.theme.panel ) {
-            var labels = {};
-            var access = 'Shift+Alt+';
-            var meta = 'Ctrl+';
-
-            // For Mac: ctrl = \u2303, 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 ] + ')';
-                        }
-                    } );
-                }
-            } );
         }
     });
@@ -718 +684 @@
         }
     });
+
+    editor.on( 'beforerenderui', function() {
+        if ( editor.theme.panel ) {
+            each( [ 'button', 'colorbutton', 'splitbutton' ], function( buttonType ) {
+                replaceButtonsTooltips( editor.theme.panel.find( buttonType ) );
+            } );
+
+            addShortcutsToListbox();
+        }
+    } );
+
+    function prepareTooltips() {
+        var access = 'Shift+Alt+';
+        var meta = 'Ctrl+';
+
+        wpTooltips = {};
+
+        // For MacOS: ctrl = \u2303, cmd = \u2318, alt = \u2325
+        if ( tinymce.Env.mac ) {
+            access = '\u2303\u2325';
+            meta = '\u2318';
+        }
+
+        // Some tooltips are translated, others are not...
+        if ( editor.settings.wp_shortcut_labels ) {
+            each( editor.settings.wp_shortcut_labels, function( value, tooltip ) {
+                var translated = editor.translate( tooltip );
+
+                value = value.replace( 'access', access ).replace( 'meta', meta );
+                wpTooltips[ tooltip ] = value;
+
+                // Add the translated so we can match all of them.
+                if ( tooltip !== translated ) {
+                    wpTooltips[ translated ] = value;
+                }
+            } );
+        }
+    }
+
+    function getTooltip( tooltip ) {
+        var translated = editor.translate( tooltip );
+        var label;
+
+        if ( ! wpTooltips ) {
+            prepareTooltips();
+        }
+
+        if ( wpTooltips.hasOwnProperty( translated ) ) {
+            label = wpTooltips[ translated ];
+        } else if ( wpTooltips.hasOwnProperty( tooltip ) ) {
+            label = wpTooltips[ tooltip ];
+        }
+
+        return label ? translated + ' (' + label + ')' : translated;
+    }
+
+    function replaceButtonsTooltips( buttons ) {
+
+        if ( ! buttons ) {
+            return;
+        }
+
+        each( buttons, function( button ) {
+            var tooltip;
+
+            if ( button && button.settings.tooltip ) {
+                tooltip = getTooltip( button.settings.tooltip );
+                button.settings.tooltip = tooltip;
+
+                // Override the aria label wiht the translated tooltip + shortcut.
+                if ( button._aria && button._aria.label ) {
+                    button._aria.label = tooltip;
+                }
+            }
+        } );
+    }
+
+    function addShortcutsToListbox() {
+        // 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 && wpTooltips.hasOwnProperty( item.text ) ) {
+                        item.shortcut = '(' + wpTooltips[ item.text ] + ')';
+                    }
+                } );
+            }
+        } );
+    }
 
     /**
@@ -753 +808 @@
             each( buttons, function( item ) {
                 var itemName;
+                var tooltip;
 
                 function bindSelectorChanged() {
@@ -841 +897 @@
                             if ( settings.toolbar_items_size ) {
                                 item.size = settings.toolbar_items_size;
+                            }
+
+                            tooltip = item.tooltip || item.title;
+
+                            if ( tooltip ) {
+                                item.tooltip = getTooltip( tooltip );
                             }
 

trunk/src/wp-includes/class-wp-editor.php

@@ -1152 +1152 @@
                 'Link'                                 => __( 'Link' ),
                 'Insert link'                          => __( 'Insert link' ),
-                'Insert/edit link'                     => __( 'Insert/edit link' ),
                 'Target'                               => __( 'Target' ),
                 'New window'                           => __( 'New window' ),