WordPress.org
Get WordPress

Make WordPress Core

Changeset 41771


Ignore:
Timestamp:
10/05/2017 02:55:11 AM (7 years ago)
Author:
westonruter
Message:

Customize: Add default control template for standard input types.

Re-use default template instead of introducing custom one for the Discard Changes button.

See #30738.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r41768 r41771  
    153153    margin-top: 20px;
    154154}
    155 #customize-control-trash_changeset button {
     155#customize-control-trash_changeset .button-link {
    156156    position: relative;
    157157    padding-left: 24px;
    158158    display: inline-block;
    159159}
    160 #customize-control-trash_changeset button:before {
     160#customize-control-trash_changeset .button-link:before {
    161161    content: "\f182";
    162162    font: normal 22px dashicons;

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

    r41768 r41771  
    31423142
    31433143        initialize: function( id, options ) {
    3144             var control = this, deferredSettingIds = [], settings, gatherSettings;
     3144            var control = this, deferredSettingIds = [], settings, gatherSettings, standardTypes;
    31453145
    31463146            control.params = _.extend( {}, control.defaults );
    … …  
    31753175            control.id = id;
    31763176            control.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' ); // Deprecated, likely dead code from time before #28709.
    3177             control.templateSelector = control.params.templateId || 'customize-control-' + control.params.type + '-content';
    31783177            if ( control.params.content ) {
    31793178                control.container = $( control.params.content );
    31803179            } else {
    31813180                control.container = $( control.selector ); // Likely dead, per above. See #28709.
     3181            }
     3182
     3183            standardTypes = [
     3184                'button',
     3185                'checkbox',
     3186                'color',
     3187                'date',
     3188                'datetime-local',
     3189                'email',
     3190                'month',
     3191                'number',
     3192                'password',
     3193                'radio',
     3194                'range',
     3195                'search',
     3196                'select',
     3197                'tel',
     3198                'time',
     3199                'text',
     3200                'textarea',
     3201                'week',
     3202                'url'
     3203            ];
     3204            if ( control.params.templateId ) {
     3205                control.templateSelector = control.params.templateId;
     3206            } else if ( _.contains( standardTypes, control.params.type ) && control.container.is( ':empty' ) ) {
     3207                control.templateSelector = 'customize-control-default-content';
     3208            } else {
     3209                control.templateSelector = 'customize-control-' + control.params.type + '-content';
    31823210            }
    31833211
    … …  
    64476475                section: section.id,
    64486476                priority: 30,
    6449                 templateId: 'customize-trash-changeset-control'
     6477                inputAttrs: {
     6478                    'class': 'button-link button-link-delete',
     6479                    value: api.l10n.discardChanges
     6480                }
    64506481            } );
    64516482            api.control.add( trashControl );
    64526483            trashControl.deferred.embedded.done( function() {
    6453                 trashControl.container.find( 'button' ).on( 'click', function() {
     6484                trashControl.container.find( '.button-link' ).on( 'click', function() {
    64546485                    if ( confirm( api.l10n.trashConfirm ) ) {
    64556486                        wp.customize.previewer.trash();

  • trunk/src/wp-includes/class-wp-customize-control.php

    r41768 r41771  
    483483        $input_id = '_customize-input-' . $this->id;
    484484        $description_id = '_customize-description-' . $this->id;
    485         $describedby_attr = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ) . '"' : '';
     485        $describedby_attr = ( ! empty( $this->description ) ) ? ' aria-describedby="' . esc_attr( $description_id ) . '" ' : '';
    486486        switch ( $this->type ) {
    487487            case 'checkbox':
    … …  
    521521                        <input
    522522                            id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
    523                             type="radio" <?php echo $describedby_attr; ?>
     523                            type="radio"
     524                            <?php echo $describedby_attr; ?>
    524525                            value="<?php echo esc_attr( $value ); ?>"
    525526                            name="<?php echo esc_attr( $name ); ?>"

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

    r41768 r41771  
    36013601            $control->print_template();
    36023602        }
    3603 
    36043603        ?>
     3604
     3605        <script type="text/html" id="tmpl-customize-control-default-content">
     3606            <#
     3607            var inputId = _.uniqueId( 'customize-control-default-input-' );
     3608            var descriptionId = _.uniqueId( 'customize-control-default-description-' );
     3609            var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
     3610            #>
     3611            <# switch ( data.type ) {
     3612                case 'checkbox': #>
     3613                    <span class="customize-inside-control-row">
     3614                        <input
     3615                            id="{{ inputId }}"
     3616                            {{{ describedByAttr }}}
     3617                            type="checkbox"
     3618                            value="{{ data.value }}"
     3619                            data-customize-setting-key-link="default"
     3620                        >
     3621                        <label for="{{ inputId }}">
     3622                            {{ data.label }}
     3623                        </label>
     3624                        <# if ( data.description ) { #>
     3625                            <span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
     3626                        <# } #>
     3627                    </span>
     3628                    <#
     3629                    break;
     3630                case 'radio':
     3631                    if ( ! data.choices ) {
     3632                        return;
     3633                    }
     3634                    #>
     3635                    <# if ( data.label ) { #>
     3636                        <label for="{{ inputId }}" class="customize-control-title">
     3637                            {{ data.label }}
     3638                        </label>
     3639                    <# } #>
     3640                    <# if ( data.description ) { #>
     3641                        <span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
     3642                    <# } #>
     3643                    <# _.each( data.choices, function( val, key ) { #>
     3644                        <span class="customize-inside-control-row">
     3645                            <#
     3646                            var value, text;
     3647                            if ( _.isObject( val ) ) {
     3648                                value = val.value;
     3649                                text = val.text;
     3650                            } else {
     3651                                value = key;
     3652                                text = val;
     3653                            }
     3654                            #>
     3655                            <input
     3656                                id="{{ inputId + '-' + value }}"
     3657                                type="radio"
     3658                                value="{{ value }}"
     3659                                name="{{ inputId }}"
     3660                                data-customize-setting-key-link="default"
     3661                                {{{ describedByAttr }}}
     3662                            >
     3663                            <label for="{{ inputId + '-' + value }}">{{ text }}</label>
     3664                        </span>
     3665                    <# } ); #>
     3666                    <#
     3667                    break;
     3668                default:
     3669                    #>
     3670                    <# if ( data.label ) { #>
     3671                        <label for="{{ inputId }}" class="customize-control-title">
     3672                            {{ data.label }}
     3673                        </label>
     3674                    <# } #>
     3675                    <# if ( data.description ) { #>
     3676                        <span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
     3677                    <# } #>
     3678
     3679                    <#
     3680                    var inputAttrs = {
     3681                        id: inputId,
     3682                        'data-customize-setting-key-link': 'default'
     3683                    };
     3684                    if ( 'textarea' === data.type ) {
     3685                        inputAttrs.rows = '5';
     3686                    } else if ( 'button' === data.type ) {
     3687                        inputAttrs['class'] = 'button button-secondary';
     3688                        inputAttrs.type = 'button';
     3689                    } else {
     3690                        inputAttrs.type = data.type;
     3691                    }
     3692                    if ( data.description ) {
     3693                        inputAttrs['aria-describedby'] = descriptionId;
     3694                    }
     3695                    _.extend( inputAttrs, data.inputAttrs );
     3696                    #>
     3697
     3698                    <# if ( 'button' === data.type ) { #>
     3699                        <button
     3700                            <# _.each( _.extend( inputAttrs ), function( value, key ) { #>
     3701                                {{{ key }}}="{{ value }}"
     3702                            <# } ); #>
     3703                        >{{ inputAttrs.value }}</button>
     3704                    <# } else if ( 'textarea' === data.type ) { #>
     3705                        <textarea
     3706                            <# _.each( _.extend( inputAttrs ), function( value, key ) { #>
     3707                                {{{ key }}}="{{ value }}"
     3708                            <# }); #>
     3709                        >{{ inputAttrs.value }}</textarea>
     3710                    <# } else if ( 'select' === data.type ) { #>
     3711                        <select
     3712                            <# _.each( _.extend( inputAttrs ), function( value, key ) { #>
     3713                                {{{ key }}}="{{ value }}"
     3714                            <# }); #>
     3715                            >
     3716                            <# _.each( data.choices, function( val, key ) { #>
     3717                                <#
     3718                                var value, text;
     3719                                if ( _.isObject( val ) ) {
     3720                                    value = val.value;
     3721                                    text = val.text;
     3722                                } else {
     3723                                    value = key;
     3724                                    text = val;
     3725                                }
     3726                                #>
     3727                                <option value="{{ value }}">{{ text }}</option>
     3728                            <# } ); #>
     3729                        </select>
     3730                    <# } else { #>
     3731                        <input
     3732                            <# _.each( _.extend( inputAttrs ), function( value, key ) { #>
     3733                                {{{ key }}}="{{ value }}"
     3734                            <# }); #>
     3735                            >
     3736                    <# } #>
     3737            <# } #>
     3738        </script>
     3739
    36053740        <script type="text/html" id="tmpl-customize-notification">
    36063741            <li class="notice notice-{{ data.type || 'info' }} {{ data.alt ? 'notice-alt' : '' }} {{ data.dismissible ? 'is-dismissible' : '' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
    … …  
    36223757            </ul>
    36233758        </script>
     3759
    36243760        <script type="text/html" id="tmpl-customize-preview-link-control" >
    36253761            <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
    … …  
    36383774                <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
    36393775            </div>
    3640         </script>
    3641         <script type="text/html" id="tmpl-customize-trash-changeset-control">
    3642             <button type="button" class="button-link button-link-delete"><?php _e( 'Discard changes' ); ?></button>
    36433776        </script>
    36443777        <script type="text/html" id="tmpl-customize-selected-changeset-status-control">

  • trunk/src/wp-includes/script-loader.php

    r41751 r41771  
    566566        'close'              => __( 'Close' ),
    567567        'action'             => __( 'Action' ),
     568        'discardChanges'     => __( 'Discard changes' ),
    568569        'cheatin'            => __( 'Cheatin&#8217; uh?' ),
    569570        'notAllowed'         => __( 'Sorry, you are not allowed to customize this site.' ),
Note: See TracChangeset for help on using the changeset viewer.