@elementor/editor-editing-panel 1.42.0 → 1.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.42.0",
+  "version": "1.43.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@elementor/editor": "0.19.4",
     "@elementor/editor-canvas": "0.22.2",
-    "@elementor/editor-controls": "0.34.1",
+    "@elementor/editor-controls": "0.34.2",
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-documents": "0.13.6",
     "@elementor/editor-elements": "0.8.4",
@@ -50,7 +50,7 @@
     "@elementor/editor-responsive": "0.13.5",
     "@elementor/editor-styles": "0.6.8",
     "@elementor/editor-styles-repository": "0.10.1",
-    "@elementor/editor-ui": "0.10.0",
+    "@elementor/editor-ui": "0.10.1",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",

package/src/components/css-classes/css-class-item.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ReactElement, useState } from 'react';
-import { stylesRepository, validateStyleLabel } from '@elementor/editor-styles-repository';
+import { stylesRepository, useUserStylesCapability, validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
@@ -46,6 +46,8 @@ export function CssClassItem( props: CssClassItemProps ) {
 	const [ chipRef, setChipRef ] = useState< HTMLElement | null >( null );
 	const { onDelete, ...chipGroupProps } = chipProps;
 
+	const { userCan } = useUserStylesCapability();
+
 	const {
 		ref,
 		isEditing,
@@ -62,7 +64,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 	const color = error ? 'error' : colorProp;
 
 	const providerActions = provider ? stylesRepository.getProviderByKey( provider )?.actions : null;
-	const allowRename = Boolean( providerActions?.update );
+	const allowRename = Boolean( providerActions?.update ) && userCan( provider ?? '' )?.update;
 
 	const isShowingState = isActive && meta.state;
 

package/src/components/css-classes/css-class-menu.tsx

@@ -133,12 +133,12 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 
 	const modifiedStates = useModifiedStates( styleId );
 
-	const isUpdateAllowed = userCan( provider ?? '' ).updateProps;
+	const isUpdateAllowed = ! state || userCan( provider ?? '' ).updateProps;
 
 	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
 
 	const isStyled = modifiedStates[ state ?? 'normal' ] ?? false;
-	const disabled = isUpdateAllowed ? false : ! isStyled;
+	const disabled = ! isUpdateAllowed && ! isStyled;
 	const isActive = styleId === activeId;
 	const isSelected = state === activeState && isActive;
 
@@ -160,7 +160,7 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 		>
 			<MenuItemInfotip
 				showInfoTip={ disabled }
-				content={ __( 'With your role as an editor, you can only use existing states.', 'elementor' ) }
+				content={ __( 'With your current role, you can only use existing states.', 'elementor' ) }
 			>
 				<Stack gap={ 0.75 } direction="row" alignItems="center">
 					{ isStyled && (
@@ -211,7 +211,7 @@ function RenameClassMenuItem( { closeMenu }: { closeMenu: () => void } ) {
 			<MenuItemInfotip
 				showInfoTip={ ! isAllowed }
 				content={ __(
-					'With your role as an editor, you can use existing classes but can’t modify them.',
+					'With your current role, you can use existing classes but can’t modify them.',
 					'elementor'
 				) }
 			>

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

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import { type ReactElement, useRef, useState } from 'react';
-import { getElementSetting, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
-import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
-import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { useElementSetting } from '@elementor/editor-elements';
+import { type ClassesPropValue } from '@elementor/editor-props';
 import {
 	isElementsStylesProvider,
 	type StylesProvider,
 	stylesRepository,
 	type UpdateActionPayload,
-	useGetStylesRepositoryCreateAction,
 	useProviders,
+	useUserStylesCapability,
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
-import { WarningInfotip } from '@elementor/editor-ui';
+import { InfoAlert, WarningInfotip } from '@elementor/editor-ui';
 import { ColorSwatchIcon, MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import { type AutocompleteChangeReason, Box, Chip, FormLabel, Link, Stack, Typography } from '@elementor/ui';
@@ -29,7 +28,7 @@ import {
 	type ValidationResult,
 } from '../creatable-autocomplete';
 import { CssClassItem } from './css-class-item';
-import { useApplyClass, useUnapplyClass } from './use-apply-and-unapply-class';
+import { useApplyClass, useCreateAndApplyClass, useUnapplyClass } from './use-apply-and-unapply-class';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
@@ -59,19 +58,22 @@ export const { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorAc
 export function CssClassSelector() {
 	const options = useOptions();
 
-	const { value: appliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
 	const autocompleteRef = useRef< HTMLElement | null >( null );
 	const [ renameError, setRenameError ] = useState< string | null >( null );
 
 	const handleSelect = useHandleSelect();
-	const { create, validate, entityName } = useCreateAction( { pushAppliedId, setActiveId } );
+	const { create, validate, entityName } = useCreateAction();
 
-	const applied = useAppliedOptions( options, appliedIds );
-	const active = applied.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
+	const appliedOptions = useAppliedOptions( options );
+	const active = appliedOptions.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
 
-	const showPlaceholder = applied.every( ( { fixed } ) => fixed );
+	const showPlaceholder = appliedOptions.every( ( { fixed } ) => fixed );
+
+	const { userCan } = useUserStylesCapability();
+
+	const canEdit = active.provider ? userCan( active.provider ).updateProps : true;
 
 	return (
 		<Stack p={ 2 }>
@@ -96,7 +98,7 @@ export function CssClassSelector() {
 					size="tiny"
 					placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
 					options={ options }
-					selected={ applied }
+					selected={ appliedOptions }
 					entityName={ entityName }
 					onSelect={ handleSelect }
 					onCreate={ create ?? undefined }
@@ -138,6 +140,15 @@ export function CssClassSelector() {
 					}
 				/>
 			</WarningInfotip>
+			{ ! canEdit && (
+				<InfoAlert
+					content={ __(
+						'With your current role, you can use existing classes but can’t modify them.',
+						'elementor'
+					) }
+					sx={ { mt: 1 } }
+				/>
+			) }
 		</Stack>
 	);
 }
@@ -212,23 +223,14 @@ function useOptions() {
 		} );
 }
 
-function useCreateAction( {
-	pushAppliedId,
-	setActiveId,
-}: {
-	pushAppliedId: ( id: StyleDefinitionID ) => void;
-	setActiveId: ( id: StyleDefinitionID ) => void;
-} ) {
-	const [ provider, createAction ] = useGetStylesRepositoryCreateAction() ?? [ null, null ];
+function useCreateAction() {
+	const [ provider, createAction ] = useCreateAndApplyClass();
 	if ( ! provider || ! createAction ) {
 		return {};
 	}
 
-	const create = ( newClassLabel: string ) => {
-		const createdId = createAction( newClassLabel );
-
-		pushAppliedId( createdId );
-		setActiveId( createdId );
+	const create = ( classLabel: string ) => {
+		createAction( { classLabel } );
 	};
 
 	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult => {
@@ -256,45 +258,22 @@ function hasReachedLimit( provider: StylesProvider ) {
 	return provider.actions.all().length >= provider.limit;
 }
 
-function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
-	const applied = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
+function useAppliedOptions( options: StyleDefOption[] ) {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+
+	const appliedIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+	const appliedOptions = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
 
-	const hasElementsProviderStyleApplied = applied.some(
+	const hasElementsProviderStyleApplied = appliedOptions.some(
 		( option ) => option.provider && isElementsStylesProvider( option.provider )
 	);
 
 	if ( ! hasElementsProviderStyleApplied ) {
-		applied.unshift( EMPTY_OPTION );
+		appliedOptions.unshift( EMPTY_OPTION );
 	}
 
-	return applied;
-}
-
-function useAppliedClassesIds() {
-	const { element } = useElement();
-	const currentClassesProp = useClassesProp();
-
-	const value = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
-
-	const setValue = ( ids: StyleDefinitionID[] ) => {
-		updateElementSettings( {
-			id: element.id,
-			props: {
-				[ currentClassesProp ]: classesPropTypeUtil.create( ids ),
-			},
-		} );
-	};
-
-	const pushValue = ( id: StyleDefinitionID ) => {
-		const ids = getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
-
-		setValue( [ ...ids, id ] );
-	};
-
-	return {
-		value,
-		pushValue,
-	};
+	return appliedOptions;
 }
 
 function useHandleSelect() {

package/src/components/css-classes/use-apply-and-unapply-class.ts

@@ -3,23 +3,34 @@ import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { getElementLabel, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { useGetStylesRepositoryCreateAction } from '@elementor/editor-styles-repository';
 import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
+import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
 
 type UndoableClassActionPayload = {
 	classId: StyleDefinitionID;
 	classLabel: string;
 };
 
+type CreateAndApplyClassPayload = {
+	classLabel: string;
+};
+
+type CreateAndApplyClassUndoData = {
+	prevActiveId: string | null;
+	createdId: StyleDefinitionID;
+};
+
 export function useApplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
 	const applyClass = useApply();
 	const unapplyClass = useUnapply();
@@ -63,7 +74,7 @@ export function useUnapplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
 	const applyClass = useApply();
 	const unapplyClass = useUnapply();
@@ -103,10 +114,74 @@ export function useUnapplyClass() {
 	return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
 }
 
+export function useCreateAndApplyClass() {
+	const { id: activeId, setId: setActiveId } = useStyle();
+
+	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
+
+	const [ provider, createAction ] = useGetStylesRepositoryCreateAction() ?? [ null, null ];
+	const deleteAction = provider?.actions.delete;
+
+	const applyClass = useApply();
+	const unapplyClass = useUnapply();
+
+	const undoableCreateAndApply = useMemo( () => {
+		if ( ! provider || ! createAction ) {
+			return;
+		}
+
+		return undoable(
+			{
+				do: ( { classLabel }: CreateAndApplyClassPayload ): CreateAndApplyClassUndoData => {
+					const prevActiveId = activeId;
+
+					const createdId = createAction( classLabel );
+					applyClass( createdId );
+
+					return { prevActiveId, createdId };
+				},
+				undo: ( _: CreateAndApplyClassPayload, { prevActiveId, createdId }: CreateAndApplyClassUndoData ) => {
+					unapplyClass( createdId );
+					deleteAction?.( createdId );
+
+					setActiveId( prevActiveId );
+				},
+			},
+			{
+				title: __( 'Class', 'elementor' ),
+				subtitle: ( { classLabel } ) => {
+					/* translators: %s is the class name. */
+					return __( `%s created`, 'elementor' ).replace( '%s', classLabel );
+				},
+			}
+		);
+	}, [ activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass ] );
+
+	const createAndApplyWithoutHistory = useCallback(
+		( { classLabel }: CreateAndApplyClassPayload ) => {
+			if ( ! createAction ) {
+				return;
+			}
+
+			const createdId = createAction( classLabel );
+			applyClass( createdId );
+		},
+		[ applyClass, createAction ]
+	);
+
+	if ( ! provider || ! undoableCreateAndApply ) {
+		return [ null, null ];
+	}
+
+	return isVersion330Active
+		? ( [ provider, undoableCreateAndApply ] as const )
+		: ( [ provider, createAndApplyWithoutHistory ] as const );
+}
+
 function useApply() {
 	const { element } = useElement();
 	const { setId: setActiveId } = useStyle();
-	const { setClasses, getAppliedClasses } = useSetClasses();
+	const { setClasses, getAppliedClasses } = useClasses();
 
 	return useCallback(
 		( classIDToApply: StyleDefinitionID ) => {
@@ -129,7 +204,7 @@ function useApply() {
 function useUnapply() {
 	const { element } = useElement();
 	const { id: activeId, setId: setActiveId } = useStyle();
-	const { setClasses, getAppliedClasses } = useSetClasses();
+	const { setClasses, getAppliedClasses } = useClasses();
 
 	return useCallback(
 		( classIDToUnapply: StyleDefinitionID ) => {
@@ -152,11 +227,11 @@ function useUnapply() {
 	);
 }
 
-function useSetClasses() {
+function useClasses() {
 	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
 
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
 	return useMemo( () => {
 		const setClasses = ( ids: StyleDefinitionID[] ) => {
@@ -174,9 +249,6 @@ function useSetClasses() {
 		const getAppliedClasses = () =>
 			getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
 
-		return {
-			setClasses,
-			getAppliedClasses,
-		};
+		return { setClasses, getAppliedClasses };
 	}, [ currentClassesProp, element.id, isVersion330Active ] );
 }