@elementor/editor-components 3.35.0-406 → 3.35.0-408

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-406",
+  "version": "3.35.0-408",
   "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-406",
-    "@elementor/editor-canvas": "3.35.0-406",
-    "@elementor/editor-controls": "3.35.0-406",
-    "@elementor/editor-documents": "3.35.0-406",
-    "@elementor/editor-editing-panel": "3.35.0-406",
-    "@elementor/editor-elements": "3.35.0-406",
-    "@elementor/editor-elements-panel": "3.35.0-406",
-    "@elementor/editor-mcp": "3.35.0-406",
-    "@elementor/editor-panels": "3.35.0-406",
-    "@elementor/editor-props": "3.35.0-406",
-    "@elementor/editor-styles-repository": "3.35.0-406",
-    "@elementor/editor-ui": "3.35.0-406",
-    "@elementor/editor-v1-adapters": "3.35.0-406",
-    "@elementor/http-client": "3.35.0-406",
+    "@elementor/editor": "3.35.0-408",
+    "@elementor/editor-canvas": "3.35.0-408",
+    "@elementor/editor-controls": "3.35.0-408",
+    "@elementor/editor-documents": "3.35.0-408",
+    "@elementor/editor-editing-panel": "3.35.0-408",
+    "@elementor/editor-elements": "3.35.0-408",
+    "@elementor/editor-elements-panel": "3.35.0-408",
+    "@elementor/editor-mcp": "3.35.0-408",
+    "@elementor/editor-panels": "3.35.0-408",
+    "@elementor/editor-props": "3.35.0-408",
+    "@elementor/editor-styles-repository": "3.35.0-408",
+    "@elementor/editor-ui": "3.35.0-408",
+    "@elementor/editor-v1-adapters": "3.35.0-408",
+    "@elementor/http-client": "3.35.0-408",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-406",
-    "@elementor/query": "3.35.0-406",
-    "@elementor/schema": "3.35.0-406",
-    "@elementor/store": "3.35.0-406",
+    "@elementor/mixpanel": "3.35.0-408",
+    "@elementor/query": "3.35.0-408",
+    "@elementor/schema": "3.35.0-408",
+    "@elementor/store": "3.35.0-408",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-406",
+    "@elementor/utils": "3.35.0-408",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-406",
-    "@elementor/editor-current-user": "3.35.0-406"
+    "@elementor/editor-notifications": "3.35.0-408",
+    "@elementor/editor-current-user": "3.35.0-408"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/create-component-form/create-component-form.tsx

@@ -54,7 +54,7 @@ export function CreateComponentForm() {
 				notify( {
 					type: 'default',
 					message: __(
-						'Cannot save as component - contains non-supported elements. Only atomic elements are allowed inside components.',
+						'Components require atomic elements only. Remove widgets to create this component.',
 						'elementor'
 					),
 					id: 'non-atomic-element-save-blocked',

package/src/mcp/save-as-component-tool.ts

@@ -32,6 +32,11 @@ const InputSchema = {
 						.describe(
 							'The property key of the child element that you want to override its settings (e.g., "text", "url", "tag"). To get the available propKeys for an element, use the "get-element-type-config" tool.'
 						),
+					label: z
+						.string()
+						.describe(
+							'A unique, user-friendly display name for this property (e.g., "Hero Headline", "CTA Button Text"). Must be unique within the same component.'
+						),
 				} )
 			),
 		} )
@@ -111,14 +116,14 @@ export const handleSaveAsComponent = async ( params: z.infer< z.ZodObject< typeo
 };
 
 function enrichOverridableProps(
-	input: { props: Record< string, { elementId: string; propKey: string } > },
+	input: { props: Record< string, { elementId: string; propKey: string; label: string } > },
 	rootElement: V1ElementData
 ): OverridableProps {
 	const enrichedProps: OverridableProps[ 'props' ] = {};
 	const defaultGroupId = generateUniqueId( 'group' );
 
 	Object.entries( input.props ).forEach( ( [ , prop ] ) => {
-		const { elementId, propKey } = prop;
+		const { elementId, propKey, label } = prop;
 		const element = findElementById( rootElement, elementId );
 
 		if ( ! element ) {
@@ -151,8 +156,6 @@ function enrichOverridableProps(
 			? ( element.settings[ propKey ] as PropValue )
 			: elementType.propsSchema[ propKey ].default ?? null;
 
-		const label = generateLabel( propKey );
-
 		enrichedProps[ overrideKey ] = {
 			overrideKey,
 			label,
@@ -215,11 +218,6 @@ function findElementById( root: V1ElementData, targetId: string ): V1ElementData
 	return null;
 }
 
-function generateLabel( propKey: string ): string {
-	const uniqueId = generateUniqueId( 'prop' );
-	return `${ uniqueId } - ${ propKey }`;
-}
-
 function getValidElementTypes(): string[] {
 	const types = getWidgetsCache();
 
@@ -287,7 +285,8 @@ Skip that step ONLY if the user explicitly requests to not make any properties c
 
 3. **Build the overridable_props Object**
    - For each property you want to make overridable, add an entry:
-     \`{ "elementId": "<child-element-id>", "propKey": "<property-key>" }\`
+     \`{ "elementId": "<child-element-id>", "propKey": "<property-key>", "label": "<user-friendly-name>" }\`
+   - The label must be unique within the component and should be meaningful to the user (e.g., "Hero Headline", "CTA Button Text")
    - Group all entries under the "props" object
 
 ## Step 3: Execute the Tool
@@ -327,7 +326,8 @@ Structure:
   "props": {
     "<unique-key>": {
       "elementId": "<child-element-id>",
-      "propKey": "<property-key>"
+      "propKey": "<property-key>",
+      "label": "<user-friendly-name>"
     }
   }
 }
@@ -337,7 +337,7 @@ To populate this correctly:
 1. Use [${ DOCUMENT_STRUCTURE_URI }] to find child element IDs and their widgetType
 2. Use [${ WIDGET_SCHEMA_URI }] to find the atomic_props_schema for each child element's widgetType
 3. Only include properties you want to be customizable in component instances
-4. Common propKeys: "text", "url", "tag", "size", "align", etc.`
+4. Provide a unique, user-friendly label for each property (e.g., "Hero Headline", "CTA Button Text")`
 	);
 
 	saveAsComponentPrompt.example( `
@@ -358,15 +358,18 @@ Component with overridable properties:
     "props": {
       "heading-text": {
         "elementId": "heading-123",
-        "propKey": "text"
+        "propKey": "text",
+        "label": "Card Title"
       },
       "button-text": {
         "elementId": "button-456",
-        "propKey": "text"
+        "propKey": "text",
+        "label": "Button Text"
       },
       "button-link": {
         "elementId": "button-456",
-        "propKey": "url"
+        "propKey": "url",
+        "label": "Button Link"
       }
     }
   }

package/src/prevent-circular-nesting.ts

@@ -49,7 +49,7 @@ type StorageContent = {
 
 const COMPONENT_CIRCULAR_NESTING_ALERT: NotificationData = {
 	type: 'default',
-	message: __( 'Cannot add this component here - it would create a circular reference.', 'elementor' ),
+	message: __( "Can't add this component - components that contain each other can't be nested.", 'elementor' ),
 	id: 'circular-component-nesting-blocked',
 };
 

package/src/prevent-non-atomic-nesting.ts

@@ -42,7 +42,7 @@ type StorageContent = {
 
 const NON_ATOMIC_ELEMENT_ALERT: NotificationData = {
 	type: 'default',
-	message: __( 'Cannot add this element here - only atomic elements are allowed inside components.', 'elementor' ),
+	message: __( "This widget isn't compatible with components. Use atomic elements instead.", 'elementor' ),
 	id: 'non-atomic-element-blocked',
 };