@elementor/editor-editing-panel 1.33.0 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,15 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.1",
-    "@elementor/editor-canvas": "0.20.1",
-    "@elementor/editor-controls": "0.28.2",
+    "@elementor/editor-canvas": "0.21.1",
+    "@elementor/editor-controls": "0.29.0",
     "@elementor/editor-current-user": "0.3.2",
     "@elementor/editor-elements": "0.8.2",
     "@elementor/editor-panels": "0.15.1",
     "@elementor/editor-props": "0.12.0",
     "@elementor/editor-responsive": "0.13.4",
     "@elementor/editor-styles": "0.6.6",
-    "@elementor/editor-styles-repository": "0.8.6",
+    "@elementor/editor-styles-repository": "0.8.7",
     "@elementor/editor-ui": "0.8.1",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.40.1",

package/src/components/style-sections/layout-section/display-field.tsx

@@ -5,11 +5,12 @@ import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceField } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
+import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { ControlLabel } from '../../control-label';
 
-type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex';
+type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';
 
-const displayFieldOptions: ToggleButtonGroupItem< Displays >[] = [
+const displayFieldItems: ToggleButtonGroupItem< Displays >[] = [
 	{
 		value: 'block',
 		renderContent: () => __( 'Block', 'elementor' ),
@@ -28,22 +29,35 @@ const displayFieldOptions: ToggleButtonGroupItem< Displays >[] = [
 		label: __( 'Inline-block', 'elementor' ),
 		showTooltip: true,
 	},
-	{
+];
+
+export const DisplayField = () => {
+	const isDisplayNoneFeatureActive = isExperimentActive( 'e_v_3_30' );
+	const items = [ ...displayFieldItems ];
+
+	if ( isDisplayNoneFeatureActive ) {
+		items.push( {
+			value: 'none',
+			renderContent: () => __( 'None', 'elementor' ),
+			label: __( 'None', 'elementor' ),
+			showTooltip: true,
+		} );
+	}
+
+	items.push( {
 		value: 'inline-flex',
 		renderContent: () => __( 'In-flx', 'elementor' ),
 		label: __( 'Inline-flex', 'elementor' ),
 		showTooltip: true,
-	},
-];
+	} );
 
-export const DisplayField = () => {
 	const placeholder = useDisplayPlaceholderValue();
 
 	return (
 		<StylesField bind="display" placeholder={ placeholder }>
 			<Stack gap={ 0.75 }>
 				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
-				<ToggleControl options={ displayFieldOptions } fullWidth={ true } />
+				<ToggleControl options={ items } maxItems={ 4 } fullWidth={ true } />
 			</Stack>
 		</StylesField>
 	);

package/src/components/style-sections/position-section/position-section.tsx

@@ -5,6 +5,7 @@ import { useSessionStorage } from '@elementor/session';
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';
@@ -37,6 +38,7 @@ export const PositionSection = () => {
 	] );
 
 	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
+	const isCssIdFeatureActive = isExperimentActive( 'e_v_3_30' );
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		if ( newPosition === 'static' ) {
@@ -68,8 +70,13 @@ export const PositionSection = () => {
 					<ZIndexField />
 				</>
 			) : null }
-			<PanelDivider />
-			<OffsetField />
+
+			{ isCssIdFeatureActive && (
+				<>
+					<PanelDivider />
+					<OffsetField />
+				</>
+			) }
 		</SectionContent>
 	);
 };

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -20,7 +20,7 @@ export const FontFamilyField = () => {
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Font family', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+				<Grid item xs={ 6 } sx={ { minWidth: 0 } }>
 					<FontFamilyControl fontFamilies={ fontFamilies } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/typography-section/hooks/use-font-families.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { type FontCategory } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
-import { getElementorConfig } from '../../../../sync/get-elementor-config';
+import { getElementorConfig } from '../../../../sync/get-elementor-globals';
 
 const supportedCategories: Record< string, string > = {
 	system: __( 'System', 'elementor' ),

package/src/hooks/use-direction.ts

@@ -1,13 +1,12 @@
 import { useTheme } from '@elementor/ui';
 
-import { type ExtendedWindow } from '../sync/types';
+import { getElementorFrontendConfig } from '../sync/get-elementor-globals';
 
 export function useDirection() {
-	const theme = useTheme(),
-		extendedWindow: ExtendedWindow = window;
+	const theme = useTheme();
 
 	const isUiRtl = 'rtl' === theme.direction,
-		isSiteRtl = !! extendedWindow.elementorFrontend?.config?.is_rtl;
+		isSiteRtl = !! getElementorFrontendConfig()?.is_rtl;
 
 	return { isSiteRtl, isUiRtl };
 }

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
-import { getExperimentsConfig } from '../sync/get-experiments-config';
+import { isExperimentActive } from '../sync/is-experiment-active';
 import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
@@ -41,7 +41,7 @@ export const StylesInheritanceIndicator = () => {
 	const label: string = getLabel( { isFinalValue, hasValue } );
 	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
 
-	const { e_indications_popover: eIndicationsPopover } = getExperimentsConfig();
+	const eIndicationsPopover = isExperimentActive( 'e_indications_popover' );
 
 	if ( ! eIndicationsPopover ) {
 		return <StyleIndicator variant={ variantType } aria-label={ label } />;

package/src/sync/get-elementor-globals.ts

@@ -0,0 +1,19 @@
+import { type ExtendedWindow } from './types';
+
+export const getElementorConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.config ?? {};
+};
+
+export const getElementorFrontendConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementorFrontend?.config ?? {};
+};
+
+export const getElementorCommonConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementorCommon?.config ?? {};
+};

package/src/sync/is-experiment-active.ts

@@ -0,0 +1,7 @@
+import { getElementorCommonConfig } from './get-elementor-globals';
+
+export const isExperimentActive = ( experiment: string ) => {
+	const allFeatures = getElementorCommonConfig()?.experimentalFeatures ?? {};
+
+	return !! allFeatures?.[ experiment ];
+};

package/src/sync/types.ts

@@ -33,9 +33,7 @@ export type ExtendedWindow = Window & {
 	};
 	elementorCommon?: {
 		config?: {
-			experimentalFeatures?: {
-				e_indications_popover?: boolean;
-			};
+			experimentalFeatures?: Record< string, boolean >;
 		};
 	};
 	elementorFrontend?: {

package/src/sync/get-elementor-config.ts

@@ -1,7 +0,0 @@
-import { type ExtendedWindow } from './types';
-
-export const getElementorConfig = () => {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementor?.config ?? {};
-};

package/src/sync/get-experiments-config.ts

@@ -1,7 +0,0 @@
-import { type ExtendedWindow } from './types';
-
-export const getExperimentsConfig = () => {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementorCommon?.config?.experimentalFeatures ?? {};
-};