@elementor/editor-editing-panel 4.0.0-607 → 4.0.0-619

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.0.0-607",
+  "version": "4.0.0-619",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-607",
-    "@elementor/editor-canvas": "4.0.0-607",
-    "@elementor/editor-controls": "4.0.0-607",
-    "@elementor/editor-documents": "4.0.0-607",
-    "@elementor/editor-elements": "4.0.0-607",
-    "@elementor/editor-interactions": "4.0.0-607",
-    "@elementor/editor-panels": "4.0.0-607",
-    "@elementor/editor-props": "4.0.0-607",
-    "@elementor/editor-responsive": "4.0.0-607",
-    "@elementor/editor-styles": "4.0.0-607",
-    "@elementor/editor-styles-repository": "4.0.0-607",
-    "@elementor/editor-ui": "4.0.0-607",
-    "@elementor/editor-v1-adapters": "4.0.0-607",
+    "@elementor/editor": "4.0.0-619",
+    "@elementor/editor-canvas": "4.0.0-619",
+    "@elementor/editor-controls": "4.0.0-619",
+    "@elementor/editor-documents": "4.0.0-619",
+    "@elementor/editor-elements": "4.0.0-619",
+    "@elementor/editor-interactions": "4.0.0-619",
+    "@elementor/editor-panels": "4.0.0-619",
+    "@elementor/editor-props": "4.0.0-619",
+    "@elementor/editor-responsive": "4.0.0-619",
+    "@elementor/editor-styles": "4.0.0-619",
+    "@elementor/editor-styles-repository": "4.0.0-619",
+    "@elementor/editor-ui": "4.0.0-619",
+    "@elementor/editor-v1-adapters": "4.0.0-619",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.0.0-607",
-    "@elementor/locations": "4.0.0-607",
-    "@elementor/menus": "4.0.0-607",
-    "@elementor/schema": "4.0.0-607",
-    "@elementor/session": "4.0.0-607",
+    "@elementor/editor-variables": "4.0.0-619",
+    "@elementor/locations": "4.0.0-619",
+    "@elementor/menus": "4.0.0-619",
+    "@elementor/schema": "4.0.0-619",
+    "@elementor/session": "4.0.0-619",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-607",
-    "@elementor/wp-media": "4.0.0-607",
+    "@elementor/utils": "4.0.0-619",
+    "@elementor/wp-media": "4.0.0-619",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type ReactElement, useRef, useState } from 'react';
-import { useElementSetting } from '@elementor/editor-elements';
 import { type ClassesPropValue } from '@elementor/editor-props';
 import {
 	isElementsStylesProvider,
@@ -27,7 +26,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
-import { useElement } from '../../contexts/element-context';
+import { useElement, usePanelElementSetting } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
 import { getStylesProviderColorName } from '../../utils/get-styles-provider-color';
 import { trackStyles } from '../../utils/tracking/subscribe';
@@ -287,10 +286,9 @@ function hasReachedLimit( provider: StylesProvider ) {
 }
 
 function useAppliedOptions( options: StyleDefOption[] ) {
-	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
 
-	const appliedIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+	const appliedIds = usePanelElementSetting< ClassesPropValue >( currentClassesProp )?.value ?? [];
 	const appliedOptions = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = appliedOptions.some(

package/src/components/editing-panel.tsx

@@ -4,7 +4,7 @@ import {
 	ControlReplacementsProvider,
 	getControlReplacements,
 } from '@elementor/editor-controls';
-import { useSelectedElement } from '@elementor/editor-elements';
+import { useSelectedElementSettings } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { AtomIcon } from '@elementor/icons';
@@ -24,7 +24,7 @@ export const { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = cr
 const { useMenuItems } = controlActionsMenu;
 
 export const EditingPanel = () => {
-	const { element, elementType } = useSelectedElement();
+	const { element, elementType, settings } = useSelectedElementSettings();
 	const controlReplacements = getControlReplacements();
 	const menuItems = useMenuItems().default;
 
@@ -59,7 +59,7 @@ export const EditingPanel = () => {
 				<ThemeProvider>
 					<ControlActionsProvider items={ menuItems }>
 						<ControlReplacementsProvider replacements={ controlReplacements }>
-							<ElementProvider element={ element } elementType={ elementType }>
+							<ElementProvider element={ element } elementType={ elementType } settings={ settings }>
 								<Panel>
 									<PanelHeaderTopSlot />
 									{ panelContent }

package/src/components/settings-control.tsx

@@ -47,7 +47,6 @@ const ControlLayout = ( {
 	controlProps: Record< string, unknown >;
 } ) => {
 	const controlType = control.type as ControlType;
-
 	return (
 		<ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
 			{ control.meta?.topDivider && <Divider /> }

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

@@ -5,11 +5,12 @@ import {
 	TransformRepeaterControl,
 	TransitionRepeaterControl,
 } from '@elementor/editor-controls';
-import { useSelectedElement } from '@elementor/editor-elements';
 import { __ } from '@wordpress/i18n';
 
+import { useElement } from '../../../contexts/element-context';
 import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
+import { canElementHaveChildren } from '../../../utils/can-element-have-children';
 import { getRecentlyUsedList } from '../../../utils/get-recently-used-styles';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
@@ -23,9 +24,11 @@ const BACKDROP_FILTER_LABEL = __( 'Backdrop filters', 'elementor' );
 const TRANSITIONS_LABEL = __( 'Transitions', 'elementor' );
 
 export const EffectsSection = () => {
-	const { element } = useSelectedElement();
+	const { element } = useElement();
 	const { meta } = useStyle();
 
+	const canHaveChildren = canElementHaveChildren( element?.id ?? '' );
+
 	return (
 		<SectionContent gap={ 1 }>
 			<BlendModeField />
@@ -37,7 +40,7 @@ export const EffectsSection = () => {
 			</StylesField>
 			<PanelDivider />
 			<StylesField bind="transform" propDisplayName={ TRANSFORM_LABEL }>
-				<TransformRepeaterControl />
+				<TransformRepeaterControl showChildrenPerspective={ canHaveChildren } />
 			</StylesField>
 			<PanelDivider />
 			<StylesField bind="transition" propDisplayName={ TRANSITIONS_LABEL }>

package/src/contexts/element-context.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import { createContext, type PropsWithChildren, useContext } from 'react';
 import { type Element, type ElementType } from '@elementor/editor-elements';
+import { type AnyTransformable } from '@elementor/editor-props';
 
 type ContextValue = {
 	element: Element;
 	elementType: ElementType;
+	settings: Record< string, AnyTransformable | null >;
 };
 
 const Context = createContext< ContextValue | null >( null );
 
 type Props = PropsWithChildren< ContextValue >;
 
-export function ElementProvider( { children, element, elementType }: Props ) {
-	return <Context.Provider value={ { element, elementType } }>{ children }</Context.Provider>;
+export function ElementProvider( { children, element, elementType, settings }: Props ) {
+	return <Context.Provider value={ { element, elementType, settings } }>{ children }</Context.Provider>;
 }
 
 export function useElement() {
@@ -24,3 +26,13 @@ export function useElement() {
 
 	return context;
 }
+
+export function usePanelElementSetting< TValue = AnyTransformable | null >( propKey: string ) {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'usePanelElementSetting must be used within a ElementProvider' );
+	}
+
+	return ( context.settings[ propKey ] ?? null ) as TValue | null;
+}

package/src/contexts/styles-inheritance-context.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createContext, type PropsWithChildren, useContext } from 'react';
-import { getWidgetsCache, useElementSetting } from '@elementor/editor-elements';
+import { getWidgetsCache } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { getBreakpointsTree } from '@elementor/editor-responsive';
 import { getStylesSchema } from '@elementor/editor-styles';
@@ -14,7 +14,7 @@ import {
 	type StylesInheritanceSnapshot,
 } from '../styles-inheritance/types';
 import { useClassesProp } from './classes-prop-context';
-import { useElement } from './element-context';
+import { useElement, usePanelElementSetting } from './element-context';
 import { useStyle } from './style-context';
 
 const Context = createContext< StylesInheritanceAPI | null >( null );
@@ -65,13 +65,12 @@ export function useStylesInheritanceChain( path: string[] ): SnapshotPropValue[]
 }
 
 const useAppliedStyles = () => {
-	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
 	const baseStyles = useBaseStyles();
 
 	useStylesRerender();
 
-	const classesProp = useElementSetting< ClassesPropValue >( element.id, currentClassesProp );
+	const classesProp = usePanelElementSetting< ClassesPropValue >( currentClassesProp );
 
 	const appliedStyles = classesPropTypeUtil.extract( classesProp ) ?? [];
 

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

@@ -19,6 +19,7 @@ import {
 	TextControl,
 	ToggleControl,
 	UrlControl,
+	VideoMediaControl,
 } from '@elementor/editor-controls';
 import { type ControlLayout } from '@elementor/editor-elements';
 import {
@@ -36,6 +37,7 @@ import {
 	sizePropTypeUtil,
 	stringArrayPropTypeUtil,
 	stringPropTypeUtil,
+	videoSrcPropTypeUtil,
 } from '@elementor/editor-props';
 
 import { ControlTypeAlreadyRegisteredError, ControlTypeNotRegisteredError } from '../errors';
@@ -64,6 +66,7 @@ const controlTypes = {
 	'html-tag': { component: HtmlTagControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
 	toggle: { component: ToggleControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	'date-time': { component: DateTimeControl, layout: 'full', propTypeUtil: DateTimePropTypeUtil },
+	video: { component: VideoMediaControl, layout: 'full', propTypeUtil: videoSrcPropTypeUtil },
 	'inline-editing': { component: InlineEditingControl, layout: 'full', propTypeUtil: htmlV3PropTypeUtil },
 	email: { component: EmailFormActionControl, layout: 'custom', propTypeUtil: emailPropTypeUtil },
 } as const satisfies ControlRegistry;

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

@@ -2,21 +2,15 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { PropKeyProvider, PropProvider, type SetValueMeta } from '@elementor/editor-controls';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
-import {
-	type ElementID,
-	getElementLabel,
-	getElementSettings,
-	updateElementSettings,
-	useElementSettings,
-} from '@elementor/editor-elements';
+import { type ElementID, getElementLabel, getElementSettings, updateElementSettings } from '@elementor/editor-elements';
 import {
 	type CreateOptions,
 	isDependency,
 	isDependencyMet,
 	type PropKey,
 	type Props,
+	type PropsSchema,
 	type PropType,
-	type PropValue,
 } from '@elementor/editor-props';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
@@ -33,15 +27,44 @@ type SettingsFieldProps = {
 
 const HISTORY_DEBOUNCE_WAIT = 800;
 
+const getElementSettigsWithDefaults = ( propsSchema: PropsSchema, elementSettings?: Props ) => {
+	const elementSettingsWithDefaults = { ...elementSettings };
+	Object.keys( propsSchema ).forEach( ( key ) => {
+		if ( ! ( key in elementSettingsWithDefaults ) ) {
+			if ( propsSchema[ key ].default !== null ) {
+				elementSettingsWithDefaults[ key ] = propsSchema[ key ].default as Values[ keyof Values ];
+			}
+		}
+	} );
+	return elementSettingsWithDefaults;
+};
+
+const extractDependencyEffect = ( bind: string, propsSchema: PropsSchema, currentElementSettings: Props ) => {
+	const elementSettingsForDepCheck = getElementSettigsWithDefaults( propsSchema, currentElementSettings );
+	const propType = propsSchema[ bind ];
+	const depCheck = isDependencyMet( propType?.dependencies, elementSettingsForDepCheck );
+	const isHidden =
+		! depCheck.isMet &&
+		! isDependency( depCheck.failingDependencies[ 0 ] ) &&
+		depCheck.failingDependencies[ 0 ]?.effect === 'hide';
+	return {
+		isDisabled: ( prop: PropType ) => {
+			const result = ! isDependencyMet( prop?.dependencies, elementSettingsForDepCheck ).isMet;
+			return result;
+		},
+		isHidden,
+		settingsWithDefaults: elementSettingsForDepCheck as Values,
+	};
+};
+
 export const SettingsField = ( { bind, children, propDisplayName }: SettingsFieldProps ) => {
 	const {
 		element: { id: elementId },
 		elementType: { propsSchema, dependenciesPerTargetMapping = {} },
+		settings: currentElementSettings,
 	} = useElement();
 
-	const elementSettingValues = useElementSettings< PropValue >( elementId, Object.keys( propsSchema ) ) as Values;
-
-	const value = { [ bind ]: elementSettingValues?.[ bind ] ?? null };
+	const value = { [ bind ]: currentElementSettings?.[ bind ] ?? null };
 
 	const propType = createTopLevelObjectType( { schema: propsSchema } );
 
@@ -49,13 +72,21 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 		elementId,
 		propDisplayName,
 	} );
+	const { isDisabled, isHidden, settingsWithDefaults } = extractDependencyEffect(
+		bind,
+		propsSchema,
+		currentElementSettings
+	);
+	if ( isHidden ) {
+		return null;
+	}
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const setValue = ( newValue: Values, _: CreateOptions = {}, meta?: SetValueMeta ) => {
 		const { withHistory = true } = meta ?? {};
 		const dependents = extractOrderedDependencies( dependenciesPerTargetMapping );
 
-		const settings = getUpdatedValues( newValue, dependents, propsSchema, elementSettingValues, elementId );
+		const settings = getUpdatedValues( newValue, dependents, propsSchema, settingsWithDefaults, elementId );
 		if ( withHistory ) {
 			undoableUpdateElementProp( settings );
 		} else {
@@ -63,19 +94,6 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 		}
 	};
 
-	const isDisabled = ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, elementSettingValues ).isMet;
-
-	const propTypeToBind = propsSchema[ bind ];
-	const dependenciesResult = isDependencyMet( propTypeToBind?.dependencies, elementSettingValues );
-	const shouldHide =
-		! dependenciesResult.isMet &&
-		! isDependency( dependenciesResult.failingDependencies[ 0 ] ) &&
-		dependenciesResult.failingDependencies[ 0 ]?.effect === 'hide';
-
-	if ( shouldHide ) {
-		return null;
-	}
-
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
 			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>

package/src/hooks/use-active-style-def-id.ts

@@ -1,8 +1,8 @@
-import { getElementStyles, useElementSetting } from '@elementor/editor-elements';
+import { getElementStyles } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 
-import { useElement } from '../contexts/element-context';
+import { useElement, usePanelElementSetting } from '../contexts/element-context';
 import { useStateByElement } from './use-state-by-element';
 
 export function useActiveStyleDefId( classProp: PropKey ) {
@@ -11,7 +11,7 @@ export function useActiveStyleDefId( classProp: PropKey ) {
 		null
 	);
 
-	const appliedClassesIds = useAppliedClassesIds( classProp )?.value || [];
+	const appliedClassesIds = usePanelElementSetting< ClassesPropValue >( classProp )?.value || [];
 
 	const fallback = useFirstAppliedClass( appliedClassesIds );
 
@@ -26,12 +26,6 @@ function useFirstAppliedClass( appliedClassesIds: string[] ) {
 	return Object.values( stylesDefs ).find( ( styleDef ) => appliedClassesIds.includes( styleDef.id ) );
 }
 
-function useAppliedClassesIds( classProp: PropKey ) {
-	const { element } = useElement();
-
-	return useElementSetting< ClassesPropValue >( element.id, classProp );
-}
-
 function useActiveAndAppliedClassId( id: StyleDefinitionID | null, appliedClassesIds: string[] ) {
 	const isClassApplied = !! id && appliedClassesIds.includes( id );
 

package/src/utils/can-element-have-children.ts

@@ -0,0 +1,11 @@
+import { getContainer } from '@elementor/editor-elements';
+
+export const canElementHaveChildren = ( elementId: string ): boolean => {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		return false;
+	}
+
+	return container.model.get( 'elType' ) !== 'widget';
+};