@elementor/editor-editing-panel 1.40.0 → 1.41.0

package/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack, styled, UnstableColorIndicator } from '@elementor/ui';
+
+export type Color = {
+	color: string;
+};
+
+export const backgroundColorOverlayTransformer = createTransformer( ( value: Color ) => (
+	<Stack direction="row" gap={ 10 }>
+		<ItemIconColor value={ value } />
+		<ItemLabelColor value={ value } />
+	</Stack>
+) );
+
+const ItemIconColor = ( { value }: { value: Color } ) => {
+	const { color } = value;
+	return <StyledUnstableColorIndicator size="inherit" component="span" value={ color } />;
+};
+
+const ItemLabelColor = ( { value: { color } }: { value: Color } ) => {
+	return <span>{ color }</span>;
+};
+
+export const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+} ) );

package/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type Color, StyledUnstableColorIndicator } from './background-color-overlay-transformer';
+
+type ColorStop = Color & {
+	offset: number;
+};
+
+type Gradient = {
+	type: string;
+	angle?: number;
+	positions?: string;
+	stops: ColorStop[];
+};
+
+export const backgroundGradientOverlayTransformer = createTransformer( ( value: Gradient ) => (
+	<Stack direction="row" gap={ 10 }>
+		<ItemIconGradient value={ value } />
+		<ItemLabelGradient value={ value } />
+	</Stack>
+) );
+
+const ItemIconGradient = ( { value }: { value: Gradient } ) => {
+	const gradient = getGradientValue( value );
+
+	return <StyledUnstableColorIndicator size="inherit" component="span" value={ gradient } />;
+};
+
+const ItemLabelGradient = ( { value }: { value: Gradient } ) => {
+	if ( value.type === 'linear' ) {
+		return <span>{ __( 'Linear Gradient', 'elementor' ) }</span>;
+	}
+
+	return <span>{ __( 'Radial Gradient', 'elementor' ) }</span>;
+};
+
+const getGradientValue = ( gradient: Gradient ) => {
+	const stops = gradient.stops
+		?.map( ( { color, offset }: ColorStop ) => `${ color } ${ offset ?? 0 }%` )
+		?.join( ',' );
+
+	if ( gradient.type === 'linear' ) {
+		return `linear-gradient(${ gradient.angle }deg, ${ stops })`;
+	}
+
+	return `radial-gradient(circle at ${ gradient.positions }, ${ stops })`;
+};

package/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
+import { CardMedia, Stack, type Theme } from '@elementor/ui';
+import { useWpMediaAttachment } from '@elementor/wp-media';
+
+type ImageSrcAttachment = { id: number; url: null };
+
+type ImageSrcUrl = { url: string; id: null };
+
+type Image = {
+	image: {
+		src: ImageSrcAttachment | ImageSrcUrl;
+		size: 'thumbnail' | 'medium' | 'large' | 'full';
+	};
+};
+
+export const backgroundImageOverlayTransformer = createTransformer( ( value: Image ) => (
+	<Stack direction="row" gap={ 10 }>
+		<ItemIconImage value={ value } />
+		<ItemLabelImage value={ value } />
+	</Stack>
+) );
+
+const ItemIconImage = ( { value }: { value: Image } ) => {
+	const { imageUrl } = useImage( value );
+
+	return (
+		<CardMedia
+			image={ imageUrl }
+			sx={ ( theme: Theme ) => ( {
+				height: '1em',
+				width: '1em',
+				borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+				outline: `1px solid ${ theme.palette.action.disabled }`,
+			} ) }
+		/>
+	);
+};
+
+const ItemLabelImage = ( { value }: { value: Image } ) => {
+	const { imageTitle } = useImage( value );
+
+	return (
+		<EllipsisWithTooltip title={ imageTitle }>
+			<span>{ imageTitle }</span>
+		</EllipsisWithTooltip>
+	);
+};
+
+const useImage = ( image: Image ) => {
+	let imageTitle,
+		imageUrl: string | null = null;
+
+	const imageSrc = image?.image.src;
+	const { data: attachment } = useWpMediaAttachment( imageSrc.id || null );
+
+	if ( imageSrc.id ) {
+		const imageFileTypeExtension = getFileExtensionFromFilename( attachment?.filename );
+		imageTitle = `${ attachment?.title }${ imageFileTypeExtension }` || null;
+		imageUrl = attachment?.url || null;
+	} else if ( imageSrc.url ) {
+		imageUrl = imageSrc.url;
+		imageTitle = imageUrl?.substring( imageUrl.lastIndexOf( '/' ) + 1 ) || null;
+	}
+
+	return { imageTitle, imageUrl };
+};
+
+const getFileExtensionFromFilename = ( filename?: string ) => {
+	if ( ! filename ) {
+		return '';
+	}
+
+	// get the substring after the last . in the filename
+	const extension = filename.substring( filename.lastIndexOf( '.' ) + 1 );
+
+	return `.${ extension }`;
+};

package/src/styles-inheritance/transformers/background-overlay-transformer.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack } from '@elementor/ui';
+
+type BackgroundOverlay = ReactNode[];
+
+export const backgroundOverlayTransformer = createTransformer( ( values: BackgroundOverlay[] ) => {
+	if ( ! values || values.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<Stack direction="column">
+			{ values.map( ( item, index ) => (
+				<Stack key={ index }>{ item }</Stack>
+			) ) }
+		</Stack>
+	);
+} );

package/src/styles-inheritance/types.ts

@@ -1,4 +1,4 @@
-import { type PropValue } from '@elementor/editor-props';
+import { type PropKey, type PropType, type PropValue } from '@elementor/editor-props';
 import { type BreakpointId } from '@elementor/editor-responsive';
 import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
@@ -44,5 +44,9 @@ export type StylesInheritanceSnapshotGetter = (
 
 export type StylesInheritanceAPI = {
 	getSnapshot: ( meta: StyleInheritanceMetaProps ) => StylesInheritanceSnapshot | undefined;
-	getInheritanceChain: ( snapshotField: StylesInheritanceSnapshot, path: string[] ) => SnapshotPropValue[];
+	getInheritanceChain: (
+		snapshotField: StylesInheritanceSnapshot,
+		path: PropKey[],
+		basePropType: PropType
+	) => SnapshotPropValue[];
 };