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.

Built from https://develop.svn.wordpress.org/trunk@41771


git-svn-id: http://core.svn.wordpress.org/trunk@41605 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-10-05 02:56:47 +00:00
parent 561bde29c7
commit 9d6134a88c
10 changed files with 186 additions and 20 deletions

View File

@ -152,12 +152,12 @@ body.trashing #publish-settings {
#customize-control-trash_changeset {
margin-top: 20px;
}
#customize-control-trash_changeset button {
#customize-control-trash_changeset .button-link {
position: relative;
padding-right: 24px;
display: inline-block;
}
#customize-control-trash_changeset button:before {
#customize-control-trash_changeset .button-link:before {
content: "\f182";
font: normal 22px dashicons;
text-decoration: none;

File diff suppressed because one or more lines are too long

View File

@ -152,12 +152,12 @@ body.trashing #publish-settings {
#customize-control-trash_changeset {
margin-top: 20px;
}
#customize-control-trash_changeset button {
#customize-control-trash_changeset .button-link {
position: relative;
padding-left: 24px;
display: inline-block;
}
#customize-control-trash_changeset button:before {
#customize-control-trash_changeset .button-link:before {
content: "\f182";
font: normal 22px dashicons;
text-decoration: none;

File diff suppressed because one or more lines are too long

View File

@ -3141,7 +3141,7 @@
},
initialize: function( id, options ) {
var control = this, deferredSettingIds = [], settings, gatherSettings;
var control = this, deferredSettingIds = [], settings, gatherSettings, standardTypes;
control.params = _.extend( {}, control.defaults );
@ -3174,13 +3174,41 @@
control.id = id;
control.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' ); // Deprecated, likely dead code from time before #28709.
control.templateSelector = control.params.templateId || 'customize-control-' + control.params.type + '-content';
if ( control.params.content ) {
control.container = $( control.params.content );
} else {
control.container = $( control.selector ); // Likely dead, per above. See #28709.
}
standardTypes = [
'button',
'checkbox',
'color',
'date',
'datetime-local',
'email',
'month',
'number',
'password',
'radio',
'range',
'search',
'select',
'tel',
'time',
'text',
'textarea',
'week',
'url'
];
if ( control.params.templateId ) {
control.templateSelector = control.params.templateId;
} else if ( _.contains( standardTypes, control.params.type ) && control.container.is( ':empty' ) ) {
control.templateSelector = 'customize-control-default-content';
} else {
control.templateSelector = 'customize-control-' + control.params.type + '-content';
}
control.deferred = {
embedded: new $.Deferred()
};
@ -6446,11 +6474,14 @@
type: 'button',
section: section.id,
priority: 30,
templateId: 'customize-trash-changeset-control'
inputAttrs: {
'class': 'button-link button-link-delete',
value: api.l10n.discardChanges
}
} );
api.control.add( trashControl );
trashControl.deferred.embedded.done( function() {
trashControl.container.find( 'button' ).on( 'click', function() {
trashControl.container.find( '.button-link' ).on( 'click', function() {
if ( confirm( api.l10n.trashConfirm ) ) {
wp.customize.previewer.trash();
}

File diff suppressed because one or more lines are too long

View File

@ -482,7 +482,7 @@ class WP_Customize_Control {
protected function render_content() {
$input_id = '_customize-input-' . $this->id;
$description_id = '_customize-description-' . $this->id;
$describedby_attr = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ) . '"' : '';
$describedby_attr = ( ! empty( $this->description ) ) ? ' aria-describedby="' . esc_attr( $description_id ) . '" ' : '';
switch ( $this->type ) {
case 'checkbox':
?>
@ -520,7 +520,8 @@ class WP_Customize_Control {
<span class="customize-inside-control-row">
<input
id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
type="radio" <?php echo $describedby_attr; ?>
type="radio"
<?php echo $describedby_attr; ?>
value="<?php echo esc_attr( $value ); ?>"
name="<?php echo esc_attr( $name ); ?>"
<?php $this->link(); ?>

View File

@ -3600,8 +3600,143 @@ final class WP_Customize_Manager {
) );
$control->print_template();
}
?>
<script type="text/html" id="tmpl-customize-control-default-content">
<#
var inputId = _.uniqueId( 'customize-control-default-input-' );
var descriptionId = _.uniqueId( 'customize-control-default-description-' );
var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
#>
<# switch ( data.type ) {
case 'checkbox': #>
<span class="customize-inside-control-row">
<input
id="{{ inputId }}"
{{{ describedByAttr }}}
type="checkbox"
value="{{ data.value }}"
data-customize-setting-key-link="default"
>
<label for="{{ inputId }}">
{{ data.label }}
</label>
<# if ( data.description ) { #>
<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
</span>
<#
break;
case 'radio':
if ( ! data.choices ) {
return;
}
#>
<# if ( data.label ) { #>
<label for="{{ inputId }}" class="customize-control-title">
{{ data.label }}
</label>
<# } #>
<# if ( data.description ) { #>
<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<# _.each( data.choices, function( val, key ) { #>
<span class="customize-inside-control-row">
<#
var value, text;
if ( _.isObject( val ) ) {
value = val.value;
text = val.text;
} else {
value = key;
text = val;
}
#>
<input
id="{{ inputId + '-' + value }}"
type="radio"
value="{{ value }}"
name="{{ inputId }}"
data-customize-setting-key-link="default"
{{{ describedByAttr }}}
>
<label for="{{ inputId + '-' + value }}">{{ text }}</label>
</span>
<# } ); #>
<#
break;
default:
#>
<# if ( data.label ) { #>
<label for="{{ inputId }}" class="customize-control-title">
{{ data.label }}
</label>
<# } #>
<# if ( data.description ) { #>
<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<#
var inputAttrs = {
id: inputId,
'data-customize-setting-key-link': 'default'
};
if ( 'textarea' === data.type ) {
inputAttrs.rows = '5';
} else if ( 'button' === data.type ) {
inputAttrs['class'] = 'button button-secondary';
inputAttrs.type = 'button';
} else {
inputAttrs.type = data.type;
}
if ( data.description ) {
inputAttrs['aria-describedby'] = descriptionId;
}
_.extend( inputAttrs, data.inputAttrs );
#>
<# if ( 'button' === data.type ) { #>
<button
<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
{{{ key }}}="{{ value }}"
<# } ); #>
>{{ inputAttrs.value }}</button>
<# } else if ( 'textarea' === data.type ) { #>
<textarea
<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
{{{ key }}}="{{ value }}"
<# }); #>
>{{ inputAttrs.value }}</textarea>
<# } else if ( 'select' === data.type ) { #>
<select
<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
{{{ key }}}="{{ value }}"
<# }); #>
>
<# _.each( data.choices, function( val, key ) { #>
<#
var value, text;
if ( _.isObject( val ) ) {
value = val.value;
text = val.text;
} else {
value = key;
text = val;
}
#>
<option value="{{ value }}">{{ text }}</option>
<# } ); #>
</select>
<# } else { #>
<input
<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
{{{ key }}}="{{ value }}"
<# }); #>
>
<# } #>
<# } #>
</script>
<script type="text/html" id="tmpl-customize-notification">
<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 }}">
<div class="notification-message">{{{ data.message || data.code }}}</div>
@ -3621,6 +3756,7 @@ final class WP_Customize_Manager {
<# } ); #>
</ul>
</script>
<script type="text/html" id="tmpl-customize-preview-link-control" >
<# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
<p class="customize-control-title">
@ -3638,9 +3774,6 @@ final class WP_Customize_Manager {
<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>
</div>
</script>
<script type="text/html" id="tmpl-customize-trash-changeset-control">
<button type="button" class="button-link button-link-delete"><?php _e( 'Discard changes' ); ?></button>
</script>
<script type="text/html" id="tmpl-customize-selected-changeset-status-control">
<# var inputId = _.uniqueId( 'customize-selected-changeset-status-control-input-' ); #>
<# var descriptionId = _.uniqueId( 'customize-selected-changeset-status-control-description-' ); #>

View File

@ -565,6 +565,7 @@ function wp_default_scripts( &$scripts ) {
'cancel' => __( 'Cancel' ),
'close' => __( 'Close' ),
'action' => __( 'Action' ),
'discardChanges' => __( 'Discard changes' ),
'cheatin' => __( 'Cheatin&#8217; uh?' ),
'notAllowed' => __( 'Sorry, you are not allowed to customize this site.' ),
'previewIframeTitle' => __( 'Site Preview' ),

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.9-alpha-41770';
$wp_version = '4.9-alpha-41771';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.