@elementor/editor-editing-panel 1.23.0 → 1.27.0

package/src/dynamics/dynamic-transformer.ts

@@ -0,0 +1,61 @@
+import { createTransformer } from '@elementor/editor-canvas';
+import { isTransformable, type Props } from '@elementor/editor-props';
+
+import { DynamicTagsManagerNotFoundError } from './errors';
+import { type ExtendedWindow } from './types';
+
+type Dynamic = {
+	name?: string;
+	settings?: Props;
+};
+
+export const dynamicTransformer = createTransformer( ( value: Dynamic ) => {
+	if ( ! value.name ) {
+		return null;
+	}
+
+	return getDynamicValue( value.name, simpleTransform( value.settings ?? {} ) );
+} );
+
+// Temporary naive transformation until we'll have a `backendTransformer` that
+// will replace the `dynamicTransformer` client implementation.
+function simpleTransform( props: Props ) {
+	const transformed = Object.entries( props ).map( ( [ settingKey, settingValue ] ) => {
+		const value = isTransformable( settingValue ) ? settingValue.value : settingValue;
+
+		return [ settingKey, value ] as const;
+	} );
+
+	return Object.fromEntries( transformed );
+}
+
+function getDynamicValue( name: string, settings: Record< string, unknown > ) {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const { dynamicTags } = extendedWindow.elementor ?? {};
+
+	if ( ! dynamicTags ) {
+		throw new DynamicTagsManagerNotFoundError();
+	}
+
+	const getTagValue = () => {
+		const tag = dynamicTags.createTag( 'v4-dynamic-tag', name, settings );
+
+		if ( ! tag ) {
+			return null;
+		}
+
+		return dynamicTags.loadTagDataFromCache( tag ) ?? null;
+	};
+
+	const tagValue = getTagValue();
+
+	if ( tagValue !== null ) {
+		return tagValue;
+	}
+
+	return new Promise( ( resolve ) => {
+		dynamicTags.refreshCacheFromServer( () => {
+			resolve( getTagValue() );
+		} );
+	} );
+}

package/src/dynamics/errors.ts

@@ -0,0 +1,6 @@
+import { createError } from '@elementor/utils';
+
+export const DynamicTagsManagerNotFoundError = createError( {
+	code: 'dynamic_tags_manager_not_found',
+	message: 'Dynamic tags manager not found',
+} );

package/src/dynamics/init.ts

@@ -1,6 +1,9 @@
+import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
+
 import { replaceControl } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
+import { dynamicTransformer } from './dynamic-transformer';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
 import { isDynamicPropValue } from './utils';
 
@@ -16,4 +19,7 @@ export const init = () => {
 		id: 'dynamic-tags',
 		useProps: usePropDynamicAction,
 	} );
+
+	styleTransformersRegistry.register( 'dynamic', dynamicTransformer );
+	settingsTransformersRegistry.register( 'dynamic', dynamicTransformer );
 };

package/src/dynamics/types.ts

@@ -9,6 +9,7 @@ export type ExtendedWindow = Window & {
 				groups: Record< DynamicTag[ 'group' ], { title: string } >;
 			};
 		};
+		dynamicTags?: DynamicTagsManager;
 	};
 };
 
@@ -34,3 +35,19 @@ export type DynamicPropValue = TransformablePropValue<
 	'dynamic',
 	{ name: string; settings?: Record< string, unknown > }
 >;
+
+export type DynamicTagsManager = {
+	createTag: ( id: string, name: string, settings: Record< string, unknown > ) => TagInstance;
+	loadTagDataFromCache: ( tag: TagInstance ) => unknown;
+	refreshCacheFromServer: ( callback: () => void ) => void;
+};
+
+export type TagInstance = {
+	options: {
+		id: string;
+		name: string;
+	};
+	model: {
+		toJSON: () => Record< string, unknown >;
+	};
+};

package/src/styles-inheritance/create-snapshots-manager.ts

@@ -10,12 +10,12 @@ import {
 	type StylesInheritanceSnapshot,
 	type StylesInheritanceSnapshotGetter,
 	type StylesInheritanceSnapshotsSlot,
-	type StyleVariantWithId,
+	type StyleVariantDetails,
 } from './types';
 import { DEFAULT_STATE, getBreakpointKey, getStateKey } from './utils';
 
 export function createSnapshotsManager(
-	getStylesByMeta: ( meta: StyleInheritanceMetaProps ) => StyleVariantWithId[],
+	getStylesByMeta: ( meta: StyleInheritanceMetaProps ) => StyleVariantDetails[],
 	breakpointsRoot: BreakpointNode
 ): StylesInheritanceSnapshotGetter {
 	const breakpointsInheritancePaths = makeBreakpointsInheritancePaths( breakpointsRoot );
@@ -104,7 +104,7 @@ function makeBreakpointsInheritancePaths( root: BreakpointNode ): BreakpointsInh
 
 // creates a snapshot slot for a specific breakpoint and state
 function buildStateSnapshotSlot(
-	styles: StyleVariantWithId[],
+	styles: StyleVariantDetails[],
 	parentBreakpoint: BreakpointStatesSlotsMapping | undefined,
 	currentBreakpoint: BreakpointStatesSlotsMapping,
 	state: StyleDefinitionState
@@ -132,13 +132,13 @@ function buildStateSnapshotSlot(
 }
 
 // creates an initial snapshot based on the passed style variants only
-function buildInitialSnapshotFromStyles( styles: StyleVariantWithId[] ): StylesInheritanceSnapshotsSlot {
+function buildInitialSnapshotFromStyles( styles: StyleVariantDetails[] ): StylesInheritanceSnapshotsSlot {
 	const snapshot: StylesInheritanceSnapshot = {};
 
-	styles.forEach( ( styleVariantWithId ) => {
+	styles.forEach( ( styleData ) => {
 		const {
-			styleVariant: { props },
-		} = styleVariantWithId;
+			variant: { props },
+		} = styleData;
 
 		Object.entries( props ).forEach( ( [ key, value ] ) => {
 			if ( ! snapshot[ key ] ) {
@@ -146,7 +146,7 @@ function buildInitialSnapshotFromStyles( styles: StyleVariantWithId[] ): StylesI
 			}
 
 			const snapshotPropValue: SnapshotPropValue = {
-				...styleVariantWithId,
+				...styleData,
 				value,
 			};
 

package/src/styles-inheritance/create-styles-inheritance.ts

@@ -1,6 +1,7 @@
 import { type BreakpointNode } from '@elementor/editor-responsive';
 import { type StyleDefinition } from '@elementor/editor-styles';
 
+import { getProviderByStyleId } from '../contexts/style-context';
 import { createSnapshotsManager } from './create-snapshots-manager';
 import { type BreakpointsStatesStyles, type StyleInheritanceMetaProps, type StylesInheritanceSnapshot } from './types';
 import { getBreakpointKey, getStateKey } from './utils';
@@ -21,9 +22,11 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 	const breakpointStateSlots: BreakpointsStatesStyles = {};
 
 	styleDefs.forEach( ( styleDef ) => {
+		const provider = getProviderByStyleId( styleDef.id )?.key ?? null;
+
 		// iterate over each style definition's variants and place them in the corresponding breakpoint's base or state styles
-		styleDef.variants.forEach( ( styleVariant ) => {
-			const { meta } = styleVariant;
+		styleDef.variants.forEach( ( variant ) => {
+			const { meta } = variant;
 			const { state, breakpoint } = meta;
 
 			const breakpointKey = getBreakpointKey( breakpoint );
@@ -40,8 +43,9 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 			}
 
 			breakpointNode[ stateKey ].push( {
-				styleId: styleDef.id,
-				styleVariant,
+				style: styleDef,
+				variant,
+				provider,
 			} );
 		} );
 	} );

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -1,70 +1,53 @@
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { ELEMENTS_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
-import { styled } from '@elementor/ui';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
+import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
-import { useStylesField } from '../hooks/use-styles-field';
-
-const Circle = styled( 'div', {
-	shouldForwardProp: ( prop ) => prop !== 'variant',
-} )< { variant?: 'overridden' | 'local-affects' | 'global-affects' } >`
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background-color: ${ ( { theme, variant } ) => {
-		switch ( variant ) {
-			case 'overridden':
-				return theme.palette.warning.main;
-			case 'global-affects':
-				return theme.palette.global.main;
-			case 'local-affects':
-				return theme.palette.primary.main;
-			default:
-				return theme.palette.text.secondary;
-		}
-	} };
-`;
 
 export const StylesInheritanceIndicator = () => {
-	const { bind } = useBoundProp();
+	const { value, path } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
-	const [ value ] = useStylesField( bind );
+
+	// in the styles inheritance snapshot the keys are only those of the top level style schema attributes
+	const [ bind ] = path;
 	const inheritanceChain = useStylesInheritanceField( bind );
 
 	if ( ! inheritanceChain.length ) {
 		return null;
 	}
 
-	const [ { styleId, styleVariant } ] = inheritanceChain;
+	const [ { style, variant, provider } ] = inheritanceChain;
+
+	if ( provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return null;
+	}
 
-	const { breakpoint, state } = styleVariant.meta;
+	const { breakpoint, state } = variant.meta;
 
 	if (
-		styleId === currentStyleId &&
+		style.id === currentStyleId &&
 		breakpoint === currentStyleMeta.breakpoint &&
 		state === currentStyleMeta.state
 	) {
 		return (
-			<Circle
+			<StyleIndicator
 				aria-label={ __( 'This is the final value', 'elementor' ) }
-				variant={
-					currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY ? 'local-affects' : 'global-affects'
-				}
+				variant={ currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY ? 'local' : 'global' }
 			/>
 		);
 	}
 
 	if ( value !== null && value !== undefined ) {
 		return (
-			<Circle
+			<StyleIndicator
 				aria-label={ __( 'This value is overridden by another style', 'elementor' ) }
 				variant="overridden"
 			/>
 		);
 	}
 
-	return <Circle aria-label={ __( 'This has value from another style', 'elementor' ) } />;
+	return <StyleIndicator aria-label={ __( 'This has value from another style', 'elementor' ) } />;
 };

package/src/styles-inheritance/types.ts

@@ -1,17 +1,18 @@
 import { type PropValue } from '@elementor/editor-props';
 import { type BreakpointId } from '@elementor/editor-responsive';
-import { type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
 export type StyleDefinitionStateWithNormal = NonNullable< StyleDefinitionState > | 'normal';
 
 type StatesMapping< T > = Partial< Record< StyleDefinitionStateWithNormal, T > >;
 
-export type StyleVariantWithId = {
-	styleId: string;
-	styleVariant: StyleDefinitionVariant;
+export type StyleVariantDetails = {
+	style: StyleDefinition;
+	provider: string | null;
+	variant: StyleDefinitionVariant;
 };
 
-export type SnapshotPropValue = StyleVariantWithId & {
+export type SnapshotPropValue = StyleVariantDetails & {
 	value: PropValue;
 };
 
@@ -26,7 +27,7 @@ export type BreakpointStatesSlotsMapping = StatesMapping< StylesInheritanceSnaps
 
 export type BreakpointsStatesSnapshotsMapping = Partial< Record< BreakpointId, BreakpointStatesSlotsMapping > >;
 
-type BreakpointStatesStyles = StatesMapping< StyleVariantWithId[] >;
+type BreakpointStatesStyles = StatesMapping< StyleVariantDetails[] >;
 
 export type BreakpointsStatesStyles = Partial< Record< BreakpointId, Partial< BreakpointStatesStyles > > >;