elementor / includes / widgets / heading.php

heading.php in Elementor Website Builder – more than just a page builder 3.20.3, at includes/widgets/heading.php

383 lines 9.1 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor heading widget.
13	*
14	* Elementor widget that displays an eye-catching headlines.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Heading extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve heading widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'heading';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve heading widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Heading', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve heading widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-t-letter';
60	}
61
62	/**
63	* Get widget categories.
64	*
65	* Retrieve the list of categories the heading widget belongs to.
66	*
67	* Used to determine where to display the widget in the editor.
68	*
69	* @since 2.0.0
70	* @access public
71	*
72	* @return array Widget categories.
73	*/
74	public function get_categories() {
75	return [ 'basic' ];
76	}
77
78	/**
79	* Get widget keywords.
80	*
81	* Retrieve the list of keywords the widget belongs to.
82	*
83	* @since 2.1.0
84	* @access public
85	*
86	* @return array Widget keywords.
87	*/
88	public function get_keywords() {
89	return [ 'heading', 'title', 'text' ];
90	}
91
92	/**
93	* Get widget upsale data.
94	*
95	* Retrieve the widget promotion data.
96	*
97	* @since 3.18.0
98	* @access protected
99	*
100	* @return array Widget promotion data.
101	*/
102	protected function get_upsale_data() {
103	return [
104	'condition' => ! Utils::has_pro(),
105	'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
106	'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
107	'description' => esc_html__( 'Create captivating headings that rotate with the Animated Headline Widget.', 'elementor' ),
108	'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-heading-widget/' ),
109	'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
110	];
111	}
112
113	/**
114	* Register heading widget controls.
115	*
116	* Adds different input fields to allow the user to change and customize the widget settings.
117	*
118	* @since 3.1.0
119	* @access protected
120	*/
121	protected function register_controls() {
122	$this->start_controls_section(
123	'section_title',
124	[
125	'label' => esc_html__( 'Heading', 'elementor' ),
126	]
127	);
128
129	$this->add_control(
130	'title',
131	[
132	'label' => esc_html__( 'Title', 'elementor' ),
133	'type' => Controls_Manager::TEXTAREA,
134	'ai' => [
135	'type' => 'text',
136	],
137	'dynamic' => [
138	'active' => true,
139	],
140	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
141	'default' => esc_html__( 'Add Your Heading Text Here', 'elementor' ),
142	]
143	);
144
145	$this->add_control(
146	'link',
147	[
148	'label' => esc_html__( 'Link', 'elementor' ),
149	'type' => Controls_Manager::URL,
150	'dynamic' => [
151	'active' => true,
152	],
153	'default' => [
154	'url' => '',
155	],
156	]
157	);
158
159	$this->add_control(
160	'size',
161	[
162	'label' => esc_html__( 'Size', 'elementor' ),
163	'type' => Controls_Manager::SELECT,
164	'options' => [
165	'default' => esc_html__( 'Default', 'elementor' ),
166	'small' => esc_html__( 'Small', 'elementor' ),
167	'medium' => esc_html__( 'Medium', 'elementor' ),
168	'large' => esc_html__( 'Large', 'elementor' ),
169	'xl' => esc_html__( 'XL', 'elementor' ),
170	'xxl' => esc_html__( 'XXL', 'elementor' ),
171	],
172	'default' => 'default',
173	'condition' => [
174	'size!' => 'default', // a workaround to hide the control, unless it's in use (not default).
175	],
176	]
177	);
178
179	$this->add_control(
180	'header_size',
181	[
182	'label' => esc_html__( 'HTML Tag', 'elementor' ),
183	'type' => Controls_Manager::SELECT,
184	'options' => [
185	'h1' => 'H1',
186	'h2' => 'H2',
187	'h3' => 'H3',
188	'h4' => 'H4',
189	'h5' => 'H5',
190	'h6' => 'H6',
191	'div' => 'div',
192	'span' => 'span',
193	'p' => 'p',
194	],
195	'default' => 'h2',
196	]
197	);
198
199	$this->end_controls_section();
200
201	$this->start_controls_section(
202	'section_title_style',
203	[
204	'label' => esc_html__( 'Heading', 'elementor' ),
205	'tab' => Controls_Manager::TAB_STYLE,
206	]
207	);
208
209	$this->add_responsive_control(
210	'align',
211	[
212	'label' => esc_html__( 'Alignment', 'elementor' ),
213	'type' => Controls_Manager::CHOOSE,
214	'options' => [
215	'left' => [
216	'title' => esc_html__( 'Left', 'elementor' ),
217	'icon' => 'eicon-text-align-left',
218	],
219	'center' => [
220	'title' => esc_html__( 'Center', 'elementor' ),
221	'icon' => 'eicon-text-align-center',
222	],
223	'right' => [
224	'title' => esc_html__( 'Right', 'elementor' ),
225	'icon' => 'eicon-text-align-right',
226	],
227	'justify' => [
228	'title' => esc_html__( 'Justified', 'elementor' ),
229	'icon' => 'eicon-text-align-justify',
230	],
231	],
232	'default' => '',
233	'selectors' => [
234	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
235	],
236	]
237	);
238
239	$this->add_control(
240	'title_color',
241	[
242	'label' => esc_html__( 'Text Color', 'elementor' ),
243	'type' => Controls_Manager::COLOR,
244	'global' => [
245	'default' => Global_Colors::COLOR_PRIMARY,
246	],
247	'selectors' => [
248	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
249	],
250	]
251	);
252
253	$this->add_group_control(
254	Group_Control_Typography::get_type(),
255	[
256	'name' => 'typography',
257	'global' => [
258	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
259	],
260	'selector' => '{{WRAPPER}} .elementor-heading-title',
261	]
262	);
263
264	$this->add_group_control(
265	Group_Control_Text_Stroke::get_type(),
266	[
267	'name' => 'text_stroke',
268	'selector' => '{{WRAPPER}} .elementor-heading-title',
269	]
270	);
271
272	$this->add_group_control(
273	Group_Control_Text_Shadow::get_type(),
274	[
275	'name' => 'text_shadow',
276	'selector' => '{{WRAPPER}} .elementor-heading-title',
277	]
278	);
279
280	$this->add_control(
281	'blend_mode',
282	[
283	'label' => esc_html__( 'Blend Mode', 'elementor' ),
284	'type' => Controls_Manager::SELECT,
285	'options' => [
286	'' => esc_html__( 'Normal', 'elementor' ),
287	'multiply' => esc_html__( 'Multiply', 'elementor' ),
288	'screen' => esc_html__( 'Screen', 'elementor' ),
289	'overlay' => esc_html__( 'Overlay', 'elementor' ),
290	'darken' => esc_html__( 'Darken', 'elementor' ),
291	'lighten' => esc_html__( 'Lighten', 'elementor' ),
292	'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
293	'saturation' => esc_html__( 'Saturation', 'elementor' ),
294	'color' => esc_html__( 'Color', 'elementor' ),
295	'difference' => esc_html__( 'Difference', 'elementor' ),
296	'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
297	'hue' => esc_html__( 'Hue', 'elementor' ),
298	'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
299	],
300	'selectors' => [
301	'{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}',
302	],
303	]
304	);
305
306	$this->end_controls_section();
307	}
308
309	/**
310	* Render heading widget output on the frontend.
311	*
312	* Written in PHP and used to generate the final HTML.
313	*
314	* @since 1.0.0
315	* @access protected
316	*/
317	protected function render() {
318	$settings = $this->get_settings_for_display();
319
320	if ( '' === $settings['title'] ) {
321	return;
322	}
323
324	$this->add_render_attribute( 'title', 'class', 'elementor-heading-title' );
325
326	if ( ! empty( $settings['size'] ) ) {
327	$this->add_render_attribute( 'title', 'class', 'elementor-size-' . $settings['size'] );
328	} else {
329	$this->add_render_attribute( 'title', 'class', 'elementor-size-default' );
330	}
331
332	$this->add_inline_editing_attributes( 'title' );
333
334	$title = $settings['title'];
335
336	if ( ! empty( $settings['link']['url'] ) ) {
337	$this->add_link_attributes( 'url', $settings['link'] );
338
339	$title = sprintf( '<a %1$s>%2$s</a>', $this->get_render_attribute_string( 'url' ), $title );
340	}
341
342	$title_html = sprintf( '<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag( $settings['header_size'] ), $this->get_render_attribute_string( 'title' ), $title );
343
344	// PHPCS - the variable $title_html holds safe data.
345	echo $title_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
346	}
347
348	/**
349	* Render heading widget output in the editor.
350	*
351	* Written as a Backbone JavaScript template and used to generate the live preview.
352	*
353	* @since 2.9.0
354	* @access protected
355	*/
356	protected function content_template() {
357	?>
358	<#
359	var title = settings.title;
360
361	if ( '' !== settings.link.url ) {
362	title = '<a href="' + _.escape( settings.link.url ) + '">' + title + '</a>';
363	}
364
365	view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title' ] );
366
367	if ( '' !== settings.size ) {
368	view.addRenderAttribute( 'title', 'class', [ 'elementor-size-' + settings.size ] );
369	} else {
370	view.addRenderAttribute( 'title', 'class', [ 'elementor-size-default' ] );
371	}
372
373	view.addInlineEditingAttributes( 'title' );
374
375	var headerSizeTag = elementor.helpers.validateHTMLTag( settings.header_size ),
376	title_html = '<' + headerSizeTag + ' ' + view.getRenderAttributeString( 'title' ) + '>' + title + '</' + headerSizeTag + '>';
377
378	print( title_html );
379	#>
380	<?php
381	}
382	}
383