@elementor/editor-editing-panel 4.1.0-807 → 4.1.0-809

package/package.json

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

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

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceChain } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { StylesFieldLayout } from '../../styles-field-layout';
 
-type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';
+type Displays = 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'none';
 
 const DISPLAY_LABEL = __( 'Display', 'elementor' );
 
@@ -24,15 +26,15 @@ const displayFieldItems: ToggleButtonGroupItem< Displays >[] = [
 		showTooltip: true,
 	},
 	{
-		value: 'inline-block',
-		renderContent: () => __( 'In-blk', 'elementor' ),
-		label: __( 'Inline-block', 'elementor' ),
+		value: 'grid',
+		renderContent: () => __( 'Grid', 'elementor' ),
+		label: __( 'Grid', 'elementor' ),
 		showTooltip: true,
 	},
 	{
-		value: 'none',
-		renderContent: () => __( 'None', 'elementor' ),
-		label: __( 'None', 'elementor' ),
+		value: 'inline-block',
+		renderContent: () => __( 'In-blk', 'elementor' ),
+		label: __( 'Inline-block', 'elementor' ),
 		showTooltip: true,
 	},
 	{
@@ -41,15 +43,26 @@ const displayFieldItems: ToggleButtonGroupItem< Displays >[] = [
 		label: __( 'Inline-flex', 'elementor' ),
 		showTooltip: true,
 	},
+	{
+		value: 'none',
+		renderContent: () => __( 'None', 'elementor' ),
+		label: __( 'None', 'elementor' ),
+		showTooltip: true,
+	},
 ];
 
 export const DisplayField = () => {
 	const placeholder = useDisplayPlaceholderValue();
+	const isGridActive = isExperimentActive( 'e_css_grid' );
+	const items = useMemo(
+		() => ( isGridActive ? displayFieldItems : displayFieldItems.filter( ( item ) => item.value !== 'grid' ) ),
+		[ isGridActive ]
+	);
 
 	return (
 		<StylesField bind="display" propDisplayName={ DISPLAY_LABEL } placeholder={ placeholder }>
 			<StylesFieldLayout label={ DISPLAY_LABEL } direction="column">
-				<ToggleControl options={ displayFieldItems } maxItems={ 4 } fullWidth={ true } />
+				<ToggleControl options={ items } maxItems={ 4 } fullWidth={ true } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { ControlToggleButtonGroup, type ToggleButtonGroupItem } from '@elementor/editor-controls';
+import { type StringPropValue } from '@elementor/editor-props';
+import { ArrowDownSmallIcon, ArrowRightIcon, LayoutDashboardIcon } from '@elementor/icons';
+import { Grid, ToggleButton, Tooltip, withDirection } 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 AutoFlowDirection = 'row' | 'column';
+
+const AUTO_FLOW_LABEL = __( 'Auto flow', 'elementor' );
+const DENSE_LABEL = __( 'Dense', 'elementor' );
+
+const StartIcon = withDirection( ArrowRightIcon );
+
+const directionOptions: ToggleButtonGroupItem< AutoFlowDirection >[] = [
+	{
+		value: 'row',
+		label: __( 'Row', 'elementor' ),
+		renderContent: ( { size } ) => <StartIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'column',
+		label: __( 'Column', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowDownSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+const parseAutoFlow = ( value: string | null ): { direction: AutoFlowDirection; dense: boolean } => {
+	if ( ! value ) {
+		return { direction: 'row', dense: false };
+	}
+	const dense = value.includes( 'dense' );
+	const direction = value.replace( /\s*dense\s*/, '' ).trim() as AutoFlowDirection;
+	return { direction: direction || 'row', dense };
+};
+
+const composeAutoFlow = ( direction: AutoFlowDirection, dense: boolean ): string => {
+	return dense ? `${ direction } dense` : direction;
+};
+
+const GridAutoFlowFieldContent = () => {
+	const { value, setValue } = useStylesField< StringPropValue | null >( 'grid-auto-flow', {
+		history: { propDisplayName: AUTO_FLOW_LABEL },
+	} );
+
+	const { direction, dense } = parseAutoFlow( value?.value ?? null );
+
+	const handleDirectionChange = ( newDirection: AutoFlowDirection | null ) => {
+		if ( ! newDirection ) {
+			return;
+		}
+		setValue( { $$type: 'string', value: composeAutoFlow( newDirection, dense ) } );
+	};
+
+	const handleDenseToggle = () => {
+		setValue( { $$type: 'string', value: composeAutoFlow( direction, ! dense ) } );
+	};
+
+	return (
+		<StylesFieldLayout label={ AUTO_FLOW_LABEL }>
+			<Grid container gap={ 1 } flexWrap="nowrap" alignItems="center" justifyContent="flex-end">
+				<Grid item sx={ { width: 64, maxWidth: '100%' } }>
+					<ControlToggleButtonGroup
+						items={ directionOptions }
+						value={ direction }
+						onChange={ handleDirectionChange }
+						exclusive={ true }
+						fullWidth={ true }
+					/>
+				</Grid>
+				<Grid item>
+					<Tooltip title={ DENSE_LABEL }>
+						<ToggleButton
+							value="dense"
+							selected={ dense }
+							onChange={ handleDenseToggle }
+							size="tiny"
+							aria-label={ DENSE_LABEL }
+						>
+							<LayoutDashboardIcon fontSize="tiny" />
+						</ToggleButton>
+					</Tooltip>
+				</Grid>
+			</Grid>
+		</StylesFieldLayout>
+	);
+};
+
+export const GridAutoFlowField = () => (
+	<StylesField bind="grid-auto-flow" propDisplayName={ AUTO_FLOW_LABEL }>
+		<UiProviders>
+			<GridAutoFlowFieldContent />
+		</UiProviders>
+	</StylesField>
+);

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	LayoutAlignCenterIcon as CenterIcon,
+	LayoutAlignLeftIcon,
+	LayoutAlignRightIcon,
+	LayoutDistributeVerticalIcon as StretchIcon,
+} from '@elementor/icons';
+import { withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+type JustifyItems = 'start' | 'center' | 'end' | 'stretch';
+
+const JUSTIFY_ITEMS_LABEL = __( 'Justify items', 'elementor' );
+
+const StartIcon = withDirection( LayoutAlignLeftIcon );
+const EndIcon = withDirection( LayoutAlignRightIcon );
+
+const options: ToggleButtonGroupItem< JustifyItems >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <StartIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <CenterIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <EndIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'stretch',
+		label: __( 'Stretch', 'elementor' ),
+		renderContent: ( { size } ) => <StretchIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const GridJustifyItemsField = () => (
+	<StylesField bind="justify-items" propDisplayName={ JUSTIFY_ITEMS_LABEL }>
+		<UiProviders>
+			<StylesFieldLayout label={ JUSTIFY_ITEMS_LABEL }>
+				<ToggleControl options={ options } />
+			</StylesFieldLayout>
+		</UiProviders>
+	</StylesField>
+);

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

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { SizeComponent } from '@elementor/editor-controls';
+import { 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 { StylesFieldLayout } from '../../styles-field-layout';
+
+type GridTrackUnit = 'fr' | 'custom';
+type GridTrackValue = { size: number | string; unit: GridTrackUnit };
+
+const FR = 'fr' as const;
+const CUSTOM = 'custom' as const;
+const UNITS: GridTrackUnit[] = [ FR, CUSTOM ];
+
+const REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
+
+const cssToTrackValue = ( css: string | null ): GridTrackValue | null => {
+	if ( ! css ) {
+		return null;
+	}
+	const match = css.match( REPEAT_FR_PATTERN );
+	if ( match ) {
+		return { size: parseInt( match[ 1 ], 10 ), unit: FR };
+	}
+	return { size: css, unit: CUSTOM };
+};
+
+const trackValueToCss = ( trackValue: GridTrackValue | null ): string | null => {
+	if ( ! trackValue || trackValue.size === '' || trackValue.size === null ) {
+		return null;
+	}
+	if ( trackValue.unit === FR ) {
+		return `repeat(${ trackValue.size }, 1fr)`;
+	}
+	return String( trackValue.size );
+};
+
+type GridTrackCssProp = 'grid-template-rows' | 'grid-template-columns';
+
+type GridTrackFieldProps = {
+	cssProp: GridTrackCssProp;
+	label: string;
+};
+
+const GridTrackField = ( { cssProp, label }: GridTrackFieldProps ) => (
+	<StylesField bind={ cssProp } propDisplayName={ label }>
+		<GridTrackFieldContent cssProp={ cssProp } label={ label } />
+	</StylesField>
+);
+
+const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
+	const { value, setValue } = useStylesField< StringPropValue | null >( cssProp, {
+		history: { propDisplayName: label },
+	} );
+
+	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 );
+	};
+
+	return (
+		<StylesFieldLayout label={ label } direction="column">
+			<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' ]
+					}
+					defaultUnit={ FR as Parameters< typeof SizeComponent >[ 0 ][ 'defaultUnit' ] }
+					setValue={ handleChange as Parameters< typeof SizeComponent >[ 0 ][ 'setValue' ] }
+					onBlur={ () => {} }
+					min={ 1 }
+					anchorRef={ anchorRef }
+				/>
+			</div>
+		</StylesFieldLayout>
+	);
+};
+
+export const GridSizeFields = () => (
+	<Grid container gap={ 2 } flexWrap="nowrap">
+		<Grid item xs={ 6 }>
+			<GridTrackField cssProp="grid-template-columns" label={ __( 'Columns', 'elementor' ) } />
+		</Grid>
+		<Grid item xs={ 6 }>
+			<GridTrackField cssProp="grid-template-rows" label={ __( 'Rows', 'elementor' ) } />
+		</Grid>
+	</Grid>
+);

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../../../contexts/element-context';
@@ -17,6 +18,9 @@ import { type FlexDirection, FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
 import { GapControlField } from './gap-control-field';
+import { GridAutoFlowField } from './grid-auto-flow-field';
+import { GridJustifyItemsField } from './grid-justify-items-field';
+import { GridSizeFields } from './grid-size-field';
 import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
@@ -29,6 +33,7 @@ export const LayoutSection = () => {
 	} );
 	const displayPlaceholder = useDisplayPlaceholderValue();
 	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
+	const isDisplayGrid = 'grid' === ( display?.value ?? ( displayPlaceholder as StringPropValue )?.value );
 	const { element } = useElement();
 	const parent = useParentElement( element.id );
 	const parentStyle = useComputedStyle( parent?.id || null );
@@ -38,6 +43,7 @@ export const LayoutSection = () => {
 		<SectionContent>
 			<DisplayField />
 			{ isDisplayFlex && <FlexFields /> }
+			{ isExperimentActive( 'e_css_grid' ) && isDisplayGrid && <GridFields /> }
 			{ 'flex' === parentStyle?.display && <FlexChildFields parentStyleDirection={ parentStyleDirection } /> }
 		</SectionContent>
 	);
@@ -61,6 +67,18 @@ const FlexFields = () => {
 	);
 };
 
+const GridFields = () => (
+	<>
+		<GridSizeFields />
+		<GridAutoFlowField />
+		<PanelDivider />
+		<GapControlField />
+		<PanelDivider />
+		<GridJustifyItemsField />
+		<AlignItemsField />
+	</>
+);
+
 const FlexChildFields = ( { parentStyleDirection }: { parentStyleDirection: string } ) => (
 	<>
 		<PanelDivider />