class-kirki-controls-typography-control.php (13023B)
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 if ( ! class_exists('Kirki_Controls_Typography_Control')) { 18 19 /** 20 * Typography control. 21 */ 22 class Kirki_Controls_Typography_Control extends Kirki_Customize_Control 23 { 24 25 /** 26 * The control type. 27 * 28 * @access public 29 * @var string 30 */ 31 public $type = 'kirki-typography'; 32 33 /** 34 * Enqueue control related scripts/styles. 35 * 36 * @access public 37 */ 38 public function enqueue() 39 { 40 wp_enqueue_script('kirki-typography'); 41 } 42 43 /** 44 * Refresh the parameters passed to the JavaScript via JSON. 45 * 46 * @access public 47 */ 48 public function to_json() 49 { 50 parent::to_json(); 51 $this->add_values_backwards_compatibility(); 52 $defaults = array( 53 'font-family' => false, 54 'font-size' => false, 55 'mobile-font-size' => false, 56 'variant' => false, 57 'line-height' => false, 58 'letter-spacing' => false, 59 'color' => false, 60 'text-align' => false, 61 'addwebfont' => false, 62 ); 63 $this->json['default'] = wp_parse_args($this->json['default'], $defaults); 64 if ($this->json['default']['font-size'] && $this->json['default']['mobile-font-size'] === false) { 65 $this->json['default']['mobile-font-size'] = $this->json['default']['font-size']; 66 } 67 $this->json['show_variants'] = (true === Kirki_Fonts_Google::$force_load_all_variants) ? false : true; 68 $this->json['show_subsets'] = (true === Kirki_Fonts_Google::$force_load_all_subsets) ? false : true; 69 } 70 71 /** 72 * An Underscore (JS) template for this control's content (but not its container). 73 * 74 * Class variables for this control class are available in the `data` JS object; 75 * export custom variables by overriding {@see Kirki_Customize_Control::to_json()}. 76 * 77 * @see WP_Customize_Control::print_template() 78 * 79 * @access protected 80 */ 81 protected function content_template() 82 { 83 ?> 84 <# if ( data.tooltip ) { #> 85 <a href="#" class="tooltip hint--left" data-hint="{{ data.tooltip }}"><span class='dashicons dashicons-info'></span></a> 86 <# } #> 87 <label class="customizer-text"> 88 <# if ( data.label ) { #> 89 <span class="customize-control-title">{{{ data.label }}}</span> 90 <# } #> 91 <# if ( data.description ) { #> 92 <span class="description customize-control-description">{{{ data.description }}}</span> 93 <# } #> 94 </label> 95 96 <div class="wrapper"> 97 98 <# if ( data.default['font-family'] ) { #> 99 <# if ( '' == data.value['font-family'] ) { data.value['font-family'] = data.default['font-family']; } #> 100 <# if ( data.choices['fonts'] ) { data.fonts = data.choices['fonts']; } #> 101 <div class="font-family"> 102 <h5>{{ data.l10n['font-family'] }}</h5> 103 <select {{{ data.inputAttrs }}} id="kirki-typography-font-family-{{{ data.id }}}" placeholder="{{ data.l10n['select-font-family'] }}"></select> 104 </div> 105 106 <# if ( data.default['addwebfont'] ) { #> 107 <a href="#" class="button edit button-primary addwebfont">{{ data.l10n['addwebfont'] }}</a> 108 <# } #> 109 110 <# if ( true === data.show_variants || false !== data.default.variant ) { #> 111 <div class="variant hide-on-standard-fonts kirki-variant-wrapper"> 112 <h5>{{ data.l10n['variant'] }}</h5> 113 <select {{{ data.inputAttrs }}} class="variant" id="kirki-typography-variant-{{{ data.id }}}"></select> 114 </div> 115 <# } #> 116 <# if ( true === data.show_subsets ) { #> 117 <div class="subsets hide-on-standard-fonts kirki-subsets-wrapper"> 118 <h5>{{ data.l10n['subsets'] }}</h5> 119 <select {{{ data.inputAttrs }}} class="subset" id="kirki-typography-subsets-{{{ data.id }}}"></select> 120 </div> 121 <# } #> 122 <# } #> 123 124 <# if ( data.default['font-size'] ) { #> 125 <div class="font-size"> 126 <h5>{{ data.l10n['font-size'] }}</h5> 127 <input {{{ data.inputAttrs }}} type="text" value="{{ data.value['font-size'] }}"/> 128 </div> 129 <# } #> 130 131 <# if ( data.default['mobile-font-size'] ) { #> 132 <div class="mobile-font-size"> 133 <h5>{{ data.l10n['mobile-font-size'] }}</h5> 134 <input {{{ data.inputAttrs }}} type="text" value="{{ data.value['mobile-font-size'] }}"/> 135 </div> 136 <# } #> 137 138 139 <# if ( data.default['line-height'] ) { #> 140 <div class="line-height"> 141 <h5>{{ data.l10n['line-height'] }}</h5> 142 <input {{{ data.inputAttrs }}} type="text" value="{{ data.value['line-height'] }}"/> 143 </div> 144 <# } #> 145 146 <# if ( data.default['letter-spacing'] ) { #> 147 <div class="letter-spacing"> 148 <h5>{{ data.l10n['letter-spacing'] }}</h5> 149 <input {{{ data.inputAttrs }}} type="text" value="{{ data.value['letter-spacing'] }}"/> 150 </div> 151 <# } #> 152 153 <# if ( data.default['text-align'] ) { #> 154 <div class="text-align"> 155 <h5>{{ data.l10n['text-align'] }}</h5> 156 <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"<# } #>> 157 <label for="{{ data.id }}-text-align-inherit"> 158 <span class="dashicons dashicons-editor-removeformatting"></span> 159 <span class="screen-reader-text">{{ data.l10n['inherit'] }}</span> 160 </label> 161 </input> 162 <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"<# } #>> 163 <label for="{{ data.id }}-text-align-left"> 164 <span class="dashicons dashicons-editor-alignleft"></span> 165 <span class="screen-reader-text">{{ data.l10n['left'] }}</span> 166 </label> 167 </input> 168 <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"<# } #>> 169 <label for="{{ data.id }}-text-align-center"> 170 <span class="dashicons dashicons-editor-aligncenter"></span> 171 <span class="screen-reader-text">{{ data.l10n['center'] }}</span> 172 </label> 173 </input> 174 <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"<# } #>> 175 <label for="{{ data.id }}-text-align-right"> 176 <span class="dashicons dashicons-editor-alignright"></span> 177 <span class="screen-reader-text">{{ data.l10n['right'] }}</span> 178 </label> 179 </input> 180 <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"<# } #>> 181 <label for="{{ data.id }}-text-align-justify"> 182 <span class="dashicons dashicons-editor-justify"></span> 183 <span class="screen-reader-text">{{ data.l10n['justify'] }}</span> 184 </label> 185 </input> 186 </div> 187 <# } #> 188 189 <# if ( data.default['text-transform'] ) { #> 190 <div class="text-transform"> 191 <h5>{{ data.l10n['text-transform'] }}</h5> 192 <select {{{ data.inputAttrs }}} id="kirki-typography-text-transform-{{{ data.id }}}"> 193 <option value="none" 194 <# if ( 'none' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['none'] }}</option> 195 <option value="capitalize" 196 <# if ( 'capitalize' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['capitalize'] }}</option> 197 <option value="uppercase" 198 <# if ( 'uppercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['uppercase'] }}</option> 199 <option value="lowercase" 200 <# if ( 'lowercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['lowercase'] }}</option> 201 <option value="initial" 202 <# if ( 'initial' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['initial'] }}</option> 203 <option value="inherit" 204 <# if ( 'inherit' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['inherit'] }}</option> 205 </select> 206 </div> 207 <# } #> 208 209 <# if ( data.default['color'] ) { #> 210 <div class="color customize-control-kirki-color"> 211 <h5>{{ data.l10n['color'] }}</h5> 212 <input {{{ data.inputAttrs }}} type="text" data-alpha="{{ data.choices['alpha'] }}" data-palette="{{ data.palette }}" data-default-color="{{ data.default['color'] }}" value="{{ data.value['color'] }}" class="kirki-color-control" {{{ data.link }}}/> 213 </div> 214 <# } #> 215 </div> 216 <?php 217 } 218 219 /** 220 * Adds backwards-compatibility for values. 221 * Converts font-weight to variant 222 * Adds units to letter-spacing 223 * 224 * @access protected 225 */ 226 protected function add_values_backwards_compatibility() 227 { 228 $value = $this->value(); 229 $old_values = array( 230 'font-family' => '', 231 'font-size' => '', 232 'mobile-font-size' => '', 233 'variant' => (isset($value['font-weight'])) ? $value['font-weight'] : 'regular', 234 'line-height' => '', 235 'letter-spacing' => '', 236 'color' => '', 237 ); 238 239 // Font-weight is now variant. 240 // All values are the same with the exception of 400 (becomes regular). 241 if ('400' == $old_values['variant']) { 242 $old_values['variant'] = 'regular'; 243 } 244 245 // Letter spacing was in px, now it requires units. 246 if (isset($value['letter-spacing']) && is_numeric($value['letter-spacing']) && $value['letter-spacing']) { 247 $value['letter-spacing'] .= 'px'; 248 } 249 250 $this->json['value'] = wp_parse_args($value, $old_values); 251 252 // Cleanup. 253 if (isset($this->json['value']['font-weight'])) { 254 unset($this->json['value']['font-weight']); 255 } 256 257 // Make sure we use "subsets" instead of "subset". 258 if (isset($this->json['value']['subset'])) { 259 if ( ! empty($this->json['value']['subset'])) { 260 if ( ! isset($this->json['value']['subsets']) || empty($this->json['value']['subsets'])) { 261 $this->json['value']['subsets'] = $this->json['value']['subset']; 262 } 263 } 264 unset($this->json['value']['subset']); 265 } 266 } 267 } 268 }