Kirki_Control_Typography::content_template() - Code Metrics - Inspection of "typography control bugfixes" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — develop ( 2733ee...25b4bc )

by Aristeides

created 2016-12-09 23:15 UTC

Kirki_Control_Typography::content_template() B

↳ Parent: Kirki_Control_Typography

Complexity

Conditions	1
Paths	1

Size

Total Lines	121
Code Lines	4

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	4
nc	1
nop	0
dl	0
loc	121
rs	8.2857
c	0
b	0
f	0

How to fix Long Method

<?php
/**
 * Customizer Control: typography.
 *
 * @package     Kirki
 * @subpackage  Controls
 * @copyright   Copyright (c) 2016, Aristeides Stathopoulos
 * @license     http://opensource.org/licenses/https://opensource.org/licenses/MIT
 * @since       2.0
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Typography control.
 */
class Kirki_Control_Typography extends WP_Customize_Control {

	/**
	 * The control type.
	 *
	 * @access public
	 * @var string
	 */
	public $type = 'kirki-typography';

	/**
	 * Used to automatically generate all CSS output.
	 *
	 * @access public
	 * @var array
	 */
	public $output = array();

	/**
	 * Data type
	 *
	 * @access public
	 * @var string
	 */
	public $option_type = 'theme_mod';

	/**
	 * The kirki_config we're using for this control
	 *
	 * @access public
	 * @var string
	 */
	public $kirki_config = 'global';

	/**
	 * Enqueue control related scripts/styles.
	 *
	 * @access public
	 */
	public function enqueue() {

		wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'controls/typography/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );

		wp_enqueue_script( 'kirki-typography', trailingslashit( Kirki::$url ) . 'controls/typography/typography.js', array( 'jquery', 'customize-base', 'selectize', 'wp-color-picker-alpha' ), false, true );
		// Add fonts to our JS objects.
		$google_fonts   = Kirki_Fonts::get_google_fonts();
		$standard_fonts = Kirki_Fonts::get_standard_fonts();
		$all_variants   = Kirki_Fonts::get_all_variants();
		$all_subsets    = Kirki_Fonts::get_google_font_subsets();

		$standard_fonts_final = array();
		foreach ( $standard_fonts as $font ) {
			$standard_fonts_final[] = array(
				'family'      => $font['stack'],
				'label'       => $font['label'],
				'subsets'     => array(),
				'is_standard' => true,
				'variants'    => array(
					array(
						'id'    => 'regular',
						'label' => $all_variants['regular'],
					),
					array(
						'id'    => 'italic',
						'label' => $all_variants['italic'],
					),
					array(
						'id'    => '700',
						'label' => $all_variants['700'],
					),
					array(
						'id'    => '700italic',
						'label' => $all_variants['700italic'],
					),
				),
			);
		}

		$google_fonts_final = array();
		foreach ( $google_fonts as $family => $args ) {
			$label    = ( isset( $args['label'] ) ) ? $args['label'] : $family;
			$variants = ( isset( $args['variants'] ) ) ? $args['variants'] : array( 'regular', '700' );
			$subsets  = ( isset( $args['subsets'] ) ) ? $args['subsets'] : array();

			$available_variants = array();
			foreach ( $variants as $variant ) {
				if ( array_key_exists( $variant, $all_variants ) ) {
					$available_variants[] = array( 'id' => $variant, 'label' => $all_variants[ $variant ] );
				}
			}

			$available_subsets = array();
			foreach ( $subsets as $subset ) {
				if ( array_key_exists( $subset, $all_subsets ) ) {
					$available_subsets[] = array( 'id' => $subset, 'label' => $all_subsets[ $subset ] );
				}
			}

			$google_fonts_final[] = array(
				'family'       => $family,
				'label'        => $label,
				'variants'     => $available_variants,
				'subsets'      => $available_subsets,
			);
		}
		$final = array_merge( $standard_fonts_final, $google_fonts_final );
		wp_localize_script( 'kirki-typography', 'kirkiAllFonts', $final );

		wp_enqueue_style( 'kirki-typography-css', trailingslashit( Kirki::$url ) . 'controls/typography/typography.css', null );

	}

	/**
	 * Refresh the parameters passed to the JavaScript via JSON.
	 *
	 * @see WP_Customize_Control::to_json()
	 */
	public function to_json() {
		parent::to_json();

		$this->json['default'] = $this->setting->default;
		if ( isset( $this->default ) ) {
			$this->json['default'] = $this->default;
		}
		$this->json['output']      = $this->output;
		$this->json['value']       = $this->value();
		$this->json['choices']     = $this->choices;
		$this->json['link']        = $this->get_link();
		$this->json['id']          = $this->id;
		$this->json['l10n']        = $this->l10n();
		$this->json['kirkiConfig'] = $this->kirki_config;

		if ( 'user_meta' === $this->option_type ) {
			$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
		}

		$this->json['inputAttrs'] = '';
		foreach ( $this->input_attrs as $attr => $value ) {
			$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
		}

		$this->add_values_backwards_compatibility();
		$defaults = array(
			'font-family'    => false,
			'font-size'      => false,
			'variant'        => false,
			'line-height'    => false,
			'letter-spacing' => false,
			'word-spacing'   => false,
			'color'          => false,
			'text-align'     => false,
		);
		$this->json['default'] = wp_parse_args( $this->json['default'], $defaults );
		$this->json['show_variants'] = ( true === Kirki_Fonts_Google::$force_load_all_variants ) ? false : true;
		$this->json['show_subsets']  = ( true === Kirki_Fonts_Google::$force_load_all_subsets ) ? false : true;
	}

	/**
	 * An Underscore (JS) template for this control's content (but not its container).
	 *
	 * Class variables for this control class are available in the `data` JS object;
	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
	 *
	 * @see WP_Customize_Control::print_template()
	 *
	 * @access protected
	 */
	protected function content_template() {
		?>
		<label class="customizer-text">
			<# if ( data.label ) { #>
				<span class="customize-control-title">{{{ data.label }}}</span>
			<# } #>
			<# if ( data.description ) { #>
				<span class="description customize-control-description">{{{ data.description }}}</span>
			<# } #>
		</label>

		<div class="wrapper">

			<# if ( data.default['font-family'] ) { #>
				<# if ( '' == data.value['font-family'] ) { data.value['font-family'] = data.default['font-family']; } #>
				<# if ( data.choices['fonts'] ) { data.fonts = data.choices['fonts']; } #>
				<div class="font-family">
					<h5>{{ data.l10n['font-family'] }}</h5>
					<select {{{ data.inputAttrs }}} id="kirki-typography-font-family-{{{ data.id }}}" placeholder="{{ data.l10n['select-font-family'] }}"></select>
				</div>
				<# if ( true === data.show_variants || false !== data.default.variant ) { #>
					<div class="variant hide-on-standard-fonts kirki-variant-wrapper">
						<h5>{{ data.l10n['variant'] }}</h5>
						<select {{{ data.inputAttrs }}} class="variant" id="kirki-typography-variant-{{{ data.id }}}"></select>
					</div>
				<# } #>
				<# if ( true === data.show_subsets ) { #>
					<div class="subsets hide-on-standard-fonts kirki-subsets-wrapper">
						<h5>{{ data.l10n['subsets'] }}</h5>
						<select {{{ data.inputAttrs }}} class="subset" id="kirki-typography-subsets-{{{ data.id }}}"></select>
					</div>
				<# } #>
			<# } #>

			<# if ( data.default['font-size'] ) { #>
				<div class="font-size">
					<h5>{{ data.l10n['font-size'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['font-size'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['line-height'] ) { #>
				<div class="line-height">
					<h5>{{ data.l10n['line-height'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['line-height'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['letter-spacing'] ) { #>
				<div class="letter-spacing">
					<h5>{{ data.l10n['letter-spacing'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['letter-spacing'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['word-spacing'] ) { #>
				<div class="word-spacing">
					<h5>{{ data.l10n['word-spacing'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['word-spacing'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['text-align'] ) { #>
				<div class="text-align">
					<h5>{{ data.l10n['text-align'] }}</h5>
					<input {{{ data.inputAttrs }}} type="radio" value="inherit" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-inherit" <# if ( data.value['text-align'] === 'inherit' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-inherit">
							<span class="dashicons dashicons-editor-removeformatting"></span>
							<span class="screen-reader-text">{{ data.l10n['inherit'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="left" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-left" <# if ( data.value['text-align'] === 'left' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-left">
							<span class="dashicons dashicons-editor-alignleft"></span>
							<span class="screen-reader-text">{{ data.l10n['left'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="center" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-center" <# if ( data.value['text-align'] === 'center' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-center">
							<span class="dashicons dashicons-editor-aligncenter"></span>
							<span class="screen-reader-text">{{ data.l10n['center'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="right" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-right" <# if ( data.value['text-align'] === 'right' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-right">
							<span class="dashicons dashicons-editor-alignright"></span>
							<span class="screen-reader-text">{{ data.l10n['right'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="justify" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-justify" <# if ( data.value['text-align'] === 'justify' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-justify">
							<span class="dashicons dashicons-editor-justify"></span>
							<span class="screen-reader-text">{{ data.l10n['justify'] }}</span>
						</label>
					</input>
				</div>
			<# } #>

			<# if ( data.default['text-transform'] ) { #>
				<div class="text-transform">
					<h5>{{ data.l10n['text-transform'] }}</h5>
					<select {{{ data.inputAttrs }}} id="kirki-typography-text-transform-{{{ data.id }}}">
						<option value="none"<# if ( 'none' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['none'] }}</option>
						<option value="capitalize"<# if ( 'capitalize' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['capitalize'] }}</option>
						<option value="uppercase"<# if ( 'uppercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['uppercase'] }}</option>
						<option value="lowercase"<# if ( 'lowercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['lowercase'] }}</option>
						<option value="initial"<# if ( 'initial' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['initial'] }}</option>
						<option value="inherit"<# if ( 'inherit' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['inherit'] }}</option>
					</select>
				</div>
			<# } #>

			<# if ( data.default['color'] ) { #>
				<div class="color">
					<h5>{{ data.l10n['color'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" data-palette="{{ data.palette }}" data-default-color="{{ data.default['color'] }}" value="{{ data.value['color'] }}" class="kirki-color-control color-picker" {{{ data.link }}} />
				</div>
			<# } #>
		</div>
		<?php
	}

	/**
	 * Adds backwards-compatibility for values.
	 * Converts font-weight to variant
	 * Adds units to letter-spacing
	 *
	 * @access protected
	 */
	protected function add_values_backwards_compatibility() {
		$value = $this->value();
		$old_values = array(
			'font-family'    => '',
			'font-size'      => '',
			'variant'        => ( isset( $value['font-weight'] ) ) ? $value['font-weight'] : 'regular',
			'line-height'    => '',
			'letter-spacing' => '',
			'color'          => '',
		);

		// Font-weight is now variant.
		// All values are the same with the exception of 400 (becomes regular).
		if ( '400' === $old_values['variant'] || 400 === $old_values['variant'] ) {
			$old_values['variant'] = 'regular';
		}

		// Letter spacing was in px, now it requires units.
		if ( isset( $value['letter-spacing'] ) && is_numeric( $value['letter-spacing'] ) && $value['letter-spacing'] ) {
			$value['letter-spacing'] .= 'px';
		}

		$this->json['value'] = wp_parse_args( $value, $old_values );

		// Cleanup.
		if ( isset( $this->json['value']['font-weight'] ) ) {
			unset( $this->json['value']['font-weight'] );
		}

		// Make sure we use "subsets" instead of "subset".
		if ( isset( $this->json['value']['subset'] ) ) {
			if ( ! empty( $this->json['value']['subset'] ) ) {
				if ( ! isset( $this->json['value']['subsets'] ) || empty( $this->json['value']['subsets'] ) ) {
					$this->json['value']['subsets'] = $this->json['value']['subset'];
				}
			}
			unset( $this->json['value']['subset'] );
		}
	}

	/**
	 * Returns an array of translation strings.
	 *
	 * @access protected
	 * @since 2.4.0
	 * @param string|false $id The string-ID.
	 * @return string
	 */
	protected function l10n( $id = false ) {
		$translation_strings = array(
			'inherit'        => esc_attr__( 'Inherit', 'kirki' ),
			'font-family'    => esc_attr__( 'Font Family', 'kirki' ),
			'font-size'      => esc_attr__( 'Font Size', 'kirki' ),
			'line-height'    => esc_attr__( 'Line Height', 'kirki' ),
			'letter-spacing' => esc_attr__( 'Letter Spacing', 'kirki' ),
			'word-spacing'   => esc_attr__( 'Word Spacing', 'kirki' ),
			'left'           => esc_attr__( 'Left', 'kirki' ),
			'right'          => esc_attr__( 'Right', 'kirki' ),
			'center'         => esc_attr__( 'Center', 'kirki' ),
			'justify'        => esc_attr__( 'Justify', 'kirki' ),
			'color'          => esc_attr__( 'Color', 'kirki' ),
			'variant'        => esc_attr__( 'Variant', 'kirki' ),
			'subsets'        => esc_attr__( 'Subset', 'kirki' ),
			'text-align'     => esc_attr__( 'Text Align', 'kirki' ),
			'text-transform' => esc_attr__( 'Text Transform', 'kirki' ),
			'none'           => esc_attr__( 'None', 'kirki' ),
			'capitalize'     => esc_attr__( 'Capitalize', 'kirki' ),
			'uppercase'      => esc_attr__( 'Uppercase', 'kirki' ),
			'lowercase'      => esc_attr__( 'Lowercase', 'kirki' ),
			'initial'        => esc_attr__( 'Initial', 'kirki' ),
		);
		$translation_strings = apply_filters( 'kirki/' . $this->kirki_config . '/l10n', $translation_strings );
		if ( false === $id ) {
			return $translation_strings;
		}
		return $translation_strings[ $id ];
	}
}


1			<?php
2			/**
3			* Customizer Control: typography.
4			*
5			* @package Kirki
6			* @subpackage Controls
7			* @copyright Copyright (c) 2016, Aristeides Stathopoulos
8			* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
9			* @since 2.0
10			*/
11
12			// Exit if accessed directly.
13			if ( ! defined( 'ABSPATH' ) ) {
14			exit;
15			}
16
17			/**
18			* Typography control.
19			*/
20			class Kirki_Control_Typography extends WP_Customize_Control {
21
22			/**
23			* The control type.
24			*
25			* @access public
26			* @var string
27			*/
28			public $type = 'kirki-typography';
29
30			/**
31			* Used to automatically generate all CSS output.
32			*
33			* @access public
34			* @var array
35			*/
36			public $output = array();
37
38			/**
39			* Data type
40			*
41			* @access public
42			* @var string
43			*/
44			public $option_type = 'theme_mod';
45
46			/**
47			* The kirki_config we're using for this control
48			*
49			* @access public
50			* @var string
51			*/
52			public $kirki_config = 'global';
53
54			/**
55			* Enqueue control related scripts/styles.
56			*
57			* @access public
58			*/
59			public function enqueue() {
60
61			wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'controls/typography/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
62
63			wp_enqueue_script( 'kirki-typography', trailingslashit( Kirki::$url ) . 'controls/typography/typography.js', array( 'jquery', 'customize-base', 'selectize', 'wp-color-picker-alpha' ), false, true );
64			// Add fonts to our JS objects.
65			$google_fonts = Kirki_Fonts::get_google_fonts();
66			$standard_fonts = Kirki_Fonts::get_standard_fonts();
67			$all_variants = Kirki_Fonts::get_all_variants();
68			$all_subsets = Kirki_Fonts::get_google_font_subsets();
69
70			$standard_fonts_final = array();
71			foreach ( $standard_fonts as $font ) {
72			$standard_fonts_final[] = array(
73			'family' => $font['stack'],
74			'label' => $font['label'],
75			'subsets' => array(),
76			'is_standard' => true,
77			'variants' => array(
78			array(
79			'id' => 'regular',
80			'label' => $all_variants['regular'],
81			),
82			array(
83			'id' => 'italic',
84			'label' => $all_variants['italic'],
85			),
86			array(
87			'id' => '700',
88			'label' => $all_variants['700'],
89			),
90			array(
91			'id' => '700italic',
92			'label' => $all_variants['700italic'],
93			),
94			),
95			);
96			}
97
98			$google_fonts_final = array();
99			foreach ( $google_fonts as $family => $args ) {
100			$label = ( isset( $args['label'] ) ) ? $args['label'] : $family;
101			$variants = ( isset( $args['variants'] ) ) ? $args['variants'] : array( 'regular', '700' );
102			$subsets = ( isset( $args['subsets'] ) ) ? $args['subsets'] : array();
103
104			$available_variants = array();
105			foreach ( $variants as $variant ) {
106			if ( array_key_exists( $variant, $all_variants ) ) {
107			$available_variants[] = array( 'id' => $variant, 'label' => $all_variants[ $variant ] );
108			}
109			}
110
111			$available_subsets = array();
112			foreach ( $subsets as $subset ) {
113			if ( array_key_exists( $subset, $all_subsets ) ) {
114			$available_subsets[] = array( 'id' => $subset, 'label' => $all_subsets[ $subset ] );
115			}
116			}
117
118			$google_fonts_final[] = array(
119			'family' => $family,
120			'label' => $label,
121			'variants' => $available_variants,
122			'subsets' => $available_subsets,
123			);
124			}
125			$final = array_merge( $standard_fonts_final, $google_fonts_final );
126			wp_localize_script( 'kirki-typography', 'kirkiAllFonts', $final );
127
128			wp_enqueue_style( 'kirki-typography-css', trailingslashit( Kirki::$url ) . 'controls/typography/typography.css', null );
129
130			}
131
132			/**
133			* Refresh the parameters passed to the JavaScript via JSON.
134			*
135			* @see WP_Customize_Control::to_json()
136			*/
137			public function to_json() {
138			parent::to_json();
139
140			$this->json['default'] = $this->setting->default;
141			if ( isset( $this->default ) ) {
142			$this->json['default'] = $this->default;
143			}
144			$this->json['output'] = $this->output;
145			$this->json['value'] = $this->value();
146			$this->json['choices'] = $this->choices;
147			$this->json['link'] = $this->get_link();
148			$this->json['id'] = $this->id;
149			$this->json['l10n'] = $this->l10n();
150			$this->json['kirkiConfig'] = $this->kirki_config;
151
152			if ( 'user_meta' === $this->option_type ) {
153			$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
154			}
155
156			$this->json['inputAttrs'] = '';
157			foreach ( $this->input_attrs as $attr => $value ) {
158			$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
159			}
160
161			$this->add_values_backwards_compatibility();
162			$defaults = array(
163			'font-family' => false,
164			'font-size' => false,
165			'variant' => false,
166			'line-height' => false,
167			'letter-spacing' => false,
168			'word-spacing' => false,
169			'color' => false,
170			'text-align' => false,
171			);
172			$this->json['default'] = wp_parse_args( $this->json['default'], $defaults );
173			$this->json['show_variants'] = ( true === Kirki_Fonts_Google::$force_load_all_variants ) ? false : true;
174			$this->json['show_subsets'] = ( true === Kirki_Fonts_Google::$force_load_all_subsets ) ? false : true;
175			}
176
177			/**
178			* An Underscore (JS) template for this control's content (but not its container).
179			*
180			* Class variables for this control class are available in the `data` JS object;
181			* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
182			*
183			* @see WP_Customize_Control::print_template()
184			*
185			* @access protected
186			*/
187			protected function content_template() {
188			?>
189			<label class="customizer-text">
190			<# if ( data.label ) { #>
191			<span class="customize-control-title">{{{ data.label }}}</span>
192			<# } #>
193			<# if ( data.description ) { #>
194			<span class="description customize-control-description">{{{ data.description }}}</span>
195			<# } #>
196			</label>
197
198			<div class="wrapper">
199
200			<# if ( data.default['font-family'] ) { #>
201			<# if ( '' == data.value['font-family'] ) { data.value['font-family'] = data.default['font-family']; } #>
202			<# if ( data.choices['fonts'] ) { data.fonts = data.choices['fonts']; } #>
203			<div class="font-family">
204			<h5>{{ data.l10n['font-family'] }}</h5>
205			<select {{{ data.inputAttrs }}} id="kirki-typography-font-family-{{{ data.id }}}" placeholder="{{ data.l10n['select-font-family'] }}"></select>
206			</div>
207			<# if ( true === data.show_variants \|\| false !== data.default.variant ) { #>
208			<div class="variant hide-on-standard-fonts kirki-variant-wrapper">
209			<h5>{{ data.l10n['variant'] }}</h5>
210			<select {{{ data.inputAttrs }}} class="variant" id="kirki-typography-variant-{{{ data.id }}}"></select>
211			</div>
212			<# } #>
213			<# if ( true === data.show_subsets ) { #>
214			<div class="subsets hide-on-standard-fonts kirki-subsets-wrapper">
215			<h5>{{ data.l10n['subsets'] }}</h5>
216			<select {{{ data.inputAttrs }}} class="subset" id="kirki-typography-subsets-{{{ data.id }}}"></select>
217			</div>
218			<# } #>
219			<# } #>
220
221			<# if ( data.default['font-size'] ) { #>
222			<div class="font-size">
223			<h5>{{ data.l10n['font-size'] }}</h5>
224			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['font-size'] }}"/>
225			</div>
226			<# } #>
227
228			<# if ( data.default['line-height'] ) { #>
229			<div class="line-height">
230			<h5>{{ data.l10n['line-height'] }}</h5>
231			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['line-height'] }}"/>
232			</div>
233			<# } #>
234
235			<# if ( data.default['letter-spacing'] ) { #>
236			<div class="letter-spacing">
237			<h5>{{ data.l10n['letter-spacing'] }}</h5>
238			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['letter-spacing'] }}"/>
239			</div>
240			<# } #>
241
242			<# if ( data.default['word-spacing'] ) { #>
243			<div class="word-spacing">
244			<h5>{{ data.l10n['word-spacing'] }}</h5>
245			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['word-spacing'] }}"/>
246			</div>
247			<# } #>
248
249			<# if ( data.default['text-align'] ) { #>
250			<div class="text-align">
251			<h5>{{ data.l10n['text-align'] }}</h5>
252			<input {{{ data.inputAttrs }}} type="radio" value="inherit" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-inherit" <# if ( data.value['text-align'] === 'inherit' ) { #> checked="checked"<# } #>>
253			<label for="{{ data.id }}-text-align-inherit">
254			<span class="dashicons dashicons-editor-removeformatting"></span>
255			<span class="screen-reader-text">{{ data.l10n['inherit'] }}</span>
256			</label>
257			</input>
258			<input {{{ data.inputAttrs }}} type="radio" value="left" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-left" <# if ( data.value['text-align'] === 'left' ) { #> checked="checked"<# } #>>
259			<label for="{{ data.id }}-text-align-left">
260			<span class="dashicons dashicons-editor-alignleft"></span>
261			<span class="screen-reader-text">{{ data.l10n['left'] }}</span>
262			</label>
263			</input>
264			<input {{{ data.inputAttrs }}} type="radio" value="center" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-center" <# if ( data.value['text-align'] === 'center' ) { #> checked="checked"<# } #>>
265			<label for="{{ data.id }}-text-align-center">
266			<span class="dashicons dashicons-editor-aligncenter"></span>
267			<span class="screen-reader-text">{{ data.l10n['center'] }}</span>
268			</label>
269			</input>
270			<input {{{ data.inputAttrs }}} type="radio" value="right" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-right" <# if ( data.value['text-align'] === 'right' ) { #> checked="checked"<# } #>>
271			<label for="{{ data.id }}-text-align-right">
272			<span class="dashicons dashicons-editor-alignright"></span>
273			<span class="screen-reader-text">{{ data.l10n['right'] }}</span>
274			</label>
275			</input>
276			<input {{{ data.inputAttrs }}} type="radio" value="justify" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-justify" <# if ( data.value['text-align'] === 'justify' ) { #> checked="checked"<# } #>>
277			<label for="{{ data.id }}-text-align-justify">
278			<span class="dashicons dashicons-editor-justify"></span>
279			<span class="screen-reader-text">{{ data.l10n['justify'] }}</span>
280			</label>
281			</input>
282			</div>
283			<# } #>
284
285			<# if ( data.default['text-transform'] ) { #>
286			<div class="text-transform">
287			<h5>{{ data.l10n['text-transform'] }}</h5>
288			<select {{{ data.inputAttrs }}} id="kirki-typography-text-transform-{{{ data.id }}}">
289			<option value="none"<# if ( 'none' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['none'] }}</option>
290			<option value="capitalize"<# if ( 'capitalize' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['capitalize'] }}</option>
291			<option value="uppercase"<# if ( 'uppercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['uppercase'] }}</option>
292			<option value="lowercase"<# if ( 'lowercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['lowercase'] }}</option>
293			<option value="initial"<# if ( 'initial' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['initial'] }}</option>
294			<option value="inherit"<# if ( 'inherit' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['inherit'] }}</option>
295			</select>
296			</div>
297			<# } #>
298
299			<# if ( data.default['color'] ) { #>
300			<div class="color">
301			<h5>{{ data.l10n['color'] }}</h5>
302			<input {{{ data.inputAttrs }}} type="text" data-palette="{{ data.palette }}" data-default-color="{{ data.default['color'] }}" value="{{ data.value['color'] }}" class="kirki-color-control color-picker" {{{ data.link }}} />
303			</div>
304			<# } #>
305			</div>
306			<?php
307			}
308
309			/**
310			* Adds backwards-compatibility for values.
311			* Converts font-weight to variant
312			* Adds units to letter-spacing
313			*
314			* @access protected
315			*/
316			protected function add_values_backwards_compatibility() {
317			$value = $this->value();
318			$old_values = array(
319			'font-family' => '',
320			'font-size' => '',
321			'variant' => ( isset( $value['font-weight'] ) ) ? $value['font-weight'] : 'regular',
322			'line-height' => '',
323			'letter-spacing' => '',
324			'color' => '',
325			);
326
327			// Font-weight is now variant.
328			// All values are the same with the exception of 400 (becomes regular).
329			if ( '400' === $old_values['variant'] \|\| 400 === $old_values['variant'] ) {
330			$old_values['variant'] = 'regular';
331			}
332
333			// Letter spacing was in px, now it requires units.
334			if ( isset( $value['letter-spacing'] ) && is_numeric( $value['letter-spacing'] ) && $value['letter-spacing'] ) {
335			$value['letter-spacing'] .= 'px';
336			}
337
338			$this->json['value'] = wp_parse_args( $value, $old_values );
339
340			// Cleanup.
341			if ( isset( $this->json['value']['font-weight'] ) ) {
342			unset( $this->json['value']['font-weight'] );
343			}
344
345			// Make sure we use "subsets" instead of "subset".
346			if ( isset( $this->json['value']['subset'] ) ) {
347			if ( ! empty( $this->json['value']['subset'] ) ) {
348			if ( ! isset( $this->json['value']['subsets'] ) \|\| empty( $this->json['value']['subsets'] ) ) {
349			$this->json['value']['subsets'] = $this->json['value']['subset'];
350			}
351			}
352			unset( $this->json['value']['subset'] );
353			}
354			}
355
356			/**
357			* Returns an array of translation strings.
358			*
359			* @access protected
360			* @since 2.4.0
361			* @param string\|false $id The string-ID.
362			* @return string
363			*/
364			protected function l10n( $id = false ) {
365			$translation_strings = array(
366			'inherit' => esc_attr__( 'Inherit', 'kirki' ),
367			'font-family' => esc_attr__( 'Font Family', 'kirki' ),
368			'font-size' => esc_attr__( 'Font Size', 'kirki' ),
369			'line-height' => esc_attr__( 'Line Height', 'kirki' ),
370			'letter-spacing' => esc_attr__( 'Letter Spacing', 'kirki' ),
371			'word-spacing' => esc_attr__( 'Word Spacing', 'kirki' ),
372			'left' => esc_attr__( 'Left', 'kirki' ),
373			'right' => esc_attr__( 'Right', 'kirki' ),
374			'center' => esc_attr__( 'Center', 'kirki' ),
375			'justify' => esc_attr__( 'Justify', 'kirki' ),
376			'color' => esc_attr__( 'Color', 'kirki' ),
377			'variant' => esc_attr__( 'Variant', 'kirki' ),
378			'subsets' => esc_attr__( 'Subset', 'kirki' ),
379			'text-align' => esc_attr__( 'Text Align', 'kirki' ),
380			'text-transform' => esc_attr__( 'Text Transform', 'kirki' ),
381			'none' => esc_attr__( 'None', 'kirki' ),
382			'capitalize' => esc_attr__( 'Capitalize', 'kirki' ),
383			'uppercase' => esc_attr__( 'Uppercase', 'kirki' ),
384			'lowercase' => esc_attr__( 'Lowercase', 'kirki' ),
385			'initial' => esc_attr__( 'Initial', 'kirki' ),
386			);
387			$translation_strings = apply_filters( 'kirki/' . $this->kirki_config . '/l10n', $translation_strings );
388			if ( false === $id ) {
389			return $translation_strings;
390			}
391			return $translation_strings[ $id ];
392			}
393			}
394

aristath / kirki

Push — develop ( 2733ee...25b4bc )

Kirki_Control_Typography::content_template() B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like