v4.0.4

core/app/modules/import-export-customization/assets/js/components/kit-content-customization-dialog.js

@@ -446,6 +446,7 @@ export function KitContentCustomizationDialog( {
 				const hasEnabledCustomization = settings.pages.length > 0 || settings.menus || settings.customPostTypes.length > 0 || settings.taxonomies.length > 0 || settings.mediaFormat !== MEDIA_FORMAT_OPTIONS.LINK;
 				const transformedAnalytics = transformAnalyticsData( settings, pageOptions, taxonomyOptions, customPostTypes );
 				handleSaveChanges( 'content', settings, hasEnabledCustomization, transformedAnalytics );
+				handleClose();
 			} }
 		>
 			<Stack sx={ { position: 'relative' } } gap={ 2 }>

core/app/modules/import-export-customization/assets/js/components/kit-customization-dialog.js

@@ -43,10 +43,7 @@ export function KitCustomizationDialog( {
 				</Button>
 				<Button
 					disabled={ saveDisabled }
-					onClick={ () => {
-						handleSaveChanges();
-						handleClose();
-					} }
+					onClick={ handleSaveChanges }
 					variant="contained"
 					color="primary"
 				>

core/app/modules/import-export-customization/assets/js/components/kit-settings-customization-dialog.js

@@ -1,15 +1,38 @@
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import * as PropTypes from 'prop-types';
+import { ClassesVariablesSection } from './classes-variables-section';
+import { KitCustomizationDialog } from './kit-customization-dialog';
+import { OverrideConfirmationDialog } from './override-confirmation-dialog';
 import { SettingSection } from './customization-setting-section';
 import { SubSetting } from './customization-sub-setting';
-import { KitCustomizationDialog } from './kit-customization-dialog';
 import { UpgradeNoticeBanner } from './upgrade-notice-banner';
-import { isHighTier } from '../hooks/use-tier';
 import { UpgradeVersionBanner } from './upgrade-version-banner';
+import { isHighTier } from '../hooks/use-tier';
+import { useClassesVariablesLimits } from '../hooks/use-classes-variables-limits';
 import { transformValueForAnalytics } from '../utils/analytics-transformer';
 
+function isExperimentActive( experimentName ) {
+	return !! elementorCommon?.config?.experimentalFeatures?.[ experimentName ];
+}
+
+function isClassesFeatureActive() {
+	return isExperimentActive( 'e_classes' ) && isExperimentActive( 'e_atomic_elements' );
+}
+
+function isVariablesFeatureActive() {
+	return isExperimentActive( 'e_variables' ) && isExperimentActive( 'e_atomic_elements' );
+}
+
+function isClassesExported( data ) {
+	return !! data?.uploadedData?.manifest?.[ 'site-settings' ]?.classes;
+}
+
+function isVariablesExported( data ) {
+	return !! data?.uploadedData?.manifest?.[ 'site-settings' ]?.variables;
+}
+
 const transformAnalyticsData = ( payload ) => {
 	const transformed = {};
 
@@ -20,6 +43,27 @@ const transformAnalyticsData = ( payload ) => {
 	return transformed;
 };
 
+async function fetchManagerUrl( panelId ) {
+	const baseUrl = window.wpApiSettings?.root || '/wp-json/';
+	const nonce = window.wpApiSettings?.nonce || '';
+
+	const response = await fetch(
+		`${ baseUrl }elementor/v1/import-export-customization/manager-url?panel=${ panelId }`,
+		{
+			headers: {
+				'X-WP-Nonce': nonce,
+			},
+		},
+	);
+
+	if ( ! response.ok ) {
+		throw new Error( 'Failed to fetch manager URL' );
+	}
+
+	const data = await response.json();
+	return data.data?.url || data.url;
+}
+
 export function KitSettingsCustomizationDialog( {
 	open,
 	handleClose,
@@ -29,6 +73,46 @@ export function KitSettingsCustomizationDialog( {
 	isOldExport,
 	isOldElementorVersion,
 } ) {
+	const showClassesSection = useMemo( () => isClassesFeatureActive(), [] );
+	const showVariablesSection = useMemo( () => isVariablesFeatureActive(), [] );
+	const showClassesVariablesSection = showClassesSection || showVariablesSection;
+
+	const classesExportedInManifest = !! data?.uploadedData?.manifest?.[ 'site-settings' ]?.classes;
+	const variablesExportedInManifest = !! data?.uploadedData?.manifest?.[ 'site-settings' ]?.variables;
+
+	const {
+		existingClassesCount,
+		existingVariablesCount,
+		classesLimit,
+		variablesLimit,
+		calculateLimitInfo,
+	} = useClassesVariablesLimits( { open, isImport } );
+
+	const importedClassesCount = data?.uploadedData?.manifest?.[ 'site-settings' ]?.classesCount ?? 0;
+	const importedVariablesCount = data?.uploadedData?.manifest?.[ 'site-settings' ]?.variablesCount ?? 0;
+
+	const classesLimitInfo = useMemo(
+		() => calculateLimitInfo( existingClassesCount, importedClassesCount, classesLimit ),
+		[ existingClassesCount, importedClassesCount, classesLimit, calculateLimitInfo ],
+	);
+
+	const variablesLimitInfo = useMemo(
+		() => calculateLimitInfo( existingVariablesCount, importedVariablesCount, variablesLimit ),
+		[ existingVariablesCount, importedVariablesCount, variablesLimit, calculateLimitInfo ],
+	);
+
+	const classesVariablesInitialState = useMemo( () => {
+		if ( ! showClassesVariablesSection ) {
+			return {};
+		}
+		return {
+			classes: ! isImport || classesExportedInManifest,
+			variables: ! isImport || variablesExportedInManifest,
+			classesOverrideAll: false,
+			variablesOverrideAll: false,
+		};
+	}, [ showClassesVariablesSection, isImport, classesExportedInManifest, variablesExportedInManifest ] );
+
 	const getState = useCallback( ( initialState ) => {
 		if ( ! data.includes.includes( 'settings' ) ) {
 			return {
@@ -41,6 +125,7 @@ export function KitSettingsCustomizationDialog( {
 				customFonts: initialState,
 				customIcons: initialState,
 				customCode: initialState,
+				...( showClassesVariablesSection ? classesVariablesInitialState : {} ),
 			};
 		}
 
@@ -64,6 +149,7 @@ export function KitSettingsCustomizationDialog( {
 				customFonts: isOldExport ? true : manifestData?.customFonts ?? initialState,
 				customIcons: isOldExport ? true : manifestData?.customIcons ?? initialState,
 				customCode: isOldExport ? true : manifestData?.customCode ?? initialState,
+				...( showClassesVariablesSection ? classesVariablesInitialState : {} ),
 			};
 		}
 
@@ -78,8 +164,9 @@ export function KitSettingsCustomizationDialog( {
 			customFonts: customization?.customFonts ?? initialState,
 			customIcons: customization?.customIcons ?? initialState,
 			customCode: customization?.customCode ?? initialState,
+			...( showClassesVariablesSection ? classesVariablesInitialState : {} ),
 		};
-	}, [ data.includes, data?.uploadedData?.manifest, data?.customization?.settings, isImport, isOldExport ] );
+	}, [ data.includes, data?.uploadedData?.manifest, data?.customization?.settings, isImport, isOldExport, showClassesVariablesSection, classesVariablesInitialState ] );
 
 	const initialState = data.includes.includes( 'settings' );
 
@@ -100,7 +187,8 @@ export function KitSettingsCustomizationDialog( {
 				setSettings( state );
 			}
 		}
-	}, [ open, data.customization.settings, data?.uploadedData, initialState, getState ] );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ open ] );
 
 	useEffect( () => {
 		if ( open ) {
@@ -115,125 +203,233 @@ export function KitSettingsCustomizationDialog( {
 		} ) );
 	};
 
+	const handleClassesVariablesChange = ( settingKey, value ) => {
+		setSettings( ( prev ) => ( {
+			...prev,
+			[ settingKey ]: value,
+		} ) );
+	};
+
+	const handleReviewClick = useCallback( async ( panelId ) => {
+		const transformedAnalytics = transformAnalyticsData( settings );
+		handleSaveChanges( 'settings', settings, true, transformedAnalytics );
+		handleClose();
+
+		try {
+			const url = await fetchManagerUrl( panelId );
+			window.open( url, '_blank' );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( `Failed to open ${ panelId }:`, error );
+		}
+	}, [ settings, handleSaveChanges, handleClose ] );
+
+	const handleClassesReviewClick = useCallback( () => {
+		handleReviewClick( 'global-classes-manager' );
+	}, [ handleReviewClick ] );
+
+	const handleVariablesReviewClick = useCallback( () => {
+		handleReviewClick( 'variables-manager' );
+	}, [ handleReviewClick ] );
+
+	const classesNotExported = isImport && ! isClassesExported( data );
+	const variablesNotExported = isImport && ! isVariablesExported( data );
+	const classesVariablesNotExported = classesNotExported && variablesNotExported;
+
+	const classesLimitExceeded = isImport && classesLimitInfo.isExceeded;
+	const variablesLimitExceeded = isImport && variablesLimitInfo.isExceeded;
+	const classesOverLimitCount = classesLimitInfo.overLimitCount;
+	const variablesOverLimitCount = variablesLimitInfo.overLimitCount;
+
+	const [ confirmationDialog, setConfirmationDialog ] = useState( {
+		open: false,
+		type: 'classes',
+	} );
+
+	const performSave = useCallback( () => {
+		const hasEnabledCustomization = settings.theme || settings.globalColors || settings.globalFonts || settings.themeStyleSettings || settings.generalSettings || settings.experiments || settings.customFonts || settings.customIcons || settings.customCode || settings.classes || settings.variables;
+		const transformedAnalytics = transformAnalyticsData( settings );
+		handleSaveChanges( 'settings', settings, hasEnabledCustomization, transformedAnalytics );
+		handleClose();
+	}, [ settings, handleSaveChanges, handleClose ] );
+
+	const handleSaveClick = useCallback( () => {
+		const classesOverrideEnabled = settings.classesOverrideAll && settings.classes;
+		const variablesOverrideEnabled = settings.variablesOverrideAll && settings.variables;
+
+		if ( classesOverrideEnabled && variablesOverrideEnabled ) {
+			setConfirmationDialog( { open: true, type: 'both' } );
+			return;
+		}
+
+		if ( classesOverrideEnabled ) {
+			setConfirmationDialog( { open: true, type: 'classes' } );
+			return;
+		}
+
+		if ( variablesOverrideEnabled ) {
+			setConfirmationDialog( { open: true, type: 'variables' } );
+			return;
+		}
+
+		performSave();
+	}, [ settings, performSave ] );
+
+	const handleConfirmationClose = useCallback( () => {
+		setConfirmationDialog( { open: false, type: '' } );
+	}, [] );
+
+	const handleConfirmationConfirm = useCallback( () => {
+		setConfirmationDialog( { open: false, type: '' } );
+		performSave();
+	}, [ performSave ] );
+
 	return (
-		<KitCustomizationDialog
-			open={ open }
-			title={ __( 'Edit settings & configurations', 'elementor' ) }
-			handleClose={ handleClose }
-			handleSaveChanges={ () => {
-				const hasEnabledCustomization = settings.theme || settings.globalColors || settings.globalFonts || settings.themeStyleSettings || settings.generalSettings || settings.experiments || settings.customFonts || settings.customIcons || settings.customCode;
-				const transformedAnalytics = transformAnalyticsData( settings );
-				handleSaveChanges( 'settings', settings, hasEnabledCustomization, transformedAnalytics );
-			} }
-		>
-			<Stack sx={ { position: 'relative' } } gap={ 2 }>
-				{ isOldElementorVersion && (
-					<UpgradeVersionBanner />
-				) }
-				<Stack>
-					<SettingSection
-						checked={ settings.theme }
-						title={ __( 'Theme', 'elementor' ) }
-						description={ __( 'Only public WordPress themes are supported', 'elementor' ) }
-						settingKey="theme"
-						onSettingChange={ handleToggleChange }
-						notExported={ isImport && ! data?.uploadedData?.manifest.theme }
-					/>
-
-					{ ! isOldExport && (
-						<>
-							<SettingSection
-								title={ __( 'Site settings', 'elementor' ) }
-								hasToggle={ false }
-							>
-								<Stack>
-									<SubSetting
-										label={ __( 'Global colors', 'elementor' ) }
-										settingKey="globalColors"
-										onSettingChange={ handleToggleChange }
-										checked={ settings.globalColors }
-										disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.globalColors ) || ! isHighTier() }
-										tooltip={ ! isHighTier() }
-									/>
-									<SubSetting
-										label={ __( 'Global fonts', 'elementor' ) }
-										settingKey="globalFonts"
-										onSettingChange={ handleToggleChange }
-										checked={ settings.globalFonts }
-										disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.globalFonts ) || ! isHighTier() }
-										tooltip={ ! isHighTier() }
-									/>
-									<SubSetting
-										label={ __( 'Theme style settings', 'elementor' ) }
-										settingKey="themeStyleSettings"
-										onSettingChange={ handleToggleChange }
-										checked={ settings.themeStyleSettings }
-										disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.themeStyleSettings ) || ! isHighTier() }
-										tooltip={ ! isHighTier() }
-									/>
-								</Stack>
-							</SettingSection>
-
-							<SettingSection
-								checked={ settings.generalSettings }
-								title={ __( 'Settings', 'elementor' ) }
-								description={ __( 'Include site identity, background, layout, Lightbox, page transitions, and custom CSS', 'elementor' ) }
-								settingKey="generalSettings"
-								onSettingChange={ handleToggleChange }
-								disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.generalSettings ) || ! isHighTier() }
-								tooltip={ ! isHighTier() }
-							/>
-
-							<SettingSection
-								checked={ settings.experiments }
-								title={ __( 'Experiments', 'elementor' ) }
-								description={ __( 'This will apply all experiments that are still active during import', 'elementor' ) }
-								settingKey="experiments"
-								onSettingChange={ handleToggleChange }
-								disabled={ ( isImport && ! data?.uploadedData?.manifest?.experiments ) || ! isHighTier() }
-								tooltip={ ! isHighTier() }
-							/>
-
-							<SettingSection
-								title={ __( 'Custom files', 'elementor' ) }
-								hasToggle={ false }
-							>
-								<Stack>
-									<SubSetting
-										label={ __( 'Custom fonts', 'elementor' ) }
-										settingKey="customFonts"
-										onSettingChange={ handleToggleChange }
-										checked={ settings.customFonts }
-										disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'custom-fonts' ] ) || ! isHighTier() }
-										tooltip={ ! isHighTier() }
-										notExported={ isImport && ! data?.uploadedData?.manifest?.[ 'custom-fonts' ] }
-									/>
-									<SubSetting
-										label={ __( 'Custom icons', 'elementor' ) }
-										settingKey="customIcons"
-										onSettingChange={ handleToggleChange }
-										checked={ settings.customIcons }
-										disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'custom-icons' ] ) || ! isHighTier() }
-										tooltip={ ! isHighTier() }
-										notExported={ isImport && ! data?.uploadedData?.manifest?.[ 'custom-icons' ] }
-									/>
-									<SubSetting
-										label={ __( 'Custom code', 'elementor' ) }
-										settingKey="customCode"
-										onSettingChange={ handleToggleChange }
-										checked={ settings.customCode }
-										disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'custom-code' ] ) || ! isHighTier() }
-										tooltip={ ! isHighTier() }
-										notExported={ isImport && ! data?.uploadedData?.manifest?.[ 'custom-code' ] }
-									/>
-								</Stack>
-							</SettingSection>
-						</>
+		<>
+			<KitCustomizationDialog
+				open={ open }
+				title={ __( 'Edit settings & configurations', 'elementor' ) }
+				handleClose={ handleClose }
+				handleSaveChanges={ handleSaveClick }
+			>
+				<Stack sx={ { position: 'relative' } } gap={ 2 }>
+					{ isOldElementorVersion && (
+						<UpgradeVersionBanner />
 					) }
+					<Stack>
+						<SettingSection
+							checked={ settings.theme }
+							title={ __( 'Theme', 'elementor' ) }
+							description={ __( 'Only public WordPress themes are supported', 'elementor' ) }
+							settingKey="theme"
+							onSettingChange={ handleToggleChange }
+							notExported={ isImport && ! data?.uploadedData?.manifest.theme }
+						/>
+
+						{ showClassesVariablesSection && (
+							<ClassesVariablesSection
+								settings={ {
+									classes: settings.classes ?? false,
+									variables: settings.variables ?? false,
+									classesOverrideAll: settings.classesOverrideAll ?? false,
+									variablesOverrideAll: settings.variablesOverrideAll ?? false,
+								} }
+								onSettingChange={ handleClassesVariablesChange }
+								isImport={ isImport }
+								classesExported={ ! classesNotExported && showClassesSection }
+								variablesExported={ ! variablesNotExported && showVariablesSection }
+								classesLimitExceeded={ classesLimitExceeded }
+								variablesLimitExceeded={ variablesLimitExceeded }
+								classesOverLimitCount={ classesOverLimitCount }
+								variablesOverLimitCount={ variablesOverLimitCount }
+								onClassesReviewClick={ handleClassesReviewClick }
+								onVariablesReviewClick={ handleVariablesReviewClick }
+								notExported={ classesVariablesNotExported }
+							/>
+						) }
+
+						{ ! isOldExport && (
+							<>
+								<SettingSection
+									title={ __( 'Site settings', 'elementor' ) }
+									hasToggle={ false }
+								>
+									<Stack>
+										<SubSetting
+											label={ __( 'Global colors', 'elementor' ) }
+											settingKey="globalColors"
+											onSettingChange={ handleToggleChange }
+											checked={ settings.globalColors }
+											disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.globalColors ) || ! isHighTier() }
+											tooltip={ ! isHighTier() }
+										/>
+										<SubSetting
+											label={ __( 'Global fonts', 'elementor' ) }
+											settingKey="globalFonts"
+											onSettingChange={ handleToggleChange }
+											checked={ settings.globalFonts }
+											disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.globalFonts ) || ! isHighTier() }
+											tooltip={ ! isHighTier() }
+										/>
+										<SubSetting
+											label={ __( 'Theme style settings', 'elementor' ) }
+											settingKey="themeStyleSettings"
+											onSettingChange={ handleToggleChange }
+											checked={ settings.themeStyleSettings }
+											disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.themeStyleSettings ) || ! isHighTier() }
+											tooltip={ ! isHighTier() }
+										/>
+									</Stack>
+								</SettingSection>
+
+								<SettingSection
+									checked={ settings.generalSettings }
+									title={ __( 'Settings', 'elementor' ) }
+									description={ __( 'Include site identity, background, layout, Lightbox, page transitions, and custom CSS', 'elementor' ) }
+									settingKey="generalSettings"
+									onSettingChange={ handleToggleChange }
+									disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'site-settings' ]?.generalSettings ) || ! isHighTier() }
+									tooltip={ ! isHighTier() }
+								/>
+
+								<SettingSection
+									checked={ settings.experiments }
+									title={ __( 'Experiments', 'elementor' ) }
+									description={ __( 'This will apply all experiments that are still active during import', 'elementor' ) }
+									settingKey="experiments"
+									onSettingChange={ handleToggleChange }
+									disabled={ ( isImport && ! data?.uploadedData?.manifest?.experiments ) || ! isHighTier() }
+									tooltip={ ! isHighTier() }
+								/>
+
+								<SettingSection
+									title={ __( 'Custom files', 'elementor' ) }
+									hasToggle={ false }
+								>
+									<Stack>
+										<SubSetting
+											label={ __( 'Custom fonts', 'elementor' ) }
+											settingKey="customFonts"
+											onSettingChange={ handleToggleChange }
+											checked={ settings.customFonts }
+											disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'custom-fonts' ] ) || ! isHighTier() }
+											tooltip={ ! isHighTier() }
+											notExported={ isImport && ! data?.uploadedData?.manifest?.[ 'custom-fonts' ] }
+										/>
+										<SubSetting
+											label={ __( 'Custom icons', 'elementor' ) }
+											settingKey="customIcons"
+											onSettingChange={ handleToggleChange }
+											checked={ settings.customIcons }
+											disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'custom-icons' ] ) || ! isHighTier() }
+											tooltip={ ! isHighTier() }
+											notExported={ isImport && ! data?.uploadedData?.manifest?.[ 'custom-icons' ] }
+										/>
+										<SubSetting
+											label={ __( 'Custom code', 'elementor' ) }
+											settingKey="customCode"
+											onSettingChange={ handleToggleChange }
+											checked={ settings.customCode }
+											disabled={ ( isImport && ! data?.uploadedData?.manifest?.[ 'custom-code' ] ) || ! isHighTier() }
+											tooltip={ ! isHighTier() }
+											notExported={ isImport && ! data?.uploadedData?.manifest?.[ 'custom-code' ] }
+										/>
+									</Stack>
+								</SettingSection>
+							</>
+						) }
+					</Stack>
+					<UpgradeNoticeBanner />
 				</Stack>
-				<UpgradeNoticeBanner />
-			</Stack>
-		</KitCustomizationDialog>
+			</KitCustomizationDialog>
+
+			<OverrideConfirmationDialog
+				open={ confirmationDialog.open }
+				onClose={ handleConfirmationClose }
+				onConfirm={ handleConfirmationConfirm }
+				type={ confirmationDialog.type }
+			/>
+		</>
 	);
 }
 

core/app/modules/import-export-customization/assets/js/components/kit-templates-customization-dialog.js

@@ -127,6 +127,7 @@ export function KitTemplatesCustomizationDialog( {
 				const hasEnabledCustomization = templates.siteTemplates?.enabled || templates.themeBuilder?.enabled || templates.globalWidgets?.enabled;
 				const transformedAnalytics = transformAnalyticsData( templates );
 				handleSaveChanges( 'templates', templates, hasEnabledCustomization, transformedAnalytics );
+				handleClose();
 			} }
 			minHeight="auto"
 		>

core/app/modules/import-export-customization/assets/js/components/theme-builder-customization.js

@@ -1,29 +1,10 @@
-import { Stack, Box, Typography, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Radio, FormControlLabel, Link, SvgIcon, Alert, AlertTitle } from '@elementor/ui';
+import { ExternalLinkIcon } from '@elementor/icons';
+import { Stack, Box, Typography, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Radio, FormControlLabel, Link, Alert, AlertTitle } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from 'react';
 import * as PropTypes from 'prop-types';
 import { UpgradeTooltip } from './upgrade-tooltip';
 
-const ExternalLinkIcon = ( props ) => {
-	return (
-		<SvgIcon
-			viewBox="0 0 18 18"
-			sx={ {
-				fontSize: 16,
-				color: 'info.light',
-			} }
-			{ ...props }
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M11 1C11 0.585786 11.3358 0.25 11.75 0.25H16.75C17.1642 0.25 17.5 0.585786 17.5 1V6C17.5 6.41421 17.1642 6.75 16.75 6.75C16.3358 6.75 16 6.41421 16 6V2.81066L7.28033 11.5303C6.98744 11.8232 6.51256 11.8232 6.21967 11.5303C5.92678 11.2374 5.92678 10.7626 6.21967 10.4697L14.9393 1.75H11.75C11.3358 1.75 11 1.41421 11 1ZM0.805456 4.05546C1.32118 3.53973 2.02065 3.25 2.75 3.25H7.75C8.16421 3.25 8.5 3.58579 8.5 4C8.5 4.41421 8.16421 4.75 7.75 4.75H2.75C2.41848 4.75 2.10054 4.8817 1.86612 5.11612C1.6317 5.35054 1.5 5.66848 1.5 6V15C1.5 15.3315 1.6317 15.6495 1.86612 15.8839C2.10054 16.1183 2.41848 16.25 2.75 16.25H11.75C12.0815 16.25 12.3995 16.1183 12.6339 15.8839C12.8683 15.6495 13 15.3315 13 15V10C13 9.58579 13.3358 9.25 13.75 9.25C14.1642 9.25 14.5 9.58579 14.5 10V15C14.5 15.7293 14.2103 16.4288 13.6945 16.9445C13.1788 17.4603 12.4793 17.75 11.75 17.75H2.75C2.02065 17.75 1.32118 17.4603 0.805456 16.9445C0.289731 16.4288 0 15.7293 0 15V6C0 5.27065 0.289731 4.57118 0.805456 4.05546Z"
-				fill="currentColor"
-			/>
-		</SvgIcon>
-	);
-};
-
 export function ThemeBuilderCustomization( { state, settingKey, onStateChange, data, disabled, tooltip = false } ) {
 	const isImport = data.hasOwnProperty( 'uploadedData' );
 

core/app/modules/import-export-customization/module.php

@@ -13,14 +13,12 @@ class Module extends BaseModule {
 
 	private $export_runners = [
 		'site-settings' => Export\Site_Settings::class,
-		'plugins' => Export\Plugins::class,
 		'templates' => Export\Templates::class,
 		'taxonomies' => Export\Taxonomies::class,
 	];
 
 	private $import_runners = [
 		'site-settings' => Import\Site_Settings::class,
-		'plugins' => Import\Plugins::class,
 		'templates' => Import\Templates::class,
 		'taxonomies' => Import\Taxonomies::class,
 		'elementor-content' => Import\Elementor_Content::class,
@@ -36,12 +34,16 @@ class Module extends BaseModule {
 	}
 
 	private function add_actions() {
-		add_filter( 'elementor/import-export-customization/export/site-settings/customization', [ $this, 'export_site_settings_customization' ], 10, 4 );
-		add_filter( 'elementor/import-export-customization/import/site-settings/customization', [ $this, 'import_site_settings_customization' ], 10, 5 );
+		if ( ! Utils::is_high_tier() ) {
+			return;
+		}
 
 		add_filter( 'elementor/import-export-customization/export/templates/customization', [ $this, 'export_templates_customization' ], 10, 4 );
 		add_filter( 'elementor/import-export-customization/import/templates/customization', [ $this, 'import_templates_customization' ], 10, 5 );
 
+		add_filter( 'elementor/import-export-customization/export/site-settings/customization', [ $this, 'export_site_settings_customization' ], 10, 4 );
+		add_filter( 'elementor/import-export-customization/import/site-settings/customization', [ $this, 'import_site_settings_customization' ], 10, 5 );
+
 		add_filter( 'elementor/import-export-customization/export/taxonomies/customization', [ $this, 'export_taxonomies_customization' ], 10, 4 );
 		add_filter( 'elementor/import-export-customization/import/taxonomies/customization', [ $this, 'import_taxonomies_customization' ], 10, 5 );
 

core/app/modules/import-export-customization/runners/export/site-settings.php

@@ -62,6 +62,24 @@ class Site_Settings extends Export_Runner_Base {
 			}
 		}
 
+		if ( method_exists( $runner, 'is_classes_feature_active' ) && $runner->is_classes_feature_active() ) {
+			$include_classes = $customization['classes'] ?? false;
+			$classes_count = method_exists( $runner, 'get_classes_count' ) ? $runner->get_classes_count() : 0;
+			$manifest_data['site-settings']['classes'] = (bool) $include_classes;
+			$manifest_data['site-settings']['classesCount'] = $include_classes ? $classes_count : 0;
+		} else {
+			unset( $manifest_data['site-settings']['classes'] );
+		}
+
+		if ( method_exists( $runner, 'is_variables_feature_active' ) && $runner->is_variables_feature_active() ) {
+			$include_variables = $customization['variables'] ?? false;
+			$variables_count = method_exists( $runner, 'get_variables_count' ) ? $runner->get_variables_count() : 0;
+			$manifest_data['site-settings']['variables'] = (bool) $include_variables;
+			$manifest_data['site-settings']['variablesCount'] = $include_variables ? $variables_count : 0;
+		} else {
+			unset( $manifest_data['site-settings']['variables'] );
+		}
+
 		return [
 			'files' => [
 				'path' => 'site-settings',

core/app/modules/import-export-customization/runners/traits/site-settings-helpers.php

@@ -22,6 +22,8 @@ trait Site_Settings_Helpers {
 			'customCode',
 			'customIcons',
 			'customFonts',
+			'classes',
+			'variables',
 		];
 	}