Internal: Add custom escaper for template renderer [ED-18015]

modules/atomic-widgets/elements/atomic-heading/atomic-heading.html.twig

@@ -0,0 +1,12 @@
+{# TODO: Need to add base classes #}
+<{{ settings.tag | e('html_tag') }}
+    class="{{ settings.classes | join(' ') }}"
+>
+    {% if settings.link.href %}
+        <a href="{{ settings.link.href | e('full_url') }}" target="{{ settings.link.target }}">
+            {{ settings.title }}
+        </a>
+    {% else %}
+        {{ settings.title }}
+    {% endif %}
+</{{ settings.tag | e('html_tag') }}>

modules/atomic-widgets/elements/atomic-heading/atomic-heading.php

@@ -14,14 +14,15 @@
 use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
 use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
 use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
-use Elementor\Utils;
+use Elementor\Modules\AtomicWidgets\TemplateRenderer\Has_Template;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
 
 class Atomic_Heading extends Atomic_Widget_Base {
 	use Link_Query;
+	use Has_Template;
 
 	const BASE_STYLE_KEY = 'base';
 
@@ -37,46 +38,10 @@ public function get_icon() {
 		return 'eicon-t-letter';
 	}
 
-	protected function render() {
-		$settings = $this->get_atomic_settings();
-
-		$format = $this->get_heading_template( ! empty( $settings['link']['href'] ) );
-		$args = $this->get_template_args( $settings );
-
-		printf( $format, ...$args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-	}
-
-	private function get_heading_template( bool $is_link_enabled ): string {
-		return $is_link_enabled ? '<%1$s %2$s><a %3$s>%4$s</a></%1$s>' : '<%1$s %2$s>%3$s</%1$s>';
-	}
-
-	private function get_template_args( array $settings ): array {
-		$tag = $settings['tag'];
-		$title = esc_html( $settings['title'] );
-		$attrs = array_filter([
-			'class' => array_filter( [
-				$settings['classes'] ?? '',
-				static::get_base_style_class( self::BASE_STYLE_KEY ) ?? '',
-			] ),
-		]);
-
-		$default_args = [
-			Utils::validate_html_tag( $tag ),
-			Utils::render_html_attributes( $attrs ),
+	protected function get_templates(): array {
+		return [
+			'elementor/elements/atomic-heading' => __DIR__ . '/atomic-heading.html.twig',
 		];
-
-		if ( ! empty( $settings['link']['href'] ) ) {
-			$link_args = [
-				Utils::render_html_attributes( $settings['link'] ),
-				esc_html( $title ),
-			];
-
-			return array_merge( $default_args, $link_args );
-		}
-
-		$default_args[] = $title;
-
-		return $default_args;
 	}
 
 	protected function define_atomic_controls(): array {

modules/atomic-widgets/elements/atomic-image/atomic-image.html.twig

@@ -1,7 +1,10 @@
-{# TODO: Need to escape the image src #}
 <img
-    class="{{ settings.classes }}"
+    class="{{ settings.classes | join(' ') }}"
     {% for attr, value in settings.image %}
-        {{ attr | e('html_attr') }}="{{ value }}"
+        {% if attr == 'src' %}
+            src="{{ value | e('full_url') }}"
+        {% else %}
+            {{ attr | e('html_attr') }}="{{ value }}"
+        {% endif %}
     {% endfor %}
 >

modules/atomic-widgets/elements/atomic-paragraph/atomic-paragraph.php

@@ -108,7 +108,7 @@ private function get_template_args( array $settings ): array {
 		$tag = Utils::validate_html_tag( $settings['tag'] );
 		$attrs = array_filter([
 			'class' => array_filter([
-				$settings['classes'] ?? '',
+				...( $settings['classes'] ?? [] ),
 				self::get_base_style_class( self::BASE_STYLE_KEY ) ?? '',
 			]),
 		]);

modules/atomic-widgets/elements/atomic-svg/atomic-svg.php

@@ -52,7 +52,7 @@ protected function render() {
 
 		$this->set_svg_attributes( $svg, $settings );
 
-		$svg->add_class( $settings['classes'] ?? '' );
+		$svg->add_class( implode( ' ', $settings['classes'] ?? [] ) );
 
 		$valid_svg = ( new Svg_Sanitizer() )->sanitize( $svg->get_updated_html() );
 

modules/atomic-widgets/elements/div-block/div-block.php

@@ -102,7 +102,7 @@ protected function add_render_attributes() {
 		$this->add_render_attribute( '_wrapper', [
 			'class' => [
 				'e-div-block',
-				$settings['classes'] ?? '',
+				...( $settings['classes'] ?? [] ),
 			],
 		] );
 	}

modules/atomic-widgets/module.php

@@ -11,6 +11,7 @@
 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Image\Atomic_Image;
 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Paragraph\Atomic_Paragraph;
 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Svg\Atomic_Svg;
+use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Array_Transformer;
 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Combine_Array_Transformer;
 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Image_Src_Transformer;
 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Image_Transformer;
@@ -141,7 +142,7 @@ private function register_settings_transformers( Transformers_Registry $transfor
 		$transformers->register( String_Prop_Type::get_key(), new Primitive_Transformer() );
 
 		// Other
-		$transformers->register( Classes_Prop_Type::get_key(), new Combine_Array_Transformer( ' ' ) );
+		$transformers->register( Classes_Prop_Type::get_key(), new Array_Transformer() );
 		$transformers->register( Image_Prop_Type::get_key(), new Image_Transformer() );
 		$transformers->register( Image_Src_Prop_Type::get_key(), new Image_Src_Transformer() );
 		$transformers->register( Image_Attachment_Id_Prop_Type::get_key(), new Primitive_Transformer() );

modules/atomic-widgets/props-resolver/transformers/array-transformer.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace Elementor\Modules\AtomicWidgets\PropsResolver\Transformers;
+
+use Elementor\Modules\AtomicWidgets\PropsResolver\Transformer_Base;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Array_Transformer extends Transformer_Base {
+	public function transform( $value, $key ) {
+		if ( ! is_array( $value ) ) {
+			return null;
+		}
+
+		return array_filter( $value );
+	}
+}

modules/atomic-widgets/props-resolver/transformers/settings/link-transformer.php

@@ -16,7 +16,7 @@ public function transform( $value, $key ): array {
 
 		$link_attrs = [
 			'href' => esc_url( $value['href'] ),
-			'target' => $value['isTargetBlank'] ? '_blank' : '',
+			'target' => $value['isTargetBlank'] ? '_blank' : '_self',
 		];
 
 		return array_filter( $link_attrs );

modules/atomic-widgets/template-renderer/template-renderer.php

@@ -4,7 +4,7 @@
 
 use Elementor\Utils;
 use ElementorDeps\Twig\Environment;
-use ElementorDeps\Twig\TemplateWrapper;
+use ElementorDeps\Twig\Runtime\EscaperRuntime;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
@@ -27,6 +27,11 @@ private function __construct() {
 				'autoescape' => 'name',
 			]
 		);
+
+		$escaper = $this->env->getRuntime( EscaperRuntime::class );
+
+		$escaper->setEscaper( 'full_url', 'esc_url' );
+		$escaper->setEscaper( 'html_tag', [ Utils::class, 'validate_html_tag' ] );
 	}
 
 	public static function instance(): self {

tests/phpunit/elementor/modules/atomic-widgets/template-renderer/__snapshots__/Test_Template_Renderer__test_render__multiple_templates__1.txt

@@ -1,4 +1,4 @@
-			<div>
+			<div class="">
     <h1>This is my title</h1>
     <p>This comes from part</p>
 </div>

tests/phpunit/elementor/modules/atomic-widgets/template-renderer/mocks/basic.html.twig

@@ -1,4 +1,4 @@
-<div class="{{ settings.classes }}">
+<div class="{{ settings.classes | join (' ') }}">
     <h1>{{ settings.title }}</h1>
     <p>widget id: {{ id }}, widget type: {{ type }}</p>
     {{ settings.prop_not_exists }}

tests/phpunit/elementor/modules/atomic-widgets/template-renderer/mocks/with-part.html.twig

@@ -1,4 +1,4 @@
-<div>
+<div class="{{ settings.classes | join (' ') }}">
     <h1>{{ settings.title }}</h1>
     {% include 'elementor/parts/part' %}
 </div>

tests/phpunit/elementor/modules/atomic-widgets/template-renderer/test-template-renderer.php

@@ -34,7 +34,7 @@ public function test_render__basic_template() {
 				'elementor/elements/test' => __DIR__ . '/mocks/basic.html.twig'
 			],
 			'settings' => [
-				'classes' => 'class1 class2',
+				'classes' => [ 'class1', 'class2' ],
 				'title' => 'This is my title',
 			],
 		] );
@@ -59,6 +59,7 @@ public function test_render__multiple_templates() {
 			],
 			'main' => 'elementor/elements/test',
 			'settings' => [
+				'classes' => null,
 				'title' => 'This is my title',
 			],
 		] );

tests/phpunit/elementor/modules/atomic-widgets/test-atomic-widget-base.php

@@ -125,16 +125,16 @@ public function get_atomic_settings_data_provider() {
 					'settings' => [
 						'classes' => [
 							'$$type' => 'classes',
-							'value' => [ 'one', 'two', 'three' ],
+							'value' => [ 'one', 'two', 'three', null ],
 						],
 						'outer_classes' => [
 							'$$type' => 'classes',
 							'value' => 111, // Invalid value for classes
 						],
 					],
 					'result' => [
-						'classes' => 'one two three',
-						'inner_classes' => '',
+						'classes' => [ 'one', 'two', 'three' ],
+						'inner_classes' => [],
 						'outer_classes' => null,
 					],
 				],