@elementor/editor-editing-panel 4.4.0-1148 → 4.4.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.4.0-1148",
+  "version": "4.4.0-beta1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,32 +39,32 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1148",
-    "@elementor/editor-canvas": "4.4.0-1148",
-    "@elementor/editor-controls": "4.4.0-1148",
-    "@elementor/editor-current-user": "4.4.0-1148",
-    "@elementor/editor-documents": "4.4.0-1148",
-    "@elementor/editor-elements": "4.4.0-1148",
-    "@elementor/editor-interactions": "4.4.0-1148",
-    "@elementor/editor-notifications": "4.4.0-1148",
-    "@elementor/editor-panels": "4.4.0-1148",
-    "@elementor/editor-props": "4.4.0-1148",
-    "@elementor/editor-responsive": "4.4.0-1148",
-    "@elementor/editor-styles": "4.4.0-1148",
-    "@elementor/editor-styles-repository": "4.4.0-1148",
-    "@elementor/editor-ui": "4.4.0-1148",
-    "@elementor/editor-v1-adapters": "4.4.0-1148",
-    "@elementor/http-client": "4.4.0-1148",
+    "@elementor/editor": "4.4.0-beta1",
+    "@elementor/editor-canvas": "4.4.0-beta1",
+    "@elementor/editor-controls": "4.4.0-beta1",
+    "@elementor/editor-current-user": "4.4.0-beta1",
+    "@elementor/editor-documents": "4.4.0-beta1",
+    "@elementor/editor-elements": "4.4.0-beta1",
+    "@elementor/editor-interactions": "4.4.0-beta1",
+    "@elementor/editor-notifications": "4.4.0-beta1",
+    "@elementor/editor-panels": "4.4.0-beta1",
+    "@elementor/editor-props": "4.4.0-beta1",
+    "@elementor/editor-responsive": "4.4.0-beta1",
+    "@elementor/editor-styles": "4.4.0-beta1",
+    "@elementor/editor-styles-repository": "4.4.0-beta1",
+    "@elementor/editor-ui": "4.4.0-beta1",
+    "@elementor/editor-v1-adapters": "4.4.0-beta1",
+    "@elementor/http-client": "4.4.0-beta1",
     "@elementor/icons": "~1.78.1",
-    "@elementor/editor-variables": "4.4.0-1148",
-    "@elementor/locations": "4.4.0-1148",
-    "@elementor/menus": "4.4.0-1148",
-    "@elementor/query": "4.4.0-1148",
-    "@elementor/schema": "4.4.0-1148",
-    "@elementor/session": "4.4.0-1148",
+    "@elementor/editor-variables": "4.4.0-beta1",
+    "@elementor/locations": "4.4.0-beta1",
+    "@elementor/menus": "4.4.0-beta1",
+    "@elementor/query": "4.4.0-beta1",
+    "@elementor/schema": "4.4.0-beta1",
+    "@elementor/session": "4.4.0-beta1",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.4.0-1148",
-    "@elementor/wp-media": "4.4.0-1148",
+    "@elementor/utils": "4.4.0-beta1",
+    "@elementor/wp-media": "4.4.0-beta1",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/settings-tab.tsx

@@ -5,6 +5,7 @@ import { SessionStorageProvider } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
+import { isHiddenByAncestor } from '../utils/ancestor-dependency-utils';
 import { extractDependencyEffect } from '../utils/prop-dependency-utils';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -88,7 +89,7 @@ function renderSectionItems( {
 				return [];
 			}
 
-			if ( item.type === 'control' && isControlHiddenByDependencies( item, propsSchema, settings ) ) {
+			if ( item.type === 'control' && isControlHiddenByDependencies( item, propsSchema, settings, element.id ) ) {
 				return [];
 			}
 
@@ -97,8 +98,14 @@ function renderSectionItems( {
 	);
 }
 
-function isControlHiddenByDependencies( control: Control, propsSchema: PropsSchema, settings: Props ) {
-	const { isHidden } = extractDependencyEffect( control.value.bind, propsSchema, settings );
+function isControlHiddenByDependencies(
+	control: Control,
+	propsSchema: PropsSchema,
+	settings: Props,
+	elementId: string
+) {
+	const { bind } = control.value;
+	const { isHidden } = extractDependencyEffect( bind, propsSchema, settings );
 
-	return isHidden;
+	return isHidden || isHiddenByAncestor( elementId, propsSchema[ bind ] );
 }

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

@@ -15,6 +15,7 @@ import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { useIsHiddenByAncestor } from '../hooks/use-is-hidden-by-ancestor';
 import { isResponsivePropType } from '../utils/is-responsive-prop-type';
 import {
 	extractDependencyEffect,
@@ -49,9 +50,11 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 		propDisplayName,
 	} );
 
+	const isHiddenByAncestor = useIsHiddenByAncestor( bind );
+
 	const { isDisabled, isHidden } = extractDependencyEffect( bind, propsSchema, currentElementSettings );
 
-	if ( isHidden ) {
+	if ( isHidden || isHiddenByAncestor ) {
 		return null;
 	}
 

package/src/hooks/use-is-hidden-by-ancestor.ts

@@ -0,0 +1,25 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+
+import { useElement } from '../contexts/element-context';
+import { isHiddenByAncestor } from '../utils/ancestor-dependency-utils';
+
+export function useIsHiddenByAncestor( bind: string ): boolean {
+	const {
+		element: { id: elementId },
+		elementType: { propsSchema },
+	} = useElement();
+
+	const propType = propsSchema[ bind ];
+
+	return useListenTo(
+		[
+			v1ReadyEvent(),
+			commandEndEvent( 'document/elements/set-settings' ),
+			commandEndEvent( 'document/elements/create' ),
+			commandEndEvent( 'document/elements/delete' ),
+			commandEndEvent( 'document/elements/move' ),
+		],
+		() => isHiddenByAncestor( elementId, propType ),
+		[ elementId, propType ]
+	);
+}

package/src/utils/ancestor-dependency-utils.ts

@@ -0,0 +1,35 @@
+import { findClosestContainer, getContainer, getWidgetsCache, type V1Element } from '@elementor/editor-elements';
+import { type PropType } from '@elementor/editor-props';
+
+import { getElementSettingsWithDefaults, isHiddenByDependency } from './prop-dependency-utils';
+
+function getSettingsWithDefaults( ancestor: V1Element, elementType: string ) {
+	const schema = getWidgetsCache()?.[ elementType ]?.atomic_props_schema ?? {};
+	const settings = Object.fromEntries(
+		Object.keys( schema ).map( ( key ) => [ key, ancestor.settings.get( key ) ?? null ] )
+	);
+
+	return getElementSettingsWithDefaults( schema, settings );
+}
+
+export function isHiddenByAncestor( elementId: string, propType: PropType | undefined ): boolean {
+	const ancestorDependency = propType?.meta?.ancestor_dependency;
+
+	if ( ! Array.isArray( ancestorDependency?.dependency?.terms ) ) {
+		return false;
+	}
+
+	const ancestor = findClosestContainer(
+		getContainer( elementId )?.parent,
+		( container ) => container.model.get( 'elType' ) === ancestorDependency.element_type
+	);
+
+	if ( ! ancestor ) {
+		return false;
+	}
+
+	return isHiddenByDependency(
+		ancestorDependency.dependency,
+		getSettingsWithDefaults( ancestor, ancestorDependency.element_type )
+	);
+}

package/src/utils/prop-dependency-utils.ts

@@ -34,16 +34,20 @@ export function getElementSettingsWithDefaults( propsSchema: PropsSchema, elemen
 	return elementSettingsWithDefaults as Values;
 }
 
+export function isHiddenByDependency( dependency: Dependency | undefined, values: Values ): boolean {
+	const depCheck = isDependencyMet( dependency, values );
+
+	const failingTerm = ! depCheck.isMet ? depCheck.failingDependencies[ 0 ] : undefined;
+
+	return !! failingTerm && ! isDependency( failingTerm ) && failingTerm.effect === 'hide';
+}
+
 export function extractDependencyEffect( bind: string, propsSchema: PropsSchema, settings: Props ): DependencyEffect {
 	const settingsWithDefaults = getElementSettingsWithDefaults( propsSchema, settings );
 	const propType = propsSchema[ bind ];
-	const depCheck = isDependencyMet( propType?.dependencies, settingsWithDefaults );
-
-	const failingTerm = ! depCheck.isMet ? depCheck.failingDependencies[ 0 ] : undefined;
-	const isHidden = !! failingTerm && ! isDependency( failingTerm ) && failingTerm?.effect === 'hide';
 
 	return {
-		isHidden,
+		isHidden: isHiddenByDependency( propType?.dependencies, settingsWithDefaults ),
 		isDisabled: ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, settingsWithDefaults ).isMet,
 	};
 }