@elementor/editor-components 3.35.0-448 → 3.35.0-450

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-448",
+  "version": "3.35.0-450",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-448",
-    "@elementor/editor-canvas": "3.35.0-448",
-    "@elementor/editor-controls": "3.35.0-448",
-    "@elementor/editor-documents": "3.35.0-448",
-    "@elementor/editor-editing-panel": "3.35.0-448",
-    "@elementor/editor-elements": "3.35.0-448",
-    "@elementor/editor-elements-panel": "3.35.0-448",
-    "@elementor/editor-mcp": "3.35.0-448",
-    "@elementor/editor-panels": "3.35.0-448",
-    "@elementor/editor-props": "3.35.0-448",
-    "@elementor/editor-styles-repository": "3.35.0-448",
-    "@elementor/editor-ui": "3.35.0-448",
-    "@elementor/editor-v1-adapters": "3.35.0-448",
-    "@elementor/http-client": "3.35.0-448",
+    "@elementor/editor": "3.35.0-450",
+    "@elementor/editor-canvas": "3.35.0-450",
+    "@elementor/editor-controls": "3.35.0-450",
+    "@elementor/editor-documents": "3.35.0-450",
+    "@elementor/editor-editing-panel": "3.35.0-450",
+    "@elementor/editor-elements": "3.35.0-450",
+    "@elementor/editor-elements-panel": "3.35.0-450",
+    "@elementor/editor-mcp": "3.35.0-450",
+    "@elementor/editor-panels": "3.35.0-450",
+    "@elementor/editor-props": "3.35.0-450",
+    "@elementor/editor-styles-repository": "3.35.0-450",
+    "@elementor/editor-ui": "3.35.0-450",
+    "@elementor/editor-v1-adapters": "3.35.0-450",
+    "@elementor/http-client": "3.35.0-450",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-448",
-    "@elementor/query": "3.35.0-448",
-    "@elementor/schema": "3.35.0-448",
-    "@elementor/store": "3.35.0-448",
+    "@elementor/mixpanel": "3.35.0-450",
+    "@elementor/query": "3.35.0-450",
+    "@elementor/schema": "3.35.0-450",
+    "@elementor/store": "3.35.0-450",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-448",
+    "@elementor/utils": "3.35.0-450",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-448",
-    "@elementor/editor-current-user": "3.35.0-448"
+    "@elementor/editor-notifications": "3.35.0-450",
+    "@elementor/editor-current-user": "3.35.0-450"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/components-tab/components-item.tsx

@@ -20,6 +20,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 import { archiveComponent } from '../../store/actions/archive-component';
 import { loadComponentsAssets } from '../../store/actions/load-components-assets';
 import { type Component } from '../../types';
@@ -36,6 +37,9 @@ type ComponentItemProps = {
 export const ComponentItem = ( { component, renameComponent }: ComponentItemProps ) => {
 	const itemRef = useRef< HTMLElement >( null );
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
+	const { canRename, canDelete } = useComponentsPermissions();
+
+	const shouldShowActions = canRename || canDelete;
 
 	const {
 		ref: editableRef,
@@ -66,8 +70,8 @@ export const ComponentItem = ( { component, renameComponent }: ComponentItemProp
 	};
 
 	const handleDeleteClick = () => {
-		popupState.close();
 		setIsDeleteDialogOpen( true );
+		popupState.close();
 	};
 
 	const handleDeleteConfirm = () => {
@@ -140,37 +144,48 @@ export const ComponentItem = ( { component, renameComponent }: ComponentItemProp
 							</Box>
 						</Indicator>
 					</Box>
-					<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
-						<DotsVerticalIcon fontSize="tiny" />
-					</IconButton>
+					{ shouldShowActions && (
+						<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+							<DotsVerticalIcon fontSize="tiny" />
+						</IconButton>
+					) }
 				</ListItemButton>
 			</WarningInfotip>
-			<Menu
-				{ ...bindMenu( popupState ) }
-				anchorOrigin={ {
-					vertical: 'bottom',
-					horizontal: 'right',
-				} }
-				transformOrigin={ {
-					vertical: 'top',
-					horizontal: 'right',
-				} }
-			>
-				<MenuListItem
-					sx={ { minWidth: '160px' } }
-					onClick={ () => {
-						popupState.close();
-						openEditMode();
+			{ shouldShowActions && (
+				<Menu
+					{ ...bindMenu( popupState ) }
+					anchorOrigin={ {
+						vertical: 'bottom',
+						horizontal: 'right',
+					} }
+					transformOrigin={ {
+						vertical: 'top',
+						horizontal: 'right',
 					} }
 				>
-					{ __( 'Rename', 'elementor' ) }
-				</MenuListItem>
-				<MenuListItem sx={ { minWidth: '160px' } } onClick={ handleDeleteClick }>
-					<Typography variant="caption" sx={ { color: 'error.light' } }>
-						{ __( 'Delete', 'elementor' ) }
-					</Typography>
-				</MenuListItem>
-			</Menu>
+					{ canRename && (
+						<MenuListItem
+							sx={ { minWidth: '160px' } }
+							primaryTypographyProps={ { variant: 'caption', color: 'text.primary' } }
+							onClick={ () => {
+								popupState.close();
+								openEditMode();
+							} }
+						>
+							{ __( 'Rename', 'elementor' ) }
+						</MenuListItem>
+					) }
+					{ canDelete && (
+						<MenuListItem
+							sx={ { minWidth: '160px' } }
+							primaryTypographyProps={ { variant: 'caption', color: 'error.light' } }
+							onClick={ handleDeleteClick }
+						>
+							{ __( 'Delete', 'elementor' ) }
+						</MenuListItem>
+					) }
+				</Menu>
+			) }
 			<DeleteConfirmationDialog
 				open={ isDeleteDialogOpen }
 				onClose={ handleDeleteDialogClose }

package/src/components/components-tab/components-list.tsx

@@ -6,6 +6,7 @@ import { Box, Button, Divider, Link, List, Stack, Typography } from '@elementor/
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
+import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 import { renameComponent } from '../../store/actions/rename-component';
 import { AngiePromotionModal } from './angie-promotion-modal';
 import { ComponentItem } from './components-item';
@@ -53,6 +54,8 @@ export function ComponentsList() {
 const EmptyState = () => {
 	const [ isAngieModalOpen, setIsAngieModalOpen ] = useState( false );
 
+	const { canCreate } = useComponentsPermissions();
+
 	const handleCreateWithAI = () => {
 		const sdk = getAngieSdk();
 
@@ -88,9 +91,13 @@ const EmptyState = () => {
 				<Typography align="center" variant="caption" color="secondary" sx={ { maxWidth: 200 } }>
 					{ __( 'Components are reusable blocks that sync across your site.', 'elementor' ) }
 					<br />
-					{ __( 'Create once, use everywhere.', 'elementor' ) }
+					{ canCreate
+						? __( 'Create once, use everywhere.', 'elementor' )
+						: __(
+								'With your current role, you cannot create components. Contact an administrator to create one.',
+								'elementor'
+						  ) }
 				</Typography>
-
 				<Link
 					href={ LEARN_MORE_URL }
 					target="_blank"
@@ -102,36 +109,44 @@ const EmptyState = () => {
 				</Link>
 			</Stack>
 
-			<Divider sx={ { width: '100%' } } />
-
-			<Stack alignItems="center" gap={ 1 } width="100%">
-				<Typography align="center" variant="subtitle2" color="text.secondary" sx={ SUBTITLE_OVERRIDE_SX }>
-					{ __( 'Create your first one:', 'elementor' ) }
-				</Typography>
-
-				<Typography align="center" variant="caption" color="secondary" sx={ { maxWidth: 228 } }>
-					{ __(
-						'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
-						'elementor'
-					) }
-				</Typography>
-
-				<Typography align="center" variant="caption" color="secondary">
-					{ __( 'Or', 'elementor' ) }
-				</Typography>
-
-				<AngiePromotionModal open={ isAngieModalOpen } onClose={ () => setIsAngieModalOpen( false ) }>
-					<Button
-						color="secondary"
-						variant="outlined"
-						size="small"
-						onClick={ handleCreateWithAI }
-						endIcon={ <AIIcon /> }
-					>
-						{ __( 'Create component with AI', 'elementor' ) }
-					</Button>
-				</AngiePromotionModal>
-			</Stack>
+			{ canCreate && (
+				<>
+					<Divider sx={ { width: '100%' } } />
+					<Stack alignItems="center" gap={ 1 } width="100%">
+						<Typography
+							align="center"
+							variant="subtitle2"
+							color="text.secondary"
+							sx={ SUBTITLE_OVERRIDE_SX }
+						>
+							{ __( 'Create your first one:', 'elementor' ) }
+						</Typography>
+
+						<Typography align="center" variant="caption" color="secondary" sx={ { maxWidth: 228 } }>
+							{ __(
+								'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
+								'elementor'
+							) }
+						</Typography>
+
+						<Typography align="center" variant="caption" color="secondary">
+							{ __( 'Or', 'elementor' ) }
+						</Typography>
+
+						<AngiePromotionModal open={ isAngieModalOpen } onClose={ () => setIsAngieModalOpen( false ) }>
+							<Button
+								color="secondary"
+								variant="outlined"
+								size="small"
+								onClick={ handleCreateWithAI }
+								endIcon={ <AIIcon /> }
+							>
+								{ __( 'Create component with AI', 'elementor' ) }
+							</Button>
+						</AngiePromotionModal>
+					</Stack>
+				</>
+			) }
 		</Stack>
 	);
 };

package/src/components/instance-editing-panel/empty-state.tsx

@@ -3,7 +3,21 @@ import { ComponentPropListIcon, PencilIcon } from '@elementor/icons';
 import { Button, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useComponentsPermissions } from '../../hooks/use-components-permissions';
+
 export const EmptyState = ( { onEditComponent }: { onEditComponent: () => void } ) => {
+	const { canEdit } = useComponentsPermissions();
+
+	const message = canEdit
+		? __(
+				'Edit the component to add properties, manage them or update the design across all instances.',
+				'elementor'
+		  )
+		: __(
+				'With your current role, you cannot edit this component. Contact an administrator to add properties.',
+				'elementor'
+		  );
+
 	return (
 		<Stack
 			alignItems="center"
@@ -14,22 +28,18 @@ export const EmptyState = ( { onEditComponent }: { onEditComponent: () => void }
 			gap={ 1.5 }
 		>
 			<ComponentPropListIcon fontSize="large" />
-
 			<Typography align="center" variant="subtitle2">
 				{ __( 'No properties yet', 'elementor' ) }
 			</Typography>
-
 			<Typography align="center" variant="caption" maxWidth="170px">
-				{ __(
-					'Edit the component to add properties, manage them or update the design across all instances.',
-					'elementor'
-				) }
+				{ message }
 			</Typography>
-
-			<Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onEditComponent }>
-				<PencilIcon fontSize="small" />
-				{ __( 'Edit component', 'elementor' ) }
-			</Button>
+			{ canEdit && (
+				<Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onEditComponent }>
+					<PencilIcon fontSize="small" />
+					{ __( 'Edit component', 'elementor' ) }
+				</Button>
+			) }
 		</Stack>
 	);
 };

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -9,6 +9,7 @@ import { Divider, IconButton, Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useComponentInstanceSettings } from '../../hooks/use-component-instance-settings';
+import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 import { useComponent, useOverridableProps } from '../../store/store';
 import { type OverridablePropsGroup } from '../../types';
 import { switchToComponent } from '../../utils/switch-to-component';
@@ -16,7 +17,10 @@ import { EmptyState } from './empty-state';
 import { OverridePropsGroup } from './override-props-group';
 
 export function InstanceEditingPanel() {
+	const { canEdit } = useComponentsPermissions();
+
 	const settings = useComponentInstanceSettings();
+
 	const componentId = settings?.component_id?.value;
 
 	const overrides = settings?.overrides?.value;
@@ -49,11 +53,13 @@ export function InstanceEditingPanel() {
 				<Stack direction="row" alignItems="center" flexGrow={ 1 } gap={ 1 } maxWidth="100%">
 					<ComponentsIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
 					<EllipsisWithTooltip title={ component.name } as={ PanelHeaderTitle } />
-					<Tooltip title={ panelTitle } sx={ { marginLeft: 'auto' } }>
-						<IconButton size="tiny" onClick={ handleEditComponent } aria-label={ panelTitle }>
-							<PencilIcon fontSize="tiny" />
-						</IconButton>
-					</Tooltip>
+					{ canEdit && (
+						<Tooltip title={ panelTitle }>
+							<IconButton size="tiny" onClick={ handleEditComponent } aria-label={ panelTitle }>
+								<PencilIcon fontSize="tiny" />
+							</IconButton>
+						</Tooltip>
+					) }
 				</Stack>
 			</PanelHeader>
 			<PanelBody>

package/src/create-component-type.ts

@@ -106,9 +106,10 @@ function createComponentView(
 		showLockedByModal?: ( lockedBy: string ) => void;
 	}
 ): typeof ElementView {
+	const legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
+
 	return class extends createTemplatedElementView( options ) {
-		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
-		eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+		eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
 		#componentRenderContext: ComponentRenderContext | undefined;
 
 		isComponentCurrentlyEdited() {
@@ -160,9 +161,7 @@ function createComponentView(
 					overrides: componentInstance.overrides ?? {},
 				};
 
-				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
-					componentInstance.elements
-				);
+				this.collection = legacyWindow.elementor.createBackboneElementsCollection( componentInstance.elements );
 
 				this.collection.models.forEach( setInactiveRecursively );
 
@@ -212,11 +211,7 @@ function createComponentView(
 		}
 
 		_getContextMenuConfig() {
-			const legacyWindow = this.legacyWindow || ( window as unknown as LegacyWindow & ExtendedWindow );
-			const elementorWithConfig = legacyWindow.elementor as typeof legacyWindow.elementor & {
-				config?: { user?: { is_administrator?: boolean } };
-			};
-			const isAdministrator = elementorWithConfig.config?.user?.is_administrator ?? false;
+			const isAdministrator = isUserAdministrator();
 
 			const addedGroup = {
 				general: {
@@ -273,6 +268,12 @@ function createComponentView(
 		handleDblClick( e: MouseEvent ) {
 			e.stopPropagation();
 
+			const isAdministrator = isUserAdministrator();
+
+			if ( ! isAdministrator ) {
+				return;
+			}
+
 			const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
 
 			this.editComponent( {
@@ -314,6 +315,12 @@ function setInactiveRecursively( model: BackboneModel< ElementModel > ) {
 	}
 }
 
+function isUserAdministrator() {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	return legacyWindow.elementor.config?.user?.is_administrator ?? false;
+}
+
 function createComponentModel(): BackboneModelConstructor< ComponentModel > {
 	const legacyWindow = window as unknown as LegacyWindow;
 	const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;

package/src/hooks/use-components-permissions.ts

@@ -0,0 +1,12 @@
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
+
+export const useComponentsPermissions = () => {
+	const { isAdmin } = useCurrentUserCapabilities();
+
+	return {
+		canCreate: isAdmin,
+		canEdit: isAdmin,
+		canDelete: isAdmin,
+		canRename: isAdmin,
+	};
+};