@elementor/editor-editing-panel 3.35.0-458 → 3.35.0-459

package/package.json

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isDependencyMet, type PropsSchema, type PropType, type PropValue } from '@elementor/editor-props';
 
-import { type DynamicPropValue } from '../utils';
+import { type DynamicPropValue } from '../types';
 
 type DynamicConditionalControlProps = React.PropsWithChildren< {
 	propType?: PropType;

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
+import {
+	type ControlComponent,
+	ControlFormLabel,
+	PropKeyProvider,
+	PropProvider,
+	useBoundProp,
+} from '@elementor/editor-controls';
 import type { Control, ControlLayout, ControlsSection } from '@elementor/editor-elements';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
@@ -24,28 +30,43 @@ import { __ } from '@wordpress/i18n';
 import { PopoverBody } from '../../components/popover-body';
 import { Control as BaseControl } from '../../controls-registry/control';
 import { controlsRegistry, type ControlType } from '../../controls-registry/controls-registry';
+import { createTopLevelObjectType } from '../../controls-registry/create-top-level-object-type';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
 import { type DynamicTag } from '../types';
-import { dynamicPropTypeUtil } from '../utils';
+import { dynamicPropTypeUtil, isDynamicTagSupported } from '../utils';
 import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
 const tagsWithoutTabs = [ 'popup' ];
 
-export const DynamicSelectionControl = () => {
-	const { setValue: setAnyValue } = useBoundProp();
+export const DynamicSelectionControl = ( { OriginalControl, ...props }: { OriginalControl?: ControlComponent } ) => {
+	const { setValue: setAnyValue, propType } = useBoundProp();
 	const { bind, value } = useBoundProp( dynamicPropTypeUtil );
+	const originalPropType = createTopLevelObjectType( {
+		schema: {
+			[ bind ]: propType,
+		},
+	} );
 
 	const [ propValueFromHistory ] = usePersistDynamicValue( bind );
 	const selectionPopoverState = usePopupState( { variant: 'popover' } );
 
 	const { name: tagName = '' } = value;
-
 	const dynamicTag = useDynamicTag( tagName );
 
+	if ( ! isDynamicTagSupported( tagName ) && OriginalControl ) {
+		return (
+			<PropProvider propType={ originalPropType } value={ { [ bind ]: null } } setValue={ setAnyValue }>
+				<PropKeyProvider bind={ bind }>
+					<OriginalControl { ...props } />
+				</PropKeyProvider>
+			</PropProvider>
+		);
+	}
+
 	const removeDynamicTag = () => {
 		setAnyValue( propValueFromHistory ?? null );
 	};

package/src/dynamics/dynamic-control.tsx

@@ -5,7 +5,8 @@ import { type PropKey } from '@elementor/editor-props';
 import { createTopLevelObjectType } from '../controls-registry/create-top-level-object-type';
 import { DynamicConditionalControl } from './components/dynamic-conditional-control';
 import { useDynamicTag } from './hooks/use-dynamic-tag';
-import { dynamicPropTypeUtil, type DynamicPropValue } from './utils';
+import { type DynamicPropValue } from './types';
+import { dynamicPropTypeUtil } from './utils';
 
 type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;

package/src/dynamics/dynamic-transformer.ts

@@ -1,20 +1,23 @@
 import { createTransformer } from '@elementor/editor-canvas';
 import { isTransformable, type Props } from '@elementor/editor-props';
 
+import { type ExtendedWindow } from '../sync/types';
 import { DynamicTagsManagerNotFoundError } from './errors';
-import { type ExtendedWindow } from './types';
+import { isDynamicTagSupported } from './utils';
 
 type Dynamic = {
 	name?: string;
 	settings?: Props;
 };
 
-export const dynamicTransformer = createTransformer( ( value: Dynamic ) => {
-	if ( ! value.name ) {
-		return null;
+const extendedWindow = window as ExtendedWindow;
+
+export const dynamicTransformer = createTransformer< Dynamic >( ( value, { propType } ) => {
+	if ( ! value?.name || ! isDynamicTagSupported( value.name ) ) {
+		return propType?.default ?? null;
 	}
 
-	return getDynamicValue( value.name, simpleTransform( value.settings ?? {} ) );
+	return getDynamicValue( value.name, simpleTransform( value?.settings ?? {} ) );
 } );
 
 // Temporary naive transformation until we'll have a `backendTransformer` that
@@ -30,7 +33,6 @@ function simpleTransform( props: Props ) {
 }
 
 function getDynamicValue( name: string, settings: Record< string, unknown > ) {
-	const extendedWindow = window as unknown as ExtendedWindow;
 	const { dynamicTags } = extendedWindow.elementor ?? {};
 
 	if ( ! dynamicTags ) {

package/src/dynamics/init.ts

@@ -1,5 +1,9 @@
 import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
-import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import {
+	type ControlComponent,
+	injectIntoRepeaterItemIcon,
+	injectIntoRepeaterItemLabel,
+} from '@elementor/editor-controls';
 import { type BackgroundOverlayPropType, type PropValue } from '@elementor/editor-props';
 import { type InjectedComponent } from '@elementor/locations';
 
@@ -18,7 +22,7 @@ const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
 	registerControlReplacement( {
-		component: DynamicSelectionControl,
+		component: DynamicSelectionControl as ControlComponent,
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
 

package/src/dynamics/sync/get-atomic-dynamic-tags.ts

@@ -1,4 +1,4 @@
-import { getElementorConfig } from './get-elementor-config';
+import { getElementorConfig } from '../../sync/get-elementor-globals';
 
 export const getAtomicDynamicTags = () => {
 	const { atomicDynamicTags } = getElementorConfig();

package/src/dynamics/types.ts

@@ -1,18 +1,6 @@
 import { type ControlItem } from '@elementor/editor-elements';
 import { type PropsSchema, type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
 
-export type ExtendedWindow = Window & {
-	elementor?: {
-		config?: {
-			atomicDynamicTags?: {
-				tags: DynamicTags;
-				groups: Record< DynamicTag[ 'group' ], { title: string } >;
-			};
-		};
-		dynamicTags?: DynamicTagsManager;
-	};
-};
-
 export type DynamicTags = Record< DynamicTag[ 'name' ], DynamicTag >;
 
 export type DynamicTag = {

package/src/dynamics/utils.ts

@@ -7,10 +7,24 @@ import {
 } from '@elementor/editor-props';
 import { z } from '@elementor/schema';
 
-import { type DynamicPropType } from './types';
+import { getElementorConfig } from '../sync/get-elementor-globals';
+import { type DynamicPropType, type DynamicPropValue } from './types';
 
 const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 
+export const dynamicPropTypeUtil = createPropUtils(
+	DYNAMIC_PROP_TYPE_KEY,
+	z.strictObject( {
+		name: z.string(),
+		group: z.string(),
+		settings: z.any().optional(),
+	} )
+);
+
+export const isDynamicTagSupported = ( tagName: string ) => {
+	return !! getElementorConfig()?.atomicDynamicTags?.tags?.[ tagName ];
+};
+
 const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
 	prop.key === DYNAMIC_PROP_TYPE_KEY;
 
@@ -27,14 +41,3 @@ export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue
 export const supportsDynamic = ( propType: PropType ): boolean => {
 	return !! getDynamicPropType( propType );
 };
-
-export const dynamicPropTypeUtil = createPropUtils(
-	DYNAMIC_PROP_TYPE_KEY,
-	z.strictObject( {
-		name: z.string(),
-		group: z.string(),
-		settings: z.any().optional(),
-	} )
-);
-
-export type DynamicPropValue = z.infer< typeof dynamicPropTypeUtil.schema >;

package/src/sync/types.ts

@@ -1,12 +1,26 @@
 import { type ControlItem, type V1Element } from '@elementor/editor-elements';
 import { type PropsSchema } from '@elementor/editor-props';
 
+import { type DynamicTag, type DynamicTags, type DynamicTagsManager } from '../dynamics/types';
+
 export type SupportedFonts = 'system' | 'googlefonts' | 'custom';
 
 type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type ExtendedWindow = Window & {
 	elementor?: {
+		config?: {
+			controls?: {
+				font?: {
+					options?: Record< string, SupportedFonts >;
+				};
+			};
+			atomicDynamicTags?: {
+				tags: DynamicTags;
+				groups: Record< DynamicTag[ 'group' ], { title: string } >;
+			};
+		};
+		dynamicTags?: DynamicTagsManager;
 		selection?: {
 			getElements: () => V1Element[];
 		};
@@ -23,13 +37,6 @@ export type ExtendedWindow = Window & {
 		helpers?: {
 			enqueueFont: EnqueueFont;
 		};
-		config?: {
-			controls?: {
-				font?: {
-					options?: Record< string, SupportedFonts >;
-				};
-			};
-		};
 	};
 	elementorCommon?: {
 		config?: {

package/src/dynamics/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 ?? {};
-};