Merge pull request #1452 from Codeinwp/feat/copy-paste-update

Copy&Paste Animation + Adaptors update

src/blocks/plugins/copy-paste/adaptors.ts

@@ -5,7 +5,7 @@ import { coreAdaptors } from './core-adaptors';
 import { ColumnAttrs } from '../../blocks/section/column/types';
 import { ButtonGroupAttrs } from '../../blocks/button-group/group/types';
 import { ButtonAttrs } from '../../blocks/button-group/button/types';
-import { addUnit, getInt, makeBox, getSingleValueFromBox } from './utils';
+import { addUnit, getInt, makeBox, getSingleValueFromBox, createBoxFrom } from './utils';
 import { IconAttrs } from '../../blocks/font-awesome-icons/types';
 import { IconListAttrs } from '../../blocks/icon-list/types';
 import { IconListItemAttrs } from '../../blocks/icon-list/item/types';
@@ -480,10 +480,15 @@ export const adaptors = {
 						size: addUnit( attrs?.labelFontSize, 'px' )
 					},
 					border: {
-						width: makeBox( addUnit( attrs?.inputBorderWidth, 'px' ) ),
+						width: createBoxFrom( attrs?.inputBorderWidth ),
 						radius: {
-							desktop: makeBox( addUnit( attrs?.inputBorderRadius, 'px' ) )
+							desktop: createBoxFrom( attrs?.inputBorderRadius )
 						}
+					},
+					padding: {
+						desktop: attrs?.inputPadding,
+						tablet: attrs?.inputPaddingTablet,
+						mobile: attrs?.inputPaddingMobile
 					}
 				},
 				private: {
@@ -501,7 +506,10 @@ export const adaptors = {
 				labelFontSize: getInt( s?.font?.size ),
 				inputBorderColor: s?.colors?.border,
 				inputBorderRadius: getInt( s?.border?.radius?.desktop?.top ),
-				inputBorderWidth: getInt( getSingleValueFromBox( s?.border?.width ) )
+				inputBorderWidth: getInt( getSingleValueFromBox( s?.border?.width ) ),
+				inputPadding: s?.padding?.desktop,
+				inputPaddingTablet: s?.padding?.tablet,
+				inputPaddingMobile: s?.padding?.mobile
 			};
 		}
 	},

src/blocks/plugins/copy-paste/copy-paste.ts

@@ -3,6 +3,8 @@ import { OtterBlock } from '../../helpers/blocks';
 import { compactObject } from '../../helpers/helper-functions';
 import { adaptors } from './adaptors';
 import { CopyPasteStorage, Storage } from './models';
+import { copyAnimations, pasteAnimations } from './plugins';
+
 
 type Adaptors = Record<string, {
 	copy: ( x: any ) => Storage<any>
@@ -43,6 +45,7 @@ class CopyPaste {
 			this.storage.shared = copied?.shared;
 			this.storage.core = copied?.core;
 			this.storage.private = copied?.private;
+			this.storage.animations = copyAnimations( block?.attributes?.className );
 			this.sync();
 
 			success = 'SUCCESS';
@@ -69,6 +72,15 @@ class CopyPaste {
 			};
 
 			pasted = ( adaptors as Adaptors )?.[block.name]?.paste( attrs );
+			pasted.className = pasteAnimations( block.attributes?.className, this.storage.animations );
+
+			if ( block.name !== this.storage.copiedBlock ) {
+
+				/**
+				 * If the blocks are not the same type, copy only the defined values. This will prevent some unwanted override.
+				 */
+				pasted = compactObject( pasted );
+			}
 
 		} catch ( e ) {
 			console.error( e );

src/blocks/plugins/copy-paste/core-adaptors.ts

@@ -1,4 +1,4 @@
-import { isObjectLike, merge, pick } from 'lodash';
+import { merge, pick } from 'lodash';
 import { BoxType } from '../../helpers/blocks';
 import { getChoice } from '../../helpers/helper-functions';
 import { Storage } from './models';
@@ -52,13 +52,14 @@ const commonExtractor = ( attrs: any ): Storage<unknown> => {
 			},
 			margin: {
 				desktop: attrs?.style?.spacing?.margin
-			},
-			border: {
-				width: makeBox( attrs?.style?.border?.width ),
-				radius: {
-					desktop: ! isObjectLike( attrs?.style?.border?.radius ) ? makeBox( attrs?.style?.border?.radius ) : radiusExtract( attrs?.style?.border?.radius )
-				}
 			}
+
+			// border: {
+			// 	width: makeBox( attrs?.style?.border?.width ),
+			// 	radius: {
+			// 		desktop: ! isObjectLike( attrs?.style?.border?.radius ) ? makeBox( attrs?.style?.border?.radius ) : radiusExtract( attrs?.style?.border?.radius )
+			// 	}
+			// }
 		},
 		core: {
 			textColor: attrs?.textColor,

src/blocks/plugins/copy-paste/models.d.ts

@@ -70,4 +70,5 @@ type CopyPasteStorage = {
     shared?: SharedAttrs
     core?: SharedCore
     private?: any
+    animations?: string[]
 }

src/blocks/plugins/copy-paste/plugins.ts

@@ -0,0 +1,53 @@
+import { uniq } from 'lodash';
+import { animationsList, outAnimation, delayList, speedList } from '../../../animation/data';
+
+export const copyAnimations = ( className: string | undefined ) => {
+	if ( className === undefined || ! className?.includes( 'animated' ) ) {
+		return undefined;
+	}
+
+	const allClasses = uniq( className.split( ' ' ) );
+
+	const animations = [
+		'animated',
+		...animationsList.map( x => x.value ),
+		...outAnimation,
+		...delayList.map( x => x.value ),
+		...speedList
+	];
+
+	const otterAnim = allClasses.filter( c => {
+		return 0 < c.length && animations.some( a => c === a );
+	});
+
+	return 0 === otterAnim.length ? undefined : otterAnim;
+};
+
+export const pasteAnimations = ( className: string | undefined, animList: string[] | undefined ) => {
+
+	if ( animList === undefined ) {
+		return className;
+	}
+
+	const currentClasses = uniq( ( className ?? '' ).split( ' ' ) );
+
+	const animations = [
+		'animated',
+		...animationsList.map( x => x.value ),
+		...outAnimation,
+		...delayList.map( x => x.value ),
+		...speedList
+	];
+
+	const cleaned = currentClasses
+		.filter( c => {
+			return ! animations.some( a => c === a ) && 0 < c.length;
+		});
+
+	return uniq([ ...( cleaned ?? []), ...( animList ?? []) ]).join( ' ' ).trim();
+};
+
+export default {
+	copyAnimations,
+	pasteAnimations
+};

src/blocks/plugins/copy-paste/utils.ts

@@ -1,4 +1,5 @@
 import { color } from '@wordpress/icons/build-types';
+import { isNumber, isString } from 'lodash';
 import { BoxType } from '../../helpers/blocks';
 
 /**
@@ -184,3 +185,15 @@ export const getColorFromThemeStyles = ( type: 'color' | 'gradient' | 'duotone'
 	const isCSSVar = Boolean( color?.includes( '--wp--preset--' ) );
 	return isCSSVar ? `var(${color})` : color;
 };
+
+export const createBoxFrom = ( x: string | number | undefined | BoxType ) => {
+	if ( isNumber( x ) ) {
+		return makeBox( addUnit( x, 'px' ) );
+	}
+
+	if ( isString( x ) ) {
+		return makeBox( x );
+	}
+
+	return x;
+};