@elementor/editor-editing-panel 4.2.0-beta1 → 4.2.0-beta2

package/package.json

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

package/src/components/css-classes/css-class-menu.tsx

@@ -134,6 +134,9 @@ const CLASS_STATES_MAP: Record< string, { label: string } > = {
 	selected: {
 		label: __( 'selected', 'elementor' ),
 	},
+	disabled: {
+		label: __( 'disabled', 'elementor' ),
+	},
 };
 
 export function useElementStates() {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlToggleButtonGroup, type ToggleButtonGroupItem } from '@elementor/editor-controls';
+import { ControlToggleButtonGroup, type ToggleButtonGroupItem, useBoundProp } 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';
@@ -32,9 +32,9 @@ const directionOptions: ToggleButtonGroupItem< AutoFlowDirection >[] = [
 	},
 ];
 
-const parseAutoFlow = ( value: string | null ): { direction: AutoFlowDirection; dense: boolean } => {
+const parseAutoFlow = ( value: string | null ): { direction: AutoFlowDirection | null; dense: boolean } => {
 	if ( ! value ) {
-		return { direction: 'row', dense: false };
+		return { direction: null, dense: false };
 	}
 	const dense = value.includes( 'dense' );
 	const direction = value.replace( /\s*dense\s*/, '' ).trim() as AutoFlowDirection;
@@ -46,21 +46,25 @@ const composeAutoFlow = ( direction: AutoFlowDirection, dense: boolean ): string
 };
 
 const GridAutoFlowFieldContent = () => {
-	const { value, setValue } = useStylesField< StringPropValue | null >( 'grid-auto-flow', {
+	const { value, setValue, canEdit } = useStylesField< StringPropValue | null >( 'grid-auto-flow', {
 		history: { propDisplayName: AUTO_FLOW_LABEL },
 	} );
+	const { placeholder } = useBoundProp();
 
 	const { direction, dense } = parseAutoFlow( value?.value ?? null );
+	const directionPlaceholder = parseAutoFlow( ( placeholder as StringPropValue | null )?.value ?? null ).direction;
 
 	const handleDirectionChange = ( newDirection: AutoFlowDirection | null ) => {
 		if ( ! newDirection ) {
+			setValue( null );
 			return;
 		}
 		setValue( { $$type: 'string', value: composeAutoFlow( newDirection, dense ) } );
 	};
 
 	const handleDenseToggle = () => {
-		setValue( { $$type: 'string', value: composeAutoFlow( direction, ! dense ) } );
+		const nextDirection = direction ?? 'row';
+		setValue( { $$type: 'string', value: composeAutoFlow( nextDirection, ! dense ) } );
 	};
 
 	return (
@@ -70,9 +74,11 @@ const GridAutoFlowFieldContent = () => {
 					<ControlToggleButtonGroup
 						items={ directionOptions }
 						value={ direction }
+						placeholder={ directionPlaceholder }
 						onChange={ handleDirectionChange }
 						exclusive={ true }
 						fullWidth={ true }
+						disabled={ ! canEdit }
 					/>
 				</Grid>
 				<Grid item>
@@ -83,6 +89,7 @@ const GridAutoFlowFieldContent = () => {
 							onChange={ handleDenseToggle }
 							size="tiny"
 							aria-label={ DENSE_LABEL }
+							disabled={ ! canEdit }
 						>
 							<LayoutDashboardIcon fontSize="tiny" />
 						</ToggleButton>

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

@@ -1,18 +1,33 @@
 import * as React from 'react';
-import { SwitchControl } from '@elementor/editor-controls';
+import { updateElementEditorSettings, useElementEditorSettings } from '@elementor/editor-elements';
+import { Box, Switch } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { SettingsField } from '../../../controls-registry/settings-field';
+import { useElement } from '../../../contexts/element-context';
 import { StylesFieldLayout } from '../../styles-field-layout';
 
 const GRID_OUTLINE_LABEL = __( 'Show Grid Outline', 'elementor' );
 
 export const GridOutlineField = () => {
+	const { element } = useElement();
+	const settings = useElementEditorSettings( element.id );
+	const value = settings?.grid_outline ?? true;
+
 	return (
-		<SettingsField bind="grid_outline" propDisplayName={ GRID_OUTLINE_LABEL }>
-			<StylesFieldLayout label={ GRID_OUTLINE_LABEL }>
-				<SwitchControl />
-			</StylesFieldLayout>
-		</SettingsField>
+		<StylesFieldLayout label={ GRID_OUTLINE_LABEL }>
+			<Box sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+				<Switch
+					aria-label={ GRID_OUTLINE_LABEL }
+					checked={ value }
+					onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) => {
+						updateElementEditorSettings( {
+							elementId: element.id,
+							settings: { grid_outline: event.target.checked },
+						} );
+					} }
+					size="small"
+				/>
+			</Box>
+		</StylesFieldLayout>
 	);
 };