diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 2841557c53..27def3f147 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1129,6 +1129,10 @@ p.customize-section-description { margin-left: 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 { margin-bottom: 15px; diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 30e98eae77..8ca8318705 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -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. api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) { api._handleSettingValidities( { diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php index 7b3235fc9a..206d9641bd 100644 --- a/src/wp-includes/class-wp-customize-manager.php +++ b/src/wp-includes/class-wp-customize-manager.php @@ -3590,7 +3590,7 @@ final class WP_Customize_Manager { 'priority' => 200, 'description_hidden' => true, 'description' => sprintf( '%s
%s%s', - __( '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', __( 'Learn more about CSS' ), __( '(link opens in a new window)' )