@elementor/editor-controls 0.8.0 → 0.10.0

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

@@ -0,0 +1,107 @@
+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 { __ } 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';
+
+const TILE_SIZE = 8;
+const TILE_WHITE = 'transparent';
+const TILE_BLACK = '#c1c1c1';
+const TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${ TILE_BLACK } 25%, ${ TILE_WHITE } 0, ${ TILE_WHITE } 75%, ${ TILE_BLACK } 0, ${ TILE_BLACK })`;
+
+const StyledCard = styled( Card )`
+	background-color: white;
+	background-image: ${ TILES_GRADIENT_FORMULA }, ${ TILES_GRADIENT_FORMULA };
+	background-size: ${ TILE_SIZE }px ${ TILE_SIZE }px;
+	background-position:
+		0 0,
+		${ TILE_SIZE / 2 }px ${ TILE_SIZE / 2 }px;
+	border: none;
+`;
+
+const StyledCardMediaContainer = styled( Stack )`
+	position: relative;
+	height: 140px;
+	object-fit: contain;
+	padding: 5px;
+	justify-content: center;
+	align-items: center;
+	background-color: rgba( 255, 255, 255, 0.37 );
+`;
+
+export const SvgMediaControl = createControl( () => {
+	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
+	const { id, url } = value ?? {};
+	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
+	const src = attachment?.url ?? url?.value ?? null;
+	const { open } = useWpMediaFrame( {
+		types: [ 'image/svg+xml' ],
+		allowedExtensions: [ 'svg' ],
+		multiple: false,
+		selected: id?.value || null,
+		onSelect: ( selectedAttachment ) => {
+			setValue( {
+				id: {
+					$$type: 'image-attachment-id',
+					value: selectedAttachment.id,
+				},
+				url: null,
+			} );
+		},
+	} );
+
+	return (
+		<Stack gap={ 1 }>
+			<ControlLabel> { __( 'Choose SVG', 'elementor' ) } </ControlLabel>
+			<ControlActions>
+				<StyledCard variant="outlined">
+					<StyledCardMediaContainer>
+						{ isFetching ? (
+							<CircularProgress role="progressbar" />
+						) : (
+							<CardMedia
+								component="img"
+								image={ src }
+								alt={ __( 'Preview SVG', 'elementor' ) }
+								sx={ { maxHeight: '140px', width: '50px' } }
+							/>
+						) }
+					</StyledCardMediaContainer>
+					<CardOverlay
+						sx={ {
+							'&:hover': {
+								backgroundColor: 'rgba( 0, 0, 0, 0.75 )',
+							},
+						} }
+					>
+						<Stack gap={ 1 }>
+							<Button
+								size="tiny"
+								color="inherit"
+								variant="outlined"
+								onClick={ () => open( { mode: 'browse' } ) }
+							>
+								{ __( 'Select SVG', 'elementor' ) }
+							</Button>
+							<Button
+								size="tiny"
+								variant="text"
+								color="inherit"
+								startIcon={ <UploadIcon /> }
+								onClick={ () => open( { mode: 'upload' } ) }
+							>
+								{ __( 'Upload SVG', 'elementor' ) }
+							</Button>
+						</Stack>
+					</CardOverlay>
+				</StyledCard>
+			</ControlActions>
+		</Stack>
+	);
+} );

package/src/create-control-replacement.tsx

@@ -4,11 +4,11 @@ import { type PropValue } from '@elementor/editor-props';
 
 import { useBoundProp } from './bound-prop-context';
 
-export type ReplaceWhenParams = {
+type ReplaceWhenParams = {
 	value: PropValue;
 };
 
-export type CreateControlReplacement = {
+type CreateControlReplacement = {
 	component: ComponentType;
 	condition: ( { value }: ReplaceWhenParams ) => boolean;
 };

package/src/env.ts

@@ -0,0 +1,5 @@
+import { parseEnv } from '@elementor/env';
+
+export const { env } = parseEnv< {
+	background_placeholder_image: string;
+} >( '@elementor/editor-controls' );

package/src/index.ts

@@ -1,6 +1,6 @@
 // control types
-export { ImageControl } from './controls/image-control';
 export { AutocompleteControl } from './controls/autocomplete-control';
+export { ImageControl } from './controls/image-control';
 export { TextControl } from './controls/text-control';
 export { TextAreaControl } from './controls/text-area-control';
 export { SizeControl } from './controls/size-control';
@@ -16,6 +16,7 @@ export { FontFamilyControl } from './controls/font-family-control';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
+export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 
 // components

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-resolution.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { Grid } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ControlLabel } from '../../../../components/control-label';
-import { SelectControl } from '../../../select-control';
-
-const backgroundResolutionOptions = [
-	{ label: __( 'Thumbnail - 150 x 150', 'elementor' ), value: 'thumbnail' },
-	{ label: __( 'Medium - 300 x 300', 'elementor' ), value: 'medium' },
-	{ label: __( 'Medium Large - 768 x 768' ), value: 'medium_large' },
-	{ label: __( 'Large 1024 x 1024', 'elementor' ), value: 'large' },
-	{ label: __( 'Full', 'elementor' ), value: 'full' },
-];
-
-export const BackgroundImageOverlayResolution = () => {
-	return (
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Resolution', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 }>
-				<SelectControl options={ backgroundResolutionOptions } />
-			</Grid>
-		</Grid>
-	);
-};