WordPress.org
Get WordPress

Make WordPress Core

Changeset 41771


Ignore:
Timestamp:
10/05/2017 02:55:11 AM (9 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.