@elementor/editor-editing-panel 1.4.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.3.1",
-    "@elementor/editor-elements": "0.3.3",
+    "@elementor/editor-controls": "0.4.0",
+    "@elementor/editor-elements": "0.3.4",
     "@elementor/menus": "0.1.2",
     "@elementor/editor-props": "0.5.0",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
     "@elementor/editor-styles": "0.3.2",
-    "@elementor/editor-styles-repository": "0.2.0",
+    "@elementor/editor-styles-repository": "0.3.1",
     "@elementor/editor-v1-adapters": "0.8.5",
     "@elementor/icons": "^1.20.0",
     "@elementor/schema": "0.1.2",

package/src/components/conditional-tooltip-wrapper.tsx

@@ -32,21 +32,27 @@ export const ConditionalTooltipWrapper = ( { maxWidth, title }: ConditionalToolt
 	if ( isOverflown ) {
 		return (
 			<Tooltip title={ title } placement="top">
-				<Content maxWidth={ maxWidth } ref={ elRef } title={ title } />
+				<Content maxWidth={ maxWidth } ref={ elRef }>
+					{ title }
+				</Content>
 			</Tooltip>
 		);
 	}
 
-	return <Content maxWidth={ maxWidth } ref={ elRef } title={ title } />;
+	return (
+		<Content maxWidth={ maxWidth } ref={ elRef }>
+			{ title }
+		</Content>
+	);
 };
 
-const Content = React.forwardRef( ( { maxWidth, title, ...rest }: ConditionalTooltipWrapperProps, ref ) => (
+type ContentProps = React.PropsWithChildren< Omit< ConditionalTooltipWrapperProps, 'title' > >;
+
+const Content = React.forwardRef( ( { maxWidth, ...tooltipProps }: ContentProps, ref ) => (
 	<Box
 		ref={ ref }
 		position="relative"
 		sx={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }
-		{ ...rest }
-	>
-		{ title }
-	</Box>
+		{ ...tooltipProps }
+	/>
 ) );

package/src/components/css-class-selector.tsx

@@ -102,9 +102,7 @@ function useOptions() {
 }
 
 function useAppliedOptions( options: Option[], appliedIds: StyleDefinitionID[] ) {
-	const applied = appliedIds
-		.map( ( id ) => options.find( ( option ) => option.value === id ) )
-		.filter( ( option ) => !! option );
+	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = applied.some(
 		( option ) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY

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

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { BackgroundOverlayRepeaterControl } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
+import { BackgroundControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { BackgroundColorField } from './background-color-field';
 
 export const BackgroundSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
-			<StylesField bind="background-image">
-				<BackgroundOverlayRepeaterControl />
-			</StylesField>
-			<BackgroundColorField />
-		</Stack>
+		<StylesField bind="background">
+			<BackgroundControl />
+		</StylesField>
 	);
 };

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

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
+import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useElement } from '../../../contexts/element-context';
+import { useComputedStyle } from '../../../hooks/use-computed-style';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
@@ -17,11 +20,15 @@ import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
 	const [ display ] = useStylesField< StringPropValue >( 'display' );
+	const { element } = useElement();
+	const parent = useParentElement( element.id );
+	const parentStyle = useComputedStyle( parent?.id || null );
 
 	return (
 		<Stack gap={ 2 }>
 			<DisplayField />
 			{ 'flex' === display?.value && <FlexFields /> }
+			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
 		</Stack>
 	);
 };
@@ -34,6 +41,11 @@ const FlexFields = () => (
 		<Divider />
 		<GapControlField />
 		<WrapField />
+	</>
+);
+
+const FlexChildFields = () => (
+	<>
 		<Divider />
 		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
 		<AlignSelfChild />

package/src/dynamics/dynamic-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
-import { isTransformable, type PropKey, type PropValue } from '@elementor/editor-props';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { dynamicPropTypeUtil } from './utils';
@@ -27,8 +27,7 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 			name,
 			settings: {
 				...settings,
-				// The value inside the dynamic is not a transformable value, so we need to store the whole object.
-				[ bind ]: isTransformable( newValue ) ? newValue.value : newValue,
+				[ bind ]: newValue,
 			},
 		} );
 	};

package/src/hooks/use-computed-style.ts

@@ -0,0 +1,29 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';
+
+import { type ExtendedWindow } from '../sync/types';
+
+export function useComputedStyle( elementId: string | null ) {
+	return useListenTo(
+		[
+			windowEvent( 'elementor/device-mode/change' ),
+			commandEndEvent( 'document/elements/reset-style' ),
+			commandEndEvent( 'document/elements/settings' ),
+			commandEndEvent( 'document/elements/paste-style' ),
+		],
+		() => {
+			if ( ! elementId ) {
+				return null;
+			}
+
+			const extendedWindow: ExtendedWindow = window;
+			const element = extendedWindow.elementor?.getContainer?.( elementId );
+
+			if ( ! element?.view?.el ) {
+				return null;
+			}
+
+			const resp = window.getComputedStyle( element.view.el );
+			return resp;
+		}
+	);
+}

package/src/components/style-sections/background-section/background-color-field.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { ColorControl, ControlLabel } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { StylesField } from '../../../controls-registry/styles-field';
-
-export const BackgroundColorField = () => {
-	return (
-		<StylesField bind="background-color">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
-		</StylesField>
-	);
-};