typography.php (7886B)
1 <?php 2 namespace Elementor; 3 4 use Elementor\Core\Settings\Page\Manager as PageManager; 5 6 if ( ! defined( 'ABSPATH' ) ) { 7 exit; // Exit if accessed directly. 8 } 9 10 /** 11 * Elementor typography control. 12 * 13 * A base control for creating typography control. Displays input fields to define 14 * the content typography including font size, font family, font weight, text 15 * transform, font style, line height and letter spacing. 16 * 17 * @since 1.0.0 18 */ 19 class Group_Control_Typography extends Group_Control_Base { 20 21 /** 22 * Fields. 23 * 24 * Holds all the typography control fields. 25 * 26 * @since 1.0.0 27 * @access protected 28 * @static 29 * 30 * @var array Typography control fields. 31 */ 32 protected static $fields; 33 34 /** 35 * Scheme fields keys. 36 * 37 * Holds all the typography control scheme fields keys. 38 * Default is an array containing `font_family` and `font_weight`. 39 * 40 * @since 1.0.0 41 * @access private 42 * @static 43 * 44 * @var array Typography control scheme fields keys. 45 */ 46 private static $_scheme_fields_keys = [ 'font_family', 'font_weight' ]; 47 48 /** 49 * Get scheme fields keys. 50 * 51 * Retrieve all the available typography control scheme fields keys. 52 * 53 * @since 1.0.0 54 * @access public 55 * @static 56 * 57 * @return array Scheme fields keys. 58 */ 59 public static function get_scheme_fields_keys() { 60 return self::$_scheme_fields_keys; 61 } 62 63 /** 64 * Get typography control type. 65 * 66 * Retrieve the control type, in this case `typography`. 67 * 68 * @since 1.0.0 69 * @access public 70 * @static 71 * 72 * @return string Control type. 73 */ 74 public static function get_type() { 75 return 'typography'; 76 } 77 78 /** 79 * Init fields. 80 * 81 * Initialize typography control fields. 82 * 83 * @since 1.2.2 84 * @access protected 85 * 86 * @return array Control fields. 87 */ 88 protected function init_fields() { 89 $fields = []; 90 91 $kit = Plugin::$instance->kits_manager->get_active_kit_for_frontend(); 92 93 /** 94 * Retrieve the settings directly from DB, because of an open issue when a controls group is being initialized 95 * from within another group 96 */ 97 $kit_settings = $kit->get_meta( PageManager::META_KEY ); 98 99 $default_fonts = isset( $kit_settings['default_generic_fonts'] ) ? $kit_settings['default_generic_fonts'] : 'Sans-serif'; 100 101 if ( $default_fonts ) { 102 $default_fonts = ', ' . $default_fonts; 103 } 104 105 $fields['font_family'] = [ 106 'label' => _x( 'Family', 'Typography Control', 'elementor' ), 107 'type' => Controls_Manager::FONT, 108 'default' => '', 109 'selector_value' => 'font-family: "{{VALUE}}"' . $default_fonts . ';', 110 ]; 111 112 $fields['font_size'] = [ 113 'label' => _x( 'Size', 'Typography Control', 'elementor' ), 114 'type' => Controls_Manager::SLIDER, 115 'size_units' => [ 'px', 'em', 'rem', 'vw' ], 116 'range' => [ 117 'px' => [ 118 'min' => 1, 119 'max' => 200, 120 ], 121 'vw' => [ 122 'min' => 0.1, 123 'max' => 10, 124 'step' => 0.1, 125 ], 126 ], 127 'responsive' => true, 128 'selector_value' => 'font-size: {{SIZE}}{{UNIT}}', 129 ]; 130 131 $typo_weight_options = [ 132 '' => esc_html__( 'Default', 'elementor' ), 133 ]; 134 135 foreach ( array_merge( [ 'normal', 'bold' ], range( 100, 900, 100 ) ) as $weight ) { 136 $typo_weight_options[ $weight ] = ucfirst( $weight ); 137 } 138 139 $fields['font_weight'] = [ 140 'label' => _x( 'Weight', 'Typography Control', 'elementor' ), 141 'type' => Controls_Manager::SELECT, 142 'default' => '', 143 'options' => $typo_weight_options, 144 ]; 145 146 $fields['text_transform'] = [ 147 'label' => _x( 'Transform', 'Typography Control', 'elementor' ), 148 'type' => Controls_Manager::SELECT, 149 'default' => '', 150 'options' => [ 151 '' => esc_html__( 'Default', 'elementor' ), 152 'uppercase' => _x( 'Uppercase', 'Typography Control', 'elementor' ), 153 'lowercase' => _x( 'Lowercase', 'Typography Control', 'elementor' ), 154 'capitalize' => _x( 'Capitalize', 'Typography Control', 'elementor' ), 155 'none' => _x( 'Normal', 'Typography Control', 'elementor' ), 156 ], 157 ]; 158 159 $fields['font_style'] = [ 160 'label' => _x( 'Style', 'Typography Control', 'elementor' ), 161 'type' => Controls_Manager::SELECT, 162 'default' => '', 163 'options' => [ 164 '' => esc_html__( 'Default', 'elementor' ), 165 'normal' => _x( 'Normal', 'Typography Control', 'elementor' ), 166 'italic' => _x( 'Italic', 'Typography Control', 'elementor' ), 167 'oblique' => _x( 'Oblique', 'Typography Control', 'elementor' ), 168 ], 169 ]; 170 171 $fields['text_decoration'] = [ 172 'label' => _x( 'Decoration', 'Typography Control', 'elementor' ), 173 'type' => Controls_Manager::SELECT, 174 'default' => '', 175 'options' => [ 176 '' => esc_html__( 'Default', 'elementor' ), 177 'underline' => _x( 'Underline', 'Typography Control', 'elementor' ), 178 'overline' => _x( 'Overline', 'Typography Control', 'elementor' ), 179 'line-through' => _x( 'Line Through', 'Typography Control', 'elementor' ), 180 'none' => _x( 'None', 'Typography Control', 'elementor' ), 181 ], 182 ]; 183 184 $fields['line_height'] = [ 185 'label' => _x( 'Line-Height', 'Typography Control', 'elementor' ), 186 'type' => Controls_Manager::SLIDER, 187 'desktop_default' => [ 188 'unit' => 'em', 189 ], 190 'tablet_default' => [ 191 'unit' => 'em', 192 ], 193 'mobile_default' => [ 194 'unit' => 'em', 195 ], 196 'range' => [ 197 'px' => [ 198 'min' => 1, 199 ], 200 ], 201 'responsive' => true, 202 'size_units' => [ 'px', 'em' ], 203 'selector_value' => 'line-height: {{SIZE}}{{UNIT}}', 204 ]; 205 206 $fields['letter_spacing'] = [ 207 'label' => _x( 'Letter Spacing', 'Typography Control', 'elementor' ), 208 'type' => Controls_Manager::SLIDER, 209 'range' => [ 210 'px' => [ 211 'min' => -5, 212 'max' => 10, 213 'step' => 0.1, 214 ], 215 ], 216 'responsive' => true, 217 'selector_value' => 'letter-spacing: {{SIZE}}{{UNIT}}', 218 ]; 219 220 return $fields; 221 } 222 223 /** 224 * Prepare fields. 225 * 226 * Process typography control fields before adding them to `add_control()`. 227 * 228 * @since 1.2.3 229 * @access protected 230 * 231 * @param array $fields Typography control fields. 232 * 233 * @return array Processed fields. 234 */ 235 protected function prepare_fields( $fields ) { 236 array_walk( 237 $fields, function( &$field, $field_name ) { 238 239 if ( in_array( $field_name, [ 'typography', 'popover_toggle' ] ) ) { 240 return; 241 } 242 243 $selector_value = ! empty( $field['selector_value'] ) ? $field['selector_value'] : str_replace( '_', '-', $field_name ) . ': {{VALUE}};'; 244 245 $field['selectors'] = [ 246 '{{SELECTOR}}' => $selector_value, 247 ]; 248 } 249 ); 250 251 return parent::prepare_fields( $fields ); 252 } 253 254 /** 255 * Add group arguments to field. 256 * 257 * Register field arguments to typography control. 258 * 259 * @since 1.2.2 260 * @access protected 261 * 262 * @param string $control_id Typography control id. 263 * @param array $field_args Typography control field arguments. 264 * 265 * @return array Field arguments. 266 */ 267 protected function add_group_args_to_field( $control_id, $field_args ) { 268 $field_args = parent::add_group_args_to_field( $control_id, $field_args ); 269 270 $field_args['groupPrefix'] = $this->get_controls_prefix(); 271 $field_args['groupType'] = 'typography'; 272 273 $args = $this->get_args(); 274 275 if ( in_array( $control_id, self::get_scheme_fields_keys() ) && ! empty( $args['scheme'] ) ) { 276 $field_args['scheme'] = [ 277 'type' => self::get_type(), 278 'value' => $args['scheme'], 279 'key' => $control_id, 280 ]; 281 } 282 283 return $field_args; 284 } 285 286 /** 287 * Get default options. 288 * 289 * Retrieve the default options of the typography control. Used to return the 290 * default options while initializing the typography control. 291 * 292 * @since 1.9.0 293 * @access protected 294 * 295 * @return array Default typography control options. 296 */ 297 protected function get_default_options() { 298 return [ 299 'popover' => [ 300 'starter_name' => 'typography', 301 'starter_title' => _x( 'Typography', 'Typography Control', 'elementor' ), 302 'settings' => [ 303 'render_type' => 'ui', 304 'groupType' => 'typography', 305 'global' => [ 306 'active' => true, 307 ], 308 ], 309 ], 310 ]; 311 } 312 }