@elementor/editor-components 4.0.0-665 → 4.0.0-667

package/package.json

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

package/src/init.ts

@@ -11,7 +11,6 @@ import { injectTab } from '@elementor/editor-elements-panel';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
-import { isProAtLeast } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { componentInstanceTransformer } from './component-instance-transformer';
@@ -23,8 +22,6 @@ import { openEditModeDialog } from './components/in-edit-mode';
 import { InstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
 import { LoadTemplateComponents } from './components/load-template-components';
 import { COMPONENT_WIDGET_TYPE, createComponentType } from './create-component-type';
-import { initExtended } from './extended/init';
-import { initCreateComponentShortcut } from './extended/shortcuts/create-component-shortcut';
 import { PopulateStore } from './populate-store';
 import { initCircularNestingPrevention } from './prevent-circular-nesting';
 import { loadComponentsAssets } from './store/actions/load-components-assets';
@@ -35,8 +32,6 @@ import { beforeSave } from './sync/before-save';
 import { initLoadComponentDataAfterInstanceAdded } from './sync/load-component-data-after-instance-added';
 import { type ExtendedWindow } from './types';
 
-const PRO_EXTENDED_MIGRATION_VERSION = '4.0.0';
-
 export function init() {
 	stylesRepository.register( componentsStylesProvider );
 
@@ -92,12 +87,4 @@ export function init() {
 	initCircularNestingPrevention();
 
 	initLoadComponentDataAfterInstanceAdded();
-
-	if ( !! window.elementorPro && ! isProAtLeast( PRO_EXTENDED_MIGRATION_VERSION ) ) {
-		initExtended();
-	}
-
-	if ( !! window.elementorPro ) {
-		initCreateComponentShortcut();
-	}
 }

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

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { PopoverContent } from '@elementor/editor-controls';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { Box, Button, Image, Link, Popover, Stack, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const ComponentIntroduction = ( {
-	anchorRef,
-	shouldShowIntroduction,
-	onClose,
-}: {
-	anchorRef: React.RefObject< HTMLElement >;
-	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 sx={ { p: 2 } }>
-						<Typography variant={ 'body2' }>
-							{ __( 'Properties make instances flexible.', 'elementor' ) }
-						</Typography>
-						<Typography variant={ 'body2' }>
-							{ __(
-								'Select any Element, then in the General tab, click next to any setting you want users to customize - like text, images, or links.',
-								'elementor'
-							) }
-						</Typography>
-						<Typography variant={ 'body2' } sx={ { mt: 2 } }>
-							{ __(
-								'Your properties will appear in the Properties panel, where you can organize and manage them anytime.',
-								'elementor'
-							) }
-						</Typography>
-						<Link
-							href="http://go.elementor.com/components-guide"
-							target="_blank"
-							sx={ { mt: 2 } }
-							color="info.main"
-							variant="body2"
-						>
-							{ __( 'Learn more', 'elementor' ) }
-						</Link>
-						<Stack direction="row" alignItems="center" justifyContent="flex-end" sx={ { pt: 1 } }>
-							<Button size="medium" variant="contained" onClick={ onClose }>
-								{ __( 'Got it', 'elementor' ) }
-							</Button>
-						</Stack>
-					</Stack>
-				</PopoverContent>
-			</Box>
-		</Popover>
-	);
-};

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

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { useEffect, useRef } from 'react';
-import { ComponentPropListIcon } from '@elementor/icons';
-import { Badge, Box, keyframes, styled, ToggleButton, Tooltip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const ComponentsBadge = React.forwardRef<
-	HTMLDivElement,
-	{ overridablePropsCount: number; onClick: () => void }
->( ( { overridablePropsCount, onClick }, ref ) => {
-	const prevCount = usePrevious( overridablePropsCount );
-
-	const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
-
-	return (
-		<StyledBadge
-			ref={ ref }
-			color="primary"
-			key={ overridablePropsCount }
-			invisible={ overridablePropsCount === 0 }
-			animate={ isFirstExposedProperty }
-			anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-			badgeContent={
-				<Box sx={ { animation: ! isFirstExposedProperty ? `${ slideUp } 300ms ease-out` : 'none' } }>
-					{ overridablePropsCount }
-				</Box>
-			}
-		>
-			<Tooltip title={ __( 'Component properties', 'elementor' ) }>
-				<ToggleButton
-					value="exposed properties"
-					size="tiny"
-					onClick={ onClick }
-					aria-label={ __( 'Component properties', 'elementor' ) }
-				>
-					<ComponentPropListIcon fontSize="tiny" />
-				</ToggleButton>
-			</Tooltip>
-		</StyledBadge>
-	);
-} );
-
-const StyledBadge = styled( Badge, { shouldForwardProp: ( prop ) => prop !== 'animate' } )(
-	( { theme, animate } ) => ( {
-		'& .MuiBadge-badge': {
-			minWidth: theme.spacing( 2 ),
-			height: theme.spacing( 2 ),
-			minHeight: theme.spacing( 2 ),
-			maxWidth: theme.spacing( 2 ),
-			fontSize: theme.typography.caption.fontSize as string,
-			animation: animate ? `${ bounceIn } 300ms ease-out` : 'none',
-		},
-	} )
-);
-
-function usePrevious< T >( value: T ) {
-	const ref = useRef< T >( value );
-	useEffect( () => {
-		ref.current = value;
-	}, [ value ] );
-	return ref.current;
-}
-
-const bounceIn = keyframes`
-	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
-	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
-	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
-`;
-
-const slideUp = keyframes`
-	from { transform: translateY(100%); opacity: 0; }
-	to { transform: translateY(0); opacity: 1; }
-`;

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

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { useSuppressedMessage } from '@elementor/editor-current-user';
-import { getV1DocumentsManager } from '@elementor/editor-documents';
-import { PanelHeader } from '@elementor/editor-panels';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { ArrowLeftIcon, ComponentsFilledIcon } from '@elementor/icons';
-import { __getState as getState } from '@elementor/store';
-import { Box, Divider, IconButton, Tooltip, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
-import { type ComponentsSlice, SLICE_NAME, useCurrentComponent } from '../../../store/store';
-import { trackComponentEvent } from '../../../utils/tracking';
-import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { ComponentIntroduction } from '../component-introduction';
-import { usePanelActions } from '../component-properties-panel/component-properties-panel';
-import { ComponentsBadge } from './component-badge';
-
-const MESSAGE_KEY = 'components-properties-introduction';
-
-export const ComponentPanelHeader = () => {
-	const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
-	const overridableProps = useSanitizeOverridableProps( currentComponentId );
-	const onBack = useNavigateBack();
-	const componentName = getComponentName();
-	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );
-	const [ shouldShowIntroduction, setShouldShowIntroduction ] = React.useState( ! isMessageSuppressed );
-
-	const { open: openPropertiesPanel } = usePanelActions();
-
-	const overridablePropsCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
-	const anchorRef = React.useRef< HTMLDivElement >( null );
-
-	if ( ! currentComponentId ) {
-		return null;
-	}
-
-	const handleCloseIntroduction = () => {
-		suppressMessage();
-		setShouldShowIntroduction( false );
-	};
-
-	const handleOpenPropertiesPanel = () => {
-		openPropertiesPanel();
-
-		trackComponentEvent( {
-			action: 'propertiesPanelOpened',
-			source: 'user',
-			component_uid: componentUid,
-			properties_count: overridablePropsCount,
-		} );
-	};
-
-	return (
-		<Box data-testid="component-panel-header">
-			<PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
-				<Tooltip title={ __( 'Back', 'elementor' ) }>
-					<IconButton size="tiny" onClick={ onBack } aria-label={ __( 'Back', 'elementor' ) }>
-						<ArrowLeftIcon fontSize="tiny" />
-					</IconButton>
-				</Tooltip>
-				<ComponentsFilledIcon fontSize="tiny" stroke="currentColor" />
-				<EllipsisWithTooltip
-					title={ componentName }
-					as={ Typography }
-					variant="caption"
-					sx={ { fontWeight: 500, flexGrow: 1 } }
-				/>
-				<ComponentsBadge
-					overridablePropsCount={ overridablePropsCount }
-					ref={ anchorRef }
-					onClick={ handleOpenPropertiesPanel }
-				/>
-			</PanelHeader>
-			<Divider />
-			<ComponentIntroduction
-				anchorRef={ anchorRef }
-				shouldShowIntroduction={ shouldShowIntroduction }
-				onClose={ handleCloseIntroduction }
-			/>
-		</Box>
-	);
-};
-
-function getComponentName(): string {
-	const state = getState() as ComponentsSlice;
-	const path = state[ SLICE_NAME ].path;
-	const { instanceTitle } = path.at( -1 ) ?? {};
-
-	if ( instanceTitle ) {
-		return instanceTitle;
-	}
-
-	const documentsManager = getV1DocumentsManager();
-	const currentDocument = documentsManager.getCurrent();
-
-	return currentDocument?.container?.settings?.get( 'post_title' ) ?? '';
-}

package/src/extended/components/component-properties-panel/component-properties-panel-content.tsx

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import { useMemo, useRef, useState } from 'react';
-import { setDocumentModifiedStatus } from '@elementor/editor-documents';
-import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { ComponentPropListIcon, FolderPlusIcon, XIcon } from '@elementor/icons';
-import { Divider, IconButton, List, Stack, Tooltip } from '@elementor/ui';
-import { generateUniqueId } from '@elementor/utils';
-import { __ } from '@wordpress/i18n';
-
-import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
-import { useCurrentComponentId } from '../../../store/store';
-import { addOverridableGroup } from '../../store/actions/add-overridable-group';
-import { deleteOverridableGroup } from '../../store/actions/delete-overridable-group';
-import { deleteOverridableProp } from '../../store/actions/delete-overridable-prop';
-import { reorderGroupProps } from '../../store/actions/reorder-group-props';
-import { reorderOverridableGroups } from '../../store/actions/reorder-overridable-groups';
-import { updateOverridablePropParams } from '../../store/actions/update-overridable-prop-params';
-import { PropertiesEmptyState } from './properties-empty-state';
-import { PropertiesGroup } from './properties-group';
-import { SortableItem, SortableProvider } from './sortable';
-import { useCurrentEditableItem } from './use-current-editable-item';
-import { generateUniqueLabel } from './utils/generate-unique-label';
-
-type Props = {
-	onClose: () => void;
-};
-
-export function ComponentPropertiesPanelContent( { onClose }: Props ) {
-	const currentComponentId = useCurrentComponentId();
-	const overridableProps = useSanitizeOverridableProps( currentComponentId );
-	const [ isAddingGroup, setIsAddingGroup ] = useState( false );
-	const introductionRef = useRef< HTMLButtonElement >( null );
-	const groupLabelEditable = useCurrentEditableItem();
-
-	const groups = useMemo( () => {
-		if ( ! overridableProps ) {
-			return [];
-		}
-
-		return overridableProps.groups.order
-			.map( ( groupId ) => overridableProps.groups.items[ groupId ] ?? null )
-			.filter( Boolean );
-	}, [ overridableProps ] );
-
-	const allGroupsForSelect = useMemo(
-		() => groups.map( ( group ) => ( { value: group.id, label: group.label } ) ),
-		[ groups ]
-	);
-
-	if ( ! currentComponentId || ! overridableProps ) {
-		return null;
-	}
-
-	const hasGroups = groups.length > 0;
-	const showEmptyState = ! hasGroups && ! isAddingGroup;
-	const groupIds = overridableProps.groups.order;
-
-	const handleAddGroupClick = () => {
-		if ( isAddingGroup ) {
-			return;
-		}
-
-		const newGroupId = generateUniqueId( 'group' );
-		const newLabel = generateUniqueLabel( groups );
-
-		addOverridableGroup( {
-			componentId: currentComponentId,
-			groupId: newGroupId,
-			label: newLabel,
-			source: 'user',
-		} );
-		setDocumentModifiedStatus( true );
-		setIsAddingGroup( false );
-
-		groupLabelEditable.setEditingGroupId( newGroupId );
-	};
-
-	const handleGroupsReorder = ( newOrder: string[] ) => {
-		reorderOverridableGroups( { componentId: currentComponentId, newOrder } );
-		setDocumentModifiedStatus( true );
-	};
-
-	const handlePropsReorder = ( groupId: string, newPropsOrder: string[] ) => {
-		reorderGroupProps( { componentId: currentComponentId, groupId, newPropsOrder } );
-		setDocumentModifiedStatus( true );
-	};
-
-	const handlePropertyDelete = ( propKey: string ) => {
-		deleteOverridableProp( { componentId: currentComponentId, propKey, source: 'user' } );
-		setDocumentModifiedStatus( true );
-	};
-
-	const handlePropertyUpdate = ( overrideKey: string, data: { label: string; group: string | null } ) => {
-		updateOverridablePropParams( {
-			componentId: currentComponentId,
-			overrideKey,
-			label: data.label,
-			groupId: data.group,
-		} );
-		setDocumentModifiedStatus( true );
-	};
-
-	const handleGroupDelete = ( groupId: string ) => {
-		deleteOverridableGroup( { componentId: currentComponentId, groupId } );
-		setDocumentModifiedStatus( true );
-	};
-
-	return (
-		<>
-			<PanelHeader sx={ { justifyContent: 'start', pl: 1.5, pr: 1, py: 1 } }>
-				<Stack direction="row" alignItems="center" gap={ 0.5 } flexGrow={ 1 }>
-					<ComponentPropListIcon fontSize="tiny" />
-					<PanelHeaderTitle variant="subtitle2">
-						{ __( 'Component properties', 'elementor' ) }
-					</PanelHeaderTitle>
-				</Stack>
-
-				{ ! showEmptyState && (
-					<Tooltip title={ __( 'Add new group', 'elementor' ) }>
-						<IconButton
-							size="tiny"
-							aria-label={ __( 'Add new group', 'elementor' ) }
-							onClick={ handleAddGroupClick }
-						>
-							<FolderPlusIcon fontSize="tiny" />
-						</IconButton>
-					</Tooltip>
-				) }
-
-				<Tooltip title={ __( 'Close panel', 'elementor' ) }>
-					<IconButton
-						ref={ introductionRef }
-						size="tiny"
-						aria-label={ __( 'Close panel', 'elementor' ) }
-						onClick={ onClose }
-					>
-						<XIcon fontSize="tiny" />
-					</IconButton>
-				</Tooltip>
-			</PanelHeader>
-
-			<Divider />
-
-			<PanelBody>
-				{ showEmptyState ? (
-					<PropertiesEmptyState introductionRef={ introductionRef } />
-				) : (
-					<List sx={ { p: 2, display: 'flex', flexDirection: 'column', gap: 2 } }>
-						<SortableProvider value={ groupIds } onChange={ handleGroupsReorder }>
-							{ groups.map( ( group ) => (
-								<SortableItem key={ group.id } id={ group.id }>
-									{ ( { triggerProps, triggerStyle, isDragPlaceholder } ) => (
-										<PropertiesGroup
-											group={ group }
-											props={ overridableProps.props }
-											allGroups={ allGroupsForSelect }
-											allGroupsRecord={ overridableProps.groups.items }
-											sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
-											isDragPlaceholder={ isDragPlaceholder }
-											setIsAddingGroup={ setIsAddingGroup }
-											onPropsReorder={ ( newOrder ) => handlePropsReorder( group.id, newOrder ) }
-											onPropertyDelete={ handlePropertyDelete }
-											onPropertyUpdate={ handlePropertyUpdate }
-											editableLabelProps={ groupLabelEditable }
-											onGroupDelete={ handleGroupDelete }
-										/>
-									) }
-								</SortableItem>
-							) ) }
-						</SortableProvider>
-					</List>
-				) }
-			</PanelBody>
-		</>
-	);
-}

package/src/extended/components/component-properties-panel/component-properties-panel.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
-import { __createPanel as createPanel, Panel } from '@elementor/editor-panels';
-import { ThemeProvider } from '@elementor/editor-ui';
-import { Alert, Box, ErrorBoundary } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ComponentPropertiesPanelContent } from './component-properties-panel-content';
-
-const id = 'component-properties-panel';
-
-export const { panel, usePanelActions } = createPanel( {
-	id,
-	component: ComponentPropertiesPanel,
-} );
-
-function ComponentPropertiesPanel() {
-	const { close: closePanel } = usePanelActions();
-	const { open: openEditingPanel } = useEditingPanelActions();
-
-	return (
-		<ThemeProvider>
-			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<Panel>
-					<ComponentPropertiesPanelContent
-						onClose={ () => {
-							closePanel();
-							openEditingPanel();
-						} }
-					/>
-				</Panel>
-			</ErrorBoundary>
-		</ThemeProvider>
-	);
-}
-
-const ErrorBoundaryFallback = () => (
-	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
-		<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>
-			<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>
-		</Alert>
-	</Box>
-);

package/src/extended/components/component-properties-panel/properties-empty-state.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { ComponentPropListIcon } from '@elementor/icons';
-import { Link, Stack, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ComponentIntroduction } from '../component-introduction';
-
-export function PropertiesEmptyState( { introductionRef }: { introductionRef: React.RefObject< HTMLButtonElement > } ) {
-	const [ isOpen, setIsOpen ] = useState( false );
-	return (
-		<>
-			<Stack
-				alignItems="center"
-				justifyContent="flex-start"
-				height="100%"
-				color="text.secondary"
-				sx={ { px: 2.5, pt: 10, pb: 5.5 } }
-				gap={ 1 }
-			>
-				<ComponentPropListIcon fontSize="large" />
-
-				<Typography align="center" variant="subtitle2">
-					{ __( 'Add your first property', 'elementor' ) }
-				</Typography>
-
-				<Typography align="center" variant="caption">
-					{ __( 'Make instances flexible while keeping design synced.', 'elementor' ) }
-				</Typography>
-
-				<Typography align="center" variant="caption">
-					{ __( 'Select any element, then click + next to a setting to expose it.', 'elementor' ) }
-				</Typography>
-
-				<Link
-					variant="caption"
-					color="secondary"
-					sx={ { textDecorationLine: 'underline' } }
-					onClick={ () => setIsOpen( true ) }
-				>
-					{ __( 'Learn more', 'elementor' ) }
-				</Link>
-			</Stack>
-			<ComponentIntroduction
-				anchorRef={ introductionRef }
-				shouldShowIntroduction={ isOpen }
-				onClose={ () => setIsOpen( false ) }
-			/>
-		</>
-	);
-}