field_before(); $args = wp_parse_args( $this->field, array( 'font_family' => true, 'font_weight' => true, 'font_style' => true, 'font_size' => true, 'line_height' => true, 'letter_spacing' => true, 'text_align' => true, 'text_transform' => true, 'color' => true, 'background-color' => true, 'chosen' => true, 'preview' => true, 'subset' => true, 'multi_subset' => false, 'extra_styles' => false, 'backup_font_family' => false, 'font_variant' => false, 'word_spacing' => false, 'text_decoration' => false, 'custom_style' => false, 'exclude' => '', 'unit' => 'px', 'line_height_unit' => '', 'preview_text' => 'The quick brown fox jumps over the lazy dog', ) ); $default_value = array( 'font-family' => '', 'font-weight' => '', 'font-style' => '', 'font-variant' => '', 'font-size' => '', 'line-height' => '', 'letter-spacing' => '', 'word-spacing' => '', 'text-align' => '', 'text-transform' => '', 'text-decoration' => '', 'backup-font-family' => '', 'color' => '', 'background-color' => '', 'custom-style' => '', 'type' => '', 'subset' => '', 'extra-styles' => array(), ); $default_value = ( ! empty( $this->field['default'] ) ) ? wp_parse_args( $this->field['default'], $default_value ) : $default_value; $this->value = wp_parse_args( $this->value, $default_value ); $this->chosen = $args['chosen']; $chosen_class = ( $this->chosen ) ? ' wpgp--chosen' : ''; $line_height_unit = ( ! empty( $args['line_height_unit'] ) ) ? $args['line_height_unit'] : $args['unit']; echo '
'; echo '
'; // // Font Family if ( ! empty( $args['font_family'] ) ) { echo '
'; echo '
' . esc_html__( 'Font Family', 'wpgp' ) . '
'; echo $this->create_select( array( $this->value['font-family'] => $this->value['font-family'] ), 'font-family', esc_html__( 'Select a font', 'wpgp' ) ); echo '
'; } // // Backup Font Family if ( ! empty( $args['backup_font_family'] ) ) { echo ''; } // // Font Style and Extra Style Select if ( ! empty( $args['font_weight'] ) || ! empty( $args['font_style'] ) ) { // // Font Style Select echo ''; } // // Text Align if ( ! empty( $args['font_style'] ) ) { echo '
'; echo '
' . esc_html__( 'Font Style', 'wpgp' ) . '
'; echo $this->create_select( array( 'normal' => esc_html__( 'Normal', 'wpgp' ), 'italic' => esc_html__( 'Italic', 'wpgp' ), 'oblique' => esc_html__( 'Oblique', 'wpgp' ), ), 'font-style', esc_html__( 'Default', 'wpgp' ) ); echo '
'; } echo '
'; echo '
'; // // Subset if ( ! empty( $args['subset'] ) ) { echo ''; } // // Text Align if ( ! empty( $args['text_align'] ) ) { echo '
'; echo '
' . esc_html__( 'Text Align', 'wpgp' ) . '
'; echo $this->create_select( array( 'inherit' => esc_html__( 'Inherit', 'wpgp' ), 'left' => esc_html__( 'Left', 'wpgp' ), 'center' => esc_html__( 'Center', 'wpgp' ), 'right' => esc_html__( 'Right', 'wpgp' ), 'justify' => esc_html__( 'Justify', 'wpgp' ), 'initial' => esc_html__( 'Initial', 'wpgp' ), ), 'text-align', esc_html__( 'Default', 'wpgp' ) ); echo '
'; } // // Font Variant if ( ! empty( $args['font_variant'] ) ) { echo '
'; echo '
' . esc_html__( 'Font Variant', 'wpgp' ) . '
'; echo $this->create_select( array( 'normal' => esc_html__( 'Normal', 'wpgp' ), 'small-caps' => esc_html__( 'Small Caps', 'wpgp' ), 'all-small-caps' => esc_html__( 'All Small Caps', 'wpgp' ), ), 'font-variant', esc_html__( 'Default', 'wpgp' ) ); echo '
'; } // // Text Transform if ( ! empty( $args['text_transform'] ) ) { echo '
'; echo '
' . esc_html__( 'Text Transform', 'wpgp' ) . '
'; echo $this->create_select( array( 'none' => esc_html__( 'None', 'wpgp' ), 'capitalize' => esc_html__( 'Capitalize', 'wpgp' ), 'uppercase' => esc_html__( 'Uppercase', 'wpgp' ), 'lowercase' => esc_html__( 'Lowercase', 'wpgp' ), ), 'text-transform', esc_html__( 'Default', 'wpgp' ) ); echo '
'; } // // Text Decoration if ( ! empty( $args['text_decoration'] ) ) { echo '
'; echo '
' . esc_html__( 'Text Decoration', 'wpgp' ) . '
'; echo $this->create_select( array( 'none' => esc_html__( 'None', 'wpgp' ), 'underline' => esc_html__( 'Solid', 'wpgp' ), 'underline double' => esc_html__( 'Double', 'wpgp' ), 'underline dotted' => esc_html__( 'Dotted', 'wpgp' ), 'underline dashed' => esc_html__( 'Dashed', 'wpgp' ), 'underline wavy' => esc_html__( 'Wavy', 'wpgp' ), 'underline overline' => esc_html__( 'Overline', 'wpgp' ), 'line-through' => esc_html__( 'Line-through', 'wpgp' ), ), 'text-decoration', esc_html__( 'Default', 'wpgp' ) ); echo '
'; } echo '
'; echo '
'; // // Font Size if ( ! empty( $args['font_size'] ) ) { echo '
'; echo '
' . esc_html__( 'Font Size', 'wpgp' ) . '
'; echo '
'; echo ''; // echo '' . esc_attr( $args['unit'] ) . ''; echo '
'; echo '
'; } // // Line Height if ( ! empty( $args['line_height'] ) ) { echo '
'; echo '
' . esc_html__( 'Line Height', 'wpgp' ) . '
'; echo '
'; echo ''; // echo '' . esc_attr( $line_height_unit ) . ''; echo '
'; echo '
'; } // // Letter Spacing if ( ! empty( $args['letter_spacing'] ) ) { echo '
'; echo '
' . esc_html__( 'Letter Spacing', 'wpgp' ) . '
'; echo '
'; echo ''; // echo '' . esc_attr( $args['unit'] ) . ''; echo '
'; echo '
'; } // // Word Spacing if ( ! empty( $args['word_spacing'] ) ) { echo '
'; echo '
' . esc_html__( 'Word Spacing', 'wpgp' ) . '
'; echo '
'; echo ''; // echo '' . esc_attr( $args['unit'] ) . ''; echo '
'; echo '
'; } echo '
'; // // Font Color if ( ! empty( $args['color'] ) ) { $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="' . esc_attr( $default_value['color'] ) . '"' : ''; echo '
'; echo '
' . esc_html__( 'Font Color', 'wpgp' ) . '
'; echo '
'; echo ''; echo '
'; echo '
'; } // // Font Background Color. if ( ! empty( $args['background-color'] ) ) { $default_color_attr = ( ! empty( $default_value['background-color'] ) ) ? ' data-default-background-color="' . esc_attr( $default_value['background-color'] ) . '"' : ''; echo '
'; echo '
' . esc_html__( 'Background Color', 'wpgp' ) . '
'; echo '
'; echo ''; echo '
'; echo '
'; } // // Custom style if ( ! empty( $args['custom_style'] ) ) { echo '
'; echo '
' . esc_html__( 'Custom Style', 'wpgp' ) . '
'; echo ''; echo '
'; } // // Preview $always_preview = ( $args['preview'] !== 'always' ) ? ' hidden' : ''; if ( ! empty( $args['preview'] ) ) { echo '
'; echo '
'; echo '
' . esc_attr( $args['preview_text'] ) . '
'; echo '
'; } echo ''; echo ''; echo '
'; echo $this->field_after(); } public function create_select( $options, $name, $placeholder = '', $is_multiple = false ) { $multiple_name = ( $is_multiple ) ? '[]' : ''; $multiple_attr = ( $is_multiple ) ? ' multiple data-multiple="true"' : ''; $chosen_rtl = ( $this->chosen && is_rtl() ) ? ' chosen-rtl' : ''; $output = ''; return $output; } public function enqueue() { if ( ! wp_script_is( 'wpgp-webfontloader' ) ) { WPGP::include_plugin_file( 'fields/typography/google-fonts.php' ); wp_enqueue_script( 'wpgp-webfontloader', 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js', array( 'wpgp' ), '1.6.28', true ); $webfonts = array(); $customwebfonts = apply_filters( 'wpgp_field_typography_customwebfonts', array() ); if ( ! empty( $customwebfonts ) ) { $webfonts['custom'] = array( 'label' => esc_html__( 'Custom Web Fonts', 'wpgp' ), 'fonts' => $customwebfonts, ); } $webfonts['safe'] = array( 'label' => esc_html__( 'Safe Web Fonts', 'wpgp' ), 'fonts' => apply_filters( 'wpgp_field_typography_safewebfonts', array( 'Arial', 'Arial Black', 'Helvetica', 'Times New Roman', 'Courier New', 'Tahoma', 'Verdana', 'Impact', 'Trebuchet MS', 'Comic Sans MS', 'Lucida Console', 'Lucida Sans Unicode', 'Georgia, serif', 'Palatino Linotype', ) ), ); $webfonts['google'] = array( 'label' => esc_html__( 'Google Web Fonts', 'wpgp' ), 'fonts' => apply_filters( 'wpgp_field_typography_googlewebfonts', wpgp_get_google_fonts() ), ); $defaultstyles = apply_filters( 'wpgp_field_typography_defaultstyles', array( 'normal', 'italic', '700', '700italic' ) ); $googlestyles = apply_filters( 'wpgp_field_typography_googlestyles', array( '100' => 'Thin 100', '100italic' => 'Thin 100 Italic', '200' => 'Extra-Light 200', '200italic' => 'Extra-Light 200 Italic', '300' => 'Light 300', '300italic' => 'Light 300 Italic', 'normal' => 'Normal 400', 'italic' => 'Normal 400 Italic', '500' => 'Medium 500', '500italic' => 'Medium 500 Italic', '600' => 'Semi-Bold 600', '600italic' => 'Semi-Bold 600 Italic', '700' => 'Bold 700', '700italic' => 'Bold 700 Italic', '800' => 'Extra-Bold 800', '800italic' => 'Extra-Bold 800 Italic', '900' => 'Black 900', '900italic' => 'Black 900 Italic', ) ); $webfonts = apply_filters( 'wpgp_field_typography_webfonts', $webfonts ); wp_localize_script( 'wpgp', 'wpgp_typography_json', array( 'webfonts' => $webfonts, 'defaultstyles' => $defaultstyles, 'googlestyles' => $googlestyles, ) ); } } public function enqueue_google_fonts() { $value = $this->value; $families = array(); $is_google = false; if ( ! empty( $this->value['type'] ) ) { $is_google = ( $this->value['type'] === 'google' ) ? true : false; } else { WPGP::include_plugin_file( 'fields/typography/google-fonts.php' ); $is_google = ( array_key_exists( $this->value['font-family'], wpgp_get_google_fonts() ) ) ? true : false; } if ( $is_google ) { // set style $font_weight = ( ! empty( $value['font-weight'] ) ) ? $value['font-weight'] : ''; $font_style = ( ! empty( $value['font-style'] ) ) ? $value['font-style'] : ''; if ( $font_weight || $font_style ) { $style = $font_weight . $font_style; $families['style'][ $style ] = $style; } // set extra styles if ( ! empty( $value['extra-styles'] ) ) { foreach ( $value['extra-styles'] as $extra_style ) { $families['style'][ $extra_style ] = $extra_style; } } // set subsets if ( ! empty( $value['subset'] ) ) { $value['subset'] = ( is_array( $value['subset'] ) ) ? $value['subset'] : array_filter( (array) $value['subset'] ); foreach ( $value['subset'] as $subset ) { $families['subset'][ $subset ] = $subset; } } $all_styles = ( ! empty( $families['style'] ) ) ? ':' . implode( ',', $families['style'] ) : ''; $all_subsets = ( ! empty( $families['subset'] ) ) ? ':' . implode( ',', $families['subset'] ) : ''; $families = $this->value['font-family'] . str_replace( array( 'normal', 'italic' ), array( 'n', 'i' ), $all_styles ) . $all_subsets; $this->parent->typographies[] = $families; return $families; } return false; } public function output() { $output = ''; $bg_image = array(); $important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : ''; $element = ( is_array( $this->field['output'] ) ) ? join( ',', $this->field['output'] ) : $this->field['output']; $font_family = ( ! empty( $this->value['font-family'] ) ) ? $this->value['font-family'] : ''; $backup_family = ( ! empty( $this->value['backup-font-family'] ) ) ? ', ' . $this->value['backup-font-family'] : ''; if ( $font_family ) { $output .= 'font-family:"' . $font_family . '"' . $backup_family . $important . ';'; } // Common font properties $properties = array( 'color', 'background-color', 'font-weight', 'font-style', 'font-variant', 'text-align', 'text-transform', 'text-decoration', ); foreach ( $properties as $property ) { if ( isset( $this->value[ $property ] ) && $this->value[ $property ] !== '' ) { $output .= $property . ':' . $this->value[ $property ] . $important . ';'; } } $properties = array( 'font-size', 'line-height', 'letter-spacing', 'word-spacing', ); $unit = ( ! empty( $this->value['unit'] ) ) ? $this->value['unit'] : ''; $line_height_unit = ( ! empty( $this->value['line_height_unit'] ) ) ? $this->value['line_height_unit'] : $unit; foreach ( $properties as $property ) { if ( isset( $this->value[ $property ] ) && $this->value[ $property ] !== '' ) { $unit = ( $property === 'line-height' ) ? $line_height_unit : $unit; $output .= $property . ':' . $this->value[ $property ] . $unit . $important . ';'; } } $custom_style = ( ! empty( $this->value['custom-style'] ) ) ? $this->value['custom-style'] : ''; if ( $output ) { $output = $element . '{' . $output . $custom_style . '}'; } $this->parent->output_css .= $output; return $output; } } }