PluginProbe
Elementor Website Builder – more than just a page builder / 3.1.0-dev2
Elementor Website Builder – more than just a page builder v3.1.0-dev2
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/alert.php +73 -314 4.1.33.1.0-dev2 View file →
@@ -1,9 +1,8 @@
1 1 <?php
2 2 namespace Elementor;
3 3
4 4 use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
5 -use Elementor\Icons_Manager;
6 5
7 6 if ( ! defined( 'ABSPATH' ) ) {
8 7 exit; // Exit if accessed directly.
9 8 }
@@ -42,9 +41,9 @@
42 41 *
43 42 * @return string Widget title.
44 43 */
45 44 public function get_title() {
46 - return esc_html__( 'Alert', 'elementor' );
45 + return __( 'Alert', 'elementor' );
47 46 }
48 47
49 48 /**
50 49 * Get widget icon.
@@ -73,43 +72,21 @@
73 72 public function get_keywords() {
74 73 return [ 'alert', 'notice', 'message' ];
75 74 }
76 75
77 - protected function is_dynamic_content(): bool {
78 - return false;
79 - }
80 -
81 76 /**
82 - * Get style dependencies.
83 - *
84 - * Retrieve the list of style dependencies the widget requires.
85 - *
86 - * @since 3.24.0
87 - * @access public
88 - *
89 - * @return array Widget style dependencies.
90 - */
91 - public function get_style_depends(): array {
92 - return [ 'widget-alert' ];
93 - }
94 -
95 - public function has_widget_inner_wrapper(): bool {
96 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
97 - }
98 -
99 - /**
100 77 * Register alert widget controls.
101 78 *
102 79 * Adds different input fields to allow the user to change and customize the widget settings.
103 80 *
104 - * @since 3.1.0
81 + * @since 1.0.0
105 82 * @access protected
106 83 */
107 - protected function register_controls() {
84 + protected function _register_controls() {
108 85 $this->start_controls_section(
109 86 'section_alert',
110 87 [
111 - 'label' => esc_html__( 'Alert', 'elementor' ),
88 + 'label' => __( 'Alert', 'elementor' ),
112 89 ]
113 90 );
114 91
115 92 $this->add_control(
@@ -114,18 +91,18 @@
114 91
115 92 $this->add_control(
116 93 'alert_type',
117 94 [
118 - 'label' => esc_html__( 'Type', 'elementor' ),
95 + 'label' => __( 'Type', 'elementor' ),
119 96 'type' => Controls_Manager::SELECT,
120 97 'default' => 'info',
121 98 'options' => [
122 - 'info' => esc_html__( 'Info', 'elementor' ),
123 - 'success' => esc_html__( 'Success', 'elementor' ),
124 - 'warning' => esc_html__( 'Warning', 'elementor' ),
125 - 'danger' => esc_html__( 'Danger', 'elementor' ),
99 + 'info' => __( 'Info', 'elementor' ),
100 + 'success' => __( 'Success', 'elementor' ),
101 + 'warning' => __( 'Warning', 'elementor' ),
102 + 'danger' => __( 'Danger', 'elementor' ),
126 103 ],
127 - 'prefix_class' => 'elementor-alert-',
104 + 'style_transfer' => true,
128 105 ]
129 106 );
130 107
131 108 $this->add_control(
@@ -130,12 +107,12 @@
130 107
131 108 $this->add_control(
132 109 'alert_title',
133 110 [
134 - 'label' => esc_html__( 'Title', 'elementor' ),
111 + 'label' => __( 'Title & Description', 'elementor' ),
135 112 'type' => Controls_Manager::TEXT,
136 - 'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
137 - 'default' => esc_html__( 'This is an Alert', 'elementor' ),
113 + 'placeholder' => __( 'Enter your title', 'elementor' ),
114 + 'default' => __( 'This is an Alert', 'elementor' ),
138 115 'label_block' => true,
139 116 'dynamic' => [
140 117 'active' => true,
141 118 ],
@@ -144,12 +121,14 @@
144 121
145 122 $this->add_control(
146 123 'alert_description',
147 124 [
148 - 'label' => esc_html__( 'Content', 'elementor' ),
125 + 'label' => __( 'Content', 'elementor' ),
149 126 'type' => Controls_Manager::TEXTAREA,
150 - 'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
151 - 'default' => esc_html__( 'I am a description. Click the edit button to change this text.', 'elementor' ),
127 + 'placeholder' => __( 'Enter your description', 'elementor' ),
128 + 'default' => __( 'I am a description. Click the edit button to change this text.', 'elementor' ),
129 + 'separator' => 'none',
130 + 'show_label' => false,
152 131 'dynamic' => [
153 132 'active' => true,
154 133 ],
155 134 ]
@@ -157,49 +136,24 @@
157 136
158 137 $this->add_control(
159 138 'show_dismiss',
160 139 [
161 - 'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
162 - 'type' => Controls_Manager::SWITCHER,
163 - 'label_on' => esc_html__( 'Show', 'elementor' ),
164 - 'label_off' => esc_html__( 'Hide', 'elementor' ),
165 - 'return_value' => 'show',
140 + 'label' => __( 'Dismiss Button', 'elementor' ),
141 + 'type' => Controls_Manager::SELECT,
166 142 'default' => 'show',
143 + 'options' => [
144 + 'show' => __( 'Show', 'elementor' ),
145 + 'hide' => __( 'Hide', 'elementor' ),
146 + ],
167 147 ]
168 148 );
169 149
170 150 $this->add_control(
171 - 'dismiss_icon',
151 + 'view',
172 152 [
173 - 'label' => esc_html__( 'Icon', 'elementor' ),
174 - 'type' => Controls_Manager::ICONS,
175 - 'fa4compatibility' => 'icon',
176 - 'skin' => 'inline',
177 - 'label_block' => false,
178 - 'render_type' => 'template',
179 - 'skin_settings' => [
180 - 'inline' => [
181 - 'none' => [
182 - 'label' => 'Default',
183 - 'icon' => 'eicon-close',
184 - ],
185 - 'icon' => [
186 - 'icon' => 'eicon-star',
187 - ],
188 - ],
189 - ],
190 - 'recommended' => [
191 - 'fa-regular' => [
192 - 'times-circle',
193 - ],
194 - 'fa-solid' => [
195 - 'times',
196 - 'times-circle',
197 - ],
198 - ],
199 - 'condition' => [
200 - 'show_dismiss' => 'show',
201 - ],
153 + 'label' => __( 'View', 'elementor' ),
154 + 'type' => Controls_Manager::HIDDEN,
155 + 'default' => 'traditional',
202 156 ]
203 157 );
204 158
205 159 $this->end_controls_section();
@@ -206,9 +160,9 @@
206 160
207 161 $this->start_controls_section(
208 162 'section_type',
209 163 [
210 - 'label' => esc_html__( 'Alert', 'elementor' ),
164 + 'label' => __( 'Alert', 'elementor' ),
211 165 'tab' => Controls_Manager::TAB_STYLE,
212 166 ]
213 167 );
214 168
@@ -214,9 +168,9 @@
214 168
215 169 $this->add_control(
216 170 'background',
217 171 [
218 - 'label' => esc_html__( 'Background Color', 'elementor' ),
172 + 'label' => __( 'Background Color', 'elementor' ),
219 173 'type' => Controls_Manager::COLOR,
220 174 'selectors' => [
221 175 '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',
222 176 ],
@@ -225,12 +179,12 @@
225 179
226 180 $this->add_control(
227 181 'border_color',
228 182 [
229 - 'label' => esc_html__( 'Side Border Color', 'elementor' ),
183 + 'label' => __( 'Border Color', 'elementor' ),
230 184 'type' => Controls_Manager::COLOR,
231 185 'selectors' => [
232 - '{{WRAPPER}} .elementor-alert' => 'border-inline-start-color: {{VALUE}};',
186 + '{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};',
233 187 ],
234 188 ]
235 189 );
236 190
@@ -236,21 +190,18 @@
236 190
237 191 $this->add_control(
238 192 'border_left-width',
239 193 [
240 - 'label' => esc_html__( 'Side Border Width', 'elementor' ),
194 + 'label' => __( 'Left Border Width', 'elementor' ),
241 195 'type' => Controls_Manager::SLIDER,
242 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
243 196 'range' => [
244 197 'px' => [
198 + 'min' => 0,
245 199 'max' => 100,
246 200 ],
247 - 'em' => [
248 - 'max' => 10,
249 - ],
250 201 ],
251 202 'selectors' => [
252 - '{{WRAPPER}} .elementor-alert' => 'border-inline-start-width: {{SIZE}}{{UNIT}};',
203 + '{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',
253 204 ],
254 205 ]
255 206 );
256 207
@@ -258,9 +209,9 @@
258 209
259 210 $this->start_controls_section(
260 211 'section_title',
261 212 [
262 - 'label' => esc_html__( 'Title', 'elementor' ),
213 + 'label' => __( 'Title', 'elementor' ),
263 214 'tab' => Controls_Manager::TAB_STYLE,
264 215 ]
265 216 );
266 217
@@ -266,9 +217,9 @@
266 217
267 218 $this->add_control(
268 219 'title_color',
269 220 [
270 - 'label' => esc_html__( 'Text Color', 'elementor' ),
221 + 'label' => __( 'Text Color', 'elementor' ),
271 222 'type' => Controls_Manager::COLOR,
272 223 'selectors' => [
273 224 '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
274 225 ],
@@ -285,22 +236,14 @@
285 236 ],
286 237 ]
287 238 );
288 239
289 - $this->add_group_control(
290 - Group_Control_Text_Shadow::get_type(),
291 - [
292 - 'name' => 'title_shadow',
293 - 'selector' => '{{WRAPPER}} .elementor-alert-title',
294 - ]
295 - );
296 -
297 240 $this->end_controls_section();
298 241
299 242 $this->start_controls_section(
300 243 'section_description',
301 244 [
302 - 'label' => esc_html__( 'Description', 'elementor' ),
245 + 'label' => __( 'Description', 'elementor' ),
303 246 'tab' => Controls_Manager::TAB_STYLE,
304 247 ]
305 248 );
306 249
@@ -306,9 +249,9 @@
306 249
307 250 $this->add_control(
308 251 'description_color',
309 252 [
310 - 'label' => esc_html__( 'Text Color', 'elementor' ),
253 + 'label' => __( 'Text Color', 'elementor' ),
311 254 'type' => Controls_Manager::COLOR,
312 255 'selectors' => [
313 256 '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
314 257 ],
@@ -325,145 +268,10 @@
325 268 ],
326 269 ]
327 270 );
328 271
329 - $this->add_group_control(
330 - Group_Control_Text_Shadow::get_type(),
331 - [
332 - 'name' => 'description_shadow',
333 - 'selector' => '{{WRAPPER}} .elementor-alert-description',
334 - ]
335 - );
336 -
337 272 $this->end_controls_section();
338 273
339 - $this->start_controls_section(
340 - 'section_dismiss_icon',
341 - [
342 - 'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
343 - 'tab' => Controls_Manager::TAB_STYLE,
344 - 'condition' => [
345 - 'show_dismiss' => 'show',
346 - ],
347 - ]
348 - );
349 -
350 - $this->add_responsive_control(
351 - 'dismiss_icon_size',
352 - [
353 - 'label' => esc_html__( 'Size', 'elementor' ),
354 - 'type' => Controls_Manager::SLIDER,
355 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
356 - 'range' => [
357 - 'px' => [
358 - 'max' => 100,
359 - ],
360 - 'em' => [
361 - 'max' => 10,
362 - ],
363 - 'rem' => [
364 - 'max' => 10,
365 - ],
366 - ],
367 - 'selectors' => [
368 - '{{WRAPPER}}' => '--dismiss-icon-size: {{SIZE}}{{UNIT}};',
369 - ],
370 - ]
371 - );
372 -
373 - $this->add_responsive_control(
374 - 'dismiss_icon_vertical_position',
375 - [
376 - 'label' => esc_html__( 'Vertical Position', 'elementor' ),
377 - 'type' => Controls_Manager::SLIDER,
378 - 'range' => [
379 - 'px' => [
380 - 'min' => -100,
381 - 'max' => 100,
382 - ],
383 - ],
384 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
385 - 'selectors' => [
386 - '{{WRAPPER}}' => '--dismiss-icon-vertical-position: {{SIZE}}{{UNIT}};',
387 - ],
388 - ]
389 - );
390 -
391 - $this->add_responsive_control(
392 - 'dismiss_icon_horizontal_position',
393 - [
394 - 'label' => esc_html__( 'Horizontal Position', 'elementor' ),
395 - 'type' => Controls_Manager::SLIDER,
396 - 'range' => [
397 - 'px' => [
398 - 'min' => -100,
399 - 'max' => 100,
400 - ],
401 - ],
402 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
403 - 'selectors' => [
404 - '{{WRAPPER}}' => '--dismiss-icon-horizontal-position: {{SIZE}}{{UNIT}};',
405 - ],
406 - ]
407 - );
408 -
409 - $this->start_controls_tabs( 'dismiss_icon_colors' );
410 -
411 - $this->start_controls_tab( 'dismiss_icon_normal_colors', [
412 - 'label' => esc_html__( 'Normal', 'elementor' ),
413 - ] );
414 -
415 - $this->add_control(
416 - 'dismiss_icon_normal_color',
417 - [
418 - 'label' => esc_html__( 'Color', 'elementor' ),
419 - 'type' => Controls_Manager::COLOR,
420 - 'selectors' => [
421 - '{{WRAPPER}}' => '--dismiss-icon-normal-color: {{VALUE}};',
422 - ],
423 - ]
424 - );
425 -
426 - $this->end_controls_tab();
427 -
428 - $this->start_controls_tab( 'dismiss_icon_hover_colors', [
429 - 'label' => esc_html__( 'Hover', 'elementor' ),
430 - ] );
431 -
432 - $this->add_control(
433 - 'dismiss_icon_hover_color',
434 - [
435 - 'label' => esc_html__( 'Color', 'elementor' ),
436 - 'type' => Controls_Manager::COLOR,
437 - 'selectors' => [
438 - '{{WRAPPER}}' => '--dismiss-icon-hover-color: {{VALUE}};',
439 - ],
440 - ]
441 - );
442 -
443 - $this->add_control(
444 - 'dismiss_icon_hover_transition_duration',
445 - [
446 - 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
447 - 'type' => Controls_Manager::SLIDER,
448 - 'range' => [
449 - 'px' => [
450 - 'min' => 0,
451 - 'max' => 3,
452 - 'step' => 0.1,
453 - ],
454 - ],
455 - 'selectors' => [
456 - '{{WRAPPER}}' => '--dismiss-icon-hover-transition-duration: {{SIZE}}s',
457 - ],
458 - ]
459 - );
460 -
461 - $this->end_controls_tab();
462 -
463 - $this->end_controls_tabs();
464 -
465 - $this->end_controls_section();
466 274 }
467 275
468 276 /**
469 277 * Render alert widget output on the frontend.
@@ -475,45 +283,38 @@
475 283 */
476 284 protected function render() {
477 285 $settings = $this->get_settings_for_display();
478 286
479 - if ( Utils::is_empty( $settings['alert_title'] ) && Utils::is_empty( $settings['alert_description'] ) ) {
287 + if ( Utils::is_empty( $settings['alert_title'] ) ) {
480 288 return;
481 289 }
482 290
483 - $this->add_render_attribute( 'alert_wrapper', 'class', 'elementor-alert' );
291 + if ( ! empty( $settings['alert_type'] ) ) {
292 + $this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );
293 + }
484 294
485 - $this->add_render_attribute( 'alert_wrapper', 'role', 'alert' );
295 + $this->add_render_attribute( 'wrapper', 'role', 'alert' );
486 296
487 297 $this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
488 298
489 - $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
490 -
491 299 $this->add_inline_editing_attributes( 'alert_title', 'none' );
492 -
493 - $this->add_inline_editing_attributes( 'alert_description' );
494 300 ?>
495 - <div <?php $this->print_render_attribute_string( 'alert_wrapper' ); ?>>
301 + <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
302 + <span <?php echo $this->get_render_attribute_string( 'alert_title' ); ?>><?php echo $settings['alert_title']; ?></span>
303 + <?php
304 + if ( ! Utils::is_empty( $settings['alert_description'] ) ) :
305 + $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
496 306
497 - <?php if ( ! Utils::is_empty( $settings['alert_title'] ) ) : ?>
498 - <span <?php $this->print_render_attribute_string( 'alert_title' ); ?>><?php echo wp_kses_post( $settings['alert_title'] ); ?></span>
307 + $this->add_inline_editing_attributes( 'alert_description' );
308 + ?>
309 + <span <?php echo $this->get_render_attribute_string( 'alert_description' ); ?>><?php echo $settings['alert_description']; ?></span>
499 310 <?php endif; ?>
500 -
501 - <?php if ( ! Utils::is_empty( $settings['alert_description'] ) ) : ?>
502 - <span <?php $this->print_render_attribute_string( 'alert_description' ); ?>><?php echo wp_kses_post( $settings['alert_description'] ); ?></span>
503 - <?php endif; ?>
504 -
505 311 <?php if ( 'show' === $settings['show_dismiss'] ) : ?>
506 - <button type="button" class="elementor-alert-dismiss" aria-label="<?php echo esc_attr__( 'Dismiss this alert.', 'elementor' ); ?>">
507 - <?php
508 - if ( ! empty( $settings['dismiss_icon']['value'] ) ) {
509 - Icons_Manager::render_icon( $settings['dismiss_icon'], [ 'aria-hidden' => 'true' ] );
510 - } else { ?>
312 + <button type="button" class="elementor-alert-dismiss">
511 313 <span aria-hidden="true">&times;</span>
512 - <?php } ?>
513 - </button>
314 + <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>
315 + </button>
514 316 <?php endif; ?>
515 -
516 317 </div>
517 318 <?php
518 319 }
519 320
@@ -524,71 +325,29 @@
524 325 *
525 326 * @since 2.9.0
526 327 * @access protected
527 328 */
528 - public function render_markdown(): string {
529 - $settings = $this->get_settings_for_display();
530 -
531 - $title = Utils::html_to_plain_text( $settings['alert_title'] ?? '' );
532 - $description = Utils::html_to_plain_text( $settings['alert_description'] ?? '' );
533 -
534 - if ( empty( $title ) && empty( $description ) ) {
535 - return '';
536 - }
537 -
538 - if ( ! empty( $title ) && ! empty( $description ) ) {
539 - return '> **' . $title . ':** ' . $description;
540 - }
541 -
542 - if ( ! empty( $title ) ) {
543 - return '> **' . $title . '**';
544 - }
545 -
546 - return '> ' . $description;
547 - }
548 -
549 329 protected function content_template() {
550 330 ?>
551 - <#
552 - if ( ! settings.alert_title && ! settings.alert_description ) {
553 - return;
554 - }
331 + <# if ( settings.alert_title ) {
332 + view.addRenderAttribute( {
333 + alert_title: { class: 'elementor-alert-title' },
334 + alert_description: { class: 'elementor-alert-description' }
335 + } );
555 336
556 - view.addRenderAttribute( 'alert_wrapper', 'class', 'elementor-alert' );
557 -
558 - view.addRenderAttribute( 'alert_wrapper', 'role', 'alert' );
559 -
560 - view.addRenderAttribute( 'alert_title', 'class', 'elementor-alert-title' );
561 -
562 - view.addRenderAttribute( 'alert_description', 'class', 'elementor-alert-description' );
563 -
564 - view.addInlineEditingAttributes( 'alert_title', 'none' );
565 -
566 - view.addInlineEditingAttributes( 'alert_description' );
567 -
568 - var iconHTML = elementor.helpers.renderIcon( view, settings.dismiss_icon, { 'aria-hidden': true }, 'i' , 'object' ),
569 - migrated = elementor.helpers.isIconMigrated( settings, 'dismiss_icon' );
570 - #>
571 - <div {{{ view.getRenderAttributeString( 'alert_wrapper' ) }}}>
572 -
573 - <# if ( settings.alert_title ) { #>
574 - <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{ settings.alert_title }}</span>
575 - <# } #>
576 -
577 - <# if ( settings.alert_description ) { #>
578 - <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{ settings.alert_description }}</span>
579 - <# } #>
580 -
581 - <# if ( 'show' === settings.show_dismiss ) { #>
582 - <button type="button" class="elementor-alert-dismiss" aria-label="<?php echo esc_attr__( 'Dismiss this alert.', 'elementor' ); ?>">
583 - <# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #>
584 - {{{ iconHTML.value }}}
585 - <# } else { #>
586 - <span aria-hidden="true">&times;</span>
337 + view.addInlineEditingAttributes( 'alert_title', 'none' );
338 + view.addInlineEditingAttributes( 'alert_description' );
339 + #>
340 + <div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">
341 + <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>
342 + <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>
343 + <# if ( 'show' === settings.show_dismiss ) { #>
344 + <button type="button" class="elementor-alert-dismiss">
345 + <span aria-hidden="true">&times;</span>
346 + <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>
347 + </button>
587 348 <# } #>
588 - </button>
589 - <# } #>
590 -
591 - </div>
349 + </div>
350 + <# } #>
592 351 <?php
593 352 }
594 353 }