Internal: Improve wrapper handling in repeater widgets [ED-20358]

.github/workflows/performance-check.yml

@@ -21,10 +21,6 @@ jobs:
     uses: ./.github/workflows/build.yml
 
   compare-v4-to-v3:
-    # NOTE: This workflow is temporarily disabled due to PR #33167 causing performance check failures.
-    # To re-enable: Remove the 'if: false' condition below.
-    # Task: https://elementor.atlassian.net/browse/ED-21486
-    if: false
     name: Compare V4 to V3
     runs-on: ubuntu-24.04
     needs: [build-plugin]

.grunt-config/webpack.js

@@ -158,7 +158,8 @@ const frontendEntries = {
 	'frontend-modules': path.resolve( __dirname, '../assets/dev/js/frontend/modules.js' ),
 	'frontend': { import: path.resolve( __dirname, '../assets/dev/js/frontend/frontend.js' ), dependOn: 'frontend-modules' },
 	'youtube-handler': path.resolve( __dirname, '../modules/atomic-widgets/elements/atomic-youtube/youtube-handler.js' ),
-	'tabs-handler': path.resolve( __dirname, '../modules/atomic-widgets/elements/atomic-tabs/atomic-tabs-handler.js' ),
+	'tabs-handler': path.resolve( __dirname, '../modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-handler.js' ),
+	'tabs-preview-handler': path.resolve( __dirname, '../modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js' ),
 };
 
 const externals = [

app/assets/js/_app-api.scss

@@ -2,15 +2,15 @@
 // - local tokens mapped to EPS global tokens
 
 $app-background-color: $eps-theme-light;
-$app-font-size: type(text, base);
+$app-font-size: get-type(text, base);
 $app-box-shadow-color: $eps-box-shadow-size-3;
 $app-radius: 0;
 $app-max-width: 100%;
 
 $app-header-box-shadow: $eps-box-shadow-2;
 $app-header-height: px-to-rem(50);
 $app-header-color: tints(800);
-$app-header-font-size: type(size, "15");
+$app-header-font-size: get-type(size, "15");
 $app-header-padding-inline: spacing(16);
 $app-header-padding-block: 0;
 $app-header-z-index: 3;
@@ -35,14 +35,14 @@ $app-logo-margin-inline-end: spacing(10);
 $app-header-buttons-separator-color: tints(300);
 $app-header-buttons-color: tints(600);
 $app-header-buttons-color-hover: tints(900);
-$app-header-buttons-font-size: type(size, "18");
+$app-header-buttons-font-size: get-type(size, "18");
 
 $app-header-btn-padding-inline: spacing(16);
 
-$app-header-btn-font-size: type(size, "18");
+$app-header-btn-font-size: get-type(size, "18");
 $app-header-btn-line-height: spacing(20);
 
-$app-title-font-size: type(text, lg);
+$app-title-font-size: get-type(text, lg);
 $app-title-font-weight: $eps-font-weight-bold;
 
 $app-content-padding: spacing(44);

app/assets/js/molecules/collapse.scss

@@ -18,7 +18,7 @@ $root: e-app-collapse;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			font-size: type(size, "14");
+			font-size: get-type(size, "14");
 			position: absolute;
 			inset-block-start: 50%;
 			inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);

app/assets/js/ui/card/card-api.scss

@@ -8,8 +8,8 @@ $card-background-color-hover: theme-colors(light);
 $card-border: $eps-border-width $eps-border-style tints(100);
 $card-border-radius: $eps-radius;
 $card-transition: $eps-transition-duration;
-$card-font-size: type(text,xs);
-$card-footer-font-size: type(text,xxs);
+$card-font-size: get-type(text,xs);
+$card-footer-font-size: get-type(text,xxs);
 $card-padding: spacing(10);
 
 $card-header-padding: $card-padding;

app/assets/js/ui/dialog/dialog.scss

@@ -9,13 +9,13 @@
 		margin-block-start: spacing(10);
 		margin-inline-end: spacing(10);
 		z-index: $eps-zindex-modal;
-		font-size: type(size, "20");
+		font-size: get-type(size, "20");
 		color: theme-colors(light);
 	}
 
 	&__content {
 		padding: spacing(24) spacing(30) spacing(16);
-		font-size: type(text, xs);
+		font-size: get-type(text, xs);
 	}
 
 	&__title, &__text {

app/assets/js/ui/menu/menu.scss

@@ -1,5 +1,5 @@
-$menu-title-font-size: type(text,xxs);
-$menu-title-line-height: type(line-height,sm);
+$menu-title-font-size: get-type(text,xxs);
+$menu-title-line-height: get-type(line-height,sm);
 $menu-title-padding-block: spacing(8);
 $menu-title-padding-inline: spacing(30);
 $menu-item-height: spacing(44);

app/assets/js/ui/modal/modal.scss

@@ -3,7 +3,7 @@ $eps-modal-width: px-to-rem(700);
 $eps-modal-border-radius: $eps-radius;
 $eps-modal-overlay: rgba(theme-colors(dark), $opacity-05);
 $eps-modal-zindex: $eps-zindex-modal-backdrop;
-$eps-modal-header-type: type(text, md);
+$eps-modal-header-type: get-type(text, md);
 $eps-modal-header-background-color: theme-colors(info);
 $eps-modal-header-color: theme-colors(light);
 $eps-modal-header-height: spacing(44);

app/assets/js/ui/molecules/buttons-api.scss

@@ -8,10 +8,10 @@ $button-hover-constant: 10%;
 $button-active-constant: 20%;
 // sizing
 // -- sm
-$button-sm-font-size: type(text,xs);
+$button-sm-font-size: get-type(text,xs);
 $button-sm-line-height: 14px;
 // --lg
-$button-lg-font-size: type(text,lg);
+$button-lg-font-size: get-type(text,lg);
 $button-lg-line-height: 18px;
 //Semantic Colors
 $button-primary-background-color: theme-colors(accent);

app/assets/js/ui/molecules/notice.scss

@@ -29,7 +29,7 @@ $root: eps-notice;
 
 		#{$parent}__icon {
 			color: var(--eps-notice-semantic-color);
-			font-size: type(text,xl);
+			font-size: get-type(text,xl);
 			margin-inline-end: spacing(12);
 		}
 	}

app/assets/js/ui/molecules/popover-api.scss

@@ -8,8 +8,8 @@ $eps-popover-arrow-height: 9px;
 $eps-popover-arrow-position-start: 14px;
 $eps-popover-box-shadow-color: rgba(0, 0, 0, 0.15);
 $eps-popover-box-shadow-size: 0px 1px 20px; // add to globals
-$eps-popover-item-font-size: type(size, "11");
-$eps-popover-item-line-height: type(size, "13"); //todo: refactor
+$eps-popover-item-font-size: get-type(size, "11");
+$eps-popover-item-line-height: get-type(size, "13"); //todo: refactor
 $eps-popover-font-weight: $eps-font-weight-medium;
 $eps-popover-item-spacing-y: spacing(5);
 $eps-popover-item-spacing-x: spacing(16);

app/assets/styles/tokens/_map-functions.scss

@@ -17,7 +17,7 @@
 	@return map-deep-get($eps-theme-elements-colors, $keys...);
 }
 
-@function type($keys...) {
+@function get-type($keys...) {
 	@return map-deep-get($eps-type-map, $keys...);
 }
 

app/modules/import-export-customization/assets/js/import/hooks/use-import-kit.js

@@ -76,7 +76,10 @@ export function useImportKit( { data, includes, customization, isProcessing, dis
 		}
 
 		setImportStatus( IMPORT_PROCESSING_STATUS.DONE );
-		dispatch( { type: 'SET_IMPORT_STATUS', payload: IMPORT_STATUS.COMPLETED } );
+
+		if ( ! stopIterations ) {
+			dispatch( { type: 'SET_IMPORT_STATUS', payload: IMPORT_STATUS.COMPLETED } );
+		}
 	};
 
 	async function importKit() {

app/modules/import-export-customization/assets/js/shared/components/error/processing-error-dialog.js

@@ -194,7 +194,7 @@ export function ProcessingErrorDialog( {
 } ) {
 	const [ open, setOpen ] = useState( Boolean( error ) );
 	const errorType = error?.code || 'general';
-	const errorMessageContent = messagesContent[ errorType ];
+	const errorMessageContent = messagesContent[ errorType ] ?? messagesContent.general;
 
 	const resolveText = () => {
 		const details = error?.details || error?.message;
@@ -223,6 +223,7 @@ export function ProcessingErrorDialog( {
 			'insufficient-quota',
 			'error-loading-resource',
 			'media-processing-error',
+			'import-runner-error',
 		].includes( errorType );
 	};
 

app/modules/import-export-customization/data/routes/import-runner.php

@@ -53,7 +53,7 @@ protected function callback( $request ): \WP_REST_Response {
 
 			return Response::success( $import );
 
-		} catch ( \Error $e ) {
+		} catch ( \Error | \Exception $e ) {
 			Plugin::$instance->logger->get_logger()->error( $e->getMessage(), [
 				'meta' => [
 					'trace' => $e->getTraceAsString(),
@@ -64,7 +64,7 @@ protected function callback( $request ): \WP_REST_Response {
 				return Response::error( ImportExportCustomizationModule::THIRD_PARTY_ERROR, $e->getMessage() );
 			}
 
-			return Response::error( $e->getMessage(), 'import_runner_error' );
+			return Response::error( 'import-runner-error', $e->getMessage() );
 		}
 	}
 

app/modules/import-export-customization/data/routes/import.php

@@ -47,7 +47,7 @@ protected function callback( $request ): \WP_REST_Response {
 
 			return Response::success( $import );
 
-		} catch ( \Error $e ) {
+		} catch ( \Error | \Exception $e ) {
 			Plugin::$instance->logger->get_logger()->error( $e->getMessage(), [
 				'meta' => [
 					'trace' => $e->getTraceAsString(),

app/modules/import-export-customization/data/routes/upload.php

@@ -109,7 +109,7 @@ protected function callback( $request ): \WP_REST_Response {
 
 			return Response::success( $result );
 
-		} catch ( \Error $e ) {
+		} catch ( \Error | \Exception $e ) {
 			Plugin::$instance->logger->get_logger()->error( $e->getMessage(), [
 				'meta' => [
 					'trace' => $e->getTraceAsString(),

app/modules/import-export-customization/wp-cli.php

@@ -58,7 +58,7 @@ public function export( $args, $assoc_args ) {
 			$result = $import_export_module->export_kit( $export_settings );
 
 			rename( $result['file_name'], $args[0] );
-		} catch ( \Error $error ) {
+		} catch ( \Error | \Exception $error ) {
 			\WP_CLI::error( $error->getMessage() );
 		}
 
@@ -185,7 +185,7 @@ public function import( array $args, array $assoc_args ) {
 			}
 
 			\WP_CLI::success( 'Kit imported successfully' );
-		} catch ( \Error $error ) {
+		} catch ( \Error | \Exception $error ) {
 			Plugin::$instance->logger->get_logger()->error( $error->getMessage(), [
 				'meta' => [
 					'trace' => $error->getTraceAsString(),
@@ -215,7 +215,7 @@ public function revert() {
 			$import_export_module = Plugin::$instance->app->get_component( 'import-export' );
 			$import_export_module->revert_last_imported_kit();
 
-		} catch ( \Error $error ) {
+		} catch ( \Error | \Exception $error ) {
 			\WP_CLI::error( $error->getMessage() );
 		}
 

app/modules/import-export/assets/js/ui/loader/loader.scss

@@ -10,7 +10,7 @@ $root: e-app-import-export-loader;
 	font-size: 50px;
 
 	&.eicon-loading {
-		font-size: type( size, '30' );
+		font-size: get-type( size, '30' );
 	}
 
 	&--absolute-center {

app/modules/import-export/assets/js/ui/wizard-step/wizard-step.scss

@@ -26,7 +26,7 @@ $root: e-app-import-export-wizard-step;
 		font-size: 50px;
 
 		&.eicon-loading {
-			font-size: type( size, '30' );
+			font-size: get-type( size, '30' );
 		}
 	}
 

app/modules/kit-library/assets/js/components/badge.scss

@@ -10,15 +10,15 @@
 	display: inline-block;
 	background: var(--eps-badge-background-color);
 	padding: 0 spacing(8);
-	line-height: type(line-height, lg);
+	line-height: get-type(line-height, lg);
 	box-shadow: shadow("1");
 	border-radius: 4px;
-	font-size: type(size, "12");
+	font-size: get-type(size, "12");
 
 	&--sm {
-		font-size: type(size, '10');
+		font-size: get-type(size, '10');
 		border-radius: 3px;
 		padding: 0 spacing(5);
-		line-height: type(line-height, base);
+		line-height: get-type(line-height, base);
 	}
 }

app/modules/kit-library/assets/js/components/filter-indication-text.scss

@@ -17,7 +17,7 @@
 
 	&-badge-remove {
 		margin-inline-start: spacing(5);
-		font-size: type( size, "14" )
+		font-size: get-type( size, "14" )
 	}
 
 	&-button {

app/modules/kit-library/assets/js/components/page-loader.scss

@@ -3,6 +3,6 @@
 	height: 100%;
 	display: grid;
 	place-items: center;
-	font-size: type( size, '30' );
+	font-size: get-type( size, '30' );
 	color: tints( 500 );
 }

app/modules/kit-library/assets/js/components/search-input.scss

@@ -18,17 +18,17 @@ $root: eps-search-input;
 
 .eps-search-input {
 	width: 100%;
-	font-size: type(size, "15");
+	font-size: get-type(size, "15");
 	padding: spacing(10) spacing(44);
 	border: none;
 	background: var(--eps-search-input-background-color);
 	outline: none;
 	color: var(--eps-search-input-color);
-	line-height: type( line-height, 'flat' );
+	line-height: get-type( line-height, 'flat' );
 	height: spacing(44);
 
 	&--sm {
-		font-size: type(size, "13");
+		font-size: get-type(size, "13");
 		padding: spacing(8) spacing(30);
 	}
 
@@ -46,7 +46,7 @@ $root: eps-search-input;
 	}
 
 	&__icon {
-		font-size: type(size, "20");
+		font-size: get-type(size, "20");
 		padding: spacing(10);
 		color: tints(500);
 		position: absolute;
@@ -58,12 +58,12 @@ $root: eps-search-input;
 		justify-content: center;
 
 		&--sm {
-			font-size: type(size, "12");
+			font-size: get-type(size, "12");
 		}
 	}
 
 	&__clear-icon {
-		font-size: type(size, "14");
+		font-size: get-type(size, "14");
 		padding: spacing(10);
 		color: tints(500);
 		position: absolute;
@@ -75,7 +75,7 @@ $root: eps-search-input;
 		justify-content: center;
 
 		&--sm {
-			font-size: type(size, "11");
+			font-size: get-type(size, "11");
 		}
 	}
 }

app/modules/kit-library/assets/js/components/sort-select.scss

@@ -14,7 +14,7 @@
 
 .eps-sort-select {
 	width: 100%;
-	font-size: type(size, "15");
+	font-size: get-type(size, "15");
 	display: flex;
 
 	&__select-wrapper {
@@ -42,7 +42,7 @@
 		background: var(--eps-sort-select-select-background-color);
 		outline: none;
 		color: var(--eps-sort-select-select-color);
-		line-height: type( line-height, 'flat' );
+		line-height: get-type( line-height, 'flat' );
 		cursor: pointer;
 		height: spacing(44);
 		appearance: none;
@@ -54,7 +54,7 @@
 		padding: spacing(12) spacing(12);
 		background: var(--eps-sort-select-button-background-color);
 		border-inline-start: var(--eps-sort-select-button-border);
-		line-height: type( line-height, 'flat' );
+		line-height: get-type( line-height, 'flat' );
 		color: tints(500);
 	}
 }

app/modules/kit-library/assets/js/pages/overview/overview-sidebar.scss

@@ -51,7 +51,7 @@
 	}
 
 	&__item-information-text {
-		font-size: type(size, "13");
+		font-size: get-type(size, "13");
 		color: var(--e-kit-library-item-information-text-color);
 		margin-block-end: spacing(5);
 	}