@elementor/editor-editing-panel 4.2.0-846 → 4.2.0-848

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.2.0-846",
+  "version": "4.2.0-848",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-846",
-    "@elementor/editor-canvas": "4.2.0-846",
-    "@elementor/editor-controls": "4.2.0-846",
-    "@elementor/editor-documents": "4.2.0-846",
-    "@elementor/editor-elements": "4.2.0-846",
-    "@elementor/editor-interactions": "4.2.0-846",
-    "@elementor/editor-notifications": "4.2.0-846",
-    "@elementor/editor-panels": "4.2.0-846",
-    "@elementor/editor-props": "4.2.0-846",
-    "@elementor/editor-responsive": "4.2.0-846",
-    "@elementor/editor-styles": "4.2.0-846",
-    "@elementor/editor-styles-repository": "4.2.0-846",
-    "@elementor/editor-ui": "4.2.0-846",
-    "@elementor/editor-v1-adapters": "4.2.0-846",
-    "@elementor/http-client": "4.2.0-846",
+    "@elementor/editor": "4.2.0-848",
+    "@elementor/editor-canvas": "4.2.0-848",
+    "@elementor/editor-controls": "4.2.0-848",
+    "@elementor/editor-documents": "4.2.0-848",
+    "@elementor/editor-elements": "4.2.0-848",
+    "@elementor/editor-interactions": "4.2.0-848",
+    "@elementor/editor-notifications": "4.2.0-848",
+    "@elementor/editor-panels": "4.2.0-848",
+    "@elementor/editor-props": "4.2.0-848",
+    "@elementor/editor-responsive": "4.2.0-848",
+    "@elementor/editor-styles": "4.2.0-848",
+    "@elementor/editor-styles-repository": "4.2.0-848",
+    "@elementor/editor-ui": "4.2.0-848",
+    "@elementor/editor-v1-adapters": "4.2.0-848",
+    "@elementor/http-client": "4.2.0-848",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.2.0-846",
-    "@elementor/locations": "4.2.0-846",
-    "@elementor/menus": "4.2.0-846",
-    "@elementor/query": "4.2.0-846",
-    "@elementor/schema": "4.2.0-846",
-    "@elementor/session": "4.2.0-846",
+    "@elementor/editor-variables": "4.2.0-848",
+    "@elementor/locations": "4.2.0-848",
+    "@elementor/menus": "4.2.0-848",
+    "@elementor/query": "4.2.0-848",
+    "@elementor/schema": "4.2.0-848",
+    "@elementor/session": "4.2.0-848",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-846",
-    "@elementor/wp-media": "4.2.0-846",
+    "@elementor/utils": "4.2.0-848",
+    "@elementor/wp-media": "4.2.0-848",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -1,42 +1,94 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { SizeComponent } from '@elementor/editor-controls';
-import { type StringPropValue } from '@elementor/editor-props';
+import { SizeComponent, useBoundProp } from '@elementor/editor-controls';
+import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { StylesFieldLayout } from '../../styles-field-layout';
 
 type GridTrackUnit = 'fr' | 'custom';
-type GridTrackValue = { size: number | string; unit: GridTrackUnit };
+
+type GridTrackValue = { kind: 'empty' } | { kind: 'fr'; count: number } | { kind: 'custom'; raw: string };
 
 const FR = 'fr' as const;
 const CUSTOM = 'custom' as const;
 const UNITS: GridTrackUnit[] = [ FR, CUSTOM ];
 
+const EMPTY: GridTrackValue = { kind: 'empty' };
+
 const REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
 
-const cssToTrackValue = ( css: string | null ): GridTrackValue | null => {
+const parseCss = ( css: string | null ): GridTrackValue => {
 	if ( ! css ) {
-		return null;
+		return EMPTY;
 	}
 	const match = css.match( REPEAT_FR_PATTERN );
 	if ( match ) {
-		return { size: parseInt( match[ 1 ], 10 ), unit: FR };
+		const count = parseInt( match[ 1 ], 10 );
+		return count >= 1 ? { kind: 'fr', count } : EMPTY;
+	}
+	return { kind: 'custom', raw: css };
+};
+
+const fromSizeInput = ( v: { size: number | string; unit: GridTrackUnit } ): GridTrackValue => {
+	if ( v.size === '' || Number.isNaN( v.size ) ) {
+		return EMPTY;
 	}
-	return { size: css, unit: CUSTOM };
+	if ( v.unit === FR ) {
+		const n = Number( v.size );
+		return Number.isFinite( n ) && n >= 1 ? { kind: 'fr', count: Math.trunc( n ) } : EMPTY;
+	}
+	return { kind: 'custom', raw: String( v.size ) };
 };
 
-const trackValueToCss = ( trackValue: GridTrackValue | null ): string | null => {
-	if ( ! trackValue || trackValue.size === '' || trackValue.size === null ) {
-		return null;
+const toCss = ( v: GridTrackValue ): string | null => {
+	switch ( v.kind ) {
+		case 'empty':
+			return null;
+		case 'fr':
+			return `repeat(${ v.count }, 1fr)`;
+		case 'custom':
+			return v.raw;
 	}
-	if ( trackValue.unit === FR ) {
-		return `repeat(${ trackValue.size }, 1fr)`;
+};
+
+const toSizeInput = (
+	v: GridTrackValue,
+	fallbackUnit: GridTrackUnit = FR
+): { size: number | string; unit: GridTrackUnit } => {
+	switch ( v.kind ) {
+		case 'empty':
+			return { size: '', unit: fallbackUnit };
+		case 'fr':
+			return { size: v.count, unit: FR };
+		case 'custom':
+			return { size: v.raw, unit: CUSTOM };
 	}
-	return String( trackValue.size );
+};
+
+const toPlaceholder = ( v: GridTrackValue ): string | undefined => {
+	switch ( v.kind ) {
+		case 'empty':
+			return undefined;
+		case 'fr':
+			return String( v.count );
+		case 'custom':
+			return v.raw;
+	}
+};
+
+const unitOf = ( v: GridTrackValue, fallback: GridTrackUnit = FR ): GridTrackUnit => {
+	if ( v.kind === 'fr' ) {
+		return FR;
+	}
+	if ( v.kind === 'custom' ) {
+		return CUSTOM;
+	}
+	return fallback;
 };
 
 type GridTrackCssProp = 'grid-template-rows' | 'grid-template-columns';
@@ -47,9 +99,11 @@ type GridTrackFieldProps = {
 };
 
 const GridTrackField = ( { cssProp, label }: GridTrackFieldProps ) => (
-	<StylesField bind={ cssProp } propDisplayName={ label }>
-		<GridTrackFieldContent cssProp={ cssProp } label={ label } />
-	</StylesField>
+	<UiProviders>
+		<StylesField bind={ cssProp } propDisplayName={ label }>
+			<GridTrackFieldContent cssProp={ cssProp } label={ label } />
+		</StylesField>
+	</UiProviders>
 );
 
 const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
@@ -57,12 +111,24 @@ const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
 		history: { propDisplayName: label },
 	} );
 
+	const { placeholder: inheritedPlaceholder } = useBoundProp();
 	const anchorRef = useRef< HTMLDivElement >( null );
-	const trackValue = cssToTrackValue( value?.value ?? null );
 
-	const handleChange = ( newValue: GridTrackValue ) => {
-		const css = trackValueToCss( newValue );
-		setValue( css ? { $$type: 'string', value: css } : null );
+	const local = parseCss( value?.value ?? null );
+	const inherited = parseCss( stringPropTypeUtil.extract( inheritedPlaceholder ) );
+
+	const displayValue = local.kind !== 'empty' ? toSizeInput( local ) : toSizeInput( EMPTY, unitOf( inherited ) );
+	const placeholder = toPlaceholder( inherited );
+
+	const handleChange = ( raw: { size: number | string; unit: GridTrackUnit } ) => {
+		const next = fromSizeInput( raw );
+
+		if ( next.kind === 'empty' && local.kind !== 'empty' && raw.unit !== unitOf( local ) ) {
+			return;
+		}
+
+		const css = toCss( next );
+		setValue( css === null ? null : { $$type: 'string', value: css } );
 	};
 
 	return (
@@ -70,9 +136,8 @@ const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
 			<div ref={ anchorRef }>
 				<SizeComponent
 					units={ UNITS as unknown as Parameters< typeof SizeComponent >[ 0 ][ 'units' ] }
-					value={
-						( trackValue ?? { size: NaN, unit: FR } ) as Parameters< typeof SizeComponent >[ 0 ][ 'value' ]
-					}
+					value={ displayValue as Parameters< typeof SizeComponent >[ 0 ][ 'value' ] }
+					placeholder={ placeholder }
 					defaultUnit={ FR as Parameters< typeof SizeComponent >[ 0 ][ 'defaultUnit' ] }
 					setValue={ handleChange as Parameters< typeof SizeComponent >[ 0 ][ 'setValue' ] }
 					onBlur={ () => {} }