elementor / includes / controls / groups / typography.php

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

365 lines 9.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['text_transform'] = [
158	'label' => esc_html_x( 'Transform', 'Typography Control', 'elementor' ),
159	'type' => Controls_Manager::SELECT,
160	'default' => '',
161	'options' => [
162	'' => esc_html__( 'Default', 'elementor' ),
163	'uppercase' => esc_html_x( 'Uppercase', 'Typography Control', 'elementor' ),
164	'lowercase' => esc_html_x( 'Lowercase', 'Typography Control', 'elementor' ),
165	'capitalize' => esc_html_x( 'Capitalize', 'Typography Control', 'elementor' ),
166	'none' => esc_html__( 'Normal', 'elementor' ),
167	],
168	];
169
170	$fields['font_style'] = [
171	'label' => esc_html_x( 'Style', 'Typography Control', 'elementor' ),
172	'type' => Controls_Manager::SELECT,
173	'default' => '',
174	'options' => [
175	'' => esc_html__( 'Default', 'elementor' ),
176	'normal' => esc_html__( 'Normal', 'elementor' ),
177	'italic' => esc_html_x( 'Italic', 'Typography Control', 'elementor' ),
178	'oblique' => esc_html_x( 'Oblique', 'Typography Control', 'elementor' ),
179	],
180	];
181
182	$fields['text_decoration'] = [
183	'label' => esc_html_x( 'Decoration', 'Typography Control', 'elementor' ),
184	'type' => Controls_Manager::SELECT,
185	'default' => '',
186	'options' => [
187	'' => esc_html__( 'Default', 'elementor' ),
188	'underline' => esc_html_x( 'Underline', 'Typography Control', 'elementor' ),
189	'overline' => esc_html_x( 'Overline', 'Typography Control', 'elementor' ),
190	'line-through' => esc_html_x( 'Line Through', 'Typography Control', 'elementor' ),
191	'none' => esc_html__( 'None', 'elementor' ),
192	],
193	];
194
195	$fields['line_height'] = [
196	'label' => esc_html__( 'Line Height', 'elementor' ),
197	'type' => Controls_Manager::SLIDER,
198	'desktop_default' => [
199	'unit' => 'em',
200	],
201	'tablet_default' => [
202	'unit' => 'em',
203	],
204	'mobile_default' => [
205	'unit' => 'em',
206	],
207	'range' => [
208	'px' => [
209	'min' => 1,
210	],
211	],
212	'responsive' => true,
213	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
214	'selector_value' => 'line-height: {{SIZE}}{{UNIT}}',
215	];
216
217	$fields['letter_spacing'] = [
218	'label' => esc_html__( 'Letter Spacing', 'elementor' ),
219	'type' => Controls_Manager::SLIDER,
220	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
221	'range' => [
222	'px' => [
223	'min' => -5,
224	'max' => 10,
225	'step' => 0.1,
226	],
227	'em' => [
228	'min' => 0,
229	'max' => 1,
230	'step' => 0.01,
231	],
232	'rem' => [
233	'min' => 0,
234	'max' => 1,
235	'step' => 0.01,
236	],
237	],
238	'responsive' => true,
239	'selector_value' => 'letter-spacing: {{SIZE}}{{UNIT}}',
240	];
241
242	$fields['word_spacing'] = [
243	'label' => esc_html__( 'Word Spacing', 'elementor' ),
244	'type' => Controls_Manager::SLIDER,
245	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
246	'range' => [
247	'px' => [
248	'max' => 50,
249	],
250	'em' => [
251	'min' => 0,
252	'max' => 5,
253	],
254	'rem' => [
255	'min' => 0,
256	'max' => 5,
257	],
258	],
259	'desktop_default' => [
260	'unit' => 'em',
261	],
262	'tablet_default' => [
263	'unit' => 'em',
264	],
265	'mobile_default' => [
266	'unit' => 'em',
267	],
268	'responsive' => true,
269	'selector_value' => 'word-spacing: {{SIZE}}{{UNIT}}',
270	];
271
272	return $fields;
273	}
274
275	/**
276	* Prepare fields.
277	*
278	* Process typography control fields before adding them to `add_control()`.
279	*
280	* @since 1.2.3
281	* @access protected
282	*
283	* @param array $fields Typography control fields.
284	*
285	* @return array Processed fields.
286	*/
287	protected function prepare_fields( $fields ) {
288	array_walk(
289	$fields, function( &$field, $field_name ) {
290
291	if ( in_array( $field_name, [ 'typography', 'popover_toggle' ] ) ) {
292	return;
293	}
294
295	$selector_value = ! empty( $field['selector_value'] ) ? $field['selector_value'] : str_replace( '_', '-', $field_name ) . ': {{VALUE}};';
296
297	$field['selectors'] = [
298	'{{SELECTOR}}' => $selector_value,
299	];
300	}
301	);
302
303	return parent::prepare_fields( $fields );
304	}
305
306	/**
307	* Add group arguments to field.
308	*
309	* Register field arguments to typography control.
310	*
311	* @since 1.2.2
312	* @access protected
313	*
314	* @param string $control_id Typography control id.
315	* @param array $field_args Typography control field arguments.
316	*
317	* @return array Field arguments.
318	*/
319	protected function add_group_args_to_field( $control_id, $field_args ) {
320	$field_args = parent::add_group_args_to_field( $control_id, $field_args );
321
322	$field_args['groupPrefix'] = $this->get_controls_prefix();
323	$field_args['groupType'] = 'typography';
324
325	$args = $this->get_args();
326
327	if ( in_array( $control_id, self::get_scheme_fields_keys() ) && ! empty( $args['scheme'] ) ) {
328	$field_args['scheme'] = [
329	'type' => self::get_type(),
330	'value' => $args['scheme'],
331	'key' => $control_id,
332	];
333	}
334
335	return $field_args;
336	}
337
338	/**
339	* Get default options.
340	*
341	* Retrieve the default options of the typography control. Used to return the
342	* default options while initializing the typography control.
343	*
344	* @since 1.9.0
345	* @access protected
346	*
347	* @return array Default typography control options.
348	*/
349	protected function get_default_options() {
350	return [
351	'popover' => [
352	'starter_name' => 'typography',
353	'starter_title' => esc_html__( 'Typography', 'elementor' ),
354	'settings' => [
355	'render_type' => 'ui',
356	'groupType' => 'typography',
357	'global' => [
358	'active' => true,
359	],
360	],
361	],
362	];
363	}
364	}
365