Renders JS templates for all registered control types.
Source
public function render_control_templates() {
if ( $this->branching() ) {
$l10n = array(
/* translators: %s: User who is customizing the changeset in customizer. */
'locked' => __( '%s is already customizing this changeset. Please wait until they are done to try customizing. Your latest changes have been autosaved.' ),
/* translators: %s: User who is customizing the changeset in customizer. */
'locked_allow_override' => __( '%s is already customizing this changeset. Do you want to take over?' ),
);
} else {
$l10n = array(
/* translators: %s: User who is customizing the changeset in customizer. */
'locked' => __( '%s is already customizing this site. Please wait until they are done to try customizing. Your latest changes have been autosaved.' ),
/* translators: %s: User who is customizing the changeset in customizer. */
'locked_allow_override' => __( '%s is already customizing this site. Do you want to take over?' ),
);
}
foreach ( $this->registered_control_types as $control_type ) {
$control = new $control_type(
$this,
'temp',
array(
'settings' => array(),
)
);
$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.input_attrs );
#>
<# 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 ) { #>
<# delete inputAttrs.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>
<# if ( data.dismissible ) { #>
<button type="button" class="notice-dismiss"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Dismiss' );
?>
</span></button>
<# } #>
</li>
</script>
<script type="text/html" id="tmpl-customize-changeset-locked-notification">
<li class="notice notice-{{ data.type || 'info' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
<div class="notification-message customize-changeset-locked-message {{ data.lockUser.avatar ? 'has-avatar' : '' }}">
<# if ( data.lockUser.avatar ) { #>
<img class="customize-changeset-locked-avatar" src="{{ data.lockUser.avatar }}" alt="{{ data.lockUser.name }}" />
<# } #>
<p class="currently-editing">
<# if ( data.message ) { #>
{{{ data.message }}}
<# } else if ( data.allowOverride ) { #>
<?php
echo esc_html( sprintf( $l10n['locked_allow_override'], '{{ data.lockUser.name }}' ) );
?>
<# } else { #>
<?php
echo esc_html( sprintf( $l10n['locked'], '{{ data.lockUser.name }}' ) );
?>
<# } #>
</p>
<p class="notice notice-error notice-alt" hidden></p>
<p class="action-buttons">
<# if ( data.returnUrl !== data.previewUrl ) { #>
<a class="button customize-notice-go-back-button" href="{{ data.returnUrl }}"><?php _e( 'Go back' ); ?></a>
<# } #>
<a class="button customize-notice-preview-button" href="{{ data.frontendPreviewUrl }}"><?php _e( 'Preview' ); ?></a>
<# if ( data.allowOverride ) { #>
<button class="button button-primary wp-tab-last customize-notice-take-over-button"><?php _e( 'Take over' ); ?></button>
<# } #>
</p>
</div>
</li>
</script>
<script type="text/html" id="tmpl-customize-code-editor-lint-error-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>
<p>
<# var elementId = 'el-' + String( Math.random() ); #>
<input id="{{ elementId }}" type="checkbox">
<label for="{{ elementId }}"><?php _e( 'Update anyway, even though it might break your site?' ); ?></label>
</p>
</li>
</script>
<?php
/* The following template is obsolete in core but retained for plugins. */
?>
<script type="text/html" id="tmpl-customize-control-notifications">
<ul>
<# _.each( data.notifications, function( notification ) { #>
<li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{{ notification.message || notification.code }}}</li>
<# } ); #>
</ul>
</script>
<script type="text/html" id="tmpl-customize-preview-link-control" >
<# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
<p class="customize-control-title">
<?php esc_html_e( 'Share Preview Link' ); ?>
</p>
<p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
<div class="customize-control-notifications-container"></div>
<div class="preview-link-wrapper">
<label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
esc_html_e( 'Preview Link' );
?>
</label>
<a href="" target="">
<span class="preview-control-element" data-component="url"></span>
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( '(opens in a new tab)' );
?>
</span>
</a>
<input id="{{ elementPrefix }}customize-preview-link-input" readonly tabindex="-1" class="preview-control-element" data-component="input">
<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-selected-changeset-status-control">
<# var inputId = _.uniqueId( 'customize-selected-changeset-status-control-input-' ); #>
<# var descriptionId = _.uniqueId( 'customize-selected-changeset-status-control-description-' ); #>
<# 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( choice ) { #>
<# var choiceId = inputId + '-' + choice.status; #>
<span class="customize-inside-control-row">
<input id="{{ choiceId }}" type="radio" value="{{ choice.status }}" name="{{ inputId }}" data-customize-setting-key-link="default">
<label for="{{ choiceId }}">{{ choice.label }}</label>
</span>
<# } ); #>
</script>
<?php
}
Changelog
Version | Description |
---|---|
4.1.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.