@elementor/editor-editing-panel 1.36.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/components/style-sections/size-section/object-fit-field.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { SelectControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+const positionOptions = [
+	{ label: __( 'Fill', 'elementor' ), value: 'fill' },
+	{ label: __( 'Cover', 'elementor' ), value: 'cover' },
+	{ label: __( 'Contain', 'elementor' ), value: 'contain' },
+	{ label: __( 'None', 'elementor' ), value: 'none' },
+	{ label: __( 'Scale down', 'elementor' ), value: 'scale-down' },
+];
+
+type Props = {
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+};
+
+export const ObjectFitField = ( { onChange }: Props ) => {
+	return (
+		<StylesField bind="object-fit">
+			<Grid container pt={ 2 } gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Object fit', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+					<SelectControl options={ positionOptions } onChange={ onChange } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SelectControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+const positionOptions = [
+	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
+	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
+	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
+	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
+	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
+	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
+	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
+	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
+	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
+];
+
+type Props = {
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+};
+
+export const ObjectPositionField = ( { onChange }: Props ) => {
+	return (
+		<StylesField bind="object-position">
+			<Grid container pt={ 2 } gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Object position', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+					<SelectControl options={ positionOptions } onChange={ onChange } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -1,15 +1,33 @@
 import * as React from 'react';
 import { type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import type { StringPropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { CollapsibleContent } from '../../collapsible-content';
 import { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { ObjectFitField } from './object-fit-field';
+import { ObjectPositionField } from './object-position-field';
 import { OverflowField } from './overflow-field';
 
 export const SizeSection = () => {
+	const [ fitValue, setFitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+	const isNotFill = fitValue && fitValue?.value !== 'fill';
+
+	const onFitChange = ( newFit: string | null, previousValue: string | null | undefined ) => {
+		if ( newFit && newFit !== previousValue ) {
+			setFitValue( {
+				value: newFit,
+				$$type: 'string',
+			} );
+		}
+	};
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
 	return (
 		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
@@ -48,6 +66,14 @@ export const SizeSection = () => {
 			<Stack>
 				<OverflowField />
 			</Stack>
+			{ isVersion330Active && (
+				<CollapsibleContent>
+					<ObjectFitField onChange={ onFitChange } />
+					<Grid item xs={ 6 }>
+						{ isNotFill && <ObjectPositionField /> }
+					</Grid>
+				</CollapsibleContent>
+			) }
 		</SectionContent>
 	);
 };

package/src/hooks/use-state-by-element.ts

@@ -1,12 +1,14 @@
 import { useState } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 
 export const useStateByElement = < T >( key: string, initialValue: T ) => {
 	const { element } = useElement();
+	const isFeatureActive = isExperimentActive( 'e_v_3_30' );
 	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
-	const storedValue = getSessionStorageItem< T >( lookup );
+	const storedValue = isFeatureActive ? getSessionStorageItem< T >( lookup ) : initialValue;
 	const [ value, setValue ] = useState( storedValue ?? initialValue );
 
 	const doUpdate = ( newValue: T ) => {