@elementor/editor-canvas 3.33.0-211 → 3.33.0-213

package/dist/index.js

@@ -698,6 +698,15 @@ function createClassesTransformer() {
   });
 }
 
+// src/transformers/settings/date-time-transformer.ts
+var dateTimeTransformer = createTransformer((values) => {
+  return values.map((value) => {
+    const date = (value.date || "").trim();
+    const time = (value.time || "").trim();
+    return !date && !time ? "" : `${date} ${time}`.trim();
+  }).join(" ");
+});
+
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
   return {
@@ -751,7 +760,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -979,11 +988,19 @@ var transformMoveTransformer = createTransformer((value) => {
 
 // src/transformers/styles/transform-origin-transformer.ts
 var EMPTY_VALUE = "0px";
+var DEFAULT_XY = "50%";
+var DEFAULT_Z = EMPTY_VALUE;
 function getVal2(val) {
   return `${val ?? EMPTY_VALUE}`;
 }
 var transformOriginTransformer = createTransformer((value) => {
-  return `${getVal2(value.x)} ${getVal2(value.y)} ${getVal2(value.z)}`;
+  const x = getVal2(value.x);
+  const y = getVal2(value.y);
+  const z = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z === DEFAULT_Z) {
+    return null;
+  }
+  return `${x} ${y} ${z}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts

package/dist/index.mjs

@@ -660,6 +660,15 @@ function createClassesTransformer() {
   });
 }
 
+// src/transformers/settings/date-time-transformer.ts
+var dateTimeTransformer = createTransformer((values) => {
+  return values.map((value) => {
+    const date = (value.date || "").trim();
+    const time = (value.time || "").trim();
+    return !date && !time ? "" : `${date} ${time}`.trim();
+  }).join(" ");
+});
+
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
   return {
@@ -713,7 +722,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -941,11 +950,19 @@ var transformMoveTransformer = createTransformer((value) => {
 
 // src/transformers/styles/transform-origin-transformer.ts
 var EMPTY_VALUE = "0px";
+var DEFAULT_XY = "50%";
+var DEFAULT_Z = EMPTY_VALUE;
 function getVal2(val) {
   return `${val ?? EMPTY_VALUE}`;
 }
 var transformOriginTransformer = createTransformer((value) => {
-  return `${getVal2(value.x)} ${getVal2(value.y)} ${getVal2(value.z)}`;
+  const x = getVal2(value.x);
+  const y = getVal2(value.y);
+  const z = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z === DEFAULT_Z) {
+    return null;
+  }
+  return `${x} ${y} ${z}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-211",
+  "version": "3.33.0-213",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-211",
-    "@elementor/editor-notifications": "3.33.0-211",
-    "@elementor/editor-documents": "3.33.0-211",
-    "@elementor/editor-elements": "3.33.0-211",
-    "@elementor/editor-props": "3.33.0-211",
-    "@elementor/editor-responsive": "3.33.0-211",
-    "@elementor/editor-styles": "3.33.0-211",
-    "@elementor/editor-styles-repository": "3.33.0-211",
-    "@elementor/editor-v1-adapters": "3.33.0-211",
-    "@elementor/twing": "3.33.0-211",
+    "@elementor/editor": "3.33.0-213",
+    "@elementor/editor-notifications": "3.33.0-213",
+    "@elementor/editor-documents": "3.33.0-213",
+    "@elementor/editor-elements": "3.33.0-213",
+    "@elementor/editor-props": "3.33.0-213",
+    "@elementor/editor-responsive": "3.33.0-213",
+    "@elementor/editor-styles": "3.33.0-213",
+    "@elementor/editor-styles-repository": "3.33.0-213",
+    "@elementor/editor-v1-adapters": "3.33.0-213",
+    "@elementor/twing": "3.33.0-213",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-211",
-    "@elementor/wp-media": "3.33.0-211",
+    "@elementor/utils": "3.33.0-213",
+    "@elementor/wp-media": "3.33.0-213",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/init-settings-transformers.ts

@@ -1,6 +1,7 @@
 import { settingsTransformersRegistry } from './settings-transformers-registry';
 import { attributesTransformer } from './transformers/settings/attributes-transformer';
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
+import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
@@ -15,5 +16,6 @@ export function initSettingsTransformers() {
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'attributes', attributesTransformer )
+		.register( 'date-time', dateTimeTransformer )
 		.registerFallback( plainTransformer );
 }

package/src/transformers/settings/date-time-transformer.ts

@@ -0,0 +1,12 @@
+import { createTransformer } from '../create-transformer';
+
+export const dateTimeTransformer = createTransformer( ( values: { date?: string; time?: string }[] ) => {
+	return values
+		.map( ( value ) => {
+			const date = ( value.date || '' ).trim();
+			const time = ( value.time || '' ).trim();
+
+			return ! date && ! time ? '' : `${ date } ${ time }`.trim();
+		} )
+		.join( ' ' );
+} );

package/src/transformers/styles/__tests__/transform-origin-transformer.test.ts

@@ -0,0 +1,24 @@
+import { type TransformOrigin, transformOriginTransformer } from '../transform-origin-transformer';
+
+function run( val: TransformOrigin ) {
+	return transformOriginTransformer(
+		{
+			x: val.x as string,
+			y: val.y as string,
+			z: val.z as string,
+		},
+		{ key: 'transform-origin', signal: undefined }
+	);
+}
+
+describe( 'transform-origin-transformer', () => {
+	it( 'returns null for defaults (50% 50% 0px)', () => {
+		expect( run( { x: '50%', y: '50%', z: '0px' } ) ).toBeNull();
+	} );
+
+	it( 'returns value when non-default provided', () => {
+		expect( run( { x: '51%', y: '50%', z: '0px' } ) ).toBe( '51% 50% 0px' );
+		expect( run( { x: '50%', y: '49%', z: '0px' } ) ).toBe( '50% 49% 0px' );
+		expect( run( { x: '50%', y: '50%', z: '1px' } ) ).toBe( '50% 50% 1px' );
+	} );
+} );

package/src/transformers/styles/transform-origin-transformer.ts

@@ -1,17 +1,27 @@
 import { createTransformer } from '../create-transformer';
 
-type TransformOrigin = {
+export type TransformOrigin = {
 	x: string;
 	y: string;
 	z: string;
 };
 
 const EMPTY_VALUE = '0px';
+const DEFAULT_XY = '50%';
+const DEFAULT_Z = EMPTY_VALUE;
 
 function getVal( val: string ) {
 	return `${ val ?? EMPTY_VALUE }`;
 }
 
 export const transformOriginTransformer = createTransformer( ( value: TransformOrigin ) => {
-	return `${ getVal( value.x ) } ${ getVal( value.y ) } ${ getVal( value.z ) }`;
+	const x = getVal( value.x );
+	const y = getVal( value.y );
+	const z = getVal( value.z );
+
+	if ( x === DEFAULT_XY && y === DEFAULT_XY && z === DEFAULT_Z ) {
+		return null;
+	}
+
+	return `${ x } ${ y } ${ z }`;
 } );