@elementor/editor-editing-panel 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -42,7 +42,7 @@
     "@elementor/editor": "^0.14.0",
     "@elementor/editor-panels": "^0.7.0",
     "@elementor/editor-responsive": "^0.12.1",
-    "@elementor/editor-style": "^0.3.0",
+    "@elementor/editor-style": "^0.4.0",
     "@elementor/editor-v1-adapters": "^0.8.2",
     "@elementor/icons": "^1.13.1",
     "@elementor/schema": "^0.1.0",

package/src/components/style-sections/typography-section/text-alignment-control.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
+import { StyleControl } from '../../../controls/style-control';
+import { ToggleControl } from '../../../controls/control-types/toggle-control';
+
+type Alignments = 'left' | 'center' | 'right' | 'justify';
+
+const options: ToggleButtonGroupItem< Alignments >[] = [
+	{
+		value: 'left',
+		label: __( 'Left', 'elementor' ),
+		icon: AlignLeftIcon,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		icon: AlignCenterIcon,
+	},
+	{
+		value: 'right',
+		label: __( 'Right', 'elementor' ),
+		icon: AlignRightIcon,
+	},
+	{
+		value: 'justify',
+		label: __( 'Justify', 'elementor' ),
+		icon: AlignJustifiedIcon,
+	},
+];
+
+export const TextAlignmentControl = () => {
+	return (
+		<ControlContainer>
+			<StyleControl.Label>{ __( 'Alignment', 'elementor' ) }</StyleControl.Label>
+			<StyleControl bind={ 'text-align' }>
+				<ToggleControl options={ options } />
+			</StyleControl>
+		</ControlContainer>
+	);
+};

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

@@ -10,6 +10,7 @@ import { LetterSpacingControl } from './letter-spacing-control';
 import { WordSpacingControl } from './word-spacing-control';
 import { CollapsibleContent } from '../../collapsible-content';
 import { TransformControl } from './transform-control';
+import { TextAlignmentControl } from './text-alignment-control';
 
 export const TypographySection = () => {
 	return (
@@ -24,6 +25,7 @@ export const TypographySection = () => {
 						<LetterSpacingControl />
 						<WordSpacingControl />
 						<Divider />
+						<TextAlignmentControl />
 						<TextStyleControl />
 						<TransformControl />
 					</Stack>

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

@@ -28,11 +28,13 @@ import {
 	TabPanel,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+import { usePropValueHistory } from '../hooks/use-prop-value-history';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
 	const { bind, value, setValue } = useControl< DynamicPropValue | null >();
+	const [ propValueFromHistory ] = usePropValueHistory( bind );
 	const { name: tagName = '' } = value?.value || {};
 
 	const selectionPopoverId = useId();
@@ -41,8 +43,7 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		// TODO: Implement static value restoration.
-		setValue( null );
+		setValue( propValueFromHistory ?? null );
 	};
 
 	if ( ! dynamicTag ) {

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

@@ -18,7 +18,9 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { PropKey } from '../../types';
+import { PropKey, PropValue } from '../../types';
+import { isDynamicPropValue } from '../utils';
+import { usePropValueHistory } from '../hooks/use-prop-value-history';
 
 type Option = {
 	label: string;
@@ -35,9 +37,11 @@ export type DynamicSelectionProps = {
 
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
-
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-	const { bind, value: dynamicValue, setValue } = useControl< DynamicPropValue >();
+	const { bind, value: currentValue, setValue } = useControl< DynamicPropValue | PropValue >();
+	const [ , updatePropValueHistory ] = usePropValueHistory( bind );
+
+	const isCurrentValueDynamic = isDynamicPropValue( currentValue );
 
 	const options = useFilteredOptions( bind, searchValue );
 
@@ -45,6 +49,16 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 		setSearchValue( event.target.value );
 	};
 
+	const handleSetDynamicTag = ( value: string ) => {
+		if ( ! isCurrentValueDynamic ) {
+			updatePropValueHistory( currentValue );
+		}
+
+		setValue( { $$type: 'dynamic', value: { name: value } } );
+
+		onSelect?.();
+	};
+
 	return (
 		<Stack>
 			<Box px={ 1.5 } pb={ 1 }>
@@ -73,7 +87,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 									{ dynamicGroups?.[ category ]?.title || category }
 								</ListSubheader>
 								{ items.map( ( { value, label: tagLabel } ) => {
-									const isSelected = value === dynamicValue?.value?.name;
+									const isSelected = isCurrentValueDynamic && value === currentValue?.value?.name;
 
 									return (
 										<MenuItem
@@ -82,10 +96,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 											// eslint-disable-next-line jsx-a11y/no-autofocus
 											autoFocus={ isSelected }
 											sx={ { typography: 'caption' } }
-											onClick={ () => {
-												setValue( { $$type: 'dynamic', value: { name: value } } );
-												onSelect?.();
-											} }
+											onClick={ () => handleSetDynamicTag( value ) }
 										>
 											{ tagLabel }
 										</MenuItem>

package/src/dynamics/hooks/use-prop-value-history.ts

@@ -0,0 +1,26 @@
+import { useElementContext } from '../../contexts/element-context';
+import { PropValue } from '../../types';
+
+export const PROPS_VALUES_HISTORY_KEY = 'elementor/dynamic/non-dynamic-values-history';
+
+export const usePropValueHistory = ( path: string ) => {
+	const valuesHistory = getValues();
+	const { element } = useElementContext();
+	const key = `${ element.id }-${ path }`;
+
+	const value = valuesHistory[ key ] ?? null;
+
+	const setValue = ( newValue: PropValue ) => {
+		setValues( { ...valuesHistory, [ key ]: newValue } );
+	};
+
+	return [ value, setValue ] as const;
+};
+
+const getValues = () => {
+	return JSON.parse( sessionStorage.getItem( PROPS_VALUES_HISTORY_KEY ) || '{}' );
+};
+
+const setValues = ( values: Record< string, PropValue > ) => {
+	sessionStorage.setItem( PROPS_VALUES_HISTORY_KEY, JSON.stringify( values ) );
+};

package/src/dynamics/utils.ts

@@ -1,9 +1,9 @@
 import { AdditionalPropType, PropValue } from '../types';
-import { DynamicPropType } from './types';
+import { DynamicPropType, DynamicPropValue } from './types';
 import { isTransformable } from '../props/is-transformable';
 
 export const isDynamicType = ( prop: AdditionalPropType ): prop is DynamicPropType => prop.key === 'dynamic';
 
-export const isDynamicPropValue = ( prop: PropValue ) => {
+export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue => {
 	return isTransformable( prop ) && prop.$$type === 'dynamic';
 };