PluginProbe
Elementor Website Builder – more than just a page builder / 3.16.2
Elementor Website Builder – more than just a page builder v3.16.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 +47 -289 4.2.03.16.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 *
@@ -92,78 +88,9 @@
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 *
@@ -173,9 +100,9 @@
173 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' => esc_html__( 'Title', 'elementor' ),
178 105 ]
179 106 );
180 107
181 108 $this->add_control(
@@ -204,8 +131,9 @@
204 131 ],
205 132 'default' => [
206 133 'url' => '',
207 134 ],
135 + 'separator' => 'before',
208 136 ]
209 137 );
210 138
211 139 $this->add_control(
@@ -212,8 +140,9 @@
212 140 'size',
213 141 [
214 142 'label' => esc_html__( 'Size', 'elementor' ),
215 143 'type' => Controls_Manager::SELECT,
144 + 'default' => 'default',
216 145 'options' => [
217 146 'default' => esc_html__( 'Default', 'elementor' ),
218 147 'small' => esc_html__( 'Small', 'elementor' ),
219 148 'medium' => esc_html__( 'Medium', 'elementor' ),
@@ -220,12 +149,8 @@
220 149 'large' => esc_html__( 'Large', 'elementor' ),
221 150 'xl' => esc_html__( 'XL', 'elementor' ),
222 151 'xxl' => esc_html__( 'XXL', 'elementor' ),
223 152 ],
224 - 'default' => 'default',
225 - 'condition' => [
226 - 'size!' => 'default', // a workaround to hide the control, unless it's in use (not default).
227 - ],
228 153 ]
229 154 );
230 155
231 156 $this->add_control(
@@ -247,20 +172,8 @@
247 172 'default' => 'h2',
248 173 ]
249 174 );
250 175
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 176 $this->add_responsive_control(
264 177 'align',
265 178 [
266 179 'label' => esc_html__( 'Alignment', 'elementor' ),
@@ -265,10 +178,10 @@
265 178 [
266 179 'label' => esc_html__( 'Alignment', 'elementor' ),
267 180 'type' => Controls_Manager::CHOOSE,
268 181 'options' => [
269 - 'start' => [
270 - 'title' => esc_html__( 'Start', 'elementor' ),
182 + 'left' => [
183 + 'title' => esc_html__( 'Left', 'elementor' ),
271 184 'icon' => 'eicon-text-align-left',
272 185 ],
273 186 'center' => [
274 187 'title' => esc_html__( 'Center', 'elementor' ),
@@ -273,10 +186,10 @@
273 186 'center' => [
274 187 'title' => esc_html__( 'Center', 'elementor' ),
275 188 'icon' => 'eicon-text-align-center',
276 189 ],
277 - 'end' => [
278 - 'title' => esc_html__( 'End', 'elementor' ),
190 + 'right' => [
191 + 'title' => esc_html__( 'Right', 'elementor' ),
279 192 'icon' => 'eicon-text-align-right',
280 193 ],
281 194 'justify' => [
282 195 'title' => esc_html__( 'Justified', 'elementor' ),
@@ -282,21 +195,48 @@
282 195 'title' => esc_html__( 'Justified', 'elementor' ),
283 196 'icon' => 'eicon-text-align-justify',
284 197 ],
285 198 ],
286 - 'classes' => 'elementor-control-start-end',
287 - 'selectors_dictionary' => [
288 - 'left' => is_rtl() ? 'end' : 'start',
289 - 'right' => is_rtl() ? 'start' : 'end',
290 - ],
291 199 'default' => '',
292 200 'selectors' => [
293 201 '{{WRAPPER}}' => 'text-align: {{VALUE}};',
294 202 ],
295 - 'separator' => 'after',
296 203 ]
297 204 );
298 205
206 + $this->add_control(
207 + 'view',
208 + [
209 + 'label' => esc_html__( 'View', 'elementor' ),
210 + 'type' => Controls_Manager::HIDDEN,
211 + 'default' => 'traditional',
212 + ]
213 + );
214 +
215 + $this->end_controls_section();
216 +
217 + $this->start_controls_section(
218 + 'section_title_style',
219 + [
220 + 'label' => esc_html__( 'Title', 'elementor' ),
221 + 'tab' => Controls_Manager::TAB_STYLE,
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 +
299 239 $this->add_group_control(
300 240 Group_Control_Typography::get_type(),
301 241 [
302 242 'name' => 'typography',
@@ -345,80 +285,12 @@
345 285 ],
346 286 'selectors' => [
347 287 '{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}',
348 288 ],
289 + 'separator' => 'none',
349 290 ]
350 291 );
351 292
352 - $this->add_control(
353 - 'separator',
354 - [
355 - 'type' => Controls_Manager::DIVIDER,
356 - ]
357 - );
358 -
359 - $this->start_controls_tabs( 'title_colors' );
360 -
361 - $this->start_controls_tab(
362 - 'title_colors_normal',
363 - [
364 - 'label' => esc_html__( 'Normal', 'elementor' ),
365 - ]
366 - );
367 -
368 - $this->add_control(
369 - 'title_color',
370 - [
371 - 'label' => esc_html__( 'Text Color', 'elementor' ),
372 - 'type' => Controls_Manager::COLOR,
373 - 'global' => [
374 - 'default' => Global_Colors::COLOR_PRIMARY,
375 - ],
376 - 'selectors' => [
377 - '{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
378 - ],
379 - ]
380 - );
381 -
382 - $this->end_controls_tab();
383 -
384 - $this->start_controls_tab(
385 - 'title_colors_hover',
386 - [
387 - 'label' => esc_html__( 'Hover', 'elementor' ),
388 - ]
389 - );
390 -
391 - $this->add_control(
392 - 'title_hover_color',
393 - [
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 - ],
399 - ]
400 - );
401 -
402 - $this->add_control(
403 - 'title_hover_color_transition_duration',
404 - [
405 - 'label' => esc_html__( 'Transition Duration', 'elementor' ),
406 - 'type' => Controls_Manager::SLIDER,
407 - 'size_units' => [ 's', 'ms', 'custom' ],
408 - 'default' => [
409 - 'unit' => 's',
410 - ],
411 - 'selectors' => [
412 - '{{WRAPPER}} .elementor-heading-title a' => 'transition-duration: {{SIZE}}{{UNIT}};',
413 - ],
414 - ]
415 - );
416 -
417 - $this->end_controls_tab();
418 -
419 - $this->end_controls_tabs();
420 -
421 293 $this->end_controls_section();
422 294 }
423 295
424 296 /**
@@ -439,15 +311,13 @@
439 311 $this->add_render_attribute( 'title', 'class', 'elementor-heading-title' );
440 312
441 313 if ( ! empty( $settings['size'] ) ) {
442 314 $this->add_render_attribute( 'title', 'class', 'elementor-size-' . $settings['size'] );
443 - } else {
444 - $this->add_render_attribute( 'title', 'class', 'elementor-size-default' );
445 315 }
446 316
447 317 $this->add_inline_editing_attributes( 'title' );
448 318
449 - $title = wp_kses_post( $settings['title'] );
319 + $title = $settings['title'];
450 320
451 321 if ( ! empty( $settings['link']['url'] ) ) {
452 322 $this->add_link_attributes( 'url', $settings['link'] );
453 323
@@ -459,114 +329,8 @@
459 329 // PHPCS - the variable $title_html holds safe data.
460 330 echo $title_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
461 331 }
462 332
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 333 /**
570 334 * Render heading widget output in the editor.
571 335 *
572 336 * Written as a Backbone JavaScript template and used to generate the live preview.
@@ -576,21 +340,15 @@
576 340 */
577 341 protected function content_template() {
578 342 ?>
579 343 <#
580 - let title = elementor.helpers.sanitize( settings.title, { ALLOW_DATA_ATTR: false } );
344 + var title = settings.title;
581 345
582 - if ( '' !== settings.link?.url ) {
583 - title = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + title + '</a>';
346 + if ( '' !== settings.link.url ) {
347 + title = '<a href="' + settings.link.url + '">' + title + '</a>';
584 348 }
585 349
586 - view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title' ] );
587 -
588 - if ( '' !== settings.size ) {
589 - view.addRenderAttribute( 'title', 'class', [ 'elementor-size-' + settings.size ] );
590 - } else {
591 - view.addRenderAttribute( 'title', 'class', [ 'elementor-size-default' ] );
592 - }
350 + view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title', 'elementor-size-' + settings.size ] );
593 351
594 352 view.addInlineEditingAttributes( 'title' );
595 353
596 354 var headerSizeTag = elementor.helpers.validateHTMLTag( settings.header_size ),