@elementor/editor-editing-panel 0.14.2 → 0.15.0

package/src/controls/components/control-container.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Stack, StackProps, styled } from '@elementor/ui';
+
+const StyledStack = styled( Stack )( ( { theme, gap, direction } ) => ( {
+	'> :only-child': {
+		width: '100%',
+	},
+	'&:where( :has( > :nth-child( 2 ):last-child ) ) > :where( * )': {
+		width: direction === 'column' ? '100%' : `calc( 50% - ${ theme.spacing( gap / 2 ) })`,
+	},
+	'&:where( :has( > :nth-child( 3 ):last-child ) ) > :where( * )': {
+		width: direction === 'column' ? '100%' : `calc( 33.3333% - ${ theme.spacing( gap * 2 ) } / 3)`,
+	},
+} ) );
+
+export const ControlContainer = ( props: StackProps ) => (
+	<StyledStack gap={ 1 } direction="row" alignItems="center" justifyContent="space-between" { ...props } />
+);

package/src/controls/control-replacement.ts

@@ -0,0 +1,26 @@
+import { PropValue } from '../types';
+
+type ReplaceWhenParams = {
+	value: PropValue;
+};
+
+type ControlReplacement = {
+	component: React.ComponentType;
+	condition: ( { value }: ReplaceWhenParams ) => boolean;
+};
+
+let controlReplacement: ControlReplacement | undefined;
+
+export const replaceControl = ( { component, condition }: ControlReplacement ) => {
+	controlReplacement = { component, condition };
+};
+
+export const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
+	let shouldReplace = false;
+
+	try {
+		shouldReplace = !! controlReplacement?.condition( { value } );
+	} catch {}
+
+	return shouldReplace ? controlReplacement?.component : undefined;
+};

package/src/controls/control-types/image-control.tsx

@@ -18,25 +18,10 @@ type Image = {
 		  };
 };
 
-// TODO: Use schema to get default image.
-const defaultState: Image = {
-	$$type: 'image',
-	value: {
-		url: '/wp-content/plugins/elementor/assets/images/placeholder.png',
-	},
-};
-
 export const ImageControl = () => {
-	const { value, setValue } = useControl< Image >( defaultState );
+	const { value, setValue } = useControl< Image >();
 	const { data: attachment } = useWpMediaAttachment( value?.value?.attachmentId );
-
-	const getImageSrc = () => {
-		if ( attachment?.url ) {
-			return attachment.url;
-		}
-
-		return value?.value?.url ?? defaultState.value.url;
-	};
+	const src = attachment?.url ?? value?.value?.url;
 
 	const { open } = useWpMediaFrame( {
 		types: [ 'image' ],
@@ -54,7 +39,7 @@ export const ImageControl = () => {
 
 	return (
 		<Card variant="outlined">
-			<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />
+			<CardMedia image={ src } sx={ { height: 150 } } />
 			<CardOverlay>
 				<Button
 					color="inherit"

package/src/controls/control-types/size-control.tsx

@@ -5,15 +5,17 @@ import { useControl } from '../control-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 
 export type SizeControlProps = {
-	units: Unit[];
+	units?: Unit[];
 	placeholder?: string;
 };
 
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 
+const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
+
 export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
 
-export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
+export const SizeControl = ( { units = defaultUnits, placeholder }: SizeControlProps ) => {
 	const { value, setValue } = useControl< SizeControlValue >();
 
 	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {

package/src/controls/control-types/text-area-control.tsx

@@ -7,7 +7,7 @@ type Props = {
 };
 
 export const TextAreaControl = ( { placeholder }: Props ) => {
-	const { value, setValue } = useControl< string >( '' );
+	const { value, setValue } = useControl< string >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );

package/src/controls/control.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import { getControlReplacement } from './control-replacement';
+import { useControl } from './control-context';
+import { createError } from '@elementor/utils';
+import { ControlType, ControlTypes, getControlByType } from './controls-registry';
+
+export type ControlTypeErrorContext = {
+	type: string;
+};
+
+const ControlTypeError = createError< ControlTypeErrorContext >( {
+	code: 'CONTROL_TYPE_NOT_FOUND',
+	message: `Control type not found.`,
+} );
+
+type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
+
+type AnyPropertyRequired< T > = {
+	[ K in keyof T ]: IsRequired< T, K >;
+}[ keyof T ] extends true
+	? true
+	: false;
+
+type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps< ControlTypes[ T ] > > extends true
+	? {
+			props: ComponentProps< ControlTypes[ T ] >;
+			type: T;
+	  }
+	: {
+			props?: ComponentProps< ControlTypes[ T ] >;
+			type: T;
+	  };
+
+export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
+	const { value } = useControl();
+
+	const ControlByType = getControlByType( type );
+
+	if ( ! ControlByType ) {
+		throw new ControlTypeError( {
+			context: { type },
+		} );
+	}
+
+	const ControlComponent = getControlReplacement( { value } ) || ControlByType;
+
+	// @ts-expect-error ControlComponent props are inferred from the type (T).
+	return <ControlComponent { ...props } />;
+};

package/src/controls/{get-control-by-type.ts → controls-registry.tsx}

@@ -1,15 +1,19 @@
-import { SelectControl } from './control-types/select-control';
-import { TextAreaControl } from './control-types/text-area-control';
-import { TextControl } from './control-types/text-control';
 import { ImageControl } from './control-types/image-control';
+import { TextControl } from './control-types/text-control';
+import { TextAreaControl } from './control-types/text-area-control';
+import { SizeControl } from './control-types/size-control';
+import { SelectControl } from './control-types/select-control';
 
-const controlTypes = {
+export const controlTypes = {
 	image: ImageControl,
-	select: SelectControl,
 	text: TextControl,
 	textarea: TextAreaControl,
-};
+	size: SizeControl,
+	select: SelectControl,
+} as const;
+
+export type ControlTypes = typeof controlTypes;
+
+export type ControlType = keyof ControlTypes;
 
-export const getControlByType = ( type: string ) => {
-	return controlTypes[ type as keyof typeof controlTypes ] ?? null;
-};
+export const getControlByType = ( type: ControlType ) => controlTypes[ type ];

package/src/controls/settings-control.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { ControlContext } from '../controls/control-context';
-import { Stack, styled } from '@elementor/ui';
+import { ControlContext } from './control-context';
 import { PropKey, PropValue } from '../types';
 import { useElementContext } from '../contexts/element-context';
 import { useWidgetSettings } from '../hooks/use-widget-settings';
 import { updateSettings } from '../sync/update-settings';
 import { ControlLabel } from '../components/control-label';
+import { ControlContainer } from './components/control-container';
 
 type Props = {
 	bind: PropKey;
@@ -13,8 +13,11 @@ type Props = {
 };
 
 export const SettingsControlProvider = ( { bind, children }: Props ) => {
-	const { element } = useElementContext();
-	const value = useWidgetSettings( { id: element.id, bind } );
+	const { element, elementType } = useElementContext();
+
+	const defaultValue = elementType.propsSchema[ bind ]?.default;
+	const settingsValue = useWidgetSettings( { id: element.id, bind } );
+	const value = settingsValue ?? defaultValue ?? null;
 
 	const setValue = ( newValue: PropValue ) => {
 		updateSettings( {
@@ -30,26 +33,10 @@ export const SettingsControlProvider = ( { bind, children }: Props ) => {
 
 const SettingsControl = ( { children, bind }: Props ) => (
 	<SettingsControlProvider bind={ bind }>
-		<StyledStack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap">
-			{ children }
-		</StyledStack>
+		<ControlContainer flexWrap="wrap">{ children }</ControlContainer>
 	</SettingsControlProvider>
 );
 
-const StyledStack = styled( Stack )( ( { theme } ) => {
-	const gap = theme.spacing( 1 );
-
-	return {
-		gap,
-		'& > *': {
-			width: `calc(50% - ${ gap } / 2)`,
-		},
-		'& > label': {
-			flexShrink: 0,
-		},
-	};
-} );
-
 // TODO: When we start using useControl inside the label component, we should create a new component for it,
 // and keep ControlLabel as a simple label component without context.
 SettingsControl.Label = ControlLabel;

package/src/hooks/use-dynamic-tags-config.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useElementContext } from '../contexts/element-context';
+import { PropKey } from '../types';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+
+export const useDynamicTagsConfig = ( propName: PropKey ) => {
+	let categories: string[] = [];
+
+	const { elementType } = useElementContext();
+
+	const propSchema = elementType.propsSchema?.[ propName ];
+
+	if ( propSchema ) {
+		const dynamicTags = getAtomicDynamicTags();
+
+		categories = dynamicTags?.propTypesToDynamic?.[ propSchema.type ] || [];
+	}
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	return useMemo( () => getDynamicTagsByCategories( categories ), [ categories.join() ] );
+};
+
+const getDynamicTagsByCategories = ( categories: string[] ) => {
+	const dynamicTags = getAtomicDynamicTags();
+
+	if ( ! categories.length || ! dynamicTags?.tags ) {
+		return [];
+	}
+
+	const _categories = new Set( categories );
+
+	return Object.values( dynamicTags.tags ).filter( ( dynamicTag ) =>
+		dynamicTag.categories.some( ( category ) => _categories.has( category ) )
+	);
+};

package/src/hooks/use-element-type.ts

@@ -17,9 +17,14 @@ export default function useElementType( type?: string ) {
 				return null;
 			}
 
+			if ( ! elementType?.atomic_props_schema ) {
+				return null;
+			}
+
 			return {
 				key: type,
 				controls: elementType.atomic_controls,
+				propsSchema: elementType.atomic_props_schema,
 				title: elementType.title,
 			};
 		},

package/src/index.ts

@@ -1,3 +1,6 @@
+export { replaceControl } from './controls/control-replacement';
+export { useControl } from './controls/control-context';
+
 import init from './init';
 
 init();

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

@@ -0,0 +1,14 @@
+import { getElementorConfig } from './get-elementor-config';
+
+export const getAtomicDynamicTags = () => {
+	const { atomicDynamicTags } = getElementorConfig();
+
+	if ( ! atomicDynamicTags ) {
+		return null;
+	}
+
+	return {
+		tags: atomicDynamicTags.tags,
+		propTypesToDynamic: atomicDynamicTags.prop_types_to_dynamic,
+	};
+};

package/src/sync/get-elementor-config.ts

@@ -0,0 +1,7 @@
+import { ExtendedWindow } from './types';
+
+export const getElementorConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.config ?? {};
+};

package/src/sync/types.ts

@@ -1,4 +1,4 @@
-import { ControlItem, PropValue } from '../types';
+import { ControlItem, PropsSchema, PropValue } from '../types';
 import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-style';
 
 export type ExtendedWindow = Window & {
@@ -10,14 +10,28 @@ export type ExtendedWindow = Window & {
 			string,
 			{
 				atomic_controls?: ControlItem[];
+				atomic_props_schema?: PropsSchema;
 				controls: object;
 				title: string;
 			}
 		>;
 		getContainer?: ( id: string ) => V1Element;
+		config?: {
+			atomicDynamicTags?: {
+				tags: DynamicTags;
+				prop_types_to_dynamic: Record< string, string[] >;
+			};
+		};
 	};
 };
 
+export type DynamicTags = Record< DynamicTag[ 'name' ], DynamicTag >;
+
+export type DynamicTag = {
+	name: string;
+	categories: string[];
+};
+
 export type V1Element = {
 	model: V1Model< V1ElementModelProps >;
 	settings?: V1Model< V1ElementSettingsProps >;

package/src/types.ts

@@ -8,6 +8,7 @@ export type Element = {
 export type ElementType = {
 	key: string;
 	controls: ControlItem[];
+	propsSchema: PropsSchema;
 	title: string;
 };
 
@@ -33,6 +34,19 @@ export type Control = {
 
 export type ControlItem = ControlsSection | Control;
 
+export type Constraint = {
+	type: string;
+	value: unknown;
+};
+
+export type PropDefinition = {
+	type: string;
+	default: PropValue;
+	constraints?: Constraint[];
+};
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropDefinition >;
+
 type MaybeArray< T > = T | T[];
 
 export type TransformablePropValue< T = unknown > = {