fix (performance): fixes freezing when creating and adding synced pat…

…terns in WP 6.6 (#3245) * memoed styles * fix styles * fix update blocks if position change * fix memo * Place updateMaxHeight inside timeout * update styles * fixes freezing in faded card * Optimize to just remove any existing timeout --------- Co-authored-by: Benjamin Intal <[email protected]> Co-authored-by: [email protected] <>
gambitph · Jul 16, 2024 · 16947b5 · 16947b5
1 parent 8541bb7
commit 16947b5
Show file tree

Hide file tree

Showing 46 changed files with 268 additions and 112 deletions.
diff --git a/src/block-components/advanced/style.js b/src/block-components/advanced/style.js
@@ -2,8 +2,9 @@
  * External dependencies
  */
 import { BlockCss } from '~stackable/components'
+import { memo } from '@wordpress/element'
 
-const Styles = props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -338,10 +339,13 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const Style = props => {
 	return <Styles { ...props } />
 }
 
 Style.Content = props => {
-	return <Styles { ...props } />
+	return <Styles.Content { ...props } />
 }
diff --git a/src/block-components/alignment/style.js b/src/block-components/alignment/style.js
@@ -3,7 +3,9 @@
  */
 import { BlockCss } from '~stackable/components'
 
-const AlignmentStyles = props => {
+import { memo } from '@wordpress/element'
+
+const _AlignmentStyles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -208,7 +210,7 @@ const AlignmentStyles = props => {
 				styleRule="columnGap"
 				attrName="innerBlockColumnGap"
 				key="innerBlockColumnGapEdit"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
 				dependencies={ [
@@ -223,7 +225,7 @@ const AlignmentStyles = props => {
 				styleRule="columnGap"
 				attrName="innerBlockColumnGap"
 				key="innerBlockColumnGapSave"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
 				dependencies={ [
@@ -238,7 +240,7 @@ const AlignmentStyles = props => {
 				styleRule="rowGap"
 				attrName="innerBlockRowGap"
 				key="innerBlockRowGapEdit"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => {
 					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
@@ -257,7 +259,7 @@ const AlignmentStyles = props => {
 				styleRule="rowGap"
 				attrName="innerBlockRowGap"
 				key="innerBlockRowGapSave"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => {
 					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
@@ -305,10 +307,13 @@ const AlignmentStyles = props => {
 	)
 }
 
+const AlignmentStyles = memo( _AlignmentStyles )
+AlignmentStyles.Content = _AlignmentStyles
+
 export const Style = props => {
 	return <AlignmentStyles { ...props } />
 }
 
 Style.Content = props => {
-	return <AlignmentStyles { ...props } />
+	return <AlignmentStyles.Content { ...props } />
 }
diff --git a/src/block-components/block-div/style.js b/src/block-components/block-div/style.js
@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { Fragment } from '@wordpress/element'
+import { Fragment, memo } from '@wordpress/element'
 import { useBlockAttributesContext } from '~stackable/hooks'
 import {
 	BorderStyle, SizeStyle, BackgroundStyle,
 } from '../helpers'
 
-export const Style = props => {
+export const Style = memo( props => {
 	const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
 
 	return (
@@ -17,7 +17,7 @@ export const Style = props => {
 			<SizeStyle { ...props } attrNameTemplate="block%s" />
 		</>
 	)
-}
+} )
 
 Style.Content = props => {
 	return (

diff --git a/src/block-components/button/style.js b/src/block-components/button/style.js
@@ -5,7 +5,9 @@ import { BorderStyle } from '../helpers/borders'
 import { Icon } from '../icon'
 import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+import { memo } from '@wordpress/element'
+
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -190,6 +192,9 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const Style = props => {
 	const {
 		selector = '',
@@ -230,7 +235,7 @@ Style.Content = props => {
 
 	return (
 		<>
-			<Styles
+			<Styles.Content
 				{ ...props }
 				attrNameTemplate={ attrNameTemplate }
 			/>

diff --git a/src/block-components/column/style.js b/src/block-components/column/style.js
@@ -3,8 +3,9 @@
  */
 import { __getValue } from '~stackable/util'
 import { BlockCss } from '~stackable/components'
+import { memo } from '@wordpress/element'
 
-const ColumnStyles = props => {
+const _ColumnStyles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -102,10 +103,13 @@ const ColumnStyles = props => {
 	)
 }
 
+const ColumnStyles = memo( _ColumnStyles )
+ColumnStyles.Content = _ColumnStyles
+
 export const Style = props => {
 	return <ColumnStyles { ...props } />
 }
 
 Style.Content = props => {
-	return <ColumnStyles { ...props } />
+	return <ColumnStyles.Content { ...props } />
 }
diff --git a/src/block-components/columns/style.js b/src/block-components/columns/style.js
@@ -12,9 +12,9 @@ import { useBlockAttributesContext } from '~stackable/hooks'
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element'
+import { Fragment, memo } from '@wordpress/element'
 
-const Styles = props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -186,6 +186,9 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const Style = props => {
 	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
 	const numColumns = ( columnArrangement || '' ).split( ',' ).length
@@ -194,5 +197,5 @@ export const Style = props => {
 
 Style.Content = props => {
 	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	return <Styles { ...props } numColumns={ numColumns } />
+	return <Styles.Content { ...props } numColumns={ numColumns } />
 }
diff --git a/src/block-components/container-div/style.js b/src/block-components/container-div/style.js
@@ -6,7 +6,9 @@ import {
 } from '../helpers'
 import { useBlockAttributesContext } from '~stackable/hooks'
 
-export const Style = props => {
+import { memo } from '@wordpress/element'
+
+export const Style = memo( props => {
 	const {
 		backgroundSelector = '.%s-container',
 		borderSelector = '.%s-container',
@@ -50,7 +52,7 @@ export const Style = props => {
 			/>
 		</>
 	)
-}
+} )
 
 Style.defaultProps = {
 	options: {},

diff --git a/src/block-components/effects-animations/style.js b/src/block-components/effects-animations/style.js
@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
-export const Style = props => {
+export const Style = memo( props => {
 	const EffectStyles = applyFilters( 'stackable.block-component.effects-animations.style', null )
 	return EffectStyles && <EffectStyles { ...props } />
-}
+} )
 
 Style.Content = props => {
 	const EffectStyles = applyFilters( 'stackable.block-component.effects-animations.style.content', null )

diff --git a/src/block-components/helpers/backgrounds/style.js b/src/block-components/helpers/backgrounds/style.js
@@ -3,7 +3,9 @@
  */
 import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+import { memo } from '@wordpress/element'
+
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -312,10 +314,13 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const BackgroundStyle = props => {
 	return <Styles { ...props } />
 }
 
 BackgroundStyle.Content = props => {
-	return <Styles { ...props } />
+	return <Styles.Content { ...props } />
 }
diff --git a/src/block-components/helpers/borders/style.js b/src/block-components/helpers/borders/style.js
@@ -3,7 +3,9 @@
  */
 import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+import { memo } from '@wordpress/element'
+
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -227,10 +229,13 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const BorderStyle = props => {
 	return <Styles { ...props } />
 }
 
 BorderStyle.Content = props => {
-	return <Styles { ...props } />
+	return <Styles.Content { ...props } />
 }
diff --git a/src/block-components/helpers/flex-gap/style.js b/src/block-components/helpers/flex-gap/style.js
@@ -3,7 +3,9 @@
  */
 import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+import { memo } from '@wordpress/element'
+
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -40,10 +42,13 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const FlexGapStyles = props => {
 	return <Styles { ...props } />
 }
 
 FlexGapStyles.Content = props => {
-	return <Styles { ...props } />
+	return <Styles.Content { ...props } />
 }
diff --git a/src/block-components/helpers/size/style.js b/src/block-components/helpers/size/style.js
@@ -3,7 +3,9 @@
  */
 import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+import { memo } from '@wordpress/element'
+
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -269,10 +271,13 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const SizeStyle = props => {
 	return <Styles { ...props } />
 }
 
 SizeStyle.Content = props => {
-	return <Styles { ...props } />
+	return <Styles.Content { ...props } />
 }
diff --git a/src/block-components/icon/style.js b/src/block-components/icon/style.js
@@ -7,8 +7,9 @@ import { BlockCss } from '~stackable/components'
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
-const Styles = props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -304,6 +305,9 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const Style = props => {
 	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style', null )
 
@@ -314,10 +318,10 @@ export const Style = props => {
 }
 
 Style.Content = props => {
-	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style', null )
+	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style.content', null )
 
 	return <>
-		<Styles { ...props } />
+		<Styles.Content { ...props } />
 		{ IndivIconStyles && <IndivIconStyles { ...props } /> }
 	</>
 }