Customize: Allow tab characters in custom CSS input.

Pressing `Esc` followed by `Tab` allows for tabbing to the next element.

Props afercia, coffee2code, westonruter.
See #35395.
Fixes #38667.

Built from https://develop.svn.wordpress.org/trunk@39149


git-svn-id: http://core.svn.wordpress.org/trunk@39089 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2016-11-06 19:09:33 +00:00
parent 68b4181985
commit 5ea1e6fd80
8 changed files with 60 additions and 5 deletions

View File

@ -1129,6 +1129,10 @@ p.customize-section-description {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
#customize-theme-controls #sub-accordion-section-custom_css textarea {
-moz-tab-size: 4;
tab-size: 4;
}
#sub-accordion-section-custom_css .customize-control-notifications-container { #sub-accordion-section-custom_css .customize-control-notifications-container {
margin-bottom: 15px; margin-bottom: 15px;

File diff suppressed because one or more lines are too long

View File

@ -1129,6 +1129,10 @@ p.customize-section-description {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
#customize-theme-controls #sub-accordion-section-custom_css textarea {
-moz-tab-size: 4;
tab-size: 4;
}
#sub-accordion-section-custom_css .customize-control-notifications-container { #sub-accordion-section-custom_css .customize-control-notifications-container {
margin-bottom: 15px; margin-bottom: 15px;

File diff suppressed because one or more lines are too long

View File

@ -5234,6 +5234,53 @@
}); });
}); });
// Allow tabs to be entered in Custom CSS textarea.
api.control( 'custom_css', function setupCustomCssControl( control ) {
control.deferred.embedded.done( function allowTabs() {
var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
$textarea.on( 'blur', function onBlur() {
$textarea.data( 'next-tab-blurs', false );
} );
$textarea.on( 'keydown', function onKeydown( event ) {
var selectionStart, selectionEnd, value, scroll, tabKeyCode = 9, escKeyCode = 27;
if ( escKeyCode === event.keyCode ) {
if ( ! $textarea.data( 'next-tab-blurs' ) ) {
$textarea.data( 'next-tab-blurs', true );
event.stopPropagation(); // Prevent collapsing the section.
}
return;
}
// Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
return;
}
// Prevent capturing Tab characters if Esc was pressed.
if ( $textarea.data( 'next-tab-blurs' ) ) {
return;
}
selectionStart = textarea.selectionStart;
selectionEnd = textarea.selectionEnd;
value = textarea.value;
if ( selectionStart >= 0 ) {
scroll = $textarea.scrollTop;
textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
$textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
textarea.scrollTop = scroll;
}
event.stopPropagation();
event.preventDefault();
} );
} );
} );
// Update the setting validities. // Update the setting validities.
api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) { api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) {
api._handleSettingValidities( { api._handleSettingValidities( {

File diff suppressed because one or more lines are too long

View File

@ -3590,7 +3590,7 @@ final class WP_Customize_Manager {
'priority' => 200, 'priority' => 200,
'description_hidden' => true, 'description_hidden' => true,
'description' => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>', 'description' => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
__( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes.' ), __( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes. In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key.' ),
'https://codex.wordpress.org/Know_Your_Sources#CSS', 'https://codex.wordpress.org/Know_Your_Sources#CSS',
__( 'Learn more about CSS' ), __( 'Learn more about CSS' ),
__( '(link opens in a new window)' ) __( '(link opens in a new window)' )

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.7-beta2-39148'; $wp_version = '4.7-beta2-39149';
/** /**
* 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.