@elementor/editor-controls 0.13.0 → 0.15.0

package/src/controls/linked-dimensions-control.tsx

@@ -1,117 +1,169 @@
 import * as React from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { Grid, Stack, ToggleButton } from '@elementor/ui';
+import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { SizeControl } from './size-control';
+import { type ExtendedValue, SizeControl } from './size-control';
 
-export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
-	const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp( dimensionsPropTypeUtil );
-	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+export const LinkedDimensionsControl = createControl(
+	( {
+		label,
+		isSiteRtl = false,
+		extendedValues,
+	}: {
+		label: string;
+		isSiteRtl?: boolean;
+		extendedValues?: ExtendedValue[];
+	} ) => {
+		const {
+			value: dimensionsValue,
+			setValue: setDimensionsValue,
+			propType,
+		} = useBoundProp( dimensionsPropTypeUtil );
+		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
-	const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
+		const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
 
-	const onLinkToggle = () => {
-		if ( ! isLinked ) {
-			setSizeValue( dimensionsValue?.top?.value );
-			return;
-		}
+		const onLinkToggle = () => {
+			if ( ! isLinked ) {
+				setSizeValue( dimensionsValue[ 'block-start' ]?.value );
+				return;
+			}
 
-		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
+			const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
-		setDimensionsValue( {
-			top: value,
-			right: value,
-			bottom: value,
-			left: value,
-		} );
-	};
+			setDimensionsValue( {
+				'block-start': value,
+				'block-end': value,
+				'inline-start': value,
+				'inline-end': value,
+			} );
+		};
 
-	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+		const tooltipLabel = label.toLowerCase();
 
-	return (
-		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<ControlLabel>{ label }</ControlLabel>
-				<ToggleButton
-					aria-label={ __( 'Link inputs', 'elementor' ) }
-					size={ 'tiny' }
-					value={ 'check' }
-					selected={ isLinked }
-					sx={ { marginLeft: 'auto' } }
-					onChange={ onLinkToggle }
-				>
-					<LinkedIcon fontSize={ 'tiny' } />
-				</ToggleButton>
-			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'top' }
-							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
-					</Grid>
-				</Grid>
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'right' }
-							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
-					</Grid>
-				</Grid>
-			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+		const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+		// translators: %s: Tooltip title.
+		const linkedLabel = __( 'Link %s', 'elementor' ).replace( '%s', tooltipLabel );
+		// translators: %s: Tooltip title.
+		const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
+
+		return (
+			<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+					<ControlLabel>{ label }</ControlLabel>
+					<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
+						<ToggleButton
+							aria-label={ isLinked ? unlinkedLabel : linkedLabel }
+							size={ 'tiny' }
+							value={ 'check' }
+							selected={ isLinked }
+							sx={ { marginLeft: 'auto' } }
+							onChange={ onLinkToggle }
+						>
+							<LinkedIcon fontSize={ 'tiny' } />
+						</ToggleButton>
+					</Tooltip>
+				</Stack>
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'block-start' }
+								startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'bottom' }
-							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>
+								{ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
+							</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'inline-end' }
+								startIcon={
+									isSiteRtl ? (
+										<SideLeftIcon fontSize={ 'tiny' } />
+									) : (
+										<SideRightIcon fontSize={ 'tiny' } />
+									)
+								}
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-				</Grid>
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+				</Stack>
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'block-end' }
+								startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'left' }
-							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>
+								{ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
+							</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'inline-start' }
+								startIcon={
+									isSiteRtl ? (
+										<SideRightIcon fontSize={ 'tiny' } />
+									) : (
+										<SideLeftIcon fontSize={ 'tiny' } />
+									)
+								}
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-				</Grid>
-			</Stack>
-		</PropProvider>
-	);
-} );
+				</Stack>
+			</PropProvider>
+		);
+	}
+);
 
-const Control = ( { bind, startIcon, isLinked }: { bind: PropKey; startIcon: React.ReactNode; isLinked: boolean } ) => {
+const Control = ( {
+	bind,
+	startIcon,
+	isLinked,
+	extendedValues,
+}: {
+	bind: PropKey;
+	startIcon: React.ReactNode;
+	isLinked: boolean;
+	extendedValues?: ExtendedValue[];
+} ) => {
 	if ( isLinked ) {
-		return <SizeControl startIcon={ startIcon } />;
+		return <SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl startIcon={ startIcon } />
+			<SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />
 		</PropKeyProvider>
 	);
 };

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { sizePropTypeUtil } from '@elementor/editor-props';
+import { sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { InputAdornment } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -8,6 +8,7 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 
+export type ExtendedValue = 'auto';
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 
 const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
@@ -19,34 +20,98 @@ type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
 	units?: Unit[];
+	extendedValues?: ExtendedValue[];
 };
 
-export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
-	const { value, setValue } = useBoundProp( sizePropTypeUtil );
-
-	const [ state, setState ] = useSyncExternalState( {
-		external: value,
-		setExternal: setValue,
-		persistWhen: ( controlValue ) => !! controlValue?.size || controlValue?.size === 0,
-		fallback: ( controlValue ) => ( { unit: controlValue?.unit || defaultUnit, size: defaultSize } ),
-	} );
-
-	const handleUnitChange = ( unit: Unit ) => {
-		setState( ( prev ) => ( {
-			size: prev?.size ?? defaultSize,
-			unit,
-		} ) );
-	};
+export const SizeControl = createControl(
+	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
+		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+
+		const [ state, setState ] = useSyncExternalState( {
+			external: sizeValue,
+			setExternal: setSizeValue,
+			persistWhen: ( controlValue ) => !! controlValue?.size || controlValue?.size === 0,
+			fallback: ( controlValue ) => ( { unit: controlValue?.unit || defaultUnit, size: defaultSize } ),
+		} );
+
+		const handleUnitChange = ( unit: Unit ) => {
+			setState( ( prev ) => ( {
+				size: prev?.size ?? defaultSize,
+				unit,
+			} ) );
+		};
+
+		const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const { value: size } = event.target;
+
+			setState( ( prev ) => ( {
+				...prev,
+				size: size || size === '0' ? parseFloat( size ) : defaultSize,
+			} ) );
+		};
 
-	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { value: size } = event.target;
+		const inputProps = {
+			size: state.size,
+			unit: state.unit,
+			placeholder,
+			startIcon,
+			units,
+			extendedValues,
+			handleSizeChange,
+			handleUnitChange,
+		};
 
-		setState( ( prev ) => ( {
-			...prev,
-			size: size || size === '0' ? parseFloat( size ) : defaultSize,
-		} ) );
+		if ( extendedValues?.length ) {
+			return <ExtendedSizeInput { ...inputProps } />;
+		}
+		return <SizeInput { ...inputProps } />;
+	}
+);
+
+const ExtendedSizeInput = ( props: SizeInputProps ) => {
+	const { value: stringValue, setValue: setStringValue } = useBoundProp( stringPropTypeUtil );
+	const { extendedValues = [] } = props;
+
+	const unit = ( stringValue ?? props.unit ) as Unit;
+
+	const handleUnitChange = ( newUnit: Unit ) => {
+		if ( extendedValues.includes( newUnit as ExtendedValue ) ) {
+			setStringValue( newUnit );
+		} else {
+			props.handleUnitChange( newUnit );
+		}
 	};
 
+	return (
+		<SizeInput
+			{ ...props }
+			units={ [ ...props.units, ...( extendedValues as unknown as Unit[] ) ] }
+			handleUnitChange={ handleUnitChange }
+			unit={ unit }
+		/>
+	);
+};
+
+type SizeInputProps = {
+	unit: Unit;
+	size: number;
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units: Unit[];
+	extendedValues?: ExtendedValue[];
+	handleUnitChange: ( unit: Unit ) => void;
+	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+};
+
+const SizeInput = ( {
+	units,
+	handleUnitChange,
+	handleSizeChange,
+	placeholder,
+	startIcon,
+	size,
+	unit,
+}: SizeInputProps ) => {
 	return (
 		<ControlActions>
 			<TextFieldInnerSelection
@@ -54,7 +119,7 @@ export const SizeControl = createControl( ( { units = defaultUnits, placeholder,
 					<SelectionEndAdornment
 						options={ units }
 						onClick={ handleUnitChange }
-						value={ state?.unit ?? defaultUnit }
+						value={ unit ?? defaultUnit }
 					/>
 				}
 				placeholder={ placeholder }
@@ -62,9 +127,9 @@ export const SizeControl = createControl( ( { units = defaultUnits, placeholder,
 					startIcon ? <InputAdornment position="start">{ startIcon }</InputAdornment> : undefined
 				}
 				type="number"
-				value={ Number.isNaN( state?.size ) ? '' : state?.size }
+				value={ Number.isNaN( size ) ? '' : size }
 				onChange={ handleSizeChange }
 			/>
 		</ControlActions>
 	);
-} );
+};

package/src/controls/svg-media-control.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled } from '@elementor/ui';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 
 const TILE_SIZE = 8;
 const TILE_WHITE = 'transparent';
@@ -40,9 +41,10 @@ export const SvgMediaControl = createControl( () => {
 	const { id, url } = value ?? {};
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url?.value ?? null;
+	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+
 	const { open } = useWpMediaFrame( {
-		types: [ 'image/svg+xml' ],
-		allowedExtensions: [ 'svg' ],
+		mediaTypes: [ 'svg' ],
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
@@ -56,9 +58,17 @@ export const SvgMediaControl = createControl( () => {
 		},
 	} );
 
+	const handleClick = ( openOptions?: OpenOptions ) => {
+		if ( allowSvgUpload ) {
+			open( openOptions );
+		} else {
+			// TODO open upload SVG confirmation modal
+		}
+	};
+
 	return (
 		<Stack gap={ 1 }>
-			<ControlLabel> { __( 'Choose SVG', 'elementor' ) } </ControlLabel>
+			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>
@@ -85,7 +95,7 @@ export const SvgMediaControl = createControl( () => {
 								size="tiny"
 								color="inherit"
 								variant="outlined"
-								onClick={ () => open( { mode: 'browse' } ) }
+								onClick={ () => handleClick( { mode: 'browse' } ) }
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
@@ -94,9 +104,9 @@ export const SvgMediaControl = createControl( () => {
 								variant="text"
 								color="inherit"
 								startIcon={ <UploadIcon /> }
-								onClick={ () => open( { mode: 'upload' } ) }
+								onClick={ () => handleClick( { mode: 'upload' } ) }
 							>
-								{ __( 'Upload SVG', 'elementor' ) }
+								{ __( 'Upload', 'elementor' ) }
 							</Button>
 						</Stack>
 					</CardOverlay>

package/src/hooks/use-filtered-font-families.ts

@@ -1,37 +1,24 @@
-import { __ } from '@wordpress/i18n';
-
-export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
-
-const supportedCategories: Record< SupportedFonts, string > = {
-	system: __( 'System', 'elementor' ),
-	googlefonts: __( 'Google Fonts', 'elementor' ),
-	customfonts: __( 'Custom Fonts', 'elementor' ),
+export type FontListItem = {
+	type: 'font' | 'category';
+	value: string;
 };
 
-export const useFilteredFontFamilies = ( fontFamilies: Record< string, SupportedFonts >, searchValue: string ) => {
-	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< Map< string, string[] > >(
-		( acc, [ font, category ] ) => {
-			const isMatch = font.toLowerCase().includes( searchValue.trim().toLowerCase() );
-
-			if ( ! isMatch ) {
-				return acc;
-			}
-
-			const categoryLabel = supportedCategories[ category as SupportedFonts ];
+export const useFilteredFontFamilies = ( fontFamilies: Record< string, string[] >, searchValue: string ) => {
+	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< FontListItem[] >(
+		( acc, [ category, fonts ] ) => {
+			const filteredFonts = fonts.filter( ( font ) => font.toLowerCase().includes( searchValue.toLowerCase() ) );
 
-			if ( categoryLabel ) {
-				const existingCategory = acc.get( categoryLabel );
+			if ( filteredFonts.length ) {
+				acc.push( { type: 'category', value: category } );
 
-				if ( existingCategory ) {
-					existingCategory.push( font );
-				} else {
-					acc.set( categoryLabel, [ font ] );
-				}
+				filteredFonts.forEach( ( font ) => {
+					acc.push( { type: 'font', value: font } );
+				} );
 			}
 
 			return acc;
 		},
-		new Map()
+		[]
 	);
 
 	return [ ...filteredFontFamilies ];

package/src/hooks/use-unfiltered-files-upload.ts

@@ -0,0 +1,40 @@
+import { useMutation, useQuery, useQueryClient } from '@elementor/query';
+
+import { apiClient } from '../api';
+
+export const UNFILTERED_FILES_UPLOAD_KEY = 'elementor_unfiltered_files_upload';
+
+const unfilteredFilesQueryKey = {
+	queryKey: [ UNFILTERED_FILES_UPLOAD_KEY ],
+};
+
+type Value = '0' | '1';
+
+export const useUnfilteredFilesUpload = () =>
+	useQuery( {
+		...unfilteredFilesQueryKey,
+		queryFn: (): Promise< boolean > =>
+			apiClient.getElementorSetting< Value >( UNFILTERED_FILES_UPLOAD_KEY ).then( ( res ) => {
+				return formatResponse( res );
+			} ),
+		staleTime: Infinity,
+	} );
+
+export function useUpdateUnfilteredFilesUpload() {
+	const queryClient = useQueryClient();
+
+	const mutate = useMutation( {
+		mutationFn: ( { allowUnfilteredFilesUpload }: { allowUnfilteredFilesUpload: boolean } ) =>
+			apiClient.updateElementorSetting< Value >(
+				UNFILTERED_FILES_UPLOAD_KEY,
+				allowUnfilteredFilesUpload ? '1' : '0'
+			),
+		onSuccess: () => queryClient.invalidateQueries( unfilteredFilesQueryKey ),
+	} );
+
+	return mutate;
+}
+
+const formatResponse = ( response: Value ): boolean => {
+	return Boolean( response === '1' );
+};

package/src/index.ts

@@ -11,7 +11,7 @@ export { ToggleControl } from './controls/toggle-control';
 export { NumberControl } from './controls/number-control';
 export { EqualUnequalSizesControl } from './controls/equal-unequal-sizes-control';
 export { LinkedDimensionsControl } from './controls/linked-dimensions-control';
-export { FontFamilyControl } from './controls/font-family-control';
+export { FontFamilyControl } from './controls/font-family-control/font-family-control';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
@@ -29,6 +29,7 @@ export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue } from './bound-prop-context/prop-context';
+export type { ExtendedValue } from './controls/size-control';
 
 // providers
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';