← All changes | includes/elements/column.php +74 -122 4.2.2 → 3.10.0-dev1 View file →

		@@ -1,9 +1,8 @@
1	1	<?php
2	2	namespace Elementor;
3	3
4	4	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5		-use Elementor\Plugin;
6	5
7	6	if ( ! defined( 'ABSPATH' ) ) {
8	7	exit; // Exit if accessed directly.
9	8	}
		@@ -74,12 +73,8 @@
74	73	public function get_icon() {
75	74	return 'eicon-column';
76	75	}
77	76
78		- protected function is_dynamic_content(): bool {
79		- return false;
80		- }
81		-
82	77	/**
83	78	* Get initial config.
84	79	*
85	80	* Retrieve the current section initial configuration.
		@@ -119,9 +114,9 @@
119	114	'tab' => Controls_Manager::TAB_LAYOUT,
120	115	]
121	116	);
122	117
123		- // Element Name for the Navigator.
	118	+ // Element Name for the Navigator
124	119	$this->add_control(
125	120	'_title',
126	121	[
127	122	'label' => esc_html__( 'Title', 'elementor' ),
		@@ -176,12 +171,17 @@
176	171	],
177	172	]
178	173	);
179	174
	175	+ $is_dome_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	176	+ $main_selector_element = $is_dome_optimization_active ? 'widget' : 'column';
	177	+ $widget_wrap_child = $is_dome_optimization_active ? '' : ' > .elementor-widget-wrap';
	178	+ $column_wrap_child = $is_dome_optimization_active ? '' : ' > .elementor-column-wrap';
	179	+
180	180	$this->add_responsive_control(
181	181	'content_position',
182	182	[
183		- 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
	183	+ 'label' => esc_html__( 'Vertical Align', 'elementor' ),
184	184	'type' => Controls_Manager::SELECT,
185	185	'default' => '',
186	186	'options' => [
187	187	'' => esc_html__( 'Default', 'elementor' ),
		@@ -196,12 +196,12 @@
196	196	'top' => 'flex-start',
197	197	'bottom' => 'flex-end',
198	198	],
199	199	'selectors' => [
200		- // TODO: The following line is for BC since 2.7.0.
201		- '.elementor-bc-flex-widget {{WRAPPER}}.elementor-column .elementor-widget-wrap' => 'align-items: {{VALUE}}',
202		- // This specificity is intended to make sure column css overwrites section css on vertical alignment (content_position).
203		- '{{WRAPPER}}.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated' => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
	200	+ // TODO: The following line is for BC since 2.7.0
	201	+ '.elementor-bc-flex-widget {{WRAPPER}}.elementor-column .elementor-' . $main_selector_element . '-wrap' => 'align-items: {{VALUE}}',
	202	+ // This specificity is intended to make sure column css overwrites section css on vertical alignment (content_position)
	203	+ '{{WRAPPER}}.elementor-column.elementor-element[data-element_type="column"] > .elementor-' . $main_selector_element . '-wrap.elementor-element-populated' . $widget_wrap_child => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
204	204	],
205	205	]
206	206	);
207	207
		@@ -207,9 +207,9 @@
207	207
208	208	$this->add_responsive_control(
209	209	'align',
210	210	[
211		- 'label' => esc_html__( 'Horizontal Alignment', 'elementor' ),
	211	+ 'label' => esc_html__( 'Horizontal Align', 'elementor' ),
212	212	'type' => Controls_Manager::SELECT,
213	213	'default' => '',
214	214	'options' => [
215	215	'' => esc_html__( 'Default', 'elementor' ),
		@@ -220,17 +220,14 @@
220	220	'space-around' => esc_html__( 'Space Around', 'elementor' ),
221	221	'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
222	222	],
223	223	'selectors' => [
224		- '{{WRAPPER}}.elementor-column > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
	224	+ '{{WRAPPER}}.elementor-column' . $column_wrap_child . ' > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
225	225	],
226	226	]
227	227	);
228	228
229		- $optimized_markup = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
230		- $space_between_widgets = $optimized_markup
231		- ? '--kit-widget-spacing: {{VALUE}}px'
232		- : 'margin-block-end: {{VALUE}}px';
	229	+ $space_between_widgets_selector = $is_dome_optimization_active ? '' : '> .elementor-column-wrap ';
233	230
234	231	$this->add_responsive_control(
235	232	'space_between_widgets',
236	233	[
		@@ -237,9 +234,9 @@
237	234	'label' => esc_html__( 'Widgets Space', 'elementor' ) . ' (px)',
238	235	'type' => Controls_Manager::NUMBER,
239	236	'placeholder' => 20,
240	237	'selectors' => [
241		- '{{WRAPPER}} > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute)' => $space_between_widgets, // Need the full path for exclude the inner section.
	238	+ '{{WRAPPER}} ' . $space_between_widgets_selector . '> .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute)' => 'margin-bottom: {{VALUE}}px', //Need the full path for exclude the inner section
242	239	],
243	240	]
244	241	);
245	242
		@@ -291,50 +288,19 @@
291	288	Group_Control_Background::get_type(),
292	289	[
293	290	'name' => 'background',
294	291	'types' => [ 'classic', 'gradient', 'slideshow' ],
295		- 'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, {{WRAPPER}} > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer',
	292	+ 'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background) > .elementor-' . $main_selector_element . '-wrap, {{WRAPPER}} > .elementor-' . $main_selector_element . '-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer',
296	293	'fields_options' => [
297	294	'background' => [
298	295	'frontend_available' => true,
299	296	],
300		- ],
301		- ]
302		- );
303		-
304		- $this->add_control(
305		- 'handle_slideshow_asset_loading',
306		- [
307		- 'type' => Controls_Manager::HIDDEN,
308		- 'assets' => [
309		- 'styles' => [
310		- [
311		- 'name' => 'e-swiper',
312		- 'conditions' => [
313		- 'terms' => [
314		- [
315		- 'name' => 'background_background',
316		- 'operator' => '===',
317		- 'value' => 'slideshow',
318		- ],
319		- ],
320		- ],
	297	+ 'image' => [
	298	+ 'background_lazyload' => [
	299	+ 'active' => true,
	300	+ 'keys' => [ 'background_image', 'url' ],
321	301	],
322	302	],
323		- 'scripts' => [
324		- [
325		- 'name' => 'swiper',
326		- 'conditions' => [
327		- 'terms' => [
328		- [
329		- 'name' => 'background_background',
330		- 'operator' => '===',
331		- 'value' => 'slideshow',
332		- ],
333		- ],
334		- ],
335		- ],
336		- ],
337	303	],
338	304	]
339	305	);
340	306
		@@ -357,20 +323,15 @@
357	323
358	324	$this->add_control(
359	325	'background_hover_transition',
360	326	[
361		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	327	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
362	328	'type' => Controls_Manager::SLIDER,
	329	+ 'size_units' => [ 's', 'ms' ],
363	330	'default' => [
	331	+ 'unit' => 's',
364	332	'size' => 0.3,
365	333	],
366		- 'range' => [
367		- 'px' => [
368		- 'min' => 0,
369		- 'max' => 3,
370		- 'step' => 0.1,
371		- ],
372		- ],
373	334	'render_type' => 'ui',
374	335	'separator' => 'before',
375	336	]
376	337	);
		@@ -517,20 +478,15 @@
517	478
518	479	$this->add_control(
519	480	'background_overlay_hover_transition',
520	481	[
521		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	482	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
522	483	'type' => Controls_Manager::SLIDER,
	484	+ 'size_units' => [ 's', 'ms' ],
523	485	'default' => [
	486	+ 'unit' => 's',
524	487	'size' => 0.3,
525	488	],
526		- 'range' => [
527		- 'px' => [
528		- 'min' => 0,
529		- 'max' => 3,
530		- 'step' => 0.1,
531		- ],
532		- ],
533	489	'render_type' => 'ui',
534	490	'separator' => 'before',
535	491	]
536	492	);
		@@ -570,9 +526,9 @@
570	526	'border_radius',
571	527	[
572	528	'label' => esc_html__( 'Border Radius', 'elementor' ),
573	529	'type' => Controls_Manager::DIMENSIONS,
574		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	530	+ 'size_units' => [ 'px', '%', 'em' ],
575	531	'selectors' => [
576	532	'{{WRAPPER}} > .elementor-element-populated, {{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay, {{WRAPPER}} > .elementor-background-slideshow' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
577	533	],
578	534	]
		@@ -607,9 +563,9 @@
607	563	'border_radius_hover',
608	564	[
609	565	'label' => esc_html__( 'Border Radius', 'elementor' ),
610	566	'type' => Controls_Manager::DIMENSIONS,
611		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	567	+ 'size_units' => [ 'px', '%', 'em' ],
612	568	'selectors' => [
613	569	'{{WRAPPER}}:hover > .elementor-element-populated, {{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
614	570	],
615	571	]
		@@ -625,21 +581,16 @@
625	581
626	582	$this->add_control(
627	583	'border_hover_transition',
628	584	[
629		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	585	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
630	586	'type' => Controls_Manager::SLIDER,
631	587	'separator' => 'before',
	588	+ 'size_units' => [ 's', 'ms' ],
632	589	'default' => [
	590	+ 'unit' => 's',
633	591	'size' => 0.3,
634	592	],
635		- 'range' => [
636		- 'px' => [
637		- 'min' => 0,
638		- 'max' => 3,
639		- 'step' => 0.1,
640		- ],
641		- ],
642	593	'conditions' => [
643	594	'relation' => 'or',
644	595	'terms' => [
645	596	[
		@@ -647,9 +598,9 @@
647	598	'operator' => '!==',
648	599	'value' => '',
649	600	],
650	601	[
651		- 'name' => 'border_hover_border',
	602	+ 'name' => 'border_border',
652	603	'operator' => '!==',
653	604	'value' => '',
654	605	],
655	606	],
		@@ -654,10 +605,10 @@
654	605	],
655	606	],
656	607	],
657	608	'selectors' => [
658		- '{{WRAPPER}} > .elementor-element-populated' => 'transition: background {{background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
659		- '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'transition: background {{background_overlay_hover_transition.SIZE}}s, border-radius {{SIZE}}s, opacity {{background_overlay_hover_transition.SIZE}}s',
	609	+ '{{WRAPPER}} > .elementor-element-populated' => 'transition: background {{background_hover_transition.SIZE}}{{background_hover_transition.UNIT}}, border {{SIZE}}{{UNIT}}, border-radius {{SIZE}}{{UNIT}}, box-shadow {{SIZE}}{{UNIT}}',
	610	+ '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'transition: background {{background_overlay_hover_transition.SIZE}}{{background_overlay_hover_transition.UNIT}}, border-radius {{SIZE}}{{UNIT}}, opacity {{background_overlay_hover_transition.SIZE}}{{background_overlay_hover_transition.UNIT}}',
660	611	],
661	612	]
662	613	);
663	614
		@@ -685,8 +636,9 @@
685	636	'default' => '',
686	637	'selectors' => [
687	638	'{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};',
688	639	],
	640	+ 'separator' => 'none',
689	641	]
690	642	);
691	643
692	644	$this->add_control(
		@@ -730,10 +682,10 @@
730	682	[
731	683	'label' => esc_html__( 'Text Align', 'elementor' ),
732	684	'type' => Controls_Manager::CHOOSE,
733	685	'options' => [
734		- 'start' => [
735		- 'title' => esc_html__( 'Start', 'elementor' ),
	686	+ 'left' => [
	687	+ 'title' => esc_html__( 'Left', 'elementor' ),
736	688	'icon' => 'eicon-text-align-left',
737	689	],
738	690	'center' => [
739	691	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -738,10 +690,10 @@
738	690	'center' => [
739	691	'title' => esc_html__( 'Center', 'elementor' ),
740	692	'icon' => 'eicon-text-align-center',
741	693	],
742		- 'end' => [
743		- 'title' => esc_html__( 'End', 'elementor' ),
	694	+ 'right' => [
	695	+ 'title' => esc_html__( 'Right', 'elementor' ),
744	696	'icon' => 'eicon-text-align-right',
745	697	],
746	698	'justify' => [
747	699	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -747,13 +699,8 @@
747	699	'title' => esc_html__( 'Justified', 'elementor' ),
748	700	'icon' => 'eicon-text-align-justify',
749	701	],
750	702	],
751		- 'classes' => 'elementor-control-start-end',
752		- 'selectors_dictionary' => [
753		- 'left' => is_rtl() ? 'end' : 'start',
754		- 'right' => is_rtl() ? 'start' : 'end',
755		- ],
756	703	'selectors' => [
757	704	'{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
758	705	],
759	706	]
		@@ -775,9 +722,9 @@
775	722	'margin',
776	723	[
777	724	'label' => esc_html__( 'Margin', 'elementor' ),
778	725	'type' => Controls_Manager::DIMENSIONS,
779		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	726	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
780	727	'selectors' => [
781	728	'{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};
782	729	--e-column-margin-right: {{RIGHT}}{{UNIT}}; --e-column-margin-left: {{LEFT}}{{UNIT}};',
783	730	],
		@@ -783,16 +730,22 @@
783	730	],
784	731	]
785	732	);
786	733
	734	+ $padding_selector = '{{WRAPPER}} > .elementor-element-populated';
	735	+
	736	+ if ( ! $is_dome_optimization_active ) {
	737	+ $padding_selector .= ' > .elementor-widget-wrap';
	738	+ }
	739	+
787	740	$this->add_responsive_control(
788	741	'padding',
789	742	[
790	743	'label' => esc_html__( 'Padding', 'elementor' ),
791	744	'type' => Controls_Manager::DIMENSIONS,
792		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	745	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
793	746	'selectors' => [
794		- '{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	747	+ $padding_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
795	748	],
796	749	]
797	750	);
798	751
		@@ -813,11 +766,8 @@
813	766	[
814	767	'label' => esc_html__( 'CSS ID', 'elementor' ),
815	768	'type' => Controls_Manager::TEXT,
816	769	'default' => '',
817		- 'ai' => [
818		- 'active' => false,
819		- ],
820	770	'dynamic' => [
821	771	'active' => true,
822	772	],
823	773	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -831,11 +781,8 @@
831	781	[
832	782	'label' => esc_html__( 'CSS Classes', 'elementor' ),
833	783	'type' => Controls_Manager::TEXT,
834	784	'default' => '',
835		- 'ai' => [
836		- 'active' => false,
837		- ],
838	785	'dynamic' => [
839	786	'active' => true,
840	787	],
841	788	'prefix_class' => '',
		@@ -843,11 +790,9 @@
843	790	'classes' => 'elementor-control-direction-ltr',
844	791	]
845	792	);
846	793
847		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
848		-
849		- // TODO: Backward comparability for deprecated controls.
	794	+ // TODO: Backward comparability for deprecated controls
850	795	$this->add_control(
851	796	'screen_sm',
852	797	[
853	798	'type' => Controls_Manager::HIDDEN,
		@@ -863,9 +808,9 @@
863	808	],
864	809	'prefix_class' => 'elementor-sm-',
865	810	]
866	811	);
867		- // END Backward comparability.
	812	+ // END Backward comparability
868	813
869	814	$this->end_controls_section();
870	815
871	816	$this->start_controls_section(
		@@ -875,10 +820,8 @@
875	820	'tab' => Controls_Manager::TAB_ADVANCED,
876	821	]
877	822	);
878	823
879		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
880		-
881	824	$this->add_responsive_control(
882	825	'animation',
883	826	[
884	827	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -933,14 +876,9 @@
933	876
934	877	$this->add_control(
935	878	'responsive_description',
936	879	[
937		- 'raw' => sprintf(
938		- /* translators: 1: Link open tag, 2: Link close tag. */
939		- esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
940		- '<a href="javascript: $e.run( \'panel/close\' )">',
941		- '</a>'
942		- ),
	880	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
943	881	'type' => Controls_Manager::RAW_HTML,
944	882	'content_classes' => 'elementor-descriptor',
945	883	]
946	884	);
		@@ -962,11 +900,17 @@
962	900	* @since 2.9.0
963	901	* @access protected
964	902	*/
965	903	protected function content_template() {
	904	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	905	+ $wrapper_element = $is_dom_optimization_active ? 'widget' : 'column';
	906	+
966	907	?>
967		- <div class="elementor-widget-wrap">
	908	+ <div class="elementor-<?php echo esc_attr( $wrapper_element ); ?>-wrap">
968	909	<div class="elementor-background-overlay"></div>
	910	+ <?php if ( ! $is_dom_optimization_active ) { ?>
	911	+ <div class="elementor-widget-wrap"></div>
	912	+ <?php } ?>
969	913	</div>
970	914	<?php
971	915	}
972	916
		@@ -980,15 +924,15 @@
980	924	*/
981	925	public function before_render() {
982	926	$settings = $this->get_settings_for_display();
983	927
984		- $overlay_background = $settings['background_overlay_background'] ?? '';
985		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	928	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	929	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
986	930
987		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
988		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
	931	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	932	+ $wrapper_attribute_string = $is_dom_optimization_active ? '_widget_wrapper' : '_inner_wrapper';
989	933
990		- $column_wrap_classes = [ 'elementor-widget-wrap' ];
	934	+ $column_wrap_classes = $is_dom_optimization_active ? [ 'elementor-widget-wrap' ] : [ 'elementor-column-wrap' ];
991	935
992	936	if ( $this->get_children() ) {
993	937	$column_wrap_classes[] = 'elementor-element-populated';
994	938	}
		@@ -993,10 +937,13 @@
993	937	$column_wrap_classes[] = 'elementor-element-populated';
994	938	}
995	939
996	940	$this->add_render_attribute( [
	941	+ '_inner_wrapper' => [
	942	+ 'class' => $column_wrap_classes,
	943	+ ],
997	944	'_widget_wrapper' => [
998		- 'class' => $column_wrap_classes,
	945	+ 'class' => $is_dom_optimization_active ? $column_wrap_classes : 'elementor-widget-wrap',
999	946	],
1000	947	'_background_overlay' => [
1001	948	'class' => [ 'elementor-background-overlay' ],
1002	949	],
		@@ -1005,12 +952,15 @@
1005	952	<<?php
1006	953	// PHPCS - the method get_html_tag is safe.
1007	954	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1008	955	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1009		- <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	956	+ <div <?php $this->print_render_attribute_string( $wrapper_attribute_string ); ?>>
1010	957	<?php if ( $has_background_overlay ) : ?>
1011	958	<div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
1012	959	<?php endif; ?>
	960	+ <?php if ( ! $is_dom_optimization_active ) : ?>
	961	+ <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	962	+ <?php endif; ?>
1013	963	<?php
1014	964	}
1015	965
1016	966	/**
		@@ -1021,9 +971,11 @@
1021	971	* @since 1.0.0
1022	972	* @access public
1023	973	*/
1024	974	public function after_render() {
1025		- ?>
	975	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	976	+ </div>
	977	+ <?php } ?>
1026	978	</div>
1027	979	</<?php
1028	980	// PHPCS - the method get_html_tag is safe.
1029	981	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>