WP_Customize_Manager::render_control_templates()

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">
				<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
}

View all references View on Trac View on GitHub