@elementor/editor-editing-panel 1.32.0 → 1.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.32.0",
+  "version": "1.33.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,15 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.1",
-    "@elementor/editor-canvas": "0.20.0",
-    "@elementor/editor-controls": "0.28.1",
-    "@elementor/editor-current-user": "0.3.1",
-    "@elementor/editor-elements": "0.8.1",
+    "@elementor/editor-canvas": "0.21.0",
+    "@elementor/editor-controls": "0.28.2",
+    "@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.5",
+    "@elementor/editor-styles-repository": "0.8.6",
     "@elementor/editor-ui": "0.8.1",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.40.1",

package/src/components/settings-tab.tsx

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
 import { SessionStorageProvider } from '@elementor/session';
+import { Divider } from '@elementor/ui';
 
 import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import { type ControlType, getControlByType } from '../controls-registry/controls-registry';
+import { type ControlType, getControl, getDefaultLayout } from '../controls-registry/controls-registry';
 import { SettingsField } from '../controls-registry/settings-field';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -45,13 +46,16 @@ export const SettingsTab = () => {
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControlByType( control.type as ControlType ) ) {
+	if ( ! getControl( control.type as ControlType ) ) {
 		return null;
 	}
 
+	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
+
 	return (
 		<SettingsField bind={ control.bind }>
-			<ControlTypeContainer controlType={ control.type as ControlType }>
+			{ control.meta?.topDivider && <Divider /> }
+			<ControlTypeContainer layout={ layout }>
 				{ control.label ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
 				<BaseControl type={ control.type as ControlType } props={ control.props } />
 			</ControlTypeContainer>

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 { getExperimentsConfig } from '../../../sync/get-experiments-config';
 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 { e_css_id: eCssId } = getExperimentsConfig();
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		if ( newPosition === 'static' ) {
@@ -68,8 +70,13 @@ export const PositionSection = () => {
 					<ZIndexField />
 				</>
 			) : null }
-			<PanelDivider />
-			<OffsetField />
+
+			{ eCssId && (
+				<>
+					<PanelDivider />
+					<OffsetField />
+				</>
+			) }
 		</SectionContent>
 	);
 };

package/src/controls-registry/control-type-container.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
+import { type ControlLayout } from '@elementor/editor-elements';
 import { Box, type BoxProps, styled } from '@elementor/ui';
 
-import { type ControlLayout, type ControlType, getLayoutByType } from './controls-registry';
-
-export const ControlTypeContainer = ( {
-	controlType,
-	children,
-}: React.PropsWithChildren< { controlType: ControlType } > ) => {
-	const layout = getLayoutByType( controlType );
-
+export const ControlTypeContainer = ( { children, layout }: React.PropsWithChildren< { layout?: ControlLayout } > ) => {
 	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
 };
 

package/src/controls-registry/control.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 
 import { useElement } from '../contexts/element-context';
 import { ControlTypeNotFoundError } from '../errors';
-import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
+import { type ControlType, type ControlTypes, getControl } from './controls-registry';
 
 type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
 
@@ -24,7 +24,7 @@ type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps
 	  };
 
 export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
-	const ControlByType = getControlByType( type );
+	const ControlByType = getControl( type );
 	const { element } = useElement();
 
 	if ( ! ControlByType ) {

package/src/controls-registry/controls-registry.tsx

@@ -9,8 +9,7 @@ import {
 	TextControl,
 	UrlControl,
 } from '@elementor/editor-controls';
-
-export type ControlLayout = 'full' | 'two-columns';
+import { type ControlLayout } from '@elementor/editor-elements';
 
 type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
 
@@ -31,6 +30,6 @@ export type ControlTypes = {
 	[ key in ControlType ]: ( typeof controlTypes )[ key ][ 'component' ];
 };
 
-export const getControlByType = ( type: ControlType ) => controlTypes[ type ]?.component;
+export const getControl = ( type: ControlType ) => controlTypes[ type ]?.component;
 
-export const getLayoutByType = ( type: ControlType ) => controlTypes[ type ].layout;
+export const getDefaultLayout = ( type: ControlType ) => controlTypes[ type ].layout;

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
 
 import { PopoverContent } from '../../components/popover-content';
 import { Control as BaseControl } from '../../controls-registry/control';
-import { type ControlType, getControlByType } from '../../controls-registry/controls-registry';
+import { type ControlType, getControl } from '../../controls-registry/controls-registry';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
@@ -167,7 +167,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControlByType( control.type as ControlType ) ) {
+	if ( ! getControl( control.type as ControlType ) ) {
 		return null;
 	}
 

package/src/sync/types.ts

@@ -35,6 +35,7 @@ export type ExtendedWindow = Window & {
 		config?: {
 			experimentalFeatures?: {
 				e_indications_popover?: boolean;
+				e_css_id?: boolean;
 			};
 		};
 	};