@elementor/editor-editing-panel 1.33.1 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.33.1",
+  "version": "1.35.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.1",
-    "@elementor/editor-canvas": "0.21.0",
-    "@elementor/editor-controls": "0.28.2",
+    "@elementor/editor": "0.19.2",
+    "@elementor/editor-canvas": "0.21.2",
+    "@elementor/editor-controls": "0.30.0",
     "@elementor/editor-current-user": "0.3.2",
     "@elementor/editor-elements": "0.8.2",
-    "@elementor/editor-panels": "0.15.1",
+    "@elementor/editor-panels": "0.15.2",
     "@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",
-    "@elementor/locations": "0.7.7",
-    "@elementor/menus": "0.1.4",
+    "@elementor/locations": "0.8.0",
+    "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.34.2",

package/src/components/editing-panel-tabs.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
+import { useStateByElement } from '../hooks/use-state-by-element';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
@@ -12,30 +13,46 @@ type TabValue = 'settings' | 'style';
 
 export const EditingPanelTabs = () => {
 	const { element } = useElement();
-
-	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );
-
 	return (
 		// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
-			<ScrollProvider>
-				<Stack direction="column" sx={ { width: '100%' } }>
-					<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
-						<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
-							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-							<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-						</Tabs>
-						<Divider />
-					</Stack>
-					<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-						<SettingsTab />
-					</TabPanel>
-					<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-						<StyleTab />
-					</TabPanel>
-				</Stack>
-			</ScrollProvider>
+			<PanelTabContent />
 		</Fragment>
 	);
 };
+
+const PanelTabContent = () => {
+	const defaultComponentTab = 'settings';
+
+	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
+	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );
+	return (
+		<ScrollProvider>
+			<Stack direction="column" sx={ { width: '100%' } }>
+				<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
+					<Tabs
+						variant="fullWidth"
+						size="small"
+						sx={ { mt: 0.5 } }
+						{ ...getTabsProps() }
+						onChange={ ( _: unknown, newValue: TabValue ) => {
+							getTabsProps().onChange( _, newValue );
+							setCurrentTab( newValue );
+						} }
+					>
+						<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+						<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+					</Tabs>
+					<Divider />
+				</Stack>
+				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+					<SettingsTab />
+				</TabPanel>
+				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+					<StyleTab />
+				</TabPanel>
+			</Stack>
+		</ScrollProvider>
+	);
+};

package/src/components/section.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { type PropsWithChildren, useId, useState } from 'react';
+import { type PropsWithChildren, useId } from 'react';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
+import { useStateByElement } from '../hooks/use-state-by-element';
 import { CollapseIcon } from './collapse-icon';
 
 type Props = PropsWithChildren< {
@@ -10,7 +11,7 @@ type Props = PropsWithChildren< {
 } >;
 
 export function Section( { title, children, defaultExpanded = false }: Props ) {
-	const [ isOpen, setIsOpen ] = useState( !! defaultExpanded );
+	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 
 	const id = useId();
 	const labelId = `label-${ id }`;
@@ -21,7 +22,7 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
-				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+				onClick={ () => setIsOpen( ! isOpen ) }
 				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
 				<ListItemText

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,7 +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 { getExperimentsConfig } from '../../../sync/get-experiments-config';
+import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';
@@ -38,7 +38,7 @@ export const PositionSection = () => {
 	] );
 
 	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
-	const { e_css_id: eCssId } = getExperimentsConfig();
+	const isCssIdFeatureActive = isExperimentActive( 'e_v_3_30' );
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		if ( newPosition === 'static' ) {
@@ -71,7 +71,7 @@ export const PositionSection = () => {
 				</>
 			) : null }
 
-			{ eCssId && (
+			{ isCssIdFeatureActive && (
 				<>
 					<PanelDivider />
 					<OffsetField />

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/hooks/use-state-by-element.ts

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
+
+import { useElement } from '../contexts/element-context';
+
+export const useStateByElement = < T >( key: string, initialValue: T ) => {
+	const { element } = useElement();
+	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
+	const storedValue = getSessionStorageItem< T >( lookup );
+	const [ value, setValue ] = useState( storedValue ?? initialValue );
+
+	const doUpdate = ( newValue: T ) => {
+		setSessionStorageItem( lookup, newValue );
+		setValue( newValue );
+	};
+
+	return [ value, doUpdate ] as const;
+};

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,10 +33,7 @@ export type ExtendedWindow = Window & {
 	};
 	elementorCommon?: {
 		config?: {
-			experimentalFeatures?: {
-				e_indications_popover?: boolean;
-				e_css_id?: 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 ?? {};
-};