447 lines
11 KiB
PHP
447 lines
11 KiB
PHP
<?php
|
|
namespace Elementor;
|
|
|
|
use Elementor\Core\Settings\Page\Manager as PageManager;
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly.
|
|
}
|
|
|
|
/**
|
|
* Elementor typography control.
|
|
*
|
|
* A base control for creating typography control. Displays input fields to define
|
|
* the content typography including font size, font family, font weight, text
|
|
* transform, font style, line height and letter spacing.
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
class Group_Control_Typography extends Group_Control_Base {
|
|
|
|
/**
|
|
* Fields.
|
|
*
|
|
* Holds all the typography control fields.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
* @static
|
|
*
|
|
* @var array Typography control fields.
|
|
*/
|
|
protected static $fields;
|
|
|
|
/**
|
|
* Scheme fields keys.
|
|
*
|
|
* Holds all the typography control scheme fields keys.
|
|
* Default is an array containing `font_family` and `font_weight`.
|
|
*
|
|
* @since 1.0.0
|
|
* @access private
|
|
* @static
|
|
*
|
|
* @var array Typography control scheme fields keys.
|
|
*/
|
|
private static $_scheme_fields_keys = [ 'font_family', 'font_weight' ];
|
|
|
|
/**
|
|
* Get scheme fields keys.
|
|
*
|
|
* Retrieve all the available typography control scheme fields keys.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
* @static
|
|
*
|
|
* @return array Scheme fields keys.
|
|
*/
|
|
public static function get_scheme_fields_keys() {
|
|
return self::$_scheme_fields_keys;
|
|
}
|
|
|
|
/**
|
|
* Get typography control type.
|
|
*
|
|
* Retrieve the control type, in this case `typography`.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
* @static
|
|
*
|
|
* @return string Control type.
|
|
*/
|
|
public static function get_type() {
|
|
return 'typography';
|
|
}
|
|
|
|
/**
|
|
* Init fields.
|
|
*
|
|
* Initialize typography control fields.
|
|
*
|
|
* @since 1.2.2
|
|
* @access protected
|
|
*
|
|
* @return array Control fields.
|
|
*/
|
|
protected function init_fields() {
|
|
$fields = [];
|
|
|
|
$kit = Plugin::$instance->kits_manager->get_active_kit_for_frontend();
|
|
|
|
/**
|
|
* Retrieve the settings directly from DB, because of an open issue when a controls group is being initialized
|
|
* from within another group
|
|
*/
|
|
$kit_settings = $kit->get_meta( PageManager::META_KEY );
|
|
|
|
$default_fonts = isset( $kit_settings['default_generic_fonts'] ) ? $kit_settings['default_generic_fonts'] : 'Sans-serif';
|
|
|
|
if ( $default_fonts ) {
|
|
$default_fonts = ', ' . $default_fonts;
|
|
}
|
|
|
|
$fields['font_family'] = [
|
|
'label' => esc_html_x( 'Family', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::FONT,
|
|
'default' => '',
|
|
'selector_value' => 'font-family: "{{VALUE}}"' . $default_fonts . ';',
|
|
];
|
|
|
|
$fields['font_size'] = [
|
|
'label' => esc_html_x( 'Size', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 1,
|
|
'max' => 200,
|
|
],
|
|
'em' => [
|
|
'max' => 20,
|
|
],
|
|
'rem' => [
|
|
'max' => 20,
|
|
],
|
|
'vw' => [
|
|
'min' => 0.1,
|
|
'max' => 10,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'responsive' => true,
|
|
'selector_value' => 'font-size: {{SIZE}}{{UNIT}}',
|
|
];
|
|
|
|
$fields['font_weight'] = [
|
|
'label' => esc_html_x( 'Weight', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'100' => '100 ' . esc_html_x( '(Thin)', 'Typography Control', 'elementor' ),
|
|
'200' => '200 ' . esc_html_x( '(Extra Light)', 'Typography Control', 'elementor' ),
|
|
'300' => '300 ' . esc_html_x( '(Light)', 'Typography Control', 'elementor' ),
|
|
'400' => '400 ' . esc_html_x( '(Normal)', 'Typography Control', 'elementor' ),
|
|
'500' => '500 ' . esc_html_x( '(Medium)', 'Typography Control', 'elementor' ),
|
|
'600' => '600 ' . esc_html_x( '(Semi Bold)', 'Typography Control', 'elementor' ),
|
|
'700' => '700 ' . esc_html_x( '(Bold)', 'Typography Control', 'elementor' ),
|
|
'800' => '800 ' . esc_html_x( '(Extra Bold)', 'Typography Control', 'elementor' ),
|
|
'900' => '900 ' . esc_html_x( '(Black)', 'Typography Control', 'elementor' ),
|
|
'' => esc_html__( 'Default', 'elementor' ),
|
|
'normal' => esc_html__( 'Normal', 'elementor' ),
|
|
'bold' => esc_html__( 'Bold', 'elementor' ),
|
|
],
|
|
];
|
|
|
|
$fields = $this->add_font_variables_fields( $fields );
|
|
|
|
$fields['text_transform'] = [
|
|
'label' => esc_html_x( 'Transform', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'' => esc_html__( 'Default', 'elementor' ),
|
|
'uppercase' => esc_html_x( 'Uppercase', 'Typography Control', 'elementor' ),
|
|
'lowercase' => esc_html_x( 'Lowercase', 'Typography Control', 'elementor' ),
|
|
'capitalize' => esc_html_x( 'Capitalize', 'Typography Control', 'elementor' ),
|
|
'none' => esc_html__( 'Normal', 'elementor' ),
|
|
],
|
|
];
|
|
|
|
$fields['font_style'] = [
|
|
'label' => esc_html_x( 'Style', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'' => esc_html__( 'Default', 'elementor' ),
|
|
'normal' => esc_html__( 'Normal', 'elementor' ),
|
|
'italic' => esc_html_x( 'Italic', 'Typography Control', 'elementor' ),
|
|
'oblique' => esc_html_x( 'Oblique', 'Typography Control', 'elementor' ),
|
|
],
|
|
];
|
|
|
|
$fields['text_decoration'] = [
|
|
'label' => esc_html_x( 'Decoration', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'' => esc_html__( 'Default', 'elementor' ),
|
|
'underline' => esc_html_x( 'Underline', 'Typography Control', 'elementor' ),
|
|
'overline' => esc_html_x( 'Overline', 'Typography Control', 'elementor' ),
|
|
'line-through' => esc_html_x( 'Line Through', 'Typography Control', 'elementor' ),
|
|
'none' => esc_html__( 'None', 'elementor' ),
|
|
],
|
|
];
|
|
|
|
$fields['line_height'] = [
|
|
'label' => esc_html__( 'Line Height', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'desktop_default' => [
|
|
'unit' => 'em',
|
|
],
|
|
'tablet_default' => [
|
|
'unit' => 'em',
|
|
],
|
|
'mobile_default' => [
|
|
'unit' => 'em',
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 1,
|
|
],
|
|
],
|
|
'responsive' => true,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'selector_value' => 'line-height: {{SIZE}}{{UNIT}}',
|
|
];
|
|
|
|
$fields['letter_spacing'] = [
|
|
'label' => esc_html__( 'Letter Spacing', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -5,
|
|
'max' => 10,
|
|
'step' => 0.1,
|
|
],
|
|
'em' => [
|
|
'min' => 0,
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
'rem' => [
|
|
'min' => 0,
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
],
|
|
'responsive' => true,
|
|
'selector_value' => 'letter-spacing: {{SIZE}}{{UNIT}}',
|
|
];
|
|
|
|
$fields['word_spacing'] = [
|
|
'label' => esc_html__( 'Word Spacing', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 50,
|
|
],
|
|
'em' => [
|
|
'min' => 0,
|
|
'max' => 5,
|
|
],
|
|
'rem' => [
|
|
'min' => 0,
|
|
'max' => 5,
|
|
],
|
|
],
|
|
'desktop_default' => [
|
|
'unit' => 'em',
|
|
],
|
|
'tablet_default' => [
|
|
'unit' => 'em',
|
|
],
|
|
'mobile_default' => [
|
|
'unit' => 'em',
|
|
],
|
|
'responsive' => true,
|
|
'selector_value' => 'word-spacing: {{SIZE}}{{UNIT}}',
|
|
];
|
|
|
|
return $fields;
|
|
}
|
|
|
|
private function add_font_variables_fields( $fields ): array {
|
|
$font_variables = $this->get_font_variables();
|
|
|
|
if ( empty( $font_variables ) ) {
|
|
return $fields;
|
|
}
|
|
|
|
$font_variables_conditions = [
|
|
'weight' => [],
|
|
'width' => [],
|
|
];
|
|
|
|
foreach ( $font_variables as $font => $variables ) {
|
|
foreach ( array_keys( $font_variables_conditions ) as $variable ) {
|
|
if ( in_array( $variable, $variables ) ) {
|
|
$font_variables_conditions[ $variable ][] = $font;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $font_variables_conditions['weight'] ) ) {
|
|
$fields['weight'] = [
|
|
'label' => esc_html_x( 'Weight', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 1,
|
|
'max' => 1000,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'font_family' => $font_variables_conditions['weight'],
|
|
],
|
|
'responsive' => true,
|
|
'selector_value' => 'font-weight: {{SIZE}};',
|
|
];
|
|
|
|
$fields['font_weight']['condition'] = [
|
|
'font_family!' => $font_variables_conditions['weight'],
|
|
];
|
|
}
|
|
|
|
if ( ! empty( $font_variables_conditions['width'] ) ) {
|
|
$fields['width'] = [
|
|
'label' => esc_html_x( 'Width', 'Typography Control', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 150,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'font_family' => $font_variables_conditions['width'],
|
|
],
|
|
'responsive' => true,
|
|
'selector_value' => 'font-stretch: {{SIZE}}%;',
|
|
];
|
|
}
|
|
|
|
$fields['font_style']['condition'] = [
|
|
'font_family!' => array_keys( $font_variables ),
|
|
];
|
|
|
|
return $fields;
|
|
}
|
|
|
|
private function get_font_variables() {
|
|
static $font_variables = null;
|
|
|
|
if ( null === $font_variables ) {
|
|
$font_variables = apply_filters( 'elementor/typography/font_variables', [] );
|
|
}
|
|
|
|
return $font_variables;
|
|
}
|
|
|
|
public static function get_font_variable_ranges() {
|
|
return apply_filters( 'elementor/typography/font_variable_ranges', [] );
|
|
}
|
|
|
|
/**
|
|
* Prepare fields.
|
|
*
|
|
* Process typography control fields before adding them to `add_control()`.
|
|
*
|
|
* @since 1.2.3
|
|
* @access protected
|
|
*
|
|
* @param array $fields Typography control fields.
|
|
*
|
|
* @return array Processed fields.
|
|
*/
|
|
protected function prepare_fields( $fields ) {
|
|
array_walk(
|
|
$fields, function( &$field, $field_name ) {
|
|
|
|
if ( in_array( $field_name, [ 'typography', 'popover_toggle' ] ) ) {
|
|
return;
|
|
}
|
|
|
|
$selector_value = ! empty( $field['selector_value'] ) ? $field['selector_value'] : str_replace( '_', '-', $field_name ) . ': {{VALUE}};';
|
|
|
|
$field['selectors'] = [
|
|
'{{SELECTOR}}' => $selector_value,
|
|
];
|
|
}
|
|
);
|
|
|
|
return parent::prepare_fields( $fields );
|
|
}
|
|
|
|
/**
|
|
* Add group arguments to field.
|
|
*
|
|
* Register field arguments to typography control.
|
|
*
|
|
* @since 1.2.2
|
|
* @access protected
|
|
*
|
|
* @param string $control_id Typography control id.
|
|
* @param array $field_args Typography control field arguments.
|
|
*
|
|
* @return array Field arguments.
|
|
*/
|
|
protected function add_group_args_to_field( $control_id, $field_args ) {
|
|
$field_args = parent::add_group_args_to_field( $control_id, $field_args );
|
|
|
|
$field_args['groupPrefix'] = $this->get_controls_prefix();
|
|
$field_args['groupType'] = 'typography';
|
|
|
|
$args = $this->get_args();
|
|
|
|
if ( in_array( $control_id, self::get_scheme_fields_keys() ) && ! empty( $args['scheme'] ) ) {
|
|
$field_args['scheme'] = [
|
|
'type' => self::get_type(),
|
|
'value' => $args['scheme'],
|
|
'key' => $control_id,
|
|
];
|
|
}
|
|
|
|
return $field_args;
|
|
}
|
|
|
|
/**
|
|
* Get default options.
|
|
*
|
|
* Retrieve the default options of the typography control. Used to return the
|
|
* default options while initializing the typography control.
|
|
*
|
|
* @since 1.9.0
|
|
* @access protected
|
|
*
|
|
* @return array Default typography control options.
|
|
*/
|
|
protected function get_default_options() {
|
|
return [
|
|
'popover' => [
|
|
'starter_name' => 'typography',
|
|
'starter_title' => esc_html__( 'Typography', 'elementor' ),
|
|
'settings' => [
|
|
'render_type' => 'ui',
|
|
'groupType' => 'typography',
|
|
'global' => [
|
|
'active' => true,
|
|
],
|
|
],
|
|
],
|
|
];
|
|
}
|
|
}
|