← All changes | includes/widgets/image-box.php +45 -211 4.1.0-dev2 → 3.24.4 View file →

		@@ -90,12 +90,8 @@
90	90	public function get_style_depends(): array {
91	91	return [ 'widget-image-box' ];
92	92	}
93	93
94		- public function has_widget_inner_wrapper(): bool {
95		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
96		- }
97		-
98	94	/**
99	95	* Register image box widget controls.
100	96	*
101	97	* Adds different input fields to allow the user to change and customize the widget settings.
		@@ -267,10 +263,10 @@
267	263	[
268	264	'label' => esc_html__( 'Alignment', 'elementor' ),
269	265	'type' => Controls_Manager::CHOOSE,
270	266	'options' => [
271		- 'start' => [
272		- 'title' => esc_html__( 'Start', 'elementor' ),
	267	+ 'left' => [
	268	+ 'title' => esc_html__( 'Left', 'elementor' ),
273	269	'icon' => 'eicon-text-align-left',
274	270	],
275	271	'center' => [
276	272	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -275,10 +271,10 @@
275	271	'center' => [
276	272	'title' => esc_html__( 'Center', 'elementor' ),
277	273	'icon' => 'eicon-text-align-center',
278	274	],
279		- 'end' => [
280		- 'title' => esc_html__( 'End', 'elementor' ),
	275	+ 'right' => [
	276	+ 'title' => esc_html__( 'Right', 'elementor' ),
281	277	'icon' => 'eicon-text-align-right',
282	278	],
283	279	'justify' => [
284	280	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -284,13 +280,8 @@
284	280	'title' => esc_html__( 'Justified', 'elementor' ),
285	281	'icon' => 'eicon-text-align-justify',
286	282	],
287	283	],
288		- 'classes' => 'elementor-control-start-end',
289		- 'selectors_dictionary' => [
290		- 'left' => is_rtl() ? 'end' : 'start',
291		- 'right' => is_rtl() ? 'start' : 'end',
292		- ],
293	284	'selectors' => [
294	285	'{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};',
295	286	],
296	287	'separator' => 'after',
		@@ -388,68 +379,8 @@
388	379	],
389	380	]
390	381	);
391	382
392		- $this->add_responsive_control(
393		- 'image_height',
394		- [
395		- 'label' => esc_html__( 'Height', 'elementor' ),
396		- 'type' => Controls_Manager::SLIDER,
397		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
398		- 'selectors' => [
399		- '{{WRAPPER}} .elementor-image-box-img img' => 'height: {{SIZE}}{{UNIT}};',
400		- ],
401		- ]
402		- );
403		-
404		- $this->add_responsive_control(
405		- 'image_object_fit',
406		- [
407		- 'label' => esc_html__( 'Object Fit', 'elementor' ),
408		- 'type' => Controls_Manager::SELECT,
409		- 'options' => [
410		- '' => esc_html__( 'Default', 'elementor' ),
411		- 'fill' => esc_html__( 'Fill', 'elementor' ),
412		- 'cover' => esc_html__( 'Cover', 'elementor' ),
413		- 'contain' => esc_html__( 'Contain', 'elementor' ),
414		- 'scale-down' => esc_html__( 'Scale Down', 'elementor' ),
415		- ],
416		- 'condition' => [
417		- 'image_height[size]!' => '',
418		- ],
419		- 'selectors' => [
420		- '{{WRAPPER}} .elementor-image-box-img img' => 'object-fit: {{VALUE}};',
421		- ],
422		- ]
423		- );
424		-
425		- $this->add_responsive_control(
426		- 'image_object_position',
427		- [
428		- 'label' => esc_html__( 'Object Position', 'elementor' ),
429		- 'type' => Controls_Manager::SELECT,
430		- 'options' => [
431		- 'center center' => esc_html__( 'Center Center', 'elementor' ),
432		- 'center left' => esc_html__( 'Center Left', 'elementor' ),
433		- 'center right' => esc_html__( 'Center Right', 'elementor' ),
434		- 'top center' => esc_html__( 'Top Center', 'elementor' ),
435		- 'top left' => esc_html__( 'Top Left', 'elementor' ),
436		- 'top right' => esc_html__( 'Top Right', 'elementor' ),
437		- 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
438		- 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
439		- 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
440		- ],
441		- 'default' => 'center center',
442		- 'selectors' => [
443		- '{{WRAPPER}} .elementor-image-box-img img' => 'object-position: {{VALUE}};',
444		- ],
445		- 'condition' => [
446		- 'image_height[size]!' => '',
447		- 'image_object_fit' => [ 'cover', 'contain', 'scale-down' ],
448		- ],
449		- ]
450		- );
451		-
452	383	$this->add_group_control(
453	384	Group_Control_Border::get_type(),
454	385	[
455	386	'name' => 'image_border',
		@@ -463,8 +394,9 @@
463	394	[
464	395	'label' => esc_html__( 'Border Radius', 'elementor' ),
465	396	'type' => Controls_Manager::SLIDER,
466	397	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	398	+ 'separator' => 'after',
467	399	'selectors' => [
468	400	'{{WRAPPER}} .elementor-image-box-img img' => 'border-radius: {{SIZE}}{{UNIT}};',
469	401	],
470	402	]
		@@ -469,24 +401,8 @@
469	401	],
470	402	]
471	403	);
472	404
473		- $this->add_group_control(
474		- Group_Control_Box_Shadow::get_type(),
475		- [
476		- 'name' => 'image_box_shadow',
477		- 'selector' => '{{WRAPPER}} .elementor-image-box-img img',
478		- ]
479		- );
480		-
481		- $this->add_control(
482		- 'separator_panel_style',
483		- [
484		- 'type' => Controls_Manager::DIVIDER,
485		- 'style' => 'thick',
486		- ]
487		- );
488		-
489	405	$this->start_controls_tabs( 'image_effects' );
490	406
491	407	$this->start_controls_tab(
492	408	'normal',
		@@ -607,8 +523,23 @@
607	523	'separator' => 'before',
608	524	]
609	525	);
610	526
	527	+ $this->add_control(
	528	+ 'title_color',
	529	+ [
	530	+ 'label' => esc_html__( 'Color', 'elementor' ),
	531	+ 'type' => Controls_Manager::COLOR,
	532	+ 'default' => '',
	533	+ 'selectors' => [
	534	+ '{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};',
	535	+ ],
	536	+ 'global' => [
	537	+ 'default' => Global_Colors::COLOR_PRIMARY,
	538	+ ],
	539	+ ]
	540	+ );
	541	+
611	542	$this->add_group_control(
612	543	Group_Control_Typography::get_type(),
613	544	[
614	545	'name' => 'title_typography',
		@@ -634,85 +565,32 @@
634	565	'selector' => '{{WRAPPER}} .elementor-image-box-title',
635	566	]
636	567	);
637	568
638		- $this->start_controls_tabs( 'image_box_title_colors' );
639		-
640		- $this->start_controls_tab(
641		- 'image_box_title_colors_normal',
642		- [
643		- 'label' => esc_html__( 'Normal', 'elementor' ),
644		- ]
645		- );
646		-
647	569	$this->add_control(
648		- 'title_color',
	570	+ 'heading_description',
649	571	[
650		- 'label' => esc_html__( 'Color', 'elementor' ),
651		- 'type' => Controls_Manager::COLOR,
652		- 'default' => '',
653		- 'selectors' => [
654		- '{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};',
655		- ],
656		- 'global' => [
657		- 'default' => Global_Colors::COLOR_PRIMARY,
658		- ],
	572	+ 'label' => esc_html__( 'Description', 'elementor' ),
	573	+ 'type' => Controls_Manager::HEADING,
	574	+ 'separator' => 'before',
659	575	]
660	576	);
661	577
662		- $this->end_controls_tab();
663		-
664		- $this->start_controls_tab(
665		- 'image_box_title_colors_hover',
666		- [
667		- 'label' => esc_html__( 'Hover', 'elementor' ),
668		- ]
669		- );
670		-
671	578	$this->add_control(
672		- 'hover_title_color',
	579	+ 'description_color',
673	580	[
674	581	'label' => esc_html__( 'Color', 'elementor' ),
675	582	'type' => Controls_Manager::COLOR,
676	583	'default' => '',
677	584	'selectors' => [
678		- '{{WRAPPER}}:has(:hover) .elementor-image-box-title,
679		- {{WRAPPER}}:has(:focus) .elementor-image-box-title' => 'color: {{VALUE}};',
	585	+ '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
680	586	],
681	587	'global' => [
682		- 'default' => Global_Colors::COLOR_PRIMARY,
	588	+ 'default' => Global_Colors::COLOR_TEXT,
683	589	],
684	590	]
685	591	);
686	592
687		- $this->add_control(
688		- 'hover_title_color_transition_duration',
689		- [
690		- 'label' => esc_html__( 'Transition Duration', 'elementor' ),
691		- 'type' => Controls_Manager::SLIDER,
692		- 'size_units' => [ 's', 'ms', 'custom' ],
693		- 'default' => [
694		- 'unit' => 's',
695		- ],
696		- 'selectors' => [
697		- '{{WRAPPER}} .elementor-image-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
698		- ],
699		- ]
700		- );
701		-
702		- $this->end_controls_tab();
703		-
704		- $this->end_controls_tabs();
705		-
706		- $this->add_control(
707		- 'heading_description',
708		- [
709		- 'label' => esc_html__( 'Description', 'elementor' ),
710		- 'type' => Controls_Manager::HEADING,
711		- 'separator' => 'before',
712		- ]
713		- );
714		-
715	593	$this->add_group_control(
716	594	Group_Control_Typography::get_type(),
717	595	[
718	596	'name' => 'description_typography',
		@@ -730,23 +608,8 @@
730	608	'selector' => '{{WRAPPER}} .elementor-image-box-description',
731	609	]
732	610	);
733	611
734		- $this->add_control(
735		- 'description_color',
736		- [
737		- 'label' => esc_html__( 'Color', 'elementor' ),
738		- 'type' => Controls_Manager::COLOR,
739		- 'default' => '',
740		- 'selectors' => [
741		- '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
742		- ],
743		- 'global' => [
744		- 'default' => Global_Colors::COLOR_TEXT,
745		- ],
746		- ]
747		- );
748		-
749	612	$this->end_controls_section();
750	613	}
751	614
752	615	/**
		@@ -759,13 +622,10 @@
759	622	*/
760	623	protected function render() {
761	624	$settings = $this->get_settings_for_display();
762	625
763		- $description_text = wp_kses_post( $settings['description_text'] );
764		- $title_text = wp_kses_post( $settings['title_text'] );
765		-
766	626	$has_image = ! empty( $settings['image']['url'] );
767		- $has_content = ! Utils::is_empty( $title_text ) || ! Utils::is_empty( $description_text );
	627	+ $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
768	628
769	629	if ( ! $has_image && ! $has_content ) {
770	630	return;
771	631	}
		@@ -789,27 +649,28 @@
789	649
790	650	if ( $has_content ) {
791	651	$html .= '<div class="elementor-image-box-content">';
792	652
793		- if ( ! Utils::is_empty( $title_text ) ) {
794		- $title_html = $title_text;
	653	+ if ( ! Utils::is_empty( $settings['title_text'] ) ) {
795	654	$this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' );
796	655
797	656	$this->add_inline_editing_attributes( 'title_text', 'none' );
798	657
	658	+ $title_html = $settings['title_text'];
	659	+
799	660	if ( ! empty( $settings['link']['url'] ) ) {
800		- $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_text . '</a>';
	661	+ $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_html . '</a>';
801	662	}
802	663
803	664	$html .= sprintf( '<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag( $settings['title_size'] ), $this->get_render_attribute_string( 'title_text' ), $title_html );
804	665	}
805	666
806		- if ( ! Utils::is_empty( $description_text ) ) {
	667	+ if ( ! Utils::is_empty( $settings['description_text'] ) ) {
807	668	$this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' );
808	669
809	670	$this->add_inline_editing_attributes( 'description_text' );
810	671
811		- $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $description_text );
	672	+ $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $settings['description_text'] );
812	673	}
813	674
814	675	$html .= '</div>';
815	676	}
		@@ -829,13 +690,10 @@
829	690	*/
830	691	protected function content_template() {
831	692	?>
832	693	<#
833		- const titleText = elementor.helpers.sanitize( settings.title_text, { ALLOW_DATA_ATTR: false } )
834		- const descriptionText = elementor.helpers.sanitize( settings.description_text, { ALLOW_DATA_ATTR: false } )
835		-
836	694	var hasImage = !! settings.image.url;
837		- var hasContent = !! ( titleText || descriptionText );
	695	+ var hasContent = !! ( settings.title_text || settings.description_text );
838	696
839	697	if ( ! hasImage && ! hasContent ) {
840	698	return;
841	699	}
		@@ -854,10 +712,10 @@
854	712	var image_url = elementor.imagesManager.getImageUrl( image );
855	713
856	714	var imageHtml = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />';
857	715
858		- if ( settings.link?.url ) {
859		- imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '" tabindex="-1">' + imageHtml + '</a>';
	716	+ if ( settings.link.url ) {
	717	+ imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '" tabindex="-1">' + imageHtml + '</a>';
860	718	}
861	719
862	720	html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>';
863	721	}
		@@ -864,13 +722,14 @@
864	722
865	723	if ( hasContent ) {
866	724	html += '<div class="elementor-image-box-content">';
867	725
868		- if ( titleText ) {
869		- var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
	726	+ if ( settings.title_text ) {
	727	+ var title_html = elementor.helpers.sanitize( settings.title_text ),
	728	+ titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
870	729
871		- if ( settings.link?.url ) {
872		- title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + titleText + '</a>';
	730	+ if ( settings.link.url ) {
	731	+ title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '">' + title_html + '</a>';
873	732	}
874	733
875	734	view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876	735
		@@ -875,17 +734,17 @@
875	734	view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876	735
877	736	view.addInlineEditingAttributes( 'title_text', 'none' );
878	737
879		- html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + titleText + '</' + titleSizeTag + '>';
	738	+ html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + title_html + '</' + titleSizeTag + '>';
880	739	}
881	740
882		- if ( descriptionText ) {
	741	+ if ( settings.description_text ) {
883	742	view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' );
884	743
885	744	view.addInlineEditingAttributes( 'description_text' );
886	745
887		- html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + descriptionText + '</p>';
	746	+ html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + settings.description_text + '</p>';
888	747	}
889	748
890	749	html += '</div>';
891	750	}
		@@ -894,31 +753,6 @@
894	753
895	754	print( html );
896	755	#>
897	756	<?php
898		- }
899		-
900		- public function render_markdown(): string {
901		- $settings = $this->get_settings_for_display();
902		- $title = Utils::html_to_plain_text( $settings['title_text'] ?? '' );
903		- $description = Utils::html_to_plain_text( $settings['description_text'] ?? '' );
904		- $image_url = $settings['image']['url'] ?? '';
905		- if ( empty( $title ) && empty( $description ) && empty( $image_url ) ) {
906		- return '';
907		- }
908		- $parts = [];
909		- if ( ! empty( $image_url ) ) {
910		- $parts[] = ' . ')';
911		- }
912		- if ( ! empty( $title ) ) {
913		- if ( ! empty( $settings['link']['url'] ) ) {
914		- $parts[] = '### [' . $title . '](' . esc_url( $settings['link']['url'] ) . ')';
915		- } else {
916		- $parts[] = '### ' . $title;
917		- }
918		- }
919		- if ( ! empty( $description ) ) {
920		- $parts[] = $description;
921		- }
922		- return implode( "\n\n", $parts );
923	757	}
924	758	}