elementor / includes / controls / groups / typography.php

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

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