PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.2
Elementor Website Builder – more than just a page builder v3.0.2
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
← All changes | includes/widgets/heading.php +74 -329 4.1.0-dev33.0.2 View file →
@@ -6,12 +6,8 @@
6 6 }
7 7
8 8 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9 9 use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10 -use Elementor\Modules\ContentSanitizer\Interfaces\Sanitizable;
11 -use Elementor\Core\Utils\Hints;
12 -use Elementor\Core\Admin\Admin_Notices;
13 -use Elementor\Modules\Promotions\Controls\Promotion_Control;
14 10
15 11 /**
16 12 * Elementor heading widget.
17 13 *
@@ -18,9 +14,9 @@
18 14 * Elementor widget that displays an eye-catching headlines.
19 15 *
20 16 * @since 1.0.0
21 17 */
22 -class Widget_Heading extends Widget_Base implements Sanitizable {
18 +class Widget_Heading extends Widget_Base {
23 19
24 20 /**
25 21 * Get widget name.
26 22 *
@@ -45,9 +41,9 @@
45 41 *
46 42 * @return string Widget title.
47 43 */
48 44 public function get_title() {
49 - return esc_html__( 'Heading', 'elementor' );
45 + return __( 'Heading', 'elementor' );
50 46 }
51 47
52 48 /**
53 49 * Get widget icon.
@@ -92,90 +88,21 @@
92 88 public function get_keywords() {
93 89 return [ 'heading', 'title', 'text' ];
94 90 }
95 91
96 - protected function is_dynamic_content(): bool {
97 - return false;
98 - }
99 -
100 92 /**
101 - * Get style dependencies.
102 - *
103 - * Retrieve the list of style dependencies the widget requires.
104 - *
105 - * @since 3.24.0
106 - * @access public
107 - *
108 - * @return array Widget style dependencies.
109 - */
110 - public function get_style_depends(): array {
111 - return [ 'widget-heading' ];
112 - }
113 -
114 - public function has_widget_inner_wrapper(): bool {
115 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
116 - }
117 -
118 - /**
119 - * Remove data attributes from the html.
120 - *
121 - * @param string $content Heading title.
122 - * @return string
123 - */
124 - public function sanitize( $content ): string {
125 - $allowed_tags = wp_kses_allowed_html( 'post' );
126 - $allowed_tags_for_heading = [];
127 - $non_allowed_tags = [ 'img' ];
128 -
129 - foreach ( $allowed_tags as $tag => $attributes ) {
130 - if ( in_array( $tag, $non_allowed_tags, true ) ) {
131 - continue;
132 - }
133 -
134 - $filtered_attributes = array_filter( $attributes, function( $attribute ) {
135 - return ! substr( $attribute, 0, 5 ) === 'data-';
136 - }, ARRAY_FILTER_USE_KEY );
137 -
138 - $allowed_tags_for_heading[ $tag ] = $filtered_attributes;
139 - }
140 -
141 - return wp_kses( $content, $allowed_tags_for_heading );
142 - }
143 -
144 - /**
145 - * Get widget upsale data.
146 - *
147 - * Retrieve the widget promotion data.
148 - *
149 - * @since 3.18.0
150 - * @access protected
151 - *
152 - * @return array Widget promotion data.
153 - */
154 - protected function get_upsale_data() {
155 - return [
156 - 'condition' => ! Utils::has_pro(),
157 - 'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
158 - 'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
159 - 'description' => esc_html__( 'Create captivating headings that rotate with the Animated Headline Widget.', 'elementor' ),
160 - 'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-heading-widget/' ),
161 - 'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
162 - ];
163 - }
164 -
165 - /**
166 93 * Register heading widget controls.
167 94 *
168 95 * Adds different input fields to allow the user to change and customize the widget settings.
169 96 *
170 - * @since 3.1.0
97 + * @since 1.0.0
171 98 * @access protected
172 99 */
173 - protected function register_controls() {
100 + protected function _register_controls() {
174 101 $this->start_controls_section(
175 102 'section_title',
176 103 [
177 - 'label' => esc_html__( 'Heading', 'elementor' ),
104 + 'label' => __( 'Title', 'elementor' ),
178 105 ]
179 106 );
180 107
181 108 $this->add_control(
@@ -180,18 +107,15 @@
180 107
181 108 $this->add_control(
182 109 'title',
183 110 [
184 - 'label' => esc_html__( 'Title', 'elementor' ),
111 + 'label' => __( 'Title', 'elementor' ),
185 112 'type' => Controls_Manager::TEXTAREA,
186 - 'ai' => [
187 - 'type' => 'text',
188 - ],
189 113 'dynamic' => [
190 114 'active' => true,
191 115 ],
192 - 'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
193 - 'default' => esc_html__( 'Add Your Heading Text Here', 'elementor' ),
116 + 'placeholder' => __( 'Enter your title', 'elementor' ),
117 + 'default' => __( 'Add Your Heading Text Here', 'elementor' ),
194 118 ]
195 119 );
196 120
197 121 $this->add_control(
@@ -196,9 +120,9 @@
196 120
197 121 $this->add_control(
198 122 'link',
199 123 [
200 - 'label' => esc_html__( 'Link', 'elementor' ),
124 + 'label' => __( 'Link', 'elementor' ),
201 125 'type' => Controls_Manager::URL,
202 126 'dynamic' => [
203 127 'active' => true,
204 128 ],
@@ -204,8 +128,9 @@
204 128 ],
205 129 'default' => [
206 130 'url' => '',
207 131 ],
132 + 'separator' => 'before',
208 133 ]
209 134 );
210 135
211 136 $this->add_control(
@@ -210,22 +135,19 @@
210 135
211 136 $this->add_control(
212 137 'size',
213 138 [
214 - 'label' => esc_html__( 'Size', 'elementor' ),
139 + 'label' => __( 'Size', 'elementor' ),
215 140 'type' => Controls_Manager::SELECT,
141 + 'default' => 'default',
216 142 'options' => [
217 - 'default' => esc_html__( 'Default', 'elementor' ),
218 - 'small' => esc_html__( 'Small', 'elementor' ),
219 - 'medium' => esc_html__( 'Medium', 'elementor' ),
220 - 'large' => esc_html__( 'Large', 'elementor' ),
221 - 'xl' => esc_html__( 'XL', 'elementor' ),
222 - 'xxl' => esc_html__( 'XXL', 'elementor' ),
143 + 'default' => __( 'Default', 'elementor' ),
144 + 'small' => __( 'Small', 'elementor' ),
145 + 'medium' => __( 'Medium', 'elementor' ),
146 + 'large' => __( 'Large', 'elementor' ),
147 + 'xl' => __( 'XL', 'elementor' ),
148 + 'xxl' => __( 'XXL', 'elementor' ),
223 149 ],
224 - 'default' => 'default',
225 - 'condition' => [
226 - 'size!' => 'default', // a workaround to hide the control, unless it's in use (not default).
227 - ],
228 150 ]
229 151 );
230 152
231 153 $this->add_control(
@@ -230,9 +152,9 @@
230 152
231 153 $this->add_control(
232 154 'header_size',
233 155 [
234 - 'label' => esc_html__( 'HTML Tag', 'elementor' ),
156 + 'label' => __( 'HTML Tag', 'elementor' ),
235 157 'type' => Controls_Manager::SELECT,
236 158 'options' => [
237 159 'h1' => 'H1',
238 160 'h2' => 'H2',
@@ -247,122 +169,54 @@
247 169 'default' => 'h2',
248 170 ]
249 171 );
250 172
251 - $this->maybe_add_ally_heading_hint();
252 -
253 - $this->end_controls_section();
254 -
255 - $this->start_controls_section(
256 - 'section_title_style',
257 - [
258 - 'label' => esc_html__( 'Heading', 'elementor' ),
259 - 'tab' => Controls_Manager::TAB_STYLE,
260 - ]
261 - );
262 -
263 173 $this->add_responsive_control(
264 174 'align',
265 175 [
266 - 'label' => esc_html__( 'Alignment', 'elementor' ),
176 + 'label' => __( 'Alignment', 'elementor' ),
267 177 'type' => Controls_Manager::CHOOSE,
268 178 'options' => [
269 - 'start' => [
270 - 'title' => esc_html__( 'Start', 'elementor' ),
179 + 'left' => [
180 + 'title' => __( 'Left', 'elementor' ),
271 181 'icon' => 'eicon-text-align-left',
272 182 ],
273 183 'center' => [
274 - 'title' => esc_html__( 'Center', 'elementor' ),
184 + 'title' => __( 'Center', 'elementor' ),
275 185 'icon' => 'eicon-text-align-center',
276 186 ],
277 - 'end' => [
278 - 'title' => esc_html__( 'End', 'elementor' ),
187 + 'right' => [
188 + 'title' => __( 'Right', 'elementor' ),
279 189 'icon' => 'eicon-text-align-right',
280 190 ],
281 191 'justify' => [
282 - 'title' => esc_html__( 'Justified', 'elementor' ),
192 + 'title' => __( 'Justified', 'elementor' ),
283 193 'icon' => 'eicon-text-align-justify',
284 194 ],
285 195 ],
286 - 'classes' => 'elementor-control-start-end',
287 - 'selectors_dictionary' => [
288 - 'left' => is_rtl() ? 'end' : 'start',
289 - 'right' => is_rtl() ? 'start' : 'end',
290 - ],
291 196 'default' => '',
292 197 'selectors' => [
293 198 '{{WRAPPER}}' => 'text-align: {{VALUE}};',
294 199 ],
295 - 'separator' => 'after',
296 200 ]
297 201 );
298 202
299 - $this->add_group_control(
300 - Group_Control_Typography::get_type(),
301 - [
302 - 'name' => 'typography',
303 - 'global' => [
304 - 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
305 - ],
306 - 'selector' => '{{WRAPPER}} .elementor-heading-title',
307 - ]
308 - );
309 -
310 - $this->add_group_control(
311 - Group_Control_Text_Stroke::get_type(),
312 - [
313 - 'name' => 'text_stroke',
314 - 'selector' => '{{WRAPPER}} .elementor-heading-title',
315 - ]
316 - );
317 -
318 - $this->add_group_control(
319 - Group_Control_Text_Shadow::get_type(),
320 - [
321 - 'name' => 'text_shadow',
322 - 'selector' => '{{WRAPPER}} .elementor-heading-title',
323 - ]
324 - );
325 -
326 203 $this->add_control(
327 - 'blend_mode',
204 + 'view',
328 205 [
329 - 'label' => esc_html__( 'Blend Mode', 'elementor' ),
330 - 'type' => Controls_Manager::SELECT,
331 - 'options' => [
332 - '' => esc_html__( 'Normal', 'elementor' ),
333 - 'multiply' => esc_html__( 'Multiply', 'elementor' ),
334 - 'screen' => esc_html__( 'Screen', 'elementor' ),
335 - 'overlay' => esc_html__( 'Overlay', 'elementor' ),
336 - 'darken' => esc_html__( 'Darken', 'elementor' ),
337 - 'lighten' => esc_html__( 'Lighten', 'elementor' ),
338 - 'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
339 - 'saturation' => esc_html__( 'Saturation', 'elementor' ),
340 - 'color' => esc_html__( 'Color', 'elementor' ),
341 - 'difference' => esc_html__( 'Difference', 'elementor' ),
342 - 'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
343 - 'hue' => esc_html__( 'Hue', 'elementor' ),
344 - 'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
345 - ],
346 - 'selectors' => [
347 - '{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}',
348 - ],
206 + 'label' => __( 'View', 'elementor' ),
207 + 'type' => Controls_Manager::HIDDEN,
208 + 'default' => 'traditional',
349 209 ]
350 210 );
351 211
352 - $this->add_control(
353 - 'separator',
354 - [
355 - 'type' => Controls_Manager::DIVIDER,
356 - ]
357 - );
212 + $this->end_controls_section();
358 213
359 - $this->start_controls_tabs( 'title_colors' );
360 -
361 - $this->start_controls_tab(
362 - 'title_colors_normal',
214 + $this->start_controls_section(
215 + 'section_title_style',
363 216 [
364 - 'label' => esc_html__( 'Normal', 'elementor' ),
217 + 'label' => __( 'Title', 'elementor' ),
218 + 'tab' => Controls_Manager::TAB_STYLE,
365 219 ]
366 220 );
367 221
368 222 $this->add_control(
@@ -367,9 +221,9 @@
367 221
368 222 $this->add_control(
369 223 'title_color',
370 224 [
371 - 'label' => esc_html__( 'Text Color', 'elementor' ),
225 + 'label' => __( 'Text Color', 'elementor' ),
372 226 'type' => Controls_Manager::COLOR,
373 227 'global' => [
374 228 'default' => Global_Colors::COLOR_PRIMARY,
375 229 ],
@@ -378,47 +232,54 @@
378 232 ],
379 233 ]
380 234 );
381 235
382 - $this->end_controls_tab();
383 -
384 - $this->start_controls_tab(
385 - 'title_colors_hover',
236 + $this->add_group_control(
237 + Group_Control_Typography::get_type(),
386 238 [
387 - 'label' => esc_html__( 'Hover', 'elementor' ),
239 + 'name' => 'typography',
240 + 'global' => [
241 + 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
242 + ],
243 + 'selector' => '{{WRAPPER}} .elementor-heading-title',
388 244 ]
389 245 );
390 246
391 - $this->add_control(
392 - 'title_hover_color',
247 + $this->add_group_control(
248 + Group_Control_Text_Shadow::get_type(),
393 249 [
394 - 'label' => esc_html__( 'Link Color', 'elementor' ),
395 - 'type' => Controls_Manager::COLOR,
396 - 'selectors' => [
397 - '{{WRAPPER}} .elementor-heading-title a:hover, {{WRAPPER}} .elementor-heading-title a:focus' => 'color: {{VALUE}};',
398 - ],
250 + 'name' => 'text_shadow',
251 + 'selector' => '{{WRAPPER}} .elementor-heading-title',
399 252 ]
400 253 );
401 254
402 255 $this->add_control(
403 - 'title_hover_color_transition_duration',
256 + 'blend_mode',
404 257 [
405 - 'label' => esc_html__( 'Transition Duration', 'elementor' ),
406 - 'type' => Controls_Manager::SLIDER,
407 - 'size_units' => [ 's', 'ms', 'custom' ],
408 - 'default' => [
409 - 'unit' => 's',
258 + 'label' => __( 'Blend Mode', 'elementor' ),
259 + 'type' => Controls_Manager::SELECT,
260 + 'options' => [
261 + '' => __( 'Normal', 'elementor' ),
262 + 'multiply' => 'Multiply',
263 + 'screen' => 'Screen',
264 + 'overlay' => 'Overlay',
265 + 'darken' => 'Darken',
266 + 'lighten' => 'Lighten',
267 + 'color-dodge' => 'Color Dodge',
268 + 'saturation' => 'Saturation',
269 + 'color' => 'Color',
270 + 'difference' => 'Difference',
271 + 'exclusion' => 'Exclusion',
272 + 'hue' => 'Hue',
273 + 'luminosity' => 'Luminosity',
410 274 ],
411 275 'selectors' => [
412 - '{{WRAPPER}} .elementor-heading-title a' => 'transition-duration: {{SIZE}}{{UNIT}};',
276 + '{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}',
413 277 ],
278 + 'separator' => 'none',
414 279 ]
415 280 );
416 281
417 - $this->end_controls_tab();
418 -
419 - $this->end_controls_tabs();
420 -
421 282 $this->end_controls_section();
422 283 }
423 284
424 285 /**
@@ -439,15 +300,13 @@
439 300 $this->add_render_attribute( 'title', 'class', 'elementor-heading-title' );
440 301
441 302 if ( ! empty( $settings['size'] ) ) {
442 303 $this->add_render_attribute( 'title', 'class', 'elementor-size-' . $settings['size'] );
443 - } else {
444 - $this->add_render_attribute( 'title', 'class', 'elementor-size-default' );
445 304 }
446 305
447 306 $this->add_inline_editing_attributes( 'title' );
448 307
449 - $title = wp_kses_post( $settings['title'] );
308 + $title = $settings['title'];
450 309
451 310 if ( ! empty( $settings['link']['url'] ) ) {
452 311 $this->add_link_attributes( 'url', $settings['link'] );
453 312
@@ -453,120 +312,13 @@
453 312
454 313 $title = sprintf( '<a %1$s>%2$s</a>', $this->get_render_attribute_string( 'url' ), $title );
455 314 }
456 315
457 - $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 );
316 + $title_html = sprintf( '<%1$s %2$s>%3$s</%1$s>', $settings['header_size'], $this->get_render_attribute_string( 'title' ), $title );
458 317
459 - // PHPCS - the variable $title_html holds safe data.
460 - echo $title_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
318 + echo $title_html;
461 319 }
462 320
463 - public function render_markdown(): string {
464 - $settings = $this->get_settings_for_display();
465 -
466 - if ( '' === $settings['title'] ) {
467 - return '';
468 - }
469 -
470 - $tag = $settings['header_size'] ?? 'h2';
471 - $level_map = [
472 - 'h1' => 1,
473 - 'h2' => 2,
474 - 'h3' => 3,
475 - 'h4' => 4,
476 - 'h5' => 5,
477 - 'h6' => 6,
478 - ];
479 - $level = $level_map[ $tag ] ?? 2;
480 - $title = Utils::html_to_plain_text( $settings['title'] );
481 -
482 - $md = str_repeat( '#', $level ) . ' ' . $title;
483 -
484 - if ( ! empty( $settings['link']['url'] ) ) {
485 - $md = str_repeat( '#', $level ) . ' [' . $title . '](' . esc_url( $settings['link']['url'] ) . ')';
486 - }
487 -
488 - return $md;
489 - }
490 -
491 - public function maybe_add_ally_heading_hint() {
492 - $notice_id = 'ally_heading_notice';
493 - $plugin_slug = 'pojo-accessibility';
494 -
495 - if ( ! Hints::should_display_hint( $notice_id ) ) {
496 - return;
497 - }
498 -
499 - $one_subscription = Hints::is_plugin_connected_to_one_subscription();
500 - $is_installed = Hints::is_plugin_installed( $plugin_slug );
501 - $is_active = Hints::is_plugin_active( $plugin_slug );
502 -
503 - if ( $is_active ) {
504 - return;
505 - }
506 -
507 - if ( $one_subscription ) {
508 - if ( ! $is_installed ) {
509 - $notice_content = esc_html__( 'Want to ensure this heading is accessible? Your ONE subscription includes Ally. Install it and scan your page.', 'elementor' );
510 - $button_text = esc_html__( 'Install now', 'elementor' );
511 - $button_url = Hints::get_plugin_install_url( $plugin_slug );
512 - $campaign_data = [
513 - 'name' => 'elementor_ea11y_campaign',
514 - 'campaign' => 'acc-scanner-plg-heading-one-install',
515 - 'source' => 'editor-heading-widget-one-install',
516 - 'medium' => 'editor-one',
517 - ];
518 - } elseif ( ! $is_active ) {
519 - $notice_content = esc_html__( 'Keep your content accessible. Activate Ally, included in ONE, to scan this page.', 'elementor' );
520 - $button_text = esc_html__( 'Activate now', 'elementor' );
521 - $button_url = Hints::get_plugin_activate_url( $plugin_slug );
522 - $campaign_data = [
523 - 'name' => 'elementor_ea11y_campaign',
524 - 'campaign' => 'acc-scanner-plg-heading-one-activate',
525 - 'source' => 'editor-heading-widget-one-non-activate',
526 - 'medium' => 'editor-one',
527 - ];
528 - }
529 - } else {
530 - $notice_content = esc_html__( 'Make sure your page is structured with accessibility in mind. Ally helps detect and fix common issues across your site.', 'elementor' );
531 - if ( ! $is_installed ) {
532 - $button_text = esc_html__( 'Install now', 'elementor' );
533 - $button_url = Hints::get_plugin_install_url( $plugin_slug );
534 - } elseif ( ! $is_active ) {
535 - $button_text = esc_html__( 'Activate now', 'elementor' );
536 - $button_url = Hints::get_plugin_activate_url( $plugin_slug );
537 - }
538 - $campaign_data = [
539 - 'name' => 'elementor_ea11y_campaign',
540 - 'campaign' => 'acc-scanner-plg-heading',
541 - 'source' => 'editor-heading-widget',
542 - 'medium' => 'editor',
543 - ];
544 - }
545 -
546 - $notice_heading = esc_html__( 'Accessible structure matters', 'elementor' );
547 -
548 - $this->add_control(
549 - $notice_id,
550 - [
551 - 'type' => Controls_Manager::RAW_HTML,
552 - 'raw' => Hints::get_notice_template( [
553 - 'display' => ! Hints::is_dismissed( $notice_id ),
554 - 'heading' => $notice_heading,
555 - 'type' => 'info',
556 - 'content' => $notice_content,
557 - 'icon' => true,
558 - 'dismissible' => $notice_id,
559 - 'button_text' => $button_text,
560 - 'button_event' => $notice_id,
561 - 'button_data' => [
562 - 'action_url' => Admin_Notices::add_plg_campaign_data( $button_url, $campaign_data ),
563 - ],
564 - ], true ),
565 - ]
566 - );
567 - }
568 -
569 321 /**
570 322 * Render heading widget output in the editor.
571 323 *
572 324 * Written as a Backbone JavaScript template and used to generate the live preview.
@@ -576,26 +328,19 @@
576 328 */
577 329 protected function content_template() {
578 330 ?>
579 331 <#
580 - let title = elementor.helpers.sanitize( settings.title, { ALLOW_DATA_ATTR: false } );
332 + var title = settings.title;
581 333
582 - if ( '' !== settings.link?.url ) {
583 - title = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + title + '</a>';
334 + if ( '' !== settings.link.url ) {
335 + title = '<a href="' + settings.link.url + '">' + title + '</a>';
584 336 }
585 337
586 - view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title' ] );
338 + view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title', 'elementor-size-' + settings.size ] );
587 339
588 - if ( '' !== settings.size ) {
589 - view.addRenderAttribute( 'title', 'class', [ 'elementor-size-' + settings.size ] );
590 - } else {
591 - view.addRenderAttribute( 'title', 'class', [ 'elementor-size-default' ] );
592 - }
593 -
594 340 view.addInlineEditingAttributes( 'title' );
595 341
596 - var headerSizeTag = elementor.helpers.validateHTMLTag( settings.header_size ),
597 - title_html = '<' + headerSizeTag + ' ' + view.getRenderAttributeString( 'title' ) + '>' + title + '</' + headerSizeTag + '>';
342 + var title_html = '<' + settings.header_size + ' ' + view.getRenderAttributeString( 'title' ) + '>' + title + '</' + settings.header_size + '>';
598 343
599 344 print( title_html );
600 345 #>
601 346 <?php