WordPress.org

Make WordPress Core

Ticket #39662: 39662.2.diff

File 39662.2.diff, 12.3 KB (added by afercia, 3 years ago)
  • src/wp-admin/css/color-picker.css

     
    66        display: none;
    77}
    88
    9 .wp-color-result {
    10         background-color: #f7f7f7;
    11         border: 1px solid #ccc;
    12         -webkit-border-radius: 3px;
    13         border-radius: 3px;
    14         cursor: pointer;
    15         display: inline-block;
    16         height: 22px;
     9/* Needs higher specificiity. */
     10.wp-picker-container .wp-color-result.button {
     11        height: 24px;
    1712        margin: 0 6px 6px 0px;
    18         position: relative;
    19         top: 1px;
    20         -webkit-user-select: none;
    21         -moz-user-select: none;
    22         -ms-user-select: none;
    23         user-select: none;
    24         vertical-align: bottom;
    25         display: inline-block;
    26         padding-left: 30px;
    27         -webkit-box-shadow: 0 1px 0 #ccc;
    28         box-shadow: 0 1px 0 #ccc;
     13        padding: 0 0 0 30px;
     14        font-size: 11px;
    2915}
    3016
    31 .wp-color-result:after {
     17.wp-color-result-text {
    3218        background: #f7f7f7;
    3319        -webkit-border-radius: 0 2px 2px 0;
    3420        border-radius: 0 2px 2px 0;
    3521        border-left: 1px solid #ccc;
    3622        color: #555;
    37         content: attr( title );
    3823        display: block;
    39         font-size: 11px;
    4024        line-height: 22px;
    4125        padding: 0 6px;
    42         position: relative;
    43         right: 0;
    4426        text-align: center;
    45         top: 0;
    4627}
    4728
    4829.wp-color-result:hover,
     
    5940        border-left: 1px solid #999;
    6041}
    6142
    62 .wp-color-result {
    63         top: 0;
    64 }
    65 
    66 .wp-color-result.wp-picker-open:after {
    67         content: attr( data-current );
    68 }
    69 
    7043.wp-picker-container, .wp-picker-container:active {
    7144        display: inline-block;
    7245        outline: 0;
     
    8356        vertical-align: top;
    8457}
    8558
    86 .wp-picker-container .button {
     59.wp-picker-input-wrap label {
     60        display: inline-block;
     61        vertical-align: top;
     62}
     63
     64/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
     65.form-table .wp-picker-input-wrap label {
     66        margin: 0 !important;
     67}
     68
     69.wp-picker-input-wrap .button,
     70.wp-customizer .wp-picker-input-wrap .button {
    8771        margin-left: 6px;
    8872}
    8973
     
    10488        font-family: monospace;
    10589        line-height: 16px;
    10690        margin: 0;
     91        vertical-align: top;
    10792}
    10893
    10994.wp-color-picker::-webkit-input-placeholder {
     
    133118        box-shadow:
    134119                0 0 0 1px #5b9dd9,
    135120                0 0 2px 1px rgba(30, 140, 190, .8);
    136 }
    137  No newline at end of file
     121}
     122
     123.iris-picker .iris-palette:focus {
     124        -webkit-box-shadow:
     125                inset 0 0 5px rgba(0,0,0,.4),
     126                0 0 0 1px #5b9dd9,
     127                0 0 2px 1px rgba(30, 140, 190, .8);
     128        box-shadow:
     129                inset 0 0 5px rgba(0,0,0,.4),
     130                0 0 0 1px #5b9dd9,
     131                0 0 2px 1px rgba(30, 140, 190, .8);
     132}
     133
     134@media screen and ( max-width: 782px ) {
     135        .wp-picker-container .wp-color-result.button {
     136                height: auto;
     137                padding: 0 0 0 40px;
     138                font-size: 14px;
     139                line-height: 29px;
     140        }
     141
     142        .wp-picker-container .wp-color-result-text {
     143                padding: 0 14px;
     144                font-size: inherit;
     145                line-height: inherit;
     146        }
     147
     148        .wp-customizer .wp-picker-container .wp-color-result.button {
     149                padding: 0 0 0 30px;
     150                font-size: 13px;
     151                line-height: 26px;
     152        }
     153
     154        .wp-customizer .wp-picker-container .wp-color-result-text {
     155                padding: 0 10px;
     156        }
     157}
  • src/wp-admin/css/common.css

     
    36833683                white-space: nowrap;
    36843684        }
    36853685
    3686         .wp-color-result {
    3687                 height: auto;
    3688                 padding-left: 45px;
    3689         }
    3690 
    3691         .wp-color-result:after {
    3692                 font-size: 14px;
    3693                 height: auto;
    3694                 padding: 6px 14px;
    3695         }
    3696 
    36973686        /* Feedback Messages */
    36983687        .notice,
    36993688        .wrap div.updated,
  • src/wp-admin/css/customize-controls.css

     
    893893        max-width: 112px;
    894894}
    895895
    896 /* Color Picker */
    897 .customize-control-color .color-picker-hex {
    898         display: none;
    899 }
    900 
    901 .customize-control-color.open .color-picker-hex {
    902         display: block;
    903 }
    904 
    905896.customize-control-color .dropdown {
    906897        margin-right: 5px;
    907898        margin-bottom: 5px;
  • src/wp-admin/js/color-picker.js

     
    11/* global wpColorPickerL10n */
    2 ( function( $, undef ){
     2( function( $, undef ) {
    33
    44        var ColorPicker,
    55                // html stuff
    6                 _before = '<a tabindex="0" class="wp-color-result" />',
     6                _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
    77                _after = '<div class="wp-picker-holder" />',
    88                _wrap = '<div class="wp-picker-container" />',
    9                 _button = '<input type="button" class="button button-small hidden" />';
     9                _button = '<input type="button" class="button button-small" />',
     10                _wrappingLabel = '<label></label>',
     11                _wrappingLabelText = '<span class="screen-reader-text"></span>';
    1012
    1113        // jQuery UI Widget constructor
    1214        ColorPicker = {
     
    6668
    6769                        self.initialValue = el.val();
    6870
    69                         // Set up HTML structure, hide things
    70                         el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
    71                         self.wrap = el.parent();
    72                         self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
    73                         self.pickerContainer = $( _after ).insertAfter( el );
     71                        // Add a CSS class to the input field.
     72                        el.addClass( 'wp-color-picker' );
     73
     74                        /*
     75                         * Check if there's already a wrapping label, e.g. in the Customizer.
     76                         * If there's no label, add a default one to match the Customizer template.
     77                         */
     78                        if ( ! el.parent( 'label' ).length ) {
     79                                // Wrap the input field in the default label.
     80                                el.wrap( _wrappingLabel );
     81                                // Insert the default label text.
     82                                self.wrappingLabelText = $( _wrappingLabelText )
     83                                        .insertBefore( el )
     84                                        .text( wpColorPickerL10n.defaultLabel );
     85                        }
     86
     87                        /*
     88                         * At this point, either it's the standalone version or the Customizer
     89                         * one, we have a wrapping label to use as hook in the DOM, let's store it.
     90                         */
     91                        self.wrappingLabel = el.parent();
     92
     93                        // Wrap the label in the main wrapper.
     94                        self.wrappingLabel.wrap( _wrap );
     95                        // Store a reference to the main wrapper.
     96                        self.wrap = self.wrappingLabel.parent();
     97                        // Set up the toggle button and insert it before the wrapping label.
     98                        self.toggler = $( _before )
     99                                .insertBefore( self.wrappingLabel )
     100                                .css( { backgroundColor: self.initialValue } );
     101                        // Set the toggle button span element text.
     102                        self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
     103                        // Set up the Iris container and insert it after the wrapping label.
     104                        self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
     105                        // Store a reference to the Clear/Default button.
    74106                        self.button = $( _button );
    75 
     107                        // Set up the Clear/Default button.
    76108                        if ( self.options.defaultColor ) {
    77                                 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
     109                                self.button
     110                                        .addClass( 'wp-picker-default' )
     111                                        .val( wpColorPickerL10n.defaultString )
     112                                        .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
    78113                        } else {
    79                                 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
     114                                self.button
     115                                        .addClass( 'wp-picker-clear' )
     116                                        .val( wpColorPickerL10n.clear )
     117                                        .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
    80118                        }
     119                        // Wrap the wrapping label in its wrapper and append the Clear/Default button.
     120                        self.wrappingLabel
     121                                .wrap( '<span class="wp-picker-input-wrap hidden" />' )
     122                                .after( self.button );
    81123
    82                         el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
     124                        /*
     125                         * The input wrapper now contains the label+input+Clear/Default button.
     126                         * Store a reference to the input wrapper: we'll use this to toggle
     127                         * the controls visibility.
     128                         */
     129                        self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
    83130
    84131                        el.iris( {
    85132                                target: self.pickerContainer,
     
    131178                                }
    132179                        });
    133180
    134                         // open a keyboard-focused closed picker with space or enter
    135                         self.toggler.on( 'keyup', function( event ) {
    136                                 if ( event.keyCode === 13 || event.keyCode === 32 ) {
    137                                         event.preventDefault();
    138                                         self.toggler.trigger( 'click' ).next().focus();
    139                                 }
    140                         });
    141 
    142181                        self.button.click( function( event ) {
    143182                                var me = $( this );
    144183                                if ( me.hasClass( 'wp-picker-clear' ) ) {
     
    153192                        });
    154193                },
    155194                open: function() {
    156                         this.element.show().iris( 'toggle' ).focus();
    157                         this.button.removeClass( 'hidden' );
     195                        this.element.iris( 'toggle' );
     196                        this.inputWrapper.removeClass( 'hidden' );
    158197                        this.wrap.addClass( 'wp-picker-active' );
    159                         this.toggler.addClass( 'wp-picker-open' );
     198                        this.toggler
     199                                .addClass( 'wp-picker-open' )
     200                                .attr( 'aria-expanded', 'true' );
    160201                        $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
    161202                },
    162203                close: function() {
    163                         this.element.hide().iris( 'toggle' );
    164                         this.button.addClass( 'hidden' );
     204                        this.element.iris( 'toggle' );
     205                        this.inputWrapper.addClass( 'hidden' );
    165206                        this.wrap.removeClass( 'wp-picker-active' );
    166                         this.toggler.removeClass( 'wp-picker-open' );
     207                        this.toggler
     208                                .removeClass( 'wp-picker-open' )
     209                                .attr( 'aria-expanded', 'false' );
    167210                        $( 'body' ).off( 'click.wpcolorpicker', this.close );
    168211                },
    169212                // $("#input").wpColorPicker('color') returns the current color
  • src/wp-includes/customize/class-wp-customize-color-control.php

     
    103103                        }
    104104                        defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
    105105                } #>
    106                 <label>
    107                         <# if ( data.label ) { #>
    108                                 <span class="customize-control-title">{{{ data.label }}}</span>
    109                         <# } #>
    110                         <# if ( data.description ) { #>
    111                                 <span class="description customize-control-description">{{{ data.description }}}</span>
    112                         <# } #>
    113                         <div class="customize-control-content">
    114                                 <# if ( isHueSlider ) { #>
    115                                         <input class="color-picker-hue" type="text" data-type="hue" />
    116                                 <# } else { #>
    117                                         <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
    118                                 <# } #>
    119                         </div>
    120                 </label>
     106                <# if ( data.label ) { #>
     107                        <span class="customize-control-title">{{{ data.label }}}</span>
     108                <# } #>
     109                <# if ( data.description ) { #>
     110                        <span class="description customize-control-description">{{{ data.description }}}</span>
     111                <# } #>
     112                <div class="customize-control-content">
     113                        <label><span class="screen-reader-text">{{{ data.label }}}</span>
     114                        <# if ( isHueSlider ) { #>
     115                                <input class="color-picker-hue" type="text" data-type="hue" />
     116                        <# } else { #>
     117                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
     118                        <# } #>
     119                        </label>
     120                </div>
    121121                <?php
    122122        }
    123123}
  • src/wp-includes/script-loader.php

     
    715715                $scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
    716716                $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
    717717                did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
    718                         'clear' => __( 'Clear' ),
    719                         'defaultString' => __( 'Default' ),
    720                         'pick' => __( 'Select Color' ),
    721                         'current' => __( 'Current Color' ),
     718                        'clear'            => __( 'Clear' ),
     719                        'clearAriaLabel'   => __( 'Clear color' ),
     720                        'defaultString'    => __( 'Default' ),
     721                        'defaultAriaLabel' => __( 'Select default color' ),
     722                        'pick'             => __( 'Select Color' ),
     723                        'defaultLabel'     => __( 'Color value' ),
     724                        'irisHandleLabel'  => __( 'Move to select a color' ),
     725                        'irisSliderLabel'  => __( 'Set the color saturation' ),
     726                        'irisPaletteLabel' => __( 'Preset color' ),
    722727                ) );
    723728
    724729                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );