elementor / includes / widgets / heading.php

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

370 lines 8.8 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	protected function get_upsale_data() {
93	return [
94	'description' => esc_html__( 'Create captivating headings that rotate with the Animated Headline Widget.', 'elementor' ),
95	'upgrade_url' => 'https://go.elementor.com/go-pro-heading-widget/',
96	];
97	}
98
99	/**
100	* Register heading widget controls.
101	*
102	* Adds different input fields to allow the user to change and customize the widget settings.
103	*
104	* @since 3.1.0
105	* @access protected
106	*/
107	protected function register_controls() {
108	$this->start_controls_section(
109	'section_title',
110	[
111	'label' => esc_html__( 'Title', 'elementor' ),
112	]
113	);
114
115	$this->add_control(
116	'title',
117	[
118	'label' => esc_html__( 'Title', 'elementor' ),
119	'type' => Controls_Manager::TEXTAREA,
120	'ai' => [
121	'type' => 'text',
122	],
123	'dynamic' => [
124	'active' => true,
125	],
126	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
127	'default' => esc_html__( 'Add Your Heading Text Here', 'elementor' ),
128	]
129	);
130
131	$this->add_control(
132	'link',
133	[
134	'label' => esc_html__( 'Link', 'elementor' ),
135	'type' => Controls_Manager::URL,
136	'dynamic' => [
137	'active' => true,
138	],
139	'default' => [
140	'url' => '',
141	],
142	]
143	);
144
145	$this->add_control(
146	'size',
147	[
148	'label' => esc_html__( 'Size', 'elementor' ),
149	'type' => Controls_Manager::SELECT,
150	'options' => [
151	'default' => esc_html__( 'Default', 'elementor' ),
152	'small' => esc_html__( 'Small', 'elementor' ),
153	'medium' => esc_html__( 'Medium', 'elementor' ),
154	'large' => esc_html__( 'Large', 'elementor' ),
155	'xl' => esc_html__( 'XL', 'elementor' ),
156	'xxl' => esc_html__( 'XXL', 'elementor' ),
157	],
158	'default' => 'default',
159	'condition' => [
160	'size!' => 'default', // a workaround to hide the control, unless it's in use (not default).
161	],
162	]
163	);
164
165	$this->add_control(
166	'header_size',
167	[
168	'label' => esc_html__( 'HTML Tag', 'elementor' ),
169	'type' => Controls_Manager::SELECT,
170	'options' => [
171	'h1' => 'H1',
172	'h2' => 'H2',
173	'h3' => 'H3',
174	'h4' => 'H4',
175	'h5' => 'H5',
176	'h6' => 'H6',
177	'div' => 'div',
178	'span' => 'span',
179	'p' => 'p',
180	],
181	'default' => 'h2',
182	]
183	);
184
185	$this->end_controls_section();
186
187	$this->start_controls_section(
188	'section_title_style',
189	[
190	'label' => esc_html__( 'Title', 'elementor' ),
191	'tab' => Controls_Manager::TAB_STYLE,
192	]
193	);
194
195	$this->add_responsive_control(
196	'align',
197	[
198	'label' => esc_html__( 'Alignment', 'elementor' ),
199	'type' => Controls_Manager::CHOOSE,
200	'options' => [
201	'left' => [
202	'title' => esc_html__( 'Left', 'elementor' ),
203	'icon' => 'eicon-text-align-left',
204	],
205	'center' => [
206	'title' => esc_html__( 'Center', 'elementor' ),
207	'icon' => 'eicon-text-align-center',
208	],
209	'right' => [
210	'title' => esc_html__( 'Right', 'elementor' ),
211	'icon' => 'eicon-text-align-right',
212	],
213	'justify' => [
214	'title' => esc_html__( 'Justified', 'elementor' ),
215	'icon' => 'eicon-text-align-justify',
216	],
217	],
218	'default' => '',
219	'selectors' => [
220	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
221	],
222	]
223	);
224
225	$this->add_control(
226	'title_color',
227	[
228	'label' => esc_html__( 'Text Color', 'elementor' ),
229	'type' => Controls_Manager::COLOR,
230	'global' => [
231	'default' => Global_Colors::COLOR_PRIMARY,
232	],
233	'selectors' => [
234	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
235	],
236	]
237	);
238
239	$this->add_group_control(
240	Group_Control_Typography::get_type(),
241	[
242	'name' => 'typography',
243	'global' => [
244	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
245	],
246	'selector' => '{{WRAPPER}} .elementor-heading-title',
247	]
248	);
249
250	$this->add_group_control(
251	Group_Control_Text_Stroke::get_type(),
252	[
253	'name' => 'text_stroke',
254	'selector' => '{{WRAPPER}} .elementor-heading-title',
255	]
256	);
257
258	$this->add_group_control(
259	Group_Control_Text_Shadow::get_type(),
260	[
261	'name' => 'text_shadow',
262	'selector' => '{{WRAPPER}} .elementor-heading-title',
263	]
264	);
265
266	$this->add_control(
267	'blend_mode',
268	[
269	'label' => esc_html__( 'Blend Mode', 'elementor' ),
270	'type' => Controls_Manager::SELECT,
271	'options' => [
272	'' => esc_html__( 'Normal', 'elementor' ),
273	'multiply' => esc_html__( 'Multiply', 'elementor' ),
274	'screen' => esc_html__( 'Screen', 'elementor' ),
275	'overlay' => esc_html__( 'Overlay', 'elementor' ),
276	'darken' => esc_html__( 'Darken', 'elementor' ),
277	'lighten' => esc_html__( 'Lighten', 'elementor' ),
278	'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
279	'saturation' => esc_html__( 'Saturation', 'elementor' ),
280	'color' => esc_html__( 'Color', 'elementor' ),
281	'difference' => esc_html__( 'Difference', 'elementor' ),
282	'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
283	'hue' => esc_html__( 'Hue', 'elementor' ),
284	'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
285	],
286	'selectors' => [
287	'{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}',
288	],
289	'separator' => 'none',
290	]
291	);
292
293	$this->end_controls_section();
294	}
295
296	/**
297	* Render heading widget output on the frontend.
298	*
299	* Written in PHP and used to generate the final HTML.
300	*
301	* @since 1.0.0
302	* @access protected
303	*/
304	protected function render() {
305	$settings = $this->get_settings_for_display();
306
307	if ( '' === $settings['title'] ) {
308	return;
309	}
310
311	$this->add_render_attribute( 'title', 'class', 'elementor-heading-title' );
312
313	if ( ! empty( $settings['size'] ) ) {
314	$this->add_render_attribute( 'title', 'class', 'elementor-size-' . $settings['size'] );
315	} else {
316	$this->add_render_attribute( 'title', 'class', 'elementor-size-default' );
317	}
318
319	$this->add_inline_editing_attributes( 'title' );
320
321	$title = $settings['title'];
322
323	if ( ! empty( $settings['link']['url'] ) ) {
324	$this->add_link_attributes( 'url', $settings['link'] );
325
326	$title = sprintf( '<a %1$s>%2$s</a>', $this->get_render_attribute_string( 'url' ), $title );
327	}
328
329	$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 );
330
331	// PHPCS - the variable $title_html holds safe data.
332	echo $title_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
333	}
334
335	/**
336	* Render heading widget output in the editor.
337	*
338	* Written as a Backbone JavaScript template and used to generate the live preview.
339	*
340	* @since 2.9.0
341	* @access protected
342	*/
343	protected function content_template() {
344	?>
345	<#
346	var title = settings.title;
347
348	if ( '' !== settings.link.url ) {
349	title = '<a href="' + _.escape( settings.link.url ) + '">' + title + '</a>';
350	}
351
352	view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title' ] );
353
354	if ( '' !== settings.size ) {
355	view.addRenderAttribute( 'title', 'class', [ 'elementor-size-' + settings.size ] );
356	} else {
357	view.addRenderAttribute( 'title', 'class', [ 'elementor-size-default' ] );
358	}
359
360	view.addInlineEditingAttributes( 'title' );
361
362	var headerSizeTag = elementor.helpers.validateHTMLTag( settings.header_size ),
363	title_html = '<' + headerSizeTag + ' ' + view.getRenderAttributeString( 'title' ) + '>' + title + '</' + headerSizeTag + '>';
364
365	print( title_html );
366	#>
367	<?php
368	}
369	}
370