WordPress.org

Make WordPress Core

Changeset 39149


Ignore:
Timestamp:
11/06/2016 07:08:01 PM (3 years ago)
Author:
westonruter
Message:

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.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r39145 r39149  
    11301130    margin-right: 10px;
    11311131}
     1132#customize-theme-controls #sub-accordion-section-custom_css textarea {
     1133    -moz-tab-size: 4;
     1134    tab-size: 4;
     1135}
    11321136
    11331137#sub-accordion-section-custom_css .customize-control-notifications-container {
  • trunk/src/wp-admin/js/customize-controls.js

    r39140 r39149  
    52355235        });
    52365236
     5237        // Allow tabs to be entered in Custom CSS textarea.
     5238        api.control( 'custom_css', function setupCustomCssControl( control ) {
     5239            control.deferred.embedded.done( function allowTabs() {
     5240                var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
     5241
     5242                $textarea.on( 'blur', function onBlur() {
     5243                    $textarea.data( 'next-tab-blurs', false );
     5244                } );
     5245
     5246                $textarea.on( 'keydown', function onKeydown( event ) {
     5247                    var selectionStart, selectionEnd, value, scroll, tabKeyCode = 9, escKeyCode = 27;
     5248
     5249                    if ( escKeyCode === event.keyCode ) {
     5250                        if ( ! $textarea.data( 'next-tab-blurs' ) ) {
     5251                            $textarea.data( 'next-tab-blurs', true );
     5252                            event.stopPropagation(); // Prevent collapsing the section.
     5253                        }
     5254                        return;
     5255                    }
     5256
     5257                    // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
     5258                    if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
     5259                        return;
     5260                    }
     5261
     5262                    // Prevent capturing Tab characters if Esc was pressed.
     5263                    if ( $textarea.data( 'next-tab-blurs' ) ) {
     5264                        return;
     5265                    }
     5266
     5267                    selectionStart = textarea.selectionStart;
     5268                    selectionEnd = textarea.selectionEnd;
     5269                    value = textarea.value;
     5270
     5271                    if ( selectionStart >= 0 ) {
     5272                        scroll = $textarea.scrollTop;
     5273                        textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
     5274                        $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
     5275                        textarea.scrollTop = scroll;
     5276                    }
     5277
     5278                    event.stopPropagation();
     5279                    event.preventDefault();
     5280                } );
     5281            } );
     5282        } );
     5283
    52375284        // Update the setting validities.
    52385285        api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) {
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r39148 r39149  
    35913591            'description_hidden' => true,
    35923592            'description'        => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
    3593                 __( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes.' ),
     3593                __( '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.' ),
    35943594                'https://codex.wordpress.org/Know_Your_Sources#CSS',
    35953595                __( 'Learn more about CSS' ),
Note: See TracChangeset for help on using the changeset viewer.