elementor / includes / controls / groups / typography.php

typography.php in Elementor Website Builder – more than just a page builder 4.1.0, at includes/controls/groups/typography.php

448 lines 11.3 KB

Raw Download Zip

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' => esc_html_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' => esc_html_x( 'Size', 'Typography Control', 'elementor' ),
114	'type' => Controls_Manager::SLIDER,
115	'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
116	'range' => [
117	'px' => [
118	'min' => 1,
119	'max' => 200,
120	],
121	'em' => [
122	'max' => 20,
123	],
124	'rem' => [
125	'max' => 20,
126	],
127	'vw' => [
128	'min' => 0.1,
129	'max' => 10,
130	'step' => 0.1,
131	],
132	],
133	'responsive' => true,
134	'selector_value' => 'font-size: {{SIZE}}{{UNIT}}',
135	];
136
137	$fields['font_weight'] = [
138	'label' => esc_html_x( 'Weight', 'Typography Control', 'elementor' ),
139	'type' => Controls_Manager::SELECT,
140	'default' => '',
141	'options' => [
142	'100' => '100 ' . esc_html_x( '(Thin)', 'Typography Control', 'elementor' ),
143	'200' => '200 ' . esc_html_x( '(Extra Light)', 'Typography Control', 'elementor' ),
144	'300' => '300 ' . esc_html_x( '(Light)', 'Typography Control', 'elementor' ),
145	'400' => '400 ' . esc_html_x( '(Normal)', 'Typography Control', 'elementor' ),
146	'500' => '500 ' . esc_html_x( '(Medium)', 'Typography Control', 'elementor' ),
147	'600' => '600 ' . esc_html_x( '(Semi Bold)', 'Typography Control', 'elementor' ),
148	'700' => '700 ' . esc_html_x( '(Bold)', 'Typography Control', 'elementor' ),
149	'800' => '800 ' . esc_html_x( '(Extra Bold)', 'Typography Control', 'elementor' ),
150	'900' => '900 ' . esc_html_x( '(Black)', 'Typography Control', 'elementor' ),
151	'' => esc_html__( 'Default', 'elementor' ),
152	'normal' => esc_html__( 'Normal', 'elementor' ),
153	'bold' => esc_html__( 'Bold', 'elementor' ),
154	],
155	];
156
157	$fields = $this->add_font_variables_fields( $fields );
158
159	$fields['text_transform'] = [
160	'label' => esc_html_x( 'Transform', 'Typography Control', 'elementor' ),
161	'type' => Controls_Manager::SELECT,
162	'default' => '',
163	'options' => [
164	'' => esc_html__( 'Default', 'elementor' ),
165	'uppercase' => esc_html_x( 'Uppercase', 'Typography Control', 'elementor' ),
166	'lowercase' => esc_html_x( 'Lowercase', 'Typography Control', 'elementor' ),
167	'capitalize' => esc_html_x( 'Capitalize', 'Typography Control', 'elementor' ),
168	'none' => esc_html__( 'Normal', 'elementor' ),
169	],
170	];
171
172	$fields['font_style'] = [
173	'label' => esc_html_x( 'Style', 'Typography Control', 'elementor' ),
174	'type' => Controls_Manager::SELECT,
175	'default' => '',
176	'options' => [
177	'' => esc_html__( 'Default', 'elementor' ),
178	'normal' => esc_html__( 'Normal', 'elementor' ),
179	'italic' => esc_html_x( 'Italic', 'Typography Control', 'elementor' ),
180	'oblique' => esc_html_x( 'Oblique', 'Typography Control', 'elementor' ),
181	],
182	];
183
184	$fields['text_decoration'] = [
185	'label' => esc_html_x( 'Decoration', 'Typography Control', 'elementor' ),
186	'type' => Controls_Manager::SELECT,
187	'default' => '',
188	'options' => [
189	'' => esc_html__( 'Default', 'elementor' ),
190	'underline' => esc_html_x( 'Underline', 'Typography Control', 'elementor' ),
191	'overline' => esc_html_x( 'Overline', 'Typography Control', 'elementor' ),
192	'line-through' => esc_html_x( 'Line Through', 'Typography Control', 'elementor' ),
193	'none' => esc_html__( 'None', 'elementor' ),
194	],
195	];
196
197	$fields['line_height'] = [
198	'label' => esc_html__( 'Line Height', 'elementor' ),
199	'type' => Controls_Manager::SLIDER,
200	'desktop_default' => [
201	'unit' => 'em',
202	],
203	'tablet_default' => [
204	'unit' => 'em',
205	],
206	'mobile_default' => [
207	'unit' => 'em',
208	],
209	'range' => [
210	'px' => [
211	'min' => 1,
212	],
213	],
214	'responsive' => true,
215	'size_units' => [ 'px', 'em', 'rem', 'lh', 'rlh', 'custom' ],
216	'selector_value' => 'line-height: {{SIZE}}{{UNIT}}',
217	];
218
219	$fields['letter_spacing'] = [
220	'label' => esc_html__( 'Letter Spacing', 'elementor' ),
221	'type' => Controls_Manager::SLIDER,
222	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
223	'range' => [
224	'px' => [
225	'min' => -5,
226	'max' => 10,
227	'step' => 0.1,
228	],
229	'em' => [
230	'min' => 0,
231	'max' => 1,
232	'step' => 0.01,
233	],
234	'rem' => [
235	'min' => 0,
236	'max' => 1,
237	'step' => 0.01,
238	],
239	],
240	'responsive' => true,
241	'selector_value' => 'letter-spacing: {{SIZE}}{{UNIT}}',
242	];
243
244	$fields['word_spacing'] = [
245	'label' => esc_html__( 'Word Spacing', 'elementor' ),
246	'type' => Controls_Manager::SLIDER,
247	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
248	'range' => [
249	'px' => [
250	'max' => 50,
251	],
252	'em' => [
253	'min' => 0,
254	'max' => 5,
255	],
256	'rem' => [
257	'min' => 0,
258	'max' => 5,
259	],
260	],
261	'desktop_default' => [
262	'unit' => 'em',
263	],
264	'tablet_default' => [
265	'unit' => 'em',
266	],
267	'mobile_default' => [
268	'unit' => 'em',
269	],
270	'responsive' => true,
271	'selector_value' => 'word-spacing: {{SIZE}}{{UNIT}}',
272	];
273
274	return $fields;
275	}
276
277	private function add_font_variables_fields( $fields ): array {
278	$font_variables = $this->get_font_variables();
279
280	if ( empty( $font_variables ) ) {
281	return $fields;
282	}
283
284	$font_variables_conditions = [
285	'weight' => [],
286	'width' => [],
287	];
288
289	foreach ( $font_variables as $font => $variables ) {
290	foreach ( array_keys( $font_variables_conditions ) as $variable ) {
291	if ( in_array( $variable, $variables ) ) {
292	$font_variables_conditions[ $variable ][] = $font;
293	}
294	}
295	}
296
297	if ( ! empty( $font_variables_conditions['weight'] ) ) {
298	$fields['weight'] = [
299	'label' => esc_html_x( 'Weight', 'Typography Control', 'elementor' ),
300	'type' => Controls_Manager::SLIDER,
301	'range' => [
302	'px' => [
303	'min' => 1,
304	'max' => 1000,
305	],
306	],
307	'condition' => [
308	'font_family' => $font_variables_conditions['weight'],
309	],
310	'responsive' => true,
311	'selector_value' => 'font-weight: {{SIZE}};',
312	];
313
314	$fields['font_weight']['condition'] = [
315	'font_family!' => $font_variables_conditions['weight'],
316	];
317	}
318
319	if ( ! empty( $font_variables_conditions['width'] ) ) {
320	$fields['width'] = [
321	'label' => esc_html_x( 'Width', 'Typography Control', 'elementor' ),
322	'type' => Controls_Manager::SLIDER,
323	'range' => [
324	'px' => [
325	'min' => 0,
326	'max' => 150,
327	],
328	],
329	'condition' => [
330	'font_family' => $font_variables_conditions['width'],
331	],
332	'responsive' => true,
333	'selector_value' => 'font-stretch: {{SIZE}}%;',
334	];
335	}
336
337	$fields['font_style']['condition'] = [
338	'font_family!' => array_keys( $font_variables ),
339	];
340
341	return $fields;
342	}
343
344	private function get_font_variables() {
345	static $font_variables = null;
346
347	if ( null === $font_variables ) {
348	$font_variables = apply_filters( 'elementor/typography/font_variables', [] );
349	}
350
351	return $font_variables;
352	}
353
354	public static function get_font_variable_ranges() {
355	return apply_filters( 'elementor/typography/font_variable_ranges', [] );
356	}
357
358	/**
359	* Prepare fields.
360	*
361	* Process typography control fields before adding them to `add_control()`.
362	*
363	* @since 1.2.3
364	* @access protected
365	*
366	* @param array $fields Typography control fields.
367	*
368	* @return array Processed fields.
369	*/
370	protected function prepare_fields( $fields ) {
371	array_walk(
372	$fields, function( &$field, $field_name ) {
373
374	if ( in_array( $field_name, [ 'typography', 'popover_toggle' ] ) ) {
375	return;
376	}
377
378	$selector_value = ! empty( $field['selector_value'] ) ? $field['selector_value'] : str_replace( '_', '-', $field_name ) . ': {{VALUE}};';
379
380	$field['selectors'] = [
381	'{{SELECTOR}}' => $selector_value,
382	];
383	}
384	);
385
386	return parent::prepare_fields( $fields );
387	}
388
389	/**
390	* Add group arguments to field.
391	*
392	* Register field arguments to typography control.
393	*
394	* @since 1.2.2
395	* @access protected
396	*
397	* @param string $control_id Typography control id.
398	* @param array $field_args Typography control field arguments.
399	*
400	* @return array Field arguments.
401	*/
402	protected function add_group_args_to_field( $control_id, $field_args ) {
403	$field_args = parent::add_group_args_to_field( $control_id, $field_args );
404
405	$field_args['groupPrefix'] = $this->get_controls_prefix();
406	$field_args['groupType'] = 'typography';
407
408	$args = $this->get_args();
409
410	if ( in_array( $control_id, self::get_scheme_fields_keys() ) && ! empty( $args['scheme'] ) ) {
411	$field_args['scheme'] = [
412	'type' => self::get_type(),
413	'value' => $args['scheme'],
414	'key' => $control_id,
415	];
416	}
417
418	return $field_args;
419	}
420
421	/**
422	* Get default options.
423	*
424	* Retrieve the default options of the typography control. Used to return the
425	* default options while initializing the typography control.
426	*
427	* @since 1.9.0
428	* @access protected
429	*
430	* @return array Default typography control options.
431	*/
432	protected function get_default_options() {
433	return [
434	'popover' => [
435	'starter_name' => 'typography',
436	'starter_title' => esc_html__( 'Typography', 'elementor' ),
437	'settings' => [
438	'render_type' => 'ui',
439	'groupType' => 'typography',
440	'global' => [
441	'active' => true,
442	],
443	],
444	],
445	];
446	}
447	}
448