@elementor/editor-components 3.35.0-377 → 3.35.0-379

package/package.json

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

package/src/components/component-panel-header/component-badge.tsx

@@ -4,30 +4,33 @@ import { ComponentPropListIcon } from '@elementor/icons';
 import { Badge, Box, keyframes, styled, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-export const ComponentsBadge = ( { overridesCount }: { overridesCount: number } ) => {
-	const prevCount = usePrevious( overridesCount );
+export const ComponentsBadge = React.forwardRef< HTMLDivElement, { overridesCount: number } >(
+	( { overridesCount }, ref ) => {
+		const prevCount = usePrevious( overridesCount );
 
-	const isFirstOverride = prevCount === 0 && overridesCount === 1;
+		const isFirstOverride = prevCount === 0 && overridesCount === 1;
 
-	return (
-		<StyledBadge
-			color="primary"
-			key={ overridesCount }
-			invisible={ overridesCount === 0 }
-			animate={ isFirstOverride }
-			anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-			badgeContent={
-				<Box sx={ { animation: ! isFirstOverride ? `${ slideUp } 300ms ease-out` : 'none' } }>
-					{ overridesCount }
-				</Box>
-			}
-		>
-			<ToggleButton value="overrides" size="tiny" aria-label={ __( 'View overrides', 'elementor' ) }>
-				<ComponentPropListIcon fontSize="tiny" />
-			</ToggleButton>
-		</StyledBadge>
-	);
-};
+		return (
+			<StyledBadge
+				ref={ ref }
+				color="primary"
+				key={ overridesCount }
+				invisible={ overridesCount === 0 }
+				animate={ isFirstOverride }
+				anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+				badgeContent={
+					<Box sx={ { animation: ! isFirstOverride ? `${ slideUp } 300ms ease-out` : 'none' } }>
+						{ overridesCount }
+					</Box>
+				}
+			>
+				<ToggleButton value="overrides" size="tiny" aria-label={ __( 'View overrides', 'elementor' ) }>
+					<ComponentPropListIcon fontSize="tiny" />
+				</ToggleButton>
+			</StyledBadge>
+		);
+	}
+);
 
 const StyledBadge = styled( Badge, { shouldForwardProp: ( prop ) => prop !== 'animate' } )(
 	( { theme, animate } ) => ( {

package/src/components/component-panel-header/component-panel-header.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useSuppressedMessage } from '@elementor/editor-current-user';
 import { getV1DocumentsManager } from '@elementor/editor-documents';
 import { ArrowLeftIcon, ComponentsFilledIcon } from '@elementor/icons';
 import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@elementor/ui';
@@ -6,21 +7,31 @@ import { __ } from '@wordpress/i18n';
 
 import { useNavigateBack } from '../../hooks/use-navigate-back';
 import { useCurrentComponentId } from '../../store/store';
+import { ComponentIntroduction } from '../components-tab/component-introduction';
 import { ComponentsBadge } from './component-badge';
 import { useOverridableProps } from './use-overridable-props';
 
+const MESSAGE_KEY = 'components-properties-introduction';
+
 export const ComponentPanelHeader = () => {
 	const currentComponentId = useCurrentComponentId();
 	const overridableProps = useOverridableProps( currentComponentId );
 	const onBack = useNavigateBack();
 	const componentName = getComponentName();
-
+	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );
+	const [ shouldShowIntroduction, setShouldShowIntroduction ] = React.useState( ! isMessageSuppressed );
 	const overridesCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
+	const anchorRef = React.useRef< HTMLDivElement >( null );
 
 	if ( ! currentComponentId ) {
 		return null;
 	}
 
+	const handleCloseIntroduction = () => {
+		suppressMessage();
+		setShouldShowIntroduction( false );
+	};
+
 	return (
 		<Box>
 			<Stack
@@ -42,9 +53,14 @@ export const ComponentPanelHeader = () => {
 						</Typography>
 					</Stack>
 				</Stack>
-				<ComponentsBadge overridesCount={ overridesCount } />
+				<ComponentsBadge overridesCount={ overridesCount } ref={ anchorRef } />
 			</Stack>
 			<Divider />
+			<ComponentIntroduction
+				anchorRef={ anchorRef }
+				shouldShowIntroduction={ shouldShowIntroduction }
+				onClose={ handleCloseIntroduction }
+			/>
 		</Box>
 	);
 };

package/src/components/components-tab/component-introduction.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { PopoverContent } from '@elementor/editor-controls';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { Box, Button, Image, Popover, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const ComponentIntroduction = ( {
+	anchorRef,
+	shouldShowIntroduction,
+	onClose,
+}: {
+	anchorRef: React.RefObject< HTMLDivElement >;
+	shouldShowIntroduction: boolean;
+	onClose: () => void;
+} ) => {
+	if ( ! anchorRef.current || ! shouldShowIntroduction ) {
+		return null;
+	}
+
+	return (
+		<Popover
+			anchorEl={ anchorRef.current }
+			open={ shouldShowIntroduction }
+			anchorOrigin={ {
+				vertical: 'top',
+				horizontal: 'right',
+			} }
+			transformOrigin={ {
+				vertical: 'top',
+				horizontal: -30,
+			} }
+			onClose={ onClose }
+		>
+			<Box sx={ { width: '296px' } }>
+				<PopoverHeader title={ __( 'Add your first property', 'elementor' ) } onClose={ onClose } />
+				<Image
+					sx={ { width: '296px', height: '160px' } }
+					src={ 'https://assets.elementor.com/packages/v1/images/components-properties-intro.png' }
+					alt={ '' }
+				/>
+				<PopoverContent>
+					<Stack gap={ 1 } sx={ { p: 2 } }>
+						<Typography variant={ 'body2' }>
+							{ __( 'Properties make instances flexible.', 'elementor' ) }
+						</Typography>
+						<Typography variant={ 'body2' }>
+							{ __(
+								'Click next to any setting you want users to customize - like text, images, or links.',
+								'elementor'
+							) }
+						</Typography>
+						<Typography variant={ 'body2' }>
+							{ __(
+								'Your properties will appear in the Properties panel, where you can organize and manage them anytime.',
+								'elementor'
+							) }
+						</Typography>
+						<Stack direction="row" alignItems="center" justifyContent="flex-end">
+							<Button size="medium" variant="contained" onClick={ onClose }>
+								{ __( 'Got it', 'elementor' ) }
+							</Button>
+						</Stack>
+					</Stack>
+				</PopoverContent>
+			</Box>
+		</Popover>
+	);
+};