@elementor/editor-editing-panel 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,23 +39,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.0",
-    "@elementor/editor-controls": "0.13.0",
-    "@elementor/editor-elements": "0.5.4",
-    "@elementor/editor-panels": "0.12.0",
-    "@elementor/editor-props": "0.9.2",
-    "@elementor/editor-responsive": "0.13.0",
-    "@elementor/editor-styles": "0.5.7",
-    "@elementor/editor-styles-repository": "0.7.2",
-    "@elementor/editor-ui": "0.4.0",
-    "@elementor/editor-v1-adapters": "0.10.0",
-    "@elementor/icons": "1.31.0",
+    "@elementor/editor": "0.18.2",
+    "@elementor/editor-controls": "0.15.0",
+    "@elementor/editor-elements": "0.6.1",
+    "@elementor/editor-panels": "0.12.2",
+    "@elementor/editor-props": "0.9.4",
+    "@elementor/editor-responsive": "0.13.2",
+    "@elementor/editor-styles": "0.6.1",
+    "@elementor/editor-styles-repository": "0.7.4",
+    "@elementor/editor-ui": "0.4.1",
+    "@elementor/editor-v1-adapters": "0.10.2",
+    "@elementor/icons": "1.35.0",
     "@elementor/locations": "0.7.6",
     "@elementor/menus": "0.1.3",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",
-    "@elementor/utils": "0.3.1",
+    "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -40,7 +40,7 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
 			<ListSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
-				{ __( 'Pseudo selector', 'elementor' ) }
+				{ __( 'Pseudo classes', 'elementor' ) }
 			</ListSubheader>
 			{ STATES.map( ( state ) => {
 				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;

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

@@ -60,7 +60,7 @@ export function CssClassSelector() {
 		<Stack gap={ 1 } p={ 2 }>
 			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
 				<Typography component="label" variant="caption" htmlFor={ ID }>
-					{ __( 'CSS Classes', 'elementor' ) }
+					{ __( 'CSS classes', 'elementor' ) }
 				</Typography>
 				<Stack direction="row" gap={ 1 }>
 					<ClassSelectorActionsSlot />

package/src/components/editing-panel.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { RocketIcon } from '@elementor/icons';
 import { SessionStorageProvider } from '@elementor/session';
 import { ErrorBoundary } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -32,6 +33,7 @@ export const EditingPanel = () => {
 				<Panel>
 					<PanelHeader>
 						<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
+						<RocketIcon fontSize="small" sx={ { color: 'text.disabled' } } />
 					</PanelHeader>
 					<PanelBody>
 						<ControlActionsProvider items={ menuItems }>

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -60,6 +60,7 @@ export const BorderRadiusField = () => {
 				items={ getCorners( isSiteRtl ) }
 				label={ __( 'Border radius', 'elementor' ) }
 				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
+				tooltipLabel={ __( 'Adjust corners', 'elementor' ) }
 				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
 			/>
 		</StylesField>

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -2,40 +2,49 @@ import * as React from 'react';
 import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
 import { borderWidthPropTypeUtil } from '@elementor/editor-props';
 import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
+import { withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
-const edges: EqualUnequalItems = [
+const InlineStartIcon = withDirection( SideRightIcon );
+const InlineEndIcon = withDirection( SideLeftIcon );
+
+const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: __( 'Top', 'elementor' ),
 		icon: <SideTopIcon fontSize={ 'tiny' } />,
-		bind: 'top',
+		bind: 'block-start',
 	},
 	{
-		label: __( 'Right', 'elementor' ),
-		icon: <SideRightIcon fontSize={ 'tiny' } />,
-		bind: 'right',
+		label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
+		icon: <RotatedIcon icon={ InlineStartIcon } size="tiny" />,
+		bind: 'inline-end',
 	},
 	{
 		label: __( 'Bottom', 'elementor' ),
 		icon: <SideBottomIcon fontSize={ 'tiny' } />,
-		bind: 'bottom',
+		bind: 'block-end',
 	},
 	{
-		label: __( 'Left', 'elementor' ),
-		icon: <SideLeftIcon fontSize={ 'tiny' } />,
-		bind: 'left',
+		label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
+		icon: <RotatedIcon icon={ InlineEndIcon } size="tiny" />,
+		bind: 'inline-start',
 	},
 ];
 
 export const BorderWidthField = () => {
+	const { isSiteRtl } = useDirection();
+
 	return (
 		<StylesField bind={ 'border-width' }>
 			<EqualUnequalSizesControl
-				items={ edges }
+				items={ getEdges( isSiteRtl ) }
 				label={ __( 'Border width', 'elementor' ) }
 				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
+				tooltipLabel={ __( 'Adjust borders', 'elementor' ) }
 				multiSizePropTypeUtil={ borderWidthPropTypeUtil }
 			/>
 		</StylesField>

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -130,7 +130,7 @@ const FlexCustomField = () => (
 					<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<SizeControl />
+					<SizeControl extendedValues={ [ 'auto' ] } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/position-section/dimensions-field.tsx

@@ -1,35 +1,47 @@
 import * as React from 'react';
 import { ControlLabel, SizeControl } from '@elementor/editor-controls';
 import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { Grid, Stack } from '@elementor/ui';
+import { Grid, Stack, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
-type Side = 'left' | 'right' | 'top' | 'bottom';
+type Side = 'inset-inline-start' | 'inset-inline-end' | 'inset-block-start' | 'inset-block-end';
+
+const InlineStartIcon = withDirection( SideLeftIcon );
+const InlineEndIcon = withDirection( SideRightIcon );
 
 const sideIcons = {
-	left: <SideLeftIcon fontSize={ 'tiny' } />,
-	right: <SideRightIcon fontSize={ 'tiny' } />,
-	top: <SideTopIcon fontSize={ 'tiny' } />,
-	bottom: <SideBottomIcon fontSize={ 'tiny' } />,
+	'inset-block-start': <SideTopIcon fontSize={ 'tiny' } />,
+	'inset-block-end': <SideBottomIcon fontSize={ 'tiny' } />,
+	'inset-inline-start': <RotatedIcon icon={ InlineStartIcon } size="tiny" />,
+	'inset-inline-end': <RotatedIcon icon={ InlineEndIcon } size="tiny" />,
 };
 
+const getInlineStartLabel = ( isSiteRtl: boolean ) =>
+	isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' );
+
+const getInlineEndLabel = ( isSiteRtl: boolean ) =>
+	isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' );
+
 export const DimensionsField = () => {
+	const { isSiteRtl } = useDirection();
+
 	return (
 		<>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<DimensionField side="top" label={ __( 'Top', 'elementor' ) } />
-				<DimensionField side="right" label={ __( 'Right', 'elementor' ) } />
+				<DimensionField side="inset-block-start" label={ __( 'Top', 'elementor' ) } />
+				<DimensionField side="inset-inline-start" label={ getInlineStartLabel( isSiteRtl ) } />
 			</Stack>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<DimensionField side="bottom" label={ __( 'Bottom', 'elementor' ) } />
-				<DimensionField side="left" label={ __( 'Left', 'elementor' ) } />
+				<DimensionField side="inset-block-end" label={ __( 'Bottom', 'elementor' ) } />
+				<DimensionField side="inset-inline-end" label={ getInlineEndLabel( isSiteRtl ) } />
 			</Stack>
 		</>
 	);
 };
-
 const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 	return (
 		<Grid container gap={ 1 } alignItems="center">
@@ -38,7 +50,7 @@ const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 			</Grid>
 			<Grid item xs={ 12 }>
 				<StylesField bind={ side }>
-					<SizeControl startIcon={ sideIcons[ side ] } />
+					<SizeControl startIcon={ sideIcons[ side ] } extendedValues={ [ 'auto' ] } />
 				</StylesField>
 			</Grid>
 		</Grid>

package/src/components/style-sections/position-section/position-section.tsx

@@ -19,19 +19,19 @@ type DimensionValue =
 	| null;
 
 type DimensionsValues = {
-	top: DimensionValue;
-	bottom: DimensionValue;
-	left: DimensionValue;
-	right: DimensionValue;
+	'inset-block-start': DimensionValue;
+	'inset-block-end': DimensionValue;
+	'inset-inline-start': DimensionValue;
+	'inset-inline-end': DimensionValue;
 };
 
 export const PositionSection = () => {
 	const [ positionValue ] = useStylesField< StringPropValue >( 'position' );
 	const [ dimensionsValues, setDimensionsValues ] = useStylesFields< DimensionsValues >( [
-		'top',
-		'bottom',
-		'left',
-		'right',
+		'inset-block-start',
+		'inset-block-end',
+		'inset-inline-start',
+		'inset-inline-end',
 	] );
 
 	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
@@ -41,10 +41,10 @@ export const PositionSection = () => {
 			if ( dimensionsValues ) {
 				updateDimensionsHistory( dimensionsValues );
 				setDimensionsValues( {
-					top: undefined,
-					bottom: undefined,
-					left: undefined,
-					right: undefined,
+					'inset-block-start': undefined,
+					'inset-block-end': undefined,
+					'inset-inline-start': undefined,
+					'inset-inline-end': undefined,
 				} );
 			}
 		} else if ( previousPosition === 'static' ) {

package/src/components/style-sections/position-section/z-index-field.tsx

@@ -10,7 +10,7 @@ export const ZIndexField = () => {
 		<StylesField bind="z-index">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Z-Index', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Z-index', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<NumberControl />

package/src/components/style-sections/size-section/size-section.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { ControlLabel, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -13,26 +13,34 @@ export const SizeSection = () => {
 		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
+					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } extendedValues={ [ 'auto' ] } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } />
+					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } extendedValues={ [ 'auto' ] } />
 				</Grid>
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-width" label={ __( 'Min. width', 'elementor' ) } />
+					<SizeField
+						bind="min-width"
+						label={ __( 'Min width', 'elementor' ) }
+						extendedValues={ [ 'auto' ] }
+					/>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-height" label={ __( 'Min. height', 'elementor' ) } />
+					<SizeField
+						bind="min-height"
+						label={ __( 'Min height', 'elementor' ) }
+						extendedValues={ [ 'auto' ] }
+					/>
 				</Grid>
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-width" label={ __( 'Max. width', 'elementor' ) } />
+					<SizeField bind="max-width" label={ __( 'Max width', 'elementor' ) } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-height" label={ __( 'Max. height', 'elementor' ) } />
+					<SizeField bind="max-height" label={ __( 'Max height', 'elementor' ) } />
 				</Grid>
 			</Grid>
 			<PanelDivider />
@@ -46,9 +54,10 @@ export const SizeSection = () => {
 type ControlProps = {
 	bind: StylesFieldProps[ 'bind' ];
 	label: string;
+	extendedValues?: ExtendedValue[];
 };
 
-const SizeField = ( { label, bind }: ControlProps ) => {
+const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
 	return (
 		<StylesField bind={ bind }>
 			<Grid container gap={ 1 } alignItems="center">
@@ -56,7 +65,7 @@ const SizeField = ( { label, bind }: ControlProps ) => {
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 12 }>
-					<SizeControl />
+					<SizeControl extendedValues={ extendedValues } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/spacing-section/spacing-section.tsx

@@ -3,18 +3,25 @@ import { LinkedDimensionsControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 
 export const SpacingSection = () => {
+	const { isSiteRtl } = useDirection();
+
 	return (
 		<SectionContent>
 			<StylesField bind={ 'padding' }>
-				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
+				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } isSiteRtl={ isSiteRtl } />
 			</StylesField>
 			<PanelDivider />
 			<StylesField bind={ 'margin' }>
-				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
+				<LinkedDimensionsControl
+					label={ __( 'Margin', 'elementor' ) }
+					isSiteRtl={ isSiteRtl }
+					extendedValues={ [ 'auto' ] }
+				/>
 			</StylesField>
 		</SectionContent>
 	);

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { ControlLabel, FontFamilyControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -6,10 +7,16 @@ import { __ } from '@wordpress/i18n';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { getElementorConfig } from '../../../sync/get-elementor-config';
 
+const supportedCategories: Record< string, string > = {
+	system: __( 'System', 'elementor' ),
+	custom: __( 'Custom Fonts', 'elementor' ),
+	googlefonts: __( 'Google Fonts', 'elementor' ),
+};
+
 export const FontFamilyField = () => {
-	const fontFamilies = getFontFamilies();
+	const fontFamilies = useFontFamilies();
 
-	if ( ! fontFamilies ) {
+	if ( Object.keys( fontFamilies ).length === 0 ) {
 		return null;
 	}
 
@@ -38,3 +45,28 @@ const getFontFamilies = () => {
 
 	return options;
 };
+
+const useFontFamilies = () => {
+	const fontFamilies = getFontFamilies();
+
+	return useMemo(
+		() =>
+			Object.entries( fontFamilies || {} ).reduce< Record< string, string[] > >( ( acc, [ font, category ] ) => {
+				const categoryLabel = supportedCategories[ category as keyof typeof supportedCategories ];
+				const existingCategory = acc[ categoryLabel ];
+
+				if ( ! categoryLabel ) {
+					return acc;
+				}
+
+				if ( ! existingCategory ) {
+					acc[ categoryLabel ] = [];
+				}
+
+				acc[ categoryLabel ].push( font );
+
+				return acc;
+			}, {} ),
+		[ fontFamilies ]
+	);
+};

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -7,13 +7,13 @@ import { StylesField } from '../../../controls-registry/styles-field';
 
 const fontWeightOptions = [
 	{ value: '100', label: __( '100 - Thin', 'elementor' ) },
-	{ value: '200', label: __( '200 - Extra Light', 'elementor' ) },
+	{ value: '200', label: __( '200 - Extra light', 'elementor' ) },
 	{ value: '300', label: __( '300 - Light', 'elementor' ) },
 	{ value: '400', label: __( '400 - Normal', 'elementor' ) },
 	{ value: '500', label: __( '500 - Medium', 'elementor' ) },
-	{ value: '600', label: __( '600 - Semi Bold', 'elementor' ) },
+	{ value: '600', label: __( '600 - Semi bold', 'elementor' ) },
 	{ value: '700', label: __( '700 - Bold', 'elementor' ) },
-	{ value: '800', label: __( '800 - Extra Bold', 'elementor' ) },
+	{ value: '800', label: __( '800 - Extra bold', 'elementor' ) },
 	{ value: '900', label: __( '900 - Black', 'elementor' ) },
 ];
 

package/src/components/style-sections/typography-section/text-direction-field.tsx

@@ -11,13 +11,15 @@ type Direction = 'ltr' | 'rtl';
 const options: ToggleButtonGroupItem< Direction >[] = [
 	{
 		value: 'ltr',
-		label: __( 'Left to Right', 'elementor' ),
+		label: __( 'Left to right', 'elementor' ),
 		renderContent: ( { size } ) => <TextDirectionLtrIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 	{
 		value: 'rtl',
-		label: __( 'Right to Left', 'elementor' ),
+		label: __( 'Right to left', 'elementor' ),
 		renderContent: ( { size } ) => <TextDirectionRtlIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 ];
 

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -84,7 +84,7 @@ export const DynamicSelectionControl = () => {
 				<Stack>
 					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
 						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-						<Typography variant="subtitle2">{ __( 'Dynamic Tags', 'elementor' ) }</Typography>
+						<Typography variant="subtitle2">{ __( 'Dynamic tags', 'elementor' ) }</Typography>
 						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ selectionPopoverState.close }>
 							<XIcon fontSize={ SIZE } />
 						</IconButton>

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Fragment, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { PhotoIcon, SearchIcon } from '@elementor/icons';
+import { DatabaseIcon, SearchIcon } from '@elementor/icons';
 import {
 	Box,
 	Divider,
@@ -16,7 +16,6 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PopoverContent } from '../../components/popover-content';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
@@ -70,7 +69,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 					size={ SIZE }
 					value={ searchValue }
 					onChange={ handleSearch }
-					placeholder={ __( 'Search dynamic tag', 'elementor' ) }
+					placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
 					InputProps={ {
 						startAdornment: (
 							<InputAdornment position="start">
@@ -109,26 +108,34 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 						) ) }
 					</MenuList>
 				) : (
-					<PopoverContent alignItems="center" p={ 2.5 }>
-						<PhotoIcon fontSize="large" />
-						<Typography align="center" variant="caption" color="text.secondary">
+					<Stack
+						gap={ 1 }
+						alignItems="center"
+						justifyContent="center"
+						height="100%"
+						p={ 2.5 }
+						color="text.secondary"
+						sx={ { pb: 3.5 } }
+					>
+						<DatabaseIcon fontSize="large" />
+						<Typography align="center" variant="subtitle2">
 							{ __( 'Sorry, nothing matched', 'elementor' ) }
 							<br />
 							&ldquo;{ searchValue }&rdquo;.
 						</Typography>
-						<Typography align="center" variant="caption" color="text.secondary">
+						<Typography align="center" variant="caption">
+							{ __( 'Try something else.', 'elementor' ) }
+							&nbsp;
 							<Link
-								color="secondary"
+								color="text.secondary"
 								variant="caption"
 								component="button"
 								onClick={ () => setSearchValue( '' ) }
 							>
-								{ __( 'Clear the filters', 'elementor' ) }
+								{ __( 'Clear & try again', 'elementor' ) }
 							</Link>
-							&nbsp;
-							{ __( 'and try again.', 'elementor' ) }
 						</Typography>
-					</PopoverContent>
+					</Stack>
 				) }
 			</Box>
 		</Stack>

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -15,7 +15,7 @@ export const usePropDynamicAction = (): PopoverActionProps => {
 	return {
 		visible,
 		icon: DatabaseIcon,
-		title: __( 'Dynamic Tags', 'elementor' ),
+		title: __( 'Dynamic tags', 'elementor' ),
 		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
 	};
 };