@elementor/editor-editing-panel 4.1.0-817 → 4.1.0-819

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.1.0-817",
+  "version": "4.1.0-819",
   "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-817",
-    "@elementor/editor-canvas": "4.1.0-817",
-    "@elementor/editor-controls": "4.1.0-817",
-    "@elementor/editor-documents": "4.1.0-817",
-    "@elementor/editor-elements": "4.1.0-817",
-    "@elementor/editor-interactions": "4.1.0-817",
-    "@elementor/editor-panels": "4.1.0-817",
-    "@elementor/editor-props": "4.1.0-817",
-    "@elementor/editor-responsive": "4.1.0-817",
-    "@elementor/editor-styles": "4.1.0-817",
-    "@elementor/editor-styles-repository": "4.1.0-817",
-    "@elementor/editor-ui": "4.1.0-817",
-    "@elementor/editor-v1-adapters": "4.1.0-817",
+    "@elementor/editor": "4.1.0-819",
+    "@elementor/editor-canvas": "4.1.0-819",
+    "@elementor/editor-controls": "4.1.0-819",
+    "@elementor/editor-documents": "4.1.0-819",
+    "@elementor/editor-elements": "4.1.0-819",
+    "@elementor/editor-interactions": "4.1.0-819",
+    "@elementor/editor-panels": "4.1.0-819",
+    "@elementor/editor-props": "4.1.0-819",
+    "@elementor/editor-responsive": "4.1.0-819",
+    "@elementor/editor-styles": "4.1.0-819",
+    "@elementor/editor-styles-repository": "4.1.0-819",
+    "@elementor/editor-ui": "4.1.0-819",
+    "@elementor/editor-v1-adapters": "4.1.0-819",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.1.0-817",
-    "@elementor/locations": "4.1.0-817",
-    "@elementor/menus": "4.1.0-817",
-    "@elementor/schema": "4.1.0-817",
-    "@elementor/session": "4.1.0-817",
+    "@elementor/editor-variables": "4.1.0-819",
+    "@elementor/locations": "4.1.0-819",
+    "@elementor/menus": "4.1.0-819",
+    "@elementor/schema": "4.1.0-819",
+    "@elementor/session": "4.1.0-819",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-817",
-    "@elementor/wp-media": "4.1.0-817",
+    "@elementor/utils": "4.1.0-819",
+    "@elementor/wp-media": "4.1.0-819",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/style-sections/layout-section/align-self-grid-child-field.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	JustifyBottomIcon,
+	JustifyCenterIcon,
+	JustifyTopIcon,
+	LayoutDistributeVerticalIcon as JustifyIcon,
+} from '@elementor/icons';
+import { type ToggleButtonProps } 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 AlignSelf = 'start' | 'center' | 'end' | 'stretch';
+
+const ALIGN_SELF_LABEL = __( 'Align self', 'elementor' );
+
+const ALIGN_SELF_CHILD_OFFSET_MAP: Record< string, number > = {
+	row: 0,
+	column: -90,
+};
+
+export const AlignSelfGridChild = ( { parentStyleDirection }: { parentStyleDirection: string } ) => (
+	<StylesField bind="align-self" propDisplayName={ ALIGN_SELF_LABEL }>
+		<UiProviders>
+			<StylesFieldLayout label={ ALIGN_SELF_LABEL }>
+				<ToggleControl options={ getOptions( parentStyleDirection ?? 'row' ) } />
+			</StylesFieldLayout>
+		</UiProviders>
+	</StylesField>
+);
+
+const RotatedIcon = ( {
+	icon: Icon,
+	size,
+	offset,
+}: {
+	icon: React.JSX.ElementType;
+	size: ToggleButtonProps[ 'size' ];
+	offset?: number;
+} ) => <Icon fontSize={ size } sx={ { rotate: `${ offset }deg` } } />;
+
+const getOptions = ( parentStyleDirection: string ): ToggleButtonGroupItem< AlignSelf >[] => {
+	const offset = ALIGN_SELF_CHILD_OFFSET_MAP[ parentStyleDirection.replace( 'dense', '' ).trim() ];
+
+	return [
+		{
+			value: 'start',
+			label: __( 'Start', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyTopIcon } size={ size } offset={ offset } />,
+			showTooltip: true,
+		},
+		{
+			value: 'center',
+			label: __( 'Center', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyCenterIcon } size={ size } offset={ offset } />,
+			showTooltip: true,
+		},
+		{
+			value: 'end',
+			label: __( 'End', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyBottomIcon } size={ size } offset={ offset } />,
+			showTooltip: true,
+		},
+		{
+			value: 'stretch',
+			label: __( 'Stretch', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } offset={ offset } />,
+			showTooltip: true,
+		},
+	];
+};

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { NumberInput } from '@elementor/editor-controls';
+import { type SpanPropValue } 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 GridSpanCssProp = 'grid-column' | 'grid-row';
+
+const MIN_SPAN = 1;
+
+type GridSpanFieldProps = {
+	cssProp: GridSpanCssProp;
+	label: string;
+};
+
+const GridSpanFieldContent = ( { cssProp, label }: GridSpanFieldProps ) => {
+	const { value, setValue, canEdit } = useStylesField< SpanPropValue | null >( cssProp, {
+		history: { propDisplayName: label },
+	} );
+
+	const spanValue = value?.value ?? null;
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const raw = event.target.value;
+
+		if ( raw === '' ) {
+			setValue( null );
+			return;
+		}
+
+		const num = parseInt( raw, 10 );
+
+		if ( Number.isNaN( num ) ) {
+			return;
+		}
+
+		const clamped = Math.max( num, MIN_SPAN );
+		setValue( { $$type: 'span', value: clamped } );
+	};
+
+	return (
+		<StylesFieldLayout label={ label } direction="column">
+			<NumberInput
+				size="tiny"
+				type="number"
+				fullWidth
+				disabled={ ! canEdit }
+				value={ spanValue ?? '' }
+				onInput={ handleChange }
+				inputProps={ { min: MIN_SPAN } }
+			/>
+		</StylesFieldLayout>
+	);
+};
+
+const GridSpanField = ( { cssProp, label }: GridSpanFieldProps ) => (
+	<StylesField bind={ cssProp } propDisplayName={ label }>
+		<UiProviders>
+			<GridSpanFieldContent cssProp={ cssProp } label={ label } />
+		</UiProviders>
+	</StylesField>
+);
+
+export const GridSpanFields = () => (
+	<Grid container gap={ 2 } flexWrap="nowrap">
+		<Grid item xs={ 6 }>
+			<GridSpanField cssProp="grid-column" label={ __( 'Column Span', 'elementor' ) } />
+		</Grid>
+		<Grid item xs={ 6 }>
+			<GridSpanField cssProp="grid-row" label={ __( 'Row Span', 'elementor' ) } />
+		</Grid>
+	</Grid>
+);

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

@@ -13,6 +13,7 @@ import { SectionContent } from '../../section-content';
 import { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
+import { AlignSelfGridChild } from './align-self-grid-child-field';
 import { DisplayField, useDisplayPlaceholderValue } from './display-field';
 import { type FlexDirection, FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
@@ -21,30 +22,49 @@ 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 { GridSpanFields } from './grid-span-field';
 import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
 const DISPLAY_LABEL = __( 'Display', 'elementor' );
 const FLEX_WRAP_LABEL = __( 'Flex wrap', 'elementor' );
+const DEFAULT_PARENT_FLOW_DIRECTION = 'row';
 
 export const LayoutSection = () => {
 	const { value: display } = useStylesField< StringPropValue >( 'display', {
 		history: { propDisplayName: DISPLAY_LABEL },
 	} );
 	const displayPlaceholder = useDisplayPlaceholderValue();
+	const isGridExperimentActive = isExperimentActive( 'e_css_grid' );
 	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 );
-	const parentStyleDirection = parentStyle?.flexDirection ?? 'row';
+
+	const getParentStyleDirection = () => {
+		if ( 'flex' === parentStyle?.display ) {
+			return parentStyle?.flexDirection ?? DEFAULT_PARENT_FLOW_DIRECTION;
+		}
+
+		if ( 'grid' === parentStyle?.display ) {
+			return parentStyle?.gridAutoFlow ?? DEFAULT_PARENT_FLOW_DIRECTION;
+		}
+
+		return DEFAULT_PARENT_FLOW_DIRECTION;
+	};
 
 	return (
 		<SectionContent>
 			<DisplayField />
 			{ isDisplayFlex && <FlexFields /> }
-			{ isExperimentActive( 'e_css_grid' ) && isDisplayGrid && <GridFields /> }
-			{ 'flex' === parentStyle?.display && <FlexChildFields parentStyleDirection={ parentStyleDirection } /> }
+			{ 'flex' === parentStyle?.display && (
+				<FlexChildFields parentStyleDirection={ getParentStyleDirection() } />
+			) }
+			{ isGridExperimentActive && isDisplayGrid && <GridFields /> }
+			{ isGridExperimentActive && 'grid' === parentStyle?.display && (
+				<GridChildFields parentStyleDirection={ getParentStyleDirection() } />
+			) }
 		</SectionContent>
 	);
 };
@@ -89,6 +109,16 @@ const FlexChildFields = ( { parentStyleDirection }: { parentStyleDirection: stri
 	</>
 );
 
+const GridChildFields = ( { parentStyleDirection }: { parentStyleDirection: string } ) => (
+	<>
+		<PanelDivider />
+		<ControlFormLabel>{ __( 'Grid Child', 'elementor' ) }</ControlFormLabel>
+		<GridSpanFields />
+		<AlignSelfGridChild parentStyleDirection={ parentStyleDirection } />
+		<FlexOrderField />
+	</>
+);
+
 const shouldDisplayFlexFields = ( display: StringPropValue | null, local: StringPropValue ) => {
 	const value = display?.value ?? local?.value;
 

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

@@ -113,10 +113,10 @@ export const PositionSection = () => {
 			{ isNotStatic ? (
 				<>
 					<DimensionsField />
-					<ZIndexField />
 				</>
 			) : null }
 
+			<ZIndexField disabled={ ! isNotStatic } />
 			<PanelDivider />
 			<OffsetField />
 		</SectionContent>

package/src/components/style-sections/position-section/z-index-field.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { NumberControl } from '@elementor/editor-controls';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Alert, AlertTitle, Box, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
@@ -7,12 +9,36 @@ import { StylesFieldLayout } from '../../styles-field-layout';
 
 const Z_INDEX_LABEL = __( 'Z-index', 'elementor' );
 
-export const ZIndexField = () => {
-	return (
+export const ZIndexField = ( { disabled }: { disabled?: boolean } ) => {
+	const StyleField = (
 		<StylesField bind="z-index" propDisplayName={ Z_INDEX_LABEL }>
 			<StylesFieldLayout label={ Z_INDEX_LABEL }>
-				<NumberControl />
+				<NumberControl disabled={ disabled } />
 			</StylesFieldLayout>
 		</StylesField>
 	);
+
+	const content = (
+		<Alert color="secondary" icon={ <InfoCircleFilledIcon /> } size="small">
+			<AlertTitle>{ __( 'Z-index', 'elementor' ) }</AlertTitle>
+			<Box component="span">
+				{ __(
+					'z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.',
+					'elementor'
+				) }
+			</Box>
+		</Alert>
+	);
+	return disabled ? (
+		<Infotip
+			placement="right"
+			content={ content }
+			color="secondary"
+			slotProps={ { popper: { sx: { width: 300 } } } }
+		>
+			<Box>{ StyleField }</Box>
+		</Infotip>
+	) : (
+		<>{ StyleField }</>
+	);
 };

package/src/components/style-tab.tsx

@@ -81,6 +81,9 @@ export const StyleTab = () => {
 									'align-content',
 									'align-self',
 									'gap',
+									'order',
+									'grid-column',
+									'grid-row',
 								] }
 							/>
 							<StyleTabSection