@elementor/editor-controls 3.35.0-450 → 3.35.0-452

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.35.0-450",
+  "version": "3.35.0-452",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-450",
-    "@elementor/editor-elements": "3.35.0-450",
-    "@elementor/editor-props": "3.35.0-450",
-    "@elementor/editor-responsive": "3.35.0-450",
-    "@elementor/editor-ui": "3.35.0-450",
-    "@elementor/editor-v1-adapters": "3.35.0-450",
-    "@elementor/env": "3.35.0-450",
-    "@elementor/http-client": "3.35.0-450",
+    "@elementor/editor-current-user": "3.35.0-452",
+    "@elementor/editor-elements": "3.35.0-452",
+    "@elementor/editor-props": "3.35.0-452",
+    "@elementor/editor-responsive": "3.35.0-452",
+    "@elementor/editor-ui": "3.35.0-452",
+    "@elementor/editor-v1-adapters": "3.35.0-452",
+    "@elementor/env": "3.35.0-452",
+    "@elementor/http-client": "3.35.0-452",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "3.35.0-450",
-    "@elementor/mixpanel": "3.35.0-450",
-    "@elementor/query": "3.35.0-450",
-    "@elementor/session": "3.35.0-450",
+    "@elementor/locations": "3.35.0-452",
+    "@elementor/mixpanel": "3.35.0-452",
+    "@elementor/query": "3.35.0-452",
+    "@elementor/session": "3.35.0-452",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-450",
-    "@elementor/wp-media": "3.35.0-450",
+    "@elementor/utils": "3.35.0-452",
+    "@elementor/wp-media": "3.35.0-452",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/inline-editor.tsx

@@ -47,7 +47,7 @@ type InlineEditorProps = {
 	elementId?: ElementID;
 };
 
-const INITIAL_STYLE = 'margin:0;padding:0;';
+const INLINE_EDITOR_RESET_CLASS = 'elementor-inline-editor-reset';
 
 const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
 	const hasMounted = useRef( false );
@@ -181,6 +181,8 @@ export const InlineEditor = forwardRef(
 			setValue( isEmpty( newValue ) ? null : newValue );
 		};
 
+		const classes = `${ INLINE_EDITOR_RESET_CLASS } ${ elementClasses }`;
+
 		const editor = useEditor( {
 			extensions: [
 				Document.extend( {
@@ -189,24 +191,20 @@ export const InlineEditor = forwardRef(
 				Paragraph.extend( {
 					renderHTML( { HTMLAttributes } ) {
 						const tag = expectedTag ?? 'p';
-						return [ tag, { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses }, 0 ];
+						return [ tag, { ...HTMLAttributes, class: classes }, 0 ];
 					},
 				} ),
 				Heading.extend( {
 					renderHTML( { node, HTMLAttributes } ) {
 						if ( expectedTag ) {
-							return [
-								expectedTag,
-								{ ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses },
-								0,
-							];
+							return [ expectedTag, { ...HTMLAttributes, class: classes }, 0 ];
 						}
 
 						const level = this.options.levels.includes( node.attrs.level )
 							? node.attrs.level
 							: this.options.levels[ 0 ];
 
-						return [ `h${ level }`, { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses }, 0 ];
+						return [ `h${ level }`, { ...HTMLAttributes, class: classes }, 0 ];
 					},
 				} ).configure( {
 					levels: [ 1, 2, 3, 4, 5, 6 ],

package/src/controls/equal-unequal-sizes-control.tsx

@@ -17,6 +17,7 @@ type MultiSizePropValue = Record< PropKey, PropValue >;
 type Item = {
 	icon: ReactNode;
 	label: string;
+	ariaLabel?: string;
 	bind: PropKey;
 };
 
@@ -171,15 +172,17 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 }
 
 const MultiSizeValueControl = ( { item, rowRef }: { item: Item; rowRef: RefObject< HTMLDivElement > } ) => {
+	const { bind, label, icon, ariaLabel } = item;
+
 	return (
-		<PropKeyProvider bind={ item.bind }>
+		<PropKeyProvider bind={ bind }>
 			<Grid item xs={ 6 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<ControlLabel>{ item.label }</ControlLabel>
+						<ControlLabel>{ label }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<SizeControl startIcon={ item.icon } anchorRef={ rowRef } />
+						<SizeControl startIcon={ icon } ariaLabel={ ariaLabel } anchorRef={ rowRef } />
 					</Grid>
 				</Grid>
 			</Grid>

package/src/controls/gap-control.tsx

@@ -117,7 +117,12 @@ export const GapControl = ( { label }: { label: string } ) => {
 						<ControlFormLabel>{ __( 'Column', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'column' } isLinked={ isLinked } anchorRef={ stackRef } />
+						<Control
+							bind={ 'column' }
+							ariaLabel={ __( 'Column gap', 'elementor' ) }
+							isLinked={ isLinked }
+							anchorRef={ stackRef }
+						/>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 0.75 } alignItems="center">
@@ -125,7 +130,12 @@ export const GapControl = ( { label }: { label: string } ) => {
 						<ControlFormLabel>{ __( 'Row', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'row' } isLinked={ isLinked } anchorRef={ stackRef } />
+						<Control
+							bind={ 'row' }
+							ariaLabel={ __( 'Row gap', 'elementor' ) }
+							isLinked={ isLinked }
+							anchorRef={ stackRef }
+						/>
 					</Grid>
 				</Grid>
 			</Stack>
@@ -135,20 +145,22 @@ export const GapControl = ( { label }: { label: string } ) => {
 
 const Control = ( {
 	bind,
+	ariaLabel,
 	isLinked,
 	anchorRef,
 }: {
 	bind: PropKey;
+	ariaLabel?: string;
 	isLinked: boolean;
 	anchorRef: RefObject< HTMLDivElement >;
 } ) => {
 	if ( isLinked ) {
-		return <SizeControl anchorRef={ anchorRef } />;
+		return <SizeControl anchorRef={ anchorRef } ariaLabel={ ariaLabel } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl anchorRef={ anchorRef } />
+			<SizeControl anchorRef={ anchorRef } ariaLabel={ ariaLabel } />
 		</PropKeyProvider>
 	);
 };

package/src/controls/inline-editing-control.tsx

@@ -46,6 +46,10 @@ export const InlineEditingControl = createControl(
 							'& a': {
 								color: 'inherit',
 							},
+							'& .elementor-inline-editor-reset': {
+								margin: 0,
+								padding: 0,
+							},
 						},
 						'.strip-styles *': {
 							all: 'unset',

package/src/controls/linked-dimensions-control.tsx

@@ -4,7 +4,7 @@ import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@element
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, Tooltip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlFormLabel } from '../components/control-form-label';
@@ -134,7 +134,7 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 				</Tooltip>
 			</Stack>
 
-			{ getCssDimensionProps( isSiteRtl ).map( ( row, index ) => (
+			{ getCssDimensionProps( label, isSiteRtl ).map( ( row, index ) => (
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap" key={ index } ref={ gridRowRefs[ index ] }>
 					{ row.map( ( { icon, ...props } ) => (
 						<Grid container gap={ 0.75 } alignItems="center" key={ props.bind }>
@@ -144,6 +144,7 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 							<Grid item xs={ 12 }>
 								<Control
 									bind={ props.bind }
+									ariaLabel={ props.ariaLabel }
 									startIcon={ icon }
 									isLinked={ isLinked }
 									extendedOptions={ extendedOptions }
@@ -161,6 +162,7 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 
 const Control = ( {
 	bind,
+	ariaLabel,
 	startIcon,
 	isLinked,
 	extendedOptions,
@@ -168,6 +170,7 @@ const Control = ( {
 	min,
 }: {
 	bind: PropKey;
+	ariaLabel: string;
 	startIcon: React.ReactNode;
 	isLinked: boolean;
 	extendedOptions?: ExtendedOption[];
@@ -177,6 +180,7 @@ const Control = ( {
 	if ( isLinked ) {
 		return (
 			<SizeControl
+				ariaLabel={ ariaLabel }
 				startIcon={ startIcon }
 				extendedOptions={ extendedOptions }
 				anchorRef={ anchorRef }
@@ -188,6 +192,7 @@ const Control = ( {
 	return (
 		<PropKeyProvider bind={ bind }>
 			<SizeControl
+				ariaLabel={ ariaLabel }
 				startIcon={ startIcon }
 				extendedOptions={ extendedOptions }
 				anchorRef={ anchorRef }
@@ -205,17 +210,24 @@ const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
 	);
 };
 
-function getCssDimensionProps( isSiteRtl: boolean ) {
+function getCssDimensionProps( label: string, isSiteRtl: boolean ) {
 	return [
 		[
 			{
 				bind: 'block-start',
 				label: __( 'Top', 'elementor' ),
+				/* translators: %s is the name of the main group (margin or padding) */
+				ariaLabel: sprintf( __( '%s top', 'elementor' ), label ),
 				icon: <SideTopIcon fontSize={ 'tiny' } />,
 			},
 			{
 				bind: 'inline-end',
 				label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
+				ariaLabel: isSiteRtl
+					? /* translators: %s is the name of the main group (margin or padding) */
+					  sprintf( __( '%s left', 'elementor' ), label )
+					: /* translators: %s is the name of the main group (margin or padding) */
+					  sprintf( __( '%s right', 'elementor' ), label ),
 				icon: isSiteRtl ? <SideLeftIcon fontSize={ 'tiny' } /> : <SideRightIcon fontSize={ 'tiny' } />,
 			},
 		],
@@ -223,11 +235,18 @@ function getCssDimensionProps( isSiteRtl: boolean ) {
 			{
 				bind: 'block-end',
 				label: __( 'Bottom', 'elementor' ),
+				/* translators: %s is the name of the main group (margin or padding) */
+				ariaLabel: sprintf( __( '%s bottom', 'elementor' ), label ),
 				icon: <SideBottomIcon fontSize={ 'tiny' } />,
 			},
 			{
 				bind: 'inline-start',
 				label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
+				ariaLabel: isSiteRtl
+					? /* translators: %s is the name of the main group (margin or padding) */
+					  sprintf( __( '%s right', 'elementor' ), label )
+					: /* translators: %s is the name of the main group (margin or padding) */
+					  sprintf( __( '%s left', 'elementor' ), label ),
 				icon: isSiteRtl ? <SideRightIcon fontSize={ 'tiny' } /> : <SideLeftIcon fontSize={ 'tiny' } />,
 			},
 		],