@elementor/editor-editing-panel 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,13 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.2.0",
-    "@elementor/editor-elements": "0.3.2",
+    "@elementor/editor-controls": "0.3.0",
+    "@elementor/editor-elements": "0.3.3",
     "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.4.0",
+    "@elementor/editor-props": "0.5.0",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.3.1",
+    "@elementor/editor-styles": "0.3.2",
+    "@elementor/editor-styles-repository": "0.2.0",
     "@elementor/editor-v1-adapters": "0.8.5",
     "@elementor/icons": "^1.20.0",
     "@elementor/schema": "0.1.2",

package/src/components/conditional-tooltip-wrapper.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { Box, Tooltip } from '@elementor/ui';
+
+type ConditionalTooltipWrapperProps = {
+	maxWidth: React.CSSProperties[ 'maxWidth' ];
+	title: string;
+};
+
+export const ConditionalTooltipWrapper = ( { maxWidth, title }: ConditionalTooltipWrapperProps ) => {
+	const elRef = useRef< HTMLElement >( null );
+	const [ isOverflown, setIsOverflown ] = useState( false );
+
+	useEffect( () => {
+		const onResize = () => {
+			const element = elRef.current;
+
+			if ( element ) {
+				setIsOverflown( element.scrollWidth > element.clientWidth );
+			}
+		};
+
+		onResize();
+
+		window.addEventListener( 'resize', onResize );
+
+		return () => {
+			window.removeEventListener( 'resize', onResize );
+		};
+	}, [] );
+
+	if ( isOverflown ) {
+		return (
+			<Tooltip title={ title } placement="top">
+				<Content maxWidth={ maxWidth } ref={ elRef } title={ title } />
+			</Tooltip>
+		);
+	}
+
+	return <Content maxWidth={ maxWidth } ref={ elRef } title={ title } />;
+};
+
+const Content = React.forwardRef( ( { maxWidth, title, ...rest }: ConditionalTooltipWrapperProps, ref ) => (
+	<Box
+		ref={ ref }
+		position="relative"
+		sx={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }
+		{ ...rest }
+	>
+		{ title }
+	</Box>
+) );

package/src/components/css-class-selector.tsx

@@ -1,32 +1,44 @@
 import * as React from 'react';
-import { updateSettings, useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { updateSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { ELEMENTS_STYLES_PROVIDER_KEY, useAllStylesByProvider } from '@elementor/editor-styles-repository';
 import { Chip, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
+import { ConditionalTooltipWrapper } from './conditional-tooltip-wrapper';
 import { MultiCombobox, type Option } from './multi-combobox';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 8;
 
+const EMPTY_OPTION = {
+	label: __( 'local', 'elementor' ),
+	value: '',
+	fixed: true,
+	color: 'primary',
+	provider: ELEMENTS_STYLES_PROVIDER_KEY,
+} satisfies Option;
+
+/**
+ * Applied - Classes applied to an element.
+ * Active - Class that is currently on edit mode.
+ */
+
 export function CssClassSelector() {
 	const options = useOptions();
+	const [ appliedIds, setAppliedIds ] = useAppliedClassesIds();
 
 	const { id: activeId, setId: setActiveId } = useStyle();
-	const [ appliedIds ] = useAppliedClassesIds();
 
-	const handleApply = useHandleApply();
+	const handleApply = useHandleApply( appliedIds, setAppliedIds );
 	const handleActivate = ( { value }: Option ) => setActiveId( value );
 
-	const active = options.find( ( option ) => option.value === activeId ) || null;
-
-	const applied = appliedIds
-		.map( ( id ) => options.find( ( option ) => option.value === id ) )
-		.filter( ( option ) => !! option );
+	const applied = useAppliedOptions( options, appliedIds );
+	const active = applied.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
 
 	return (
 		<Stack gap={ 1 } p={ 2 }>
@@ -51,11 +63,12 @@ export function CssClassSelector() {
 								{ ...chipProps }
 								key={ chipProps.key }
 								size="small"
-								label={ value.label }
+								label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ value.label } /> }
 								variant={ isActive ? 'filled' : 'standard' }
 								color={ isActive && value.color ? value.color : 'default' }
 								onClick={ () => handleActivate( value ) }
 								onDelete={ null }
+								aria-pressed={ isActive }
 							/>
 						);
 					} )
@@ -68,14 +81,40 @@ export function CssClassSelector() {
 function useOptions() {
 	const { element } = useElement();
 
-	const styleDefs = useElementStyles( element.id );
+	return useAllStylesByProvider( { elementId: element.id } ).flatMap< Option >( ( [ providerKey, styleDefs ] ) => {
+		const isElements = providerKey === ELEMENTS_STYLES_PROVIDER_KEY;
+
+		// Add empty local option for elements, as fallback.
+		if ( isElements && styleDefs.length === 0 ) {
+			return [ EMPTY_OPTION ];
+		}
+
+		return styleDefs.map( ( styleDef ) => {
+			return {
+				label: styleDef.label,
+				value: styleDef.id,
+				fixed: isElements,
+				color: isElements ? 'primary' : 'global',
+				provider: providerKey,
+			};
+		} );
+	} );
+}
+
+function useAppliedOptions( options: Option[], appliedIds: StyleDefinitionID[] ) {
+	const applied = appliedIds
+		.map( ( id ) => options.find( ( option ) => option.value === id ) )
+		.filter( ( option ) => !! option );
+
+	const hasElementsProviderStyleApplied = applied.some(
+		( option ) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY
+	);
 
-	return Object.values( styleDefs ).map< Option >( ( styleDef ) => ( {
-		label: styleDef.label,
-		value: styleDef.id,
-		fixed: true,
-		color: 'primary',
-	} ) );
+	if ( ! hasElementsProviderStyleApplied ) {
+		applied.unshift( EMPTY_OPTION );
+	}
+
+	return applied;
 }
 
 function useAppliedClassesIds() {
@@ -96,12 +135,13 @@ function useAppliedClassesIds() {
 	return [ value, setValue ] as const;
 }
 
-function useHandleApply() {
+function useHandleApply( appliedIds: StyleDefinitionID[], setAppliedIds: ( ids: StyleDefinitionID[] ) => void ) {
 	const { id: activeId, setId: setActiveId } = useStyle();
-	const [ appliedIds, setAppliedIds ] = useAppliedClassesIds();
 
 	return ( selectedOptions: Option[] ) => {
-		const selectedValues = selectedOptions.map( ( { value } ) => value );
+		const selectedValues = selectedOptions
+			.map( ( { value } ) => value )
+			.filter( ( value ) => value !== EMPTY_OPTION.value );
 
 		const isSameClassesAlreadyApplied =
 			selectedValues.length === appliedIds.length &&

package/src/components/multi-combobox/types.ts

@@ -4,6 +4,7 @@ export type Option = {
 	fixed?: boolean;
 	// TODO: Should be remove from here or use some kind of `meta`
 	color?: 'primary' | 'global';
+	provider?: string;
 };
 
 export type Action = {

package/src/components/style-sections/layout-section/gap-control-field.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { GapControl } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export type Gap = 'column' | 'row';
+
+export const GapControlField = () => {
+	return (
+		<Stack gap={ 1 }>
+			<StylesField bind={ 'gap' }>
+				<GapControl label={ __( 'Gaps', 'elementor' ) } />
+			</StylesField>
+		</Stack>
+	);
+};

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -11,6 +11,7 @@ import { DisplayField } from './display-field';
 import { FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
+import { GapControlField } from './gap-control-field';
 import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
@@ -31,6 +32,7 @@ const FlexFields = () => (
 		<JustifyContentField />
 		<AlignItemsField />
 		<Divider />
+		<GapControlField />
 		<WrapField />
 		<Divider />
 		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>

package/src/components/style-tab.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { generateId, type StyleDefinition } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -70,9 +70,7 @@ function useActiveStyleDefId( currentClassesProp: PropKey ) {
 
 	const fallback = useFirstElementStyleDef( currentClassesProp );
 
-	const newId = useGeneratedId();
-
-	return [ activeStyledDefId || fallback?.id || newId, setActiveStyledDefId ] as const;
+	return [ activeStyledDefId || fallback?.id || null, setActiveStyledDefId ] as const;
 }
 
 function useFirstElementStyleDef( currentClassesProp: PropKey ) {
@@ -84,13 +82,6 @@ function useFirstElementStyleDef( currentClassesProp: PropKey ) {
 	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
 }
 
-function useGeneratedId() {
-	const { element } = useElement();
-	const stylesDefs = useElementStyles( element.id );
-
-	return generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) );
-}
-
 function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 

package/src/contexts/style-context.tsx

@@ -3,8 +3,8 @@ import { createContext, type Dispatch, type PropsWithChildren, useContext } from
 import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
-	id: StyleDefinition[ 'id' ];
-	setId: Dispatch< StyleDefinition[ 'id' ] >;
+	id: StyleDefinition[ 'id' ] | null;
+	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
 	meta: StyleVariant[ 'meta' ];
 };
 

package/src/hooks/use-style-prop-history.ts

@@ -11,7 +11,7 @@ export const useStylePropsHistory = ( props: PropKey[] ) => {
 	const { id: styleDefID, meta } = useStyle();
 	const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
 
-	const styleDef = getElementStyles( element.id )?.[ styleDefID ];
+	const styleDef = styleDefID ? getElementStyles( element.id )?.[ styleDefID ] : null;
 	const styleVariant = styleDef ? getVariantByMeta( styleDef, meta ) : null;
 	const styleVariantPath = `${ styleDefID }-${ styleVariant?.meta.breakpoint }-${ styleVariant?.meta.state }`;
 

package/src/hooks/use-styles-field.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { updateStyle, useElementStyleProp } from '@elementor/editor-elements';
 import type { PropKey, PropValue } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
@@ -33,6 +34,7 @@ export const useStylesField = < T extends PropValue >(
 			props: { [ propName ]: newValue },
 			meta,
 			bind: classesProp,
+			label: __( 'local', 'elementor' ),
 		} );
 	};