@elementor/editor-editing-panel 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,17 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.1",
-    "@elementor/editor-controls": "0.14.0",
-    "@elementor/editor-elements": "0.6.0",
-    "@elementor/editor-panels": "0.12.1",
-    "@elementor/editor-props": "0.9.3",
-    "@elementor/editor-responsive": "0.13.1",
-    "@elementor/editor-styles": "0.6.0",
-    "@elementor/editor-styles-repository": "0.7.3",
-    "@elementor/editor-ui": "0.4.0",
-    "@elementor/editor-v1-adapters": "0.10.1",
-    "@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",

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/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">

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/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' ) } extendedValues={ [ 'auto' ] } />
+				<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/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.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';
@@ -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>