diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 701680fc7c..b89e93907e 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -121,46 +121,41 @@ } .mce-window .wp-editor-help { - width: 440px; - padding: 10px 15px 0; + padding: 10px 10px 0 20px; } +.mce-window .wp-editor-help h2, .mce-window .wp-editor-help p { margin: 8px 0; white-space: normal; + font-size: 14px; + font-weight: normal; } .mce-window .wp-editor-help table { - width: 420px; + width: 100%; margin-bottom: 20px; } .mce-window .wp-editor-help td, .mce-window .wp-editor-help th { font-size: 13px; - vertical-align: middle; -} - -.mce-window .wp-editor-help td { padding: 5px; + vertical-align: middle; word-wrap: break-word; white-space: normal; } .mce-window .wp-editor-help th { font-weight: bold; - padding: 5px 0 0; -} - -.mce-window .wp-editor-help .wp-help-th-center th { - text-align: center; + padding-bottom: 0; } .mce-window .wp-editor-help kbd { font-family: monospace; - padding: 2px 7px; + padding: 2px 7px 3px; font-weight: bold; - margin: 0 1px; + margin: 0; background: #eaeaea; background: rgba(0,0,0,0.08); } @@ -170,7 +165,8 @@ padding: 0 5px; } -.mce-window .wp-help-header td:nth-child(odd) { +.mce-window .wp-help-th-center td:nth-child(odd), +.mce-window .wp-help-th-center th:nth-child(odd) { text-align: center; } diff --git a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js index 0bb068f6e5..ba75e39d00 100644 --- a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js @@ -205,7 +205,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ), table1 = [], table2 = [], - header, html; + header, html, dialog, $wrap; each( [ { c: 'Copy', x: 'Cut' }, @@ -238,9 +238,9 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { each( row, function( text, key ) { if ( ! text ) { - out += ''; + out += ''; } else { - out += '' + key + '' + __( text ) + ''; + out += '' + key + '' + __( text ) + ''; } }); @@ -248,18 +248,18 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { } header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ]; - header = '' + header.join( '' ) + ''; + header = '' + header.join( '' ) + ''; html = '
'; // Main section, default and additional shortcuts html = html + - '

' + __( 'Default shortcuts,' ) + ' ' + meta + '

' + + '

' + __( 'Default shortcuts,' ) + ' ' + meta + '

' + '' + header + table1.join('') + '
' + - '

' + __( 'Additional shortcuts,' ) + ' ' + access + '

' + + '

' + __( 'Additional shortcuts,' ) + ' ' + access + '

' + '' + header + table2.join('') + @@ -268,7 +268,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { if ( editor.plugins.wptextpattern ) { // Text pattern section html = html + - '

' + __( 'When starting a new paragraph with one of these patterns followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ) + '

' + + '

' + __( 'When starting a new paragraph with one of these patterns followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ) + '

' + '
' + tr({ '* -': 'Bullet list' }) + tr({ '1. 1)': 'Numbered list' }) + @@ -283,7 +283,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { // Focus management section html = html + - '

' + __( 'Focus shortcuts:' ) + '

' + + '

' + __( 'Focus shortcuts:' ) + '

' + '
' + tr({ 'Alt + F8': 'Inline toolbar (when an image, link or preview is selected)' }) + tr({ 'Alt + F9': 'Editor menu (when enabled)' }) + @@ -294,7 +294,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { html += ''; - editor.windowManager.open( { + dialog = editor.windowManager.open( { title: 'Keyboard Shortcuts', items: { type: 'container', @@ -306,6 +306,23 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { onclick: 'close' } } ); + + if ( dialog.$el ) { + dialog.$el.find( 'div[role="application"]' ).attr( 'role', 'document' ); + $wrap = dialog.$el.find( '.mce-wp-help' ); + + if ( $wrap[0] ) { + $wrap.attr( 'tabindex', '0' ).attr( 'role', 'tab' ); + $wrap[0].focus(); + $wrap.on( 'keydown', function( event ) { + // Prevent use of: page up, page down, end, home, left arrow, up arrow, right arrow, down arrow + // in the dialog keydown handler. + if ( event.keyCode >= 33 && event.keyCode <= 40 ) { + event.stopPropagation(); + } + }); + } + } } ); editor.addCommand( 'WP_Medialib', function() {