From 0686f6d06949c97c3b3a76eaccaf85b90386a512 Mon Sep 17 00:00:00 2001 From: Soare Robert Daniel Date: Thu, 19 Jan 2023 13:16:46 +0200 Subject: [PATCH 1/3] feat: copy-paste animations --- src/blocks/plugins/copy-paste/adaptors.ts | 16 +++++-- src/blocks/plugins/copy-paste/copy-paste.ts | 5 +- src/blocks/plugins/copy-paste/models.d.ts | 1 + src/blocks/plugins/copy-paste/plugins.ts | 51 +++++++++++++++++++++ src/blocks/plugins/copy-paste/utils.ts | 13 ++++++ 5 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 src/blocks/plugins/copy-paste/plugins.ts diff --git a/src/blocks/plugins/copy-paste/adaptors.ts b/src/blocks/plugins/copy-paste/adaptors.ts index c26f94f59..5dbbf252b 100644 --- a/src/blocks/plugins/copy-paste/adaptors.ts +++ b/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 }; } }, diff --git a/src/blocks/plugins/copy-paste/copy-paste.ts b/src/blocks/plugins/copy-paste/copy-paste.ts index f19ecb5dc..f0d0863e2 100644 --- a/src/blocks/plugins/copy-paste/copy-paste.ts +++ b/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 Storage @@ -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,7 +72,7 @@ class CopyPaste { }; pasted = ( adaptors as Adaptors )?.[block.name]?.paste( attrs ); - + pasted.className = pasteAnimations( block.attributes?.className, this.storage.animations ); } catch ( e ) { console.error( e ); } finally { diff --git a/src/blocks/plugins/copy-paste/models.d.ts b/src/blocks/plugins/copy-paste/models.d.ts index d41836679..0c4c1ba09 100644 --- a/src/blocks/plugins/copy-paste/models.d.ts +++ b/src/blocks/plugins/copy-paste/models.d.ts @@ -70,4 +70,5 @@ type CopyPasteStorage = { shared?: SharedAttrs core?: SharedCore private?: any + animations?: string[] } diff --git a/src/blocks/plugins/copy-paste/plugins.ts b/src/blocks/plugins/copy-paste/plugins.ts new file mode 100644 index 000000000..b6d8519cc --- /dev/null +++ b/src/blocks/plugins/copy-paste/plugins.ts @@ -0,0 +1,51 @@ +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 + ]; + + return allClasses.filter( c => { + return 0 < c.length && animations.some( a => c === a ); + }); +}; + +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 +}; diff --git a/src/blocks/plugins/copy-paste/utils.ts b/src/blocks/plugins/copy-paste/utils.ts index 35d878d2f..fda6807b4 100644 --- a/src/blocks/plugins/copy-paste/utils.ts +++ b/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; +}; From 0e0d245087c404207bcc16d0d3286832c7439dd8 Mon Sep 17 00:00:00 2001 From: Soare Robert Daniel Date: Fri, 20 Jan 2023 12:11:10 +0200 Subject: [PATCH 2/3] chore: improve paste between different type blocks --- src/blocks/plugins/copy-paste/copy-paste.ts | 9 +++++++++ src/blocks/plugins/copy-paste/plugins.ts | 4 +++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/blocks/plugins/copy-paste/copy-paste.ts b/src/blocks/plugins/copy-paste/copy-paste.ts index f0d0863e2..d450d1988 100644 --- a/src/blocks/plugins/copy-paste/copy-paste.ts +++ b/src/blocks/plugins/copy-paste/copy-paste.ts @@ -73,6 +73,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 ); } finally { diff --git a/src/blocks/plugins/copy-paste/plugins.ts b/src/blocks/plugins/copy-paste/plugins.ts index b6d8519cc..19d24e6d1 100644 --- a/src/blocks/plugins/copy-paste/plugins.ts +++ b/src/blocks/plugins/copy-paste/plugins.ts @@ -16,9 +16,11 @@ export const copyAnimations = ( className: string | undefined ) => { ...speedList ]; - return allClasses.filter( c => { + 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 ) => { From 81dfc97f442a29b988b73782394bda27bd53861d Mon Sep 17 00:00:00 2001 From: Soare Robert Daniel Date: Wed, 25 Jan 2023 14:46:48 +0200 Subject: [PATCH 3/3] chore: remove border as common style --- src/blocks/plugins/copy-paste/core-adaptors.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/blocks/plugins/copy-paste/core-adaptors.ts b/src/blocks/plugins/copy-paste/core-adaptors.ts index 9dac0435f..ad9c548d5 100644 --- a/src/blocks/plugins/copy-paste/core-adaptors.ts +++ b/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 => { }, 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,