@elementor/editor-controls 4.4.0-1123 → 4.4.0-1125

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.4.0-1123",
+  "version": "4.4.0-1125",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1123",
-    "@elementor/editor-elements": "4.4.0-1123",
-    "@elementor/editor-props": "4.4.0-1123",
-    "@elementor/editor-responsive": "4.4.0-1123",
-    "@elementor/editor-ui": "4.4.0-1123",
-    "@elementor/editor-v1-adapters": "4.4.0-1123",
-    "@elementor/env": "4.4.0-1123",
-    "@elementor/events": "4.4.0-1123",
-    "@elementor/http-client": "4.4.0-1123",
+    "@elementor/editor-current-user": "4.4.0-1125",
+    "@elementor/editor-elements": "4.4.0-1125",
+    "@elementor/editor-props": "4.4.0-1125",
+    "@elementor/editor-responsive": "4.4.0-1125",
+    "@elementor/editor-ui": "4.4.0-1125",
+    "@elementor/editor-v1-adapters": "4.4.0-1125",
+    "@elementor/env": "4.4.0-1125",
+    "@elementor/events": "4.4.0-1125",
+    "@elementor/http-client": "4.4.0-1125",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1123",
-    "@elementor/query": "4.4.0-1123",
-    "@elementor/schema": "4.4.0-1123",
-    "@elementor/session": "4.4.0-1123",
+    "@elementor/locations": "4.4.0-1125",
+    "@elementor/query": "4.4.0-1125",
+    "@elementor/schema": "4.4.0-1125",
+    "@elementor/session": "4.4.0-1125",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1123",
-    "@elementor/wp-media": "4.4.0-1123",
+    "@elementor/utils": "4.4.0-1125",
+    "@elementor/wp-media": "4.4.0-1125",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/image-control.tsx

@@ -24,7 +24,7 @@ export const ImageControl = createControl( ( { sizes, label = __( 'Image', 'elem
 		<PropProvider { ...propContext }>
 			<Stack gap={ 1.5 }>
 				<ControlLabel>{ label }</ControlLabel>
-				<ImageSrcControl />
+				<ImageSrcControl label={ label } />
 				<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
 					<Grid item xs={ 6 }>
 						<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
@@ -38,13 +38,13 @@ export const ImageControl = createControl( ( { sizes, label = __( 'Image', 'elem
 	);
 } );
 
-const ImageSrcControl = () => {
+const ImageSrcControl = ( { label }: { label: string } ) => {
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
 
 	return (
 		<PropKeyProvider bind={ 'src' }>
-			<ImageMediaControl mediaTypes={ mediaTypes } />
+			<ImageMediaControl mediaTypes={ mediaTypes } label={ label } />
 		</PropKeyProvider>
 	);
 };

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

@@ -1,19 +1,22 @@
 import * as React from 'react';
 import { imageSrcPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
-import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
+import { Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
 import { type MediaType, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { MediaSelectActions } from './media-select-actions';
 
 type ImageMediaControlProps = {
 	mediaTypes?: MediaType[];
+	label?: string;
 };
 
-export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }: ImageMediaControlProps ) => {
+export const ImageMediaControl = createControl( ( { mediaTypes, label }: ImageMediaControlProps ) => {
+	const resolvedMediaTypes = mediaTypes ?? [ 'image' ];
+	const groupLabel = label ?? __( 'Image', 'elementor' );
 	const { value, setValue, propType, placeholder } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
@@ -26,7 +29,7 @@ export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }:
 	const currentAltForModal = ( value as { alt?: { value?: string } | null } | null | undefined )?.alt?.value;
 
 	const { open } = useWpMediaFrame( {
-		mediaTypes,
+		mediaTypes: resolvedMediaTypes,
 		multiple: false,
 		selected: id?.value || null,
 		allowUrlImport: true,
@@ -61,35 +64,14 @@ export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }:
 					) }
 				</CardMedia>
 				<CardOverlay>
-					<Stack gap={ 1 }>
-						<Button
-							size="tiny"
-							color="inherit"
-							variant="outlined"
-							onClick={ () => open( { mode: 'browse' } ) }
-						>
-							{ __( 'Select image', 'elementor' ) }
-						</Button>
-						<Button
-							size="tiny"
-							variant="text"
-							color="inherit"
-							startIcon={ <UploadIcon /> }
-							onClick={ () => open( { mode: 'upload' } ) }
-						>
-							{ __( 'Upload', 'elementor' ) }
-						</Button>
-						<Button
-							size="tiny"
-							variant="text"
-							color="inherit"
-							onClick={ () =>
-								open( { mode: 'url', currentUrl: currentUrlForModal, currentAlt: currentAltForModal } )
-							}
-						>
-							{ __( 'Insert from URL', 'elementor' ) }
-						</Button>
-					</Stack>
+					<MediaSelectActions
+						label={ groupLabel }
+						onSelect={ () => open( { mode: 'browse' } ) }
+						onUpload={ () => open( { mode: 'upload' } ) }
+						onInsertUrl={ () =>
+							open( { mode: 'url', currentUrl: currentUrlForModal, currentAlt: currentAltForModal } )
+						}
+					/>
 				</CardOverlay>
 			</Card>
 		</ControlActions>

package/src/controls/media-select-actions.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { UploadIcon } from '@elementor/icons';
+import { Box, Button, Stack, styled } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const SELECT_AREA_WIDTH = 72;
+const UPLOAD_AREA_WIDTH = 48;
+const SPLIT_BUTTON_MIN_HEIGHT = 32;
+const SPLIT_BUTTON_CORNER_RADIUS = '8px';
+const SPLIT_BUTTON_FONT_SIZE = '14px';
+
+const actionButtonSx = {
+	minWidth: 0,
+	minHeight: SPLIT_BUTTON_MIN_HEIGHT,
+	px: 2,
+	fontSize: SPLIT_BUTTON_FONT_SIZE,
+	fontWeight: 500,
+	lineHeight: 1,
+};
+
+const SplitButtonGroup = styled( Stack )( {
+	display: 'inline-flex',
+	flexDirection: 'row',
+	alignItems: 'stretch',
+	border: '1px solid currentColor',
+	borderRadius: SPLIT_BUTTON_CORNER_RADIUS,
+	overflow: 'hidden',
+	'& .MuiButton-root': {
+		border: 'none',
+		borderRadius: 0,
+		lineHeight: 1,
+	},
+} );
+
+type MediaActionGroupProps = {
+	label: string;
+	onSelect: () => void;
+	uploadSlot: React.ReactNode;
+	groupRef?: React.Ref< HTMLDivElement >;
+	testId?: string;
+};
+
+export const MediaActionGroup = ( { label, onSelect, uploadSlot, groupRef, testId }: MediaActionGroupProps ) => (
+	<SplitButtonGroup ref={ groupRef } role="group" aria-label={ label } direction="row" data-testid={ testId }>
+		<Button
+			size="tiny"
+			color="inherit"
+			variant="text"
+			onClick={ onSelect }
+			sx={ { ...actionButtonSx, minWidth: SELECT_AREA_WIDTH } }
+		>
+			{ __( 'Select', 'elementor' ) }
+		</Button>
+		<Box
+			sx={ {
+				width: '1px',
+				alignSelf: 'stretch',
+				bgcolor: 'currentColor',
+				flexShrink: 0,
+			} }
+		/>
+		<Box component="span" sx={ { display: 'flex', width: UPLOAD_AREA_WIDTH } }>
+			{ uploadSlot }
+		</Box>
+	</SplitButtonGroup>
+);
+
+type MediaUploadButtonProps = {
+	disabled?: boolean;
+	onClick?: () => void;
+};
+
+export const MediaUploadButton = ( { disabled = false, onClick }: MediaUploadButtonProps ) => (
+	<Button
+		sx={ { ...actionButtonSx, width: '100%' } }
+		size="tiny"
+		color="inherit"
+		variant="text"
+		disabled={ disabled }
+		onClick={ onClick }
+		aria-label={ __( 'Upload', 'elementor' ) }
+	>
+		<UploadIcon fontSize="small" />
+	</Button>
+);
+
+type MediaSelectActionsProps = {
+	label: string;
+	onSelect: () => void;
+	onUpload: () => void;
+	onInsertUrl: () => void;
+};
+
+export const MediaSelectActions = ( { label, onSelect, onUpload, onInsertUrl }: MediaSelectActionsProps ) => (
+	<Stack alignItems="center" gap={ 1 }>
+		<MediaActionGroup
+			label={ label }
+			onSelect={ onSelect }
+			uploadSlot={ <MediaUploadButton onClick={ onUpload } /> }
+		/>
+		<Button size="tiny" variant="text" color="inherit" onClick={ onInsertUrl }>
+			{ __( 'Insert URL', 'elementor' ) }
+		</Button>
+	</Stack>
+);

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

@@ -51,9 +51,11 @@ const MODE_UPLOAD: OpenOptions = { mode: 'upload' };
 
 type SvgMediaControlProps = {
 	showIconLibrary?: boolean;
+	label?: string;
 };
 
-export const SvgMediaControl = createControl( ( { showIconLibrary = false }: SvgMediaControlProps ) => {
+export const SvgMediaControl = createControl( ( { showIconLibrary = false, label }: SvgMediaControlProps ) => {
+	const groupLabel = label ?? __( 'SVG', 'elementor' );
 	const { value: svgValue, setValue: setSvgValue } = useBoundProp( svgSrcPropTypeUtil );
 	const { value: iconValue, setValue: setIconValue } = useBoundProp( iconPropTypeUtil );
 	const id = svgValue?.id;
@@ -208,6 +210,7 @@ export const SvgMediaControl = createControl( ( { showIconLibrary = false }: Svg
 							} }
 						>
 							<SvgMediaOverlay
+								label={ groupLabel }
 								isAdmin={ isAdmin }
 								showIconLibrary={ showIconLibrary }
 								buttonGroupRef={ buttonGroupRef }

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

@@ -1,44 +1,18 @@
 import * as React from 'react';
-import { LibraryIcon, UploadIcon } from '@elementor/icons';
-import { Box, Button, Stack, styled, type SxProps, ThemeProvider, Typography } from '@elementor/ui';
+import { LibraryIcon } from '@elementor/icons';
+import { Box, Button, Stack, ThemeProvider, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
+import { MediaActionGroup, MediaUploadButton } from './media-select-actions';
 
 export const SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = 'svg-media-control-container';
 export const SVG_MEDIA_ACTION_GROUP_TEST_ID = 'svg-media-action-group';
 
-const SELECT_AREA_WIDTH = 72;
-const UPLOAD_AREA_WIDTH = 48;
-const SPLIT_BUTTON_MIN_HEIGHT = 32;
-const SPLIT_BUTTON_CORNER_RADIUS = '8px';
-const SPLIT_BUTTON_FONT_SIZE = '14px';
 const ICON_LIBRARY_PADDING = 0.625;
 
-const svgButtonSx = {
-	minWidth: 0,
-	minHeight: SPLIT_BUTTON_MIN_HEIGHT,
-	px: 2,
-	fontSize: SPLIT_BUTTON_FONT_SIZE,
-	fontWeight: 500,
-	lineHeight: 1,
-};
-
-const MediaActionGroup = styled( Stack )( {
-	display: 'inline-flex',
-	flexDirection: 'row',
-	alignItems: 'stretch',
-	border: '1px solid currentColor',
-	borderRadius: SPLIT_BUTTON_CORNER_RADIUS,
-	overflow: 'hidden',
-	'& .MuiButton-root': {
-		border: 'none',
-		borderRadius: 0,
-		lineHeight: 1,
-	},
-} );
-
 type SvgMediaOverlayProps = {
+	label: string;
 	isAdmin: boolean;
 	showIconLibrary: boolean;
 	buttonGroupRef: React.Ref< HTMLDivElement >;
@@ -50,6 +24,7 @@ type SvgMediaOverlayProps = {
 };
 
 export const SvgMediaOverlay = ( {
+	label,
 	isAdmin,
 	showIconLibrary,
 	buttonGroupRef,
@@ -60,35 +35,23 @@ export const SvgMediaOverlay = ( {
 	infotipDescription,
 }: SvgMediaOverlayProps ) => (
 	<Stack alignItems="center" gap={ 1 }>
-		<MediaActionGroup ref={ buttonGroupRef } direction="row" data-testid={ SVG_MEDIA_ACTION_GROUP_TEST_ID }>
-			<Button
-				size="tiny"
-				color="inherit"
-				variant="text"
-				onClick={ onSelectSvg }
-				aria-label={ __( 'Select', 'elementor' ) }
-				sx={ { ...svgButtonSx, minWidth: SELECT_AREA_WIDTH } }
-			>
-				{ __( 'Select', 'elementor' ) }
-			</Button>
-			<Box
-				sx={ {
-					width: '1px',
-					alignSelf: 'stretch',
-					bgcolor: 'currentColor',
-					flexShrink: 0,
-				} }
-			/>
-			<ConditionalControlInfotip
-				title={ infotipTitle }
-				description={ infotipDescription }
-				isEnabled={ ! isAdmin }
-			>
-				<Box component="span" sx={ { display: 'flex', width: UPLOAD_AREA_WIDTH } }>
-					<UploadControl isAdmin={ isAdmin } onUpload={ onUpload } />
-				</Box>
-			</ConditionalControlInfotip>
-		</MediaActionGroup>
+		<MediaActionGroup
+			label={ label }
+			onSelect={ onSelectSvg }
+			groupRef={ buttonGroupRef }
+			testId={ SVG_MEDIA_ACTION_GROUP_TEST_ID }
+			uploadSlot={
+				<ConditionalControlInfotip
+					title={ infotipTitle }
+					description={ infotipDescription }
+					isEnabled={ ! isAdmin }
+				>
+					<Box component="span" sx={ { display: 'flex', width: '100%' } }>
+						<UploadControl isAdmin={ isAdmin } onUpload={ onUpload } />
+					</Box>
+				</ConditionalControlInfotip>
+			}
+		/>
 		{ showIconLibrary ? (
 			<Button
 				size="tiny"
@@ -111,34 +74,12 @@ export const SvgMediaOverlay = ( {
 
 const UploadControl = ( { isAdmin, onUpload }: { isAdmin: boolean; onUpload: () => void } ) => {
 	if ( isAdmin ) {
-		return <UploadButton sx={ svgButtonSx } onClick={ onUpload } />;
+		return <MediaUploadButton onClick={ onUpload } />;
 	}
 
 	return (
 		<ThemeProvider colorScheme="dark">
-			<UploadButton disabled sx={ svgButtonSx } />
+			<MediaUploadButton disabled />
 		</ThemeProvider>
 	);
 };
-
-const UploadButton = ( {
-	disabled = false,
-	sx,
-	onClick,
-}: {
-	disabled?: boolean;
-	sx?: SxProps;
-	onClick?: () => void;
-} ) => (
-	<Button
-		sx={ { ...sx, width: '100%' } }
-		size="tiny"
-		color="inherit"
-		variant="text"
-		disabled={ disabled }
-		onClick={ onClick }
-		aria-label={ __( 'Upload', 'elementor' ) }
-	>
-		<UploadIcon fontSize="small" />
-	</Button>
-);

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

@@ -1,18 +1,22 @@
 import * as React from 'react';
 import { urlPropTypeUtil, videoSrcPropTypeUtil } from '@elementor/editor-props';
-import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
+import { Card, CardMedia, CardOverlay, CircularProgress } from '@elementor/ui';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { MediaSelectActions } from './media-select-actions';
 import { TILES_GRADIENT_FORMULA } from './svg-media-control';
 
 const PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + '/shapes/play-triangle.svg';
 
-export const VideoMediaControl = createControl( () => {
+type VideoMediaControlProps = {
+	label?: string;
+};
+
+export const VideoMediaControl = createControl( ( { label = __( 'Video', 'elementor' ) }: VideoMediaControlProps ) => {
 	const { value, setValue, propType } = useBoundProp( videoSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
@@ -63,33 +67,12 @@ export const VideoMediaControl = createControl( () => {
 					<VideoPreview isFetching={ isFetching } videoUrl={ videoUrl } />
 				</CardMedia>
 				<CardOverlay>
-					<Stack gap={ 1 }>
-						<Button
-							size="tiny"
-							color="inherit"
-							variant="outlined"
-							onClick={ () => open( { mode: 'browse' } ) }
-						>
-							{ __( 'Select video', 'elementor' ) }
-						</Button>
-						<Button
-							size="tiny"
-							variant="text"
-							color="inherit"
-							startIcon={ <UploadIcon /> }
-							onClick={ () => open( { mode: 'upload' } ) }
-						>
-							{ __( 'Upload', 'elementor' ) }
-						</Button>
-						<Button
-							size="tiny"
-							variant="text"
-							color="inherit"
-							onClick={ () => open( { mode: 'url', currentUrl: currentUrlForModal } ) }
-						>
-							{ __( 'Insert from URL', 'elementor' ) }
-						</Button>
-					</Stack>
+					<MediaSelectActions
+						label={ label }
+						onSelect={ () => open( { mode: 'browse' } ) }
+						onUpload={ () => open( { mode: 'upload' } ) }
+						onInsertUrl={ () => open( { mode: 'url', currentUrl: currentUrlForModal } ) }
+					/>
 				</CardOverlay>
 			</Card>
 		</ControlActions>