TinyMCE: Fix keyboard navigation when the `dfw` button is present but hidden. Ensure that button is added last in the DOM to match where it appears visually.

Props afercia, azaozz.
Fixes #46640.

git-svn-id: https://develop.svn.wordpress.org/trunk@45172 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2019-04-12 18:07:47 +00:00
parent 908b8238b9
commit ac97906269
4 changed files with 19 additions and 4 deletions

View File

@ -1473,12 +1473,20 @@
onPostRender: function() { onPostRender: function() {
var button = this; var button = this;
editor.on( 'init', function() {
if ( button.disabled() ) {
button.hide();
}
} );
$document $document
.on( 'dfw-activate.focus', function() { .on( 'dfw-activate.focus', function() {
button.disabled( false ); button.disabled( false );
button.show();
} ) } )
.on( 'dfw-deactivate.focus', function() { .on( 'dfw-deactivate.focus', function() {
button.disabled( true ); button.disabled( true );
button.hide();
} ) } )
.on( 'dfw-on.focus', function() { .on( 'dfw-on.focus', function() {
button.active( true ); button.active( true );

View File

@ -1273,12 +1273,10 @@ table.links-table {
/* DFW 2 /* DFW 2
-------------------------------------------------------------- */ -------------------------------------------------------------- */
#wp-content-wrap .mce-wp-dfw,
#qt_content_dfw { #qt_content_dfw {
display: none; display: none;
} }
.wp-editor-expand #wp-content-wrap .mce-wp-dfw,
.wp-editor-expand #qt_content_dfw { .wp-editor-expand #qt_content_dfw {
display: inline-block; display: inline-block;
} }

View File

@ -587,14 +587,16 @@ final class _WP_Editors {
if ( ! wp_is_mobile() ) { if ( ! wp_is_mobile() ) {
if ( $set['_content_editor_dfw'] ) { if ( $set['_content_editor_dfw'] ) {
$mce_buttons[] = 'wp_adv';
$mce_buttons[] = 'dfw'; $mce_buttons[] = 'dfw';
} else { } else {
$mce_buttons[] = 'fullscreen'; $mce_buttons[] = 'fullscreen';
$mce_buttons[] = 'wp_adv';
} }
} else {
$mce_buttons[] = 'wp_adv';
} }
$mce_buttons[] = 'wp_adv';
/** /**
* Filters the first-row list of TinyMCE buttons (Visual tab). * Filters the first-row list of TinyMCE buttons (Visual tab).
* *

View File

@ -1269,6 +1269,13 @@ i.mce-i-wp_code:before {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-wp-dfw {
margin: 7px 7px 0 0;
}
.qt-dfw {
margin: 5px 5px 0 0; margin: 5px 5px 0 0;
} }