← All changes | includes/widgets/alert.php +53 -278 4.2.0-dev2 → 3.5.0-dev9 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	}
		@@ -73,31 +72,9 @@
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	*
		@@ -123,9 +100,9 @@
123	100	'success' => esc_html__( 'Success', 'elementor' ),
124	101	'warning' => esc_html__( 'Warning', 'elementor' ),
125	102	'danger' => esc_html__( '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,9 +107,9 @@
130	107
131	108	$this->add_control(
132	109	'alert_title',
133	110	[
134		- 'label' => esc_html__( 'Title', 'elementor' ),
	111	+ 'label' => esc_html__( 'Title & Description', 'elementor' ),
135	112	'type' => Controls_Manager::TEXT,
136	113	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
137	114	'default' => esc_html__( 'This is an Alert', 'elementor' ),
138	115	'label_block' => true,
		@@ -148,8 +125,10 @@
148	125	'label' => esc_html__( 'Content', 'elementor' ),
149	126	'type' => Controls_Manager::TEXTAREA,
150	127	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
151	128	'default' => esc_html__( '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' => esc_html__( 'Dismiss Button', 'elementor' ),
	141	+ 'type' => Controls_Manager::SELECT,
166	142	'default' => 'show',
	143	+ 'options' => [
	144	+ 'show' => esc_html__( 'Show', 'elementor' ),
	145	+ 'hide' => esc_html__( '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' => esc_html__( 'View', 'elementor' ),
	154	+ 'type' => Controls_Manager::HIDDEN,
	155	+ 'default' => 'traditional',
202	156	]
203	157	);
204	158
205	159	$this->end_controls_section();
		@@ -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' => esc_html__( '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' => esc_html__( '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
		@@ -335,135 +286,8 @@
335	286	);
336	287
337	288	$this->end_controls_section();
338	289
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	290	}
467	291
468	292	/**
469	293	* Render alert widget output on the frontend.
		@@ -475,45 +299,38 @@
475	299	*/
476	300	protected function render() {
477	301	$settings = $this->get_settings_for_display();
478	302
479		- if ( Utils::is_empty( $settings['alert_title'] ) && Utils::is_empty( $settings['alert_description'] ) ) {
	303	+ if ( Utils::is_empty( $settings['alert_title'] ) ) {
480	304	return;
481	305	}
482	306
483		- $this->add_render_attribute( 'alert_wrapper', 'class', 'elementor-alert' );
	307	+ if ( ! empty( $settings['alert_type'] ) ) {
	308	+ $this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );
	309	+ }
484	310
485		- $this->add_render_attribute( 'alert_wrapper', 'role', 'alert' );
	311	+ $this->add_render_attribute( 'wrapper', 'role', 'alert' );
486	312
487	313	$this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
488	314
489		- $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
490		-
491	315	$this->add_inline_editing_attributes( 'alert_title', 'none' );
492		-
493		- $this->add_inline_editing_attributes( 'alert_description' );
494	316	?>
495		- <div <?php $this->print_render_attribute_string( 'alert_wrapper' ); ?>>
	317	+ <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
	318	+ <span <?php $this->print_render_attribute_string( 'alert_title' ); ?>><?php $this->print_unescaped_setting( 'alert_title' ); ?></span>
	319	+ <?php
	320	+ if ( ! Utils::is_empty( $settings['alert_description'] ) ) :
	321	+ $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
496	322
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>
	323	+ $this->add_inline_editing_attributes( 'alert_description' );
	324	+ ?>
	325	+ <span <?php $this->print_render_attribute_string( 'alert_description' ); ?>><?php $this->print_unescaped_setting( 'alert_description' ); ?></span>
499	326	<?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	327	<?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 { ?>
	328	+ <button type="button" class="elementor-alert-dismiss">
511	329	<span aria-hidden="true">&times;</span>
512		- <?php } ?>
513		- </button>
	330	+ <span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss alert', 'elementor' ); ?></span>
	331	+ </button>
514	332	<?php endif; ?>
515		-
516	333	</div>
517	334	<?php
518	335	}
519	336
		@@ -524,71 +341,29 @@
524	341	*
525	342	* @since 2.9.0
526	343	* @access protected
527	344	*/
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	345	protected function content_template() {
550	346	?>
551		- <#
552		- if ( ! settings.alert_title && ! settings.alert_description ) {
553		- return;
554		- }
	347	+ <# if ( settings.alert_title ) {
	348	+ view.addRenderAttribute( {
	349	+ alert_title: { class: 'elementor-alert-title' },
	350	+ alert_description: { class: 'elementor-alert-description' }
	351	+ } );
555	352
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>
	353	+ view.addInlineEditingAttributes( 'alert_title', 'none' );
	354	+ view.addInlineEditingAttributes( 'alert_description' );
	355	+ #>
	356	+ <div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">
	357	+ <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>
	358	+ <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>
	359	+ <# if ( 'show' === settings.show_dismiss ) { #>
	360	+ <button type="button" class="elementor-alert-dismiss">
	361	+ <span aria-hidden="true">&times;</span>
	362	+ <span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss alert', 'elementor' ); ?></span>
	363	+ </button>
587	364	<# } #>
588		- </button>
589		- <# } #>
590		-
591		- </div>
	365	+ </div>
	366	+ <# } #>
592	367	<?php
593	368	}
594	369	}