typography.php 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. <?php if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access directly.
  2. /**
  3. *
  4. * Field: typography
  5. *
  6. * @since 1.0.0
  7. * @version 1.0.0
  8. *
  9. */
  10. if ( ! class_exists( 'CSF_Field_typography' ) ) {
  11. class CSF_Field_typography extends CSF_Fields {
  12. public $chosen = false;
  13. public $value = array();
  14. public function __construct( $field, $value = '', $unique = '', $where = '', $parent = '' ) {
  15. parent::__construct( $field, $value, $unique, $where, $parent );
  16. }
  17. public function render() {
  18. echo $this->field_before();
  19. $args = wp_parse_args( $this->field, array(
  20. 'font_family' => true,
  21. 'font_weight' => true,
  22. 'font_style' => true,
  23. 'font_size' => true,
  24. 'line_height' => true,
  25. 'letter_spacing' => true,
  26. 'text_align' => true,
  27. 'text_transform' => true,
  28. 'color' => true,
  29. 'chosen' => true,
  30. 'preview' => true,
  31. 'subset' => true,
  32. 'multi_subset' => false,
  33. 'extra_styles' => false,
  34. 'backup_font_family' => false,
  35. 'font_variant' => false,
  36. 'word_spacing' => false,
  37. 'text_decoration' => false,
  38. 'custom_style' => false,
  39. 'compact' => false,
  40. 'exclude' => '',
  41. 'unit' => 'px',
  42. 'line_height_unit' => '',
  43. 'preview_text' => 'The quick brown fox jumps over the lazy dog',
  44. ) );
  45. if ( $args['compact'] ) {
  46. $args['text_transform'] = false;
  47. $args['text_align'] = false;
  48. $args['font_size'] = false;
  49. $args['line_height'] = false;
  50. $args['letter_spacing'] = false;
  51. $args['preview'] = false;
  52. $args['color'] = false;
  53. }
  54. $default_value = array(
  55. 'font-family' => '',
  56. 'font-weight' => '',
  57. 'font-style' => '',
  58. 'font-variant' => '',
  59. 'font-size' => '',
  60. 'line-height' => '',
  61. 'letter-spacing' => '',
  62. 'word-spacing' => '',
  63. 'text-align' => '',
  64. 'text-transform' => '',
  65. 'text-decoration' => '',
  66. 'backup-font-family' => '',
  67. 'color' => '',
  68. 'custom-style' => '',
  69. 'type' => '',
  70. 'subset' => '',
  71. 'extra-styles' => array(),
  72. );
  73. $default_value = ( ! empty( $this->field['default'] ) ) ? wp_parse_args( $this->field['default'], $default_value ) : $default_value;
  74. $this->value = wp_parse_args( $this->value, $default_value );
  75. $this->chosen = $args['chosen'];
  76. $chosen_class = ( $this->chosen ) ? ' csf--chosen' : '';
  77. $line_height_unit = ( ! empty( $args['line_height_unit'] ) ) ? $args['line_height_unit'] : $args['unit'];
  78. echo '<div class="csf--typography'. esc_attr( $chosen_class ) .'" data-depend-id="'. esc_attr( $this->field['id'] ) .'" data-unit="'. esc_attr( $args['unit'] ) .'" data-line-height-unit="'. esc_attr( $line_height_unit ) .'" data-exclude="'. esc_attr( $args['exclude'] ) .'">';
  79. echo '<div class="csf--blocks csf--blocks-selects">';
  80. //
  81. // Font Family
  82. if ( ! empty( $args['font_family'] ) ) {
  83. echo '<div class="csf--block">';
  84. echo '<div class="csf--title">'. esc_html__( 'Font Family', 'sakurairo_csf' ) .'</div>';
  85. echo $this->create_select( array( $this->value['font-family'] => $this->value['font-family'] ), 'font-family', esc_html__( 'Select a font', 'sakurairo_csf' ) );
  86. echo '</div>';
  87. }
  88. //
  89. // Backup Font Family
  90. if ( ! empty( $args['backup_font_family'] ) ) {
  91. echo '<div class="csf--block csf--block-backup-font-family hidden">';
  92. echo '<div class="csf--title">'. esc_html__( 'Backup Font Family', 'sakurairo_csf' ) .'</div>';
  93. echo $this->create_select( apply_filters( 'csf_field_typography_backup_font_family', array(
  94. 'Arial, Helvetica, sans-serif',
  95. "'Arial Black', Gadget, sans-serif",
  96. "'Comic Sans MS', cursive, sans-serif",
  97. 'Impact, Charcoal, sans-serif',
  98. "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
  99. 'Tahoma, Geneva, sans-serif',
  100. "'Trebuchet MS', Helvetica, sans-serif",
  101. 'Verdana, Geneva, sans-serif',
  102. "'Courier New', Courier, monospace",
  103. "'Lucida Console', Monaco, monospace",
  104. 'Georgia, serif',
  105. 'Palatino Linotype'
  106. ) ), 'backup-font-family', esc_html__( 'Default', 'sakurairo_csf' ) );
  107. echo '</div>';
  108. }
  109. //
  110. // Font Style and Extra Style Select
  111. if ( ! empty( $args['font_weight'] ) || ! empty( $args['font_style'] ) ) {
  112. //
  113. // Font Style Select
  114. echo '<div class="csf--block csf--block-font-style hidden">';
  115. echo '<div class="csf--title">'. esc_html__( 'Font Style', 'sakurairo_csf') .'</div>';
  116. echo '<select class="csf--font-style-select" data-placeholder="Default">';
  117. echo '<option value="">'. ( ! $this->chosen ? esc_html__( 'Default', 'sakurairo_csf' ) : '' ) .'</option>';
  118. if ( ! empty( $this->value['font-weight'] ) || ! empty( $this->value['font-style'] ) ) {
  119. echo '<option value="'. esc_attr( strtolower( $this->value['font-weight'] . $this->value['font-style'] ) ) .'" selected></option>';
  120. }
  121. echo '</select>';
  122. echo '<input type="hidden" name="'. esc_attr( $this->field_name( '[font-weight]' ) ) .'" class="csf--font-weight" value="'. esc_attr( $this->value['font-weight'] ) .'" />';
  123. echo '<input type="hidden" name="'. esc_attr( $this->field_name( '[font-style]' ) ) .'" class="csf--font-style" value="'. esc_attr( $this->value['font-style'] ) .'" />';
  124. //
  125. // Extra Font Style Select
  126. if ( ! empty( $args['extra_styles'] ) ) {
  127. echo '<div class="csf--block-extra-styles hidden">';
  128. echo ( ! $this->chosen ) ? '<div class="csf--title">'. esc_html__( 'Load Extra Styles', 'sakurairo_csf' ) .'</div>' : '';
  129. $placeholder = ( $this->chosen ) ? esc_html__( 'Load Extra Styles', 'sakurairo_csf' ) : esc_html__( 'Default', 'sakurairo_csf' );
  130. echo $this->create_select( $this->value['extra-styles'], 'extra-styles', $placeholder, true );
  131. echo '</div>';
  132. }
  133. echo '</div>';
  134. }
  135. //
  136. // Subset
  137. if ( ! empty( $args['subset'] ) ) {
  138. echo '<div class="csf--block csf--block-subset hidden">';
  139. echo '<div class="csf--title">'. esc_html__( 'Subset', 'sakurairo_csf' ) .'</div>';
  140. $subset = ( is_array( $this->value['subset'] ) ) ? $this->value['subset'] : array_filter( (array) $this->value['subset'] );
  141. echo $this->create_select( $subset, 'subset', esc_html__( 'Default', 'sakurairo_csf' ), $args['multi_subset'] );
  142. echo '</div>';
  143. }
  144. //
  145. // Text Align
  146. if ( ! empty( $args['text_align'] ) ) {
  147. echo '<div class="csf--block">';
  148. echo '<div class="csf--title">'. esc_html__( 'Text Align', 'sakurairo_csf' ) .'</div>';
  149. echo $this->create_select( array(
  150. 'inherit' => esc_html__( 'Inherit', 'sakurairo_csf' ),
  151. 'left' => esc_html__( 'Left', 'sakurairo_csf' ),
  152. 'center' => esc_html__( 'Center', 'sakurairo_csf' ),
  153. 'right' => esc_html__( 'Right', 'sakurairo_csf' ),
  154. 'justify' => esc_html__( 'Justify', 'sakurairo_csf' ),
  155. 'initial' => esc_html__( 'Initial', 'sakurairo_csf' )
  156. ), 'text-align', esc_html__( 'Default', 'sakurairo_csf' ) );
  157. echo '</div>';
  158. }
  159. //
  160. // Font Variant
  161. if ( ! empty( $args['font_variant'] ) ) {
  162. echo '<div class="csf--block">';
  163. echo '<div class="csf--title">'. esc_html__( 'Font Variant', 'sakurairo_csf' ) .'</div>';
  164. echo $this->create_select( array(
  165. 'normal' => esc_html__( 'Normal', 'sakurairo_csf' ),
  166. 'small-caps' => esc_html__( 'Small Caps', 'sakurairo_csf' ),
  167. 'all-small-caps' => esc_html__( 'All Small Caps', 'sakurairo_csf' )
  168. ), 'font-variant', esc_html__( 'Default', 'sakurairo_csf' ) );
  169. echo '</div>';
  170. }
  171. //
  172. // Text Transform
  173. if ( ! empty( $args['text_transform'] ) ) {
  174. echo '<div class="csf--block">';
  175. echo '<div class="csf--title">'. esc_html__( 'Text Transform', 'sakurairo_csf' ) .'</div>';
  176. echo $this->create_select( array(
  177. 'none' => esc_html__( 'None', 'sakurairo_csf' ),
  178. 'capitalize' => esc_html__( 'Capitalize', 'sakurairo_csf' ),
  179. 'uppercase' => esc_html__( 'Uppercase', 'sakurairo_csf' ),
  180. 'lowercase' => esc_html__( 'Lowercase', 'sakurairo_csf' )
  181. ), 'text-transform', esc_html__( 'Default', 'sakurairo_csf' ) );
  182. echo '</div>';
  183. }
  184. //
  185. // Text Decoration
  186. if ( ! empty( $args['text_decoration'] ) ) {
  187. echo '<div class="csf--block">';
  188. echo '<div class="csf--title">'. esc_html__( 'Text Decoration', 'sakurairo_csf' ) .'</div>';
  189. echo $this->create_select( array(
  190. 'none' => esc_html__( 'None', 'sakurairo_csf' ),
  191. 'underline' => esc_html__( 'Solid', 'sakurairo_csf' ),
  192. 'underline double' => esc_html__( 'Double', 'sakurairo_csf' ),
  193. 'underline dotted' => esc_html__( 'Dotted', 'sakurairo_csf' ),
  194. 'underline dashed' => esc_html__( 'Dashed', 'sakurairo_csf' ),
  195. 'underline wavy' => esc_html__( 'Wavy', 'sakurairo_csf' ),
  196. 'underline overline' => esc_html__( 'Overline', 'sakurairo_csf' ),
  197. 'line-through' => esc_html__( 'Line-through', 'sakurairo_csf' )
  198. ), 'text-decoration', esc_html__( 'Default', 'sakurairo_csf' ) );
  199. echo '</div>';
  200. }
  201. echo '</div>';
  202. echo '<div class="csf--blocks csf--blocks-inputs">';
  203. //
  204. // Font Size
  205. if ( ! empty( $args['font_size'] ) ) {
  206. echo '<div class="csf--block">';
  207. echo '<div class="csf--title">'. esc_html__( 'Font Size', 'sakurairo_csf' ) .'</div>';
  208. echo '<div class="csf--input-wrap">';
  209. echo '<input type="number" name="'. esc_attr( $this->field_name( '[font-size]' ) ) .'" class="csf--font-size csf--input csf-input-number" value="'. esc_attr( $this->value['font-size'] ) .'" step="any" />';
  210. echo '<span class="csf--unit">'. esc_attr( $args['unit'] ) .'</span>';
  211. echo '</div>';
  212. echo '</div>';
  213. }
  214. //
  215. // Line Height
  216. if ( ! empty( $args['line_height'] ) ) {
  217. echo '<div class="csf--block">';
  218. echo '<div class="csf--title">'. esc_html__( 'Line Height', 'sakurairo_csf' ) .'</div>';
  219. echo '<div class="csf--input-wrap">';
  220. echo '<input type="number" name="'. esc_attr( $this->field_name( '[line-height]' ) ) .'" class="csf--line-height csf--input csf-input-number" value="'. esc_attr( $this->value['line-height'] ) .'" step="any" />';
  221. echo '<span class="csf--unit">'. esc_attr( $line_height_unit ) .'</span>';
  222. echo '</div>';
  223. echo '</div>';
  224. }
  225. //
  226. // Letter Spacing
  227. if ( ! empty( $args['letter_spacing'] ) ) {
  228. echo '<div class="csf--block">';
  229. echo '<div class="csf--title">'. esc_html__( 'Letter Spacing', 'sakurairo_csf' ) .'</div>';
  230. echo '<div class="csf--input-wrap">';
  231. echo '<input type="number" name="'. esc_attr( $this->field_name( '[letter-spacing]' ) ) .'" class="csf--letter-spacing csf--input csf-input-number" value="'. esc_attr( $this->value['letter-spacing'] ) .'" step="any" />';
  232. echo '<span class="csf--unit">'. esc_attr( $args['unit'] ) .'</span>';
  233. echo '</div>';
  234. echo '</div>';
  235. }
  236. //
  237. // Word Spacing
  238. if ( ! empty( $args['word_spacing'] ) ) {
  239. echo '<div class="csf--block">';
  240. echo '<div class="csf--title">'. esc_html__( 'Word Spacing', 'sakurairo_csf' ) .'</div>';
  241. echo '<div class="csf--input-wrap">';
  242. echo '<input type="number" name="'. esc_attr( $this->field_name( '[word-spacing]' ) ) .'" class="csf--word-spacing csf--input csf-input-number" value="'. esc_attr( $this->value['word-spacing'] ) .'" step="any" />';
  243. echo '<span class="csf--unit">'. esc_attr( $args['unit'] ) .'</span>';
  244. echo '</div>';
  245. echo '</div>';
  246. }
  247. echo '</div>';
  248. //
  249. // Font Color
  250. if ( ! empty( $args['color'] ) ) {
  251. $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="'. esc_attr( $default_value['color'] ) .'"' : '';
  252. echo '<div class="csf--block csf--block-font-color">';
  253. echo '<div class="csf--title">'. esc_html__( 'Font Color', 'sakurairo_csf' ) .'</div>';
  254. echo '<div class="csf-field-color">';
  255. echo '<input type="text" name="'. esc_attr( $this->field_name( '[color]' ) ) .'" class="csf-color csf--color" value="'. esc_attr( $this->value['color'] ) .'"'. $default_color_attr .' />';
  256. echo '</div>';
  257. echo '</div>';
  258. }
  259. //
  260. // Custom style
  261. if ( ! empty( $args['custom_style'] ) ) {
  262. echo '<div class="csf--block csf--block-custom-style">';
  263. echo '<div class="csf--title">'. esc_html__( 'Custom Style', 'sakurairo_csf' ) .'</div>';
  264. echo '<textarea name="'. esc_attr( $this->field_name( '[custom-style]' ) ) .'" class="csf--custom-style">'. esc_attr( $this->value['custom-style'] ) .'</textarea>';
  265. echo '</div>';
  266. }
  267. //
  268. // Preview
  269. $always_preview = ( $args['preview'] !== 'always' ) ? ' hidden' : '';
  270. if ( ! empty( $args['preview'] ) ) {
  271. echo '<div class="csf--block csf--block-preview'. esc_attr( $always_preview ) .'">';
  272. echo '<div class="csf--toggle fas fa-toggle-off"></div>';
  273. echo '<div class="csf--preview">'. esc_attr( $args['preview_text'] ) .'</div>';
  274. echo '</div>';
  275. }
  276. echo '<input type="hidden" name="'. esc_attr( $this->field_name( '[type]' ) ) .'" class="csf--type" value="'. esc_attr( $this->value['type'] ) .'" />';
  277. echo '<input type="hidden" name="'. esc_attr( $this->field_name( '[unit]' ) ) .'" class="csf--unit-save" value="'. esc_attr( $args['unit'] ) .'" />';
  278. echo '</div>';
  279. echo $this->field_after();
  280. }
  281. public function create_select( $options, $name, $placeholder = '', $is_multiple = false ) {
  282. $multiple_name = ( $is_multiple ) ? '[]' : '';
  283. $multiple_attr = ( $is_multiple ) ? ' multiple data-multiple="true"' : '';
  284. $chosen_rtl = ( $this->chosen && is_rtl() ) ? ' chosen-rtl' : '';
  285. $output = '<select name="'. esc_attr( $this->field_name( '['. $name .']'. $multiple_name ) ) .'" class="csf--'. esc_attr( $name ) . esc_attr( $chosen_rtl ) .'" data-placeholder="'. esc_attr( $placeholder ) .'"'. $multiple_attr .'>';
  286. $output .= ( ! empty( $placeholder ) ) ? '<option value="">'. esc_attr( ( ! $this->chosen ) ? $placeholder : '' ) .'</option>' : '';
  287. if ( ! empty( $options ) ) {
  288. foreach ( $options as $option_key => $option_value ) {
  289. if ( $is_multiple ) {
  290. $selected = ( in_array( $option_value, $this->value[$name] ) ) ? ' selected' : '';
  291. $output .= '<option value="'. esc_attr( $option_value ) .'"'. esc_attr( $selected ).'>'. esc_attr( $option_value ) .'</option>';
  292. } else {
  293. $option_key = ( is_numeric( $option_key ) ) ? $option_value : $option_key;
  294. $selected = ( $option_key === $this->value[$name] ) ? ' selected' : '';
  295. $output .= '<option value="'. esc_attr( $option_key ) .'"'. esc_attr( $selected ).'>'. esc_attr( $option_value ) .'</option>';
  296. }
  297. }
  298. }
  299. $output .= '</select>';
  300. return $output;
  301. }
  302. public function enqueue() {
  303. if ( ! wp_script_is( 'csf-webfontloader' ) ) {
  304. Sakurairo_CSF::include_plugin_file( 'fields/typography/google-fonts.php' );
  305. wp_enqueue_script( 'csf-webfontloader', 'https://lib.baomitu.com/webfont/1.6.28/webfontloader.js', array( 'sakurairo_csf' ), '1.6.28', true );
  306. $webfonts = array();
  307. $customwebfonts = apply_filters( 'csf_field_typography_customwebfonts', array() );
  308. if ( ! empty( $customwebfonts ) ) {
  309. $webfonts['custom'] = array(
  310. 'label' => esc_html__( 'Custom Web Fonts', 'sakurairo_csf' ),
  311. 'fonts' => $customwebfonts
  312. );
  313. }
  314. $webfonts['safe'] = array(
  315. 'label' => esc_html__( 'Safe Web Fonts', 'sakurairo_csf' ),
  316. 'fonts' => apply_filters( 'csf_field_typography_safewebfonts', array(
  317. 'Arial',
  318. 'Arial Black',
  319. 'Helvetica',
  320. 'Times New Roman',
  321. 'Courier New',
  322. 'Tahoma',
  323. 'Verdana',
  324. 'Impact',
  325. 'Trebuchet MS',
  326. 'Comic Sans MS',
  327. 'Lucida Console',
  328. 'Lucida Sans Unicode',
  329. 'Georgia, serif',
  330. 'Palatino Linotype'
  331. )
  332. ) );
  333. $webfonts['google'] = array(
  334. 'label' => esc_html__( 'Google Web Fonts', 'sakurairo_csf' ),
  335. 'fonts' => apply_filters( 'csf_field_typography_googlewebfonts', csf_get_google_fonts()
  336. ) );
  337. $defaultstyles = apply_filters( 'csf_field_typography_defaultstyles', array( 'normal', 'italic', '700', '700italic' ) );
  338. $googlestyles = apply_filters( 'csf_field_typography_googlestyles', array(
  339. '100' => 'Thin 100',
  340. '100italic' => 'Thin 100 Italic',
  341. '200' => 'Extra-Light 200',
  342. '200italic' => 'Extra-Light 200 Italic',
  343. '300' => 'Light 300',
  344. '300italic' => 'Light 300 Italic',
  345. 'normal' => 'Normal 400',
  346. 'italic' => 'Normal 400 Italic',
  347. '500' => 'Medium 500',
  348. '500italic' => 'Medium 500 Italic',
  349. '600' => 'Semi-Bold 600',
  350. '600italic' => 'Semi-Bold 600 Italic',
  351. '700' => 'Bold 700',
  352. '700italic' => 'Bold 700 Italic',
  353. '800' => 'Extra-Bold 800',
  354. '800italic' => 'Extra-Bold 800 Italic',
  355. '900' => 'Black 900',
  356. '900italic' => 'Black 900 Italic'
  357. ) );
  358. $webfonts = apply_filters( 'csf_field_typography_webfonts', $webfonts );
  359. wp_localize_script( 'sakurairo_csf', 'csf_typography_json', array(
  360. 'webfonts' => $webfonts,
  361. 'defaultstyles' => $defaultstyles,
  362. 'googlestyles' => $googlestyles
  363. ) );
  364. }
  365. }
  366. public function enqueue_google_fonts( $method = 'enqueue' ) {
  367. $is_google = false;
  368. if ( ! empty( $this->value['type'] ) ) {
  369. $is_google = ( $this->value['type'] === 'google' ) ? true : false;
  370. } else {
  371. Sakurairo_CSF::include_plugin_file( 'fields/typography/google-fonts.php' );
  372. $is_google = ( array_key_exists( $this->value['font-family'], csf_get_google_fonts() ) ) ? true : false;
  373. }
  374. if ( $is_google ) {
  375. // set style
  376. $font_family = ( ! empty( $this->value['font-family'] ) ) ? $this->value['font-family'] : '';
  377. $font_weight = ( ! empty( $this->value['font-weight'] ) ) ? $this->value['font-weight'] : '';
  378. $font_style = ( ! empty( $this->value['font-style'] ) ) ? $this->value['font-style'] : '';
  379. if ( $font_weight || $font_style ) {
  380. $style = $font_weight . $font_style;
  381. if ( ! empty( $style ) ) {
  382. $style = ( $style === 'normal' ) ? '400' : $style;
  383. Sakurairo_CSF::$webfonts[$method][$font_family][$style] = $style;
  384. }
  385. } else {
  386. Sakurairo_CSF::$webfonts[$method][$font_family] = array();
  387. }
  388. // set extra styles
  389. if ( ! empty( $this->value['extra-styles'] ) ) {
  390. foreach ( $this->value['extra-styles'] as $extra_style ) {
  391. if ( ! empty( $extra_style ) ) {
  392. $extra_style = ( $extra_style === 'normal' ) ? '400' : $extra_style;
  393. Sakurairo_CSF::$webfonts[$method][$font_family][$extra_style] = $extra_style;
  394. }
  395. }
  396. }
  397. // set subsets
  398. if ( ! empty( $this->value['subset'] ) ) {
  399. $this->value['subset'] = ( is_array( $this->value['subset'] ) ) ? $this->value['subset'] : array_filter( (array) $this->value['subset'] );
  400. foreach ( $this->value['subset'] as $subset ) {
  401. if( ! empty( $subset ) ) {
  402. Sakurairo_CSF::$subsets[$subset] = $subset;
  403. }
  404. }
  405. }
  406. return true;
  407. }
  408. return false;
  409. }
  410. public function output() {
  411. $output = '';
  412. $bg_image = array();
  413. $important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : '';
  414. $element = ( is_array( $this->field['output'] ) ) ? join( ',', $this->field['output'] ) : $this->field['output'];
  415. $font_family = ( ! empty( $this->value['font-family'] ) ) ? $this->value['font-family'] : '';
  416. $backup_family = ( ! empty( $this->value['backup-font-family'] ) ) ? ', '. $this->value['backup-font-family'] : '';
  417. if ( $font_family ) {
  418. $output .= 'font-family:"'. $font_family .'"'. $backup_family . $important .';';
  419. }
  420. // Common font properties
  421. $properties = array(
  422. 'color',
  423. 'font-weight',
  424. 'font-style',
  425. 'font-variant',
  426. 'text-align',
  427. 'text-transform',
  428. 'text-decoration',
  429. );
  430. foreach ( $properties as $property ) {
  431. if ( isset( $this->value[$property] ) && $this->value[$property] !== '' ) {
  432. $output .= $property .':'. $this->value[$property] . $important .';';
  433. }
  434. }
  435. $properties = array(
  436. 'font-size',
  437. 'line-height',
  438. 'letter-spacing',
  439. 'word-spacing',
  440. );
  441. $unit = ( ! empty( $this->value['unit'] ) ) ? $this->value['unit'] : 'px';
  442. $line_height_unit = ( ! empty( $this->value['line_height_unit'] ) ) ? $this->value['line_height_unit'] : $unit;
  443. foreach ( $properties as $property ) {
  444. if ( isset( $this->value[$property] ) && $this->value[$property] !== '' ) {
  445. $unit = ( $property === 'line-height' ) ? $line_height_unit : $unit;
  446. $output .= $property .':'. $this->value[$property] . $unit . $important .';';
  447. }
  448. }
  449. $custom_style = ( ! empty( $this->value['custom-style'] ) ) ? $this->value['custom-style'] : '';
  450. if ( $output ) {
  451. $output = $element .'{'. $output . $custom_style .'}';
  452. }
  453. $this->parent->output_css .= $output;
  454. return $output;
  455. }
  456. }
  457. }