@elementor/editor-controls 0.14.0 → 0.15.0

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

@@ -1,7 +1,7 @@
 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';
@@ -10,7 +10,15 @@ import { createControl } from '../create-control';
 import { type ExtendedValue, SizeControl } from './size-control';
 
 export const LinkedDimensionsControl = createControl(
-	( { label, extendedValues }: { label: string; extendedValues?: ExtendedValue[] } ) => {
+	( {
+		label,
+		isSiteRtl = false,
+		extendedValues,
+	}: {
+		label: string;
+		isSiteRtl?: boolean;
+		extendedValues?: ExtendedValue[];
+	} ) => {
 		const {
 			value: dimensionsValue,
 			setValue: setDimensionsValue,
@@ -22,36 +30,44 @@ export const LinkedDimensionsControl = createControl(
 
 		const onLinkToggle = () => {
 			if ( ! isLinked ) {
-				setSizeValue( dimensionsValue?.top?.value );
+				setSizeValue( dimensionsValue[ 'block-start' ]?.value );
 				return;
 			}
 
 			const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
 			setDimensionsValue( {
-				top: value,
-				right: value,
-				bottom: value,
-				left: value,
+				'block-start': value,
+				'block-end': value,
+				'inline-start': value,
+				'inline-end': value,
 			} );
 		};
 
+		const tooltipLabel = label.toLowerCase();
+
 		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>
-					<ToggleButton
-						aria-label={ __( 'Link Inputs', 'elementor' ) }
-						size={ 'tiny' }
-						value={ 'check' }
-						selected={ isLinked }
-						sx={ { marginLeft: 'auto' } }
-						onChange={ onLinkToggle }
-					>
-						<LinkedIcon fontSize={ 'tiny' } />
-					</ToggleButton>
+					<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">
@@ -60,7 +76,7 @@ export const LinkedDimensionsControl = createControl(
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'top' }
+								bind={ 'block-start' }
 								startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
@@ -69,12 +85,20 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 1 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+							<ControlLabel>
+								{ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
+							</ControlLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'right' }
-								startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+								bind={ 'inline-end' }
+								startIcon={
+									isSiteRtl ? (
+										<SideLeftIcon fontSize={ 'tiny' } />
+									) : (
+										<SideRightIcon fontSize={ 'tiny' } />
+									)
+								}
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
 							/>
@@ -88,7 +112,7 @@ export const LinkedDimensionsControl = createControl(
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'bottom' }
+								bind={ 'block-end' }
 								startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
@@ -97,12 +121,20 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 1 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+							<ControlLabel>
+								{ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
+							</ControlLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'left' }
-								startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+								bind={ 'inline-start' }
+								startIcon={
+									isSiteRtl ? (
+										<SideRightIcon fontSize={ 'tiny' } />
+									) : (
+										<SideLeftIcon fontSize={ 'tiny' } />
+									)
+								}
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
 							/>

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,6 +58,14 @@ export const SvgMediaControl = createControl( () => {
 		},
 	} );
 
+	const handleClick = ( openOptions?: OpenOptions ) => {
+		if ( allowSvgUpload ) {
+			open( openOptions );
+		} else {
+			// TODO open upload SVG confirmation modal
+		}
+	};
+
 	return (
 		<Stack gap={ 1 }>
 			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
@@ -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,7 +104,7 @@ export const SvgMediaControl = createControl( () => {
 								variant="text"
 								color="inherit"
 								startIcon={ <UploadIcon /> }
-								onClick={ () => open( { mode: 'upload' } ) }
+								onClick={ () => handleClick( { mode: 'upload' } ) }
 							>
 								{ __( 'Upload', 'elementor' ) }
 							</Button>

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';

package/src/controls/font-family-control.tsx

@@ -1,157 +0,0 @@
-import { Fragment, useId, useState } from 'react';
-import * as React from 'react';
-import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	Divider,
-	IconButton,
-	InputAdornment,
-	Link,
-	ListSubheader,
-	MenuItem,
-	MenuList,
-	Popover,
-	Stack,
-	TextField,
-	Typography,
-	UnstableTag,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useBoundProp } from '../bound-prop-context';
-import { createControl } from '../create-control';
-import { useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
-
-const SIZE = 'tiny';
-
-export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
-	const [ searchValue, setSearchValue ] = useState( '' );
-	const { value: fontFamily, setValue: setFontFamily } = useBoundProp( stringPropTypeUtil );
-
-	const popupId = useId();
-	const popoverState = usePopupState( { variant: 'popover', popupId } );
-
-	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
-
-	if ( ! filteredFontFamilies ) {
-		return null;
-	}
-
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
-	};
-
-	const handleClose = () => {
-		setSearchValue( '' );
-
-		popoverState.close();
-	};
-
-	return (
-		<>
-			<UnstableTag
-				variant="outlined"
-				label={ fontFamily }
-				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-				{ ...bindTrigger( popoverState ) }
-				fullWidth
-			/>
-
-			<Popover
-				disablePortal
-				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-				{ ...bindPopover( popoverState ) }
-				onClose={ handleClose }
-			>
-				<Stack>
-					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-						<EditIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-						<Typography variant="subtitle2">{ __( 'Font family', 'elementor' ) }</Typography>
-						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
-					</Stack>
-
-					<Box px={ 1.5 } pb={ 1 }>
-						<TextField
-							fullWidth
-							size={ SIZE }
-							value={ searchValue }
-							placeholder={ __( 'Search fonts…', 'elementor' ) }
-							onChange={ handleSearch }
-							InputProps={ {
-								startAdornment: (
-									<InputAdornment position="start">
-										<SearchIcon fontSize={ SIZE } />
-									</InputAdornment>
-								),
-							} }
-						/>
-					</Box>
-					<Divider />
-					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-						{ filteredFontFamilies.length > 0 ? (
-							<MenuList role="listbox" tabIndex={ 0 }>
-								{ filteredFontFamilies.map( ( [ category, items ], index ) => (
-									<Fragment key={ index }>
-										<ListSubheader
-											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
-										>
-											{ category }
-										</ListSubheader>
-										{ items.map( ( item ) => {
-											const isSelected = item === fontFamily;
-
-											return (
-												<MenuItem
-													key={ item }
-													selected={ isSelected }
-													// eslint-disable-next-line jsx-a11y/no-autofocus
-													autoFocus={ isSelected }
-													onClick={ () => {
-														setFontFamily( item );
-														handleClose();
-													} }
-													sx={ { px: 1.5, typography: 'caption' } }
-													style={ { fontFamily: item } }
-												>
-													{ item }
-												</MenuItem>
-											);
-										} ) }
-									</Fragment>
-								) ) }
-							</MenuList>
-						) : (
-							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
-								<PhotoIcon fontSize="large" />
-								<Typography align="center" variant="caption" color="text.secondary">
-									{ __( 'Sorry, nothing matched', 'elementor' ) }
-									<br />
-									&ldquo;{ searchValue }&rdquo;.
-								</Typography>
-								<Typography align="center" variant="caption" color="text.secondary">
-									<Link
-										color="secondary"
-										variant="caption"
-										component="button"
-										onClick={ () => setSearchValue( '' ) }
-									>
-										{ __( 'Clear the filters', 'elementor' ) }
-									</Link>
-									&nbsp;
-									{ __( 'and try again.', 'elementor' ) }
-								</Typography>
-							</Stack>
-						) }
-					</Box>
-				</Stack>
-			</Popover>
-		</>
-	);
-} );