Ticket #38667: 38667.1.diff

src/wp-admin/css/customize-controls.css

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

src/wp-admin/js/customize-controls.js

@@ -5234 +5234 @@
                         });
                 });
 
+                // Allow tabs to be entered in Custom CSS textarea.
+                api.control( 'custom_css', function ( control ) {
+                        control.deferred.embedded.done( function allowTabs() {
+                                var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
+
+                                $textarea.on( 'blur', function() {
+                                        $textarea.data( 'next-tab-blurs', false );
+                                } );
+
+                                $textarea.on( 'keydown', function onKeydown( event ) {
+                                        var selectionStart, selectionEnd, value, scroll;
+
+                                        if ( 27 === event.keyCode ) { // Escape key.
+                                                // When pressing Escape: Opera 12 and 27 blur form fields.
+                                                event.preventDefault();
+
+                                                if ( true !== $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 ( 9 !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) { // Tab key.
+                                                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( {

src/wp-includes/class-wp-customize-manager.php

@@ -3590 +3590 @@
                         'priority'           => 200,
                         'description_hidden' => true,
                         '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. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ),
                                 'https://codex.wordpress.org/Know_Your_Sources#CSS',
                                 __( 'Learn more about CSS' ),
                                 __( '(link opens in a new window)' )