fix (performance): revert memo, add timeout in useEffect (#3258)

* Revert "fix (performance): fixes freezing when creating and adding synced patterns in WP 6.6 (#3245)"

This reverts commit 16947b5.

* add timeout in useEffect

src/block-components/advanced/style.js

@@ -2,9 +2,8 @@
  * External dependencies
  */
 import { BlockCss } from '~stackable/components'
-import { memo } from '@wordpress/element'
 
-const _Styles = props => {
+const Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -339,13 +338,10 @@ const _Styles = props => {
 	)
 }
 
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
 export const Style = props => {
 	return <Styles { ...props } />
 }
 
 Style.Content = props => {
-	return <Styles.Content { ...props } />
+	return <Styles { ...props } />
 }

src/block-components/alignment/style.js

@@ -3,9 +3,7 @@
  */
 import { BlockCss } from '~stackable/components'
 
-import { memo } from '@wordpress/element'
-
-const _AlignmentStyles = props => {
+const AlignmentStyles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -210,7 +208,7 @@ const _AlignmentStyles = props => {
 				styleRule="columnGap"
 				attrName="innerBlockColumnGap"
 				key="innerBlockColumnGapEdit"
-				format="%spx"
+				format={ `%spx` }
 				responsive="all"
 				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
 				dependencies={ [
@@ -225,7 +223,7 @@ const _AlignmentStyles = props => {
 				styleRule="columnGap"
 				attrName="innerBlockColumnGap"
 				key="innerBlockColumnGapSave"
-				format="%spx"
+				format={ `%spx` }
 				responsive="all"
 				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
 				dependencies={ [
@@ -240,7 +238,7 @@ const _AlignmentStyles = props => {
 				styleRule="rowGap"
 				attrName="innerBlockRowGap"
 				key="innerBlockRowGapEdit"
-				format="%spx"
+				format={ `%spx` }
 				responsive="all"
 				enabledCallback={ getAttribute => {
 					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
@@ -259,7 +257,7 @@ const _AlignmentStyles = props => {
 				styleRule="rowGap"
 				attrName="innerBlockRowGap"
 				key="innerBlockRowGapSave"
-				format="%spx"
+				format={ `%spx` }
 				responsive="all"
 				enabledCallback={ getAttribute => {
 					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
@@ -307,13 +305,10 @@ const _AlignmentStyles = props => {
 	)
 }
 
-const AlignmentStyles = memo( _AlignmentStyles )
-AlignmentStyles.Content = _AlignmentStyles
-
 export const Style = props => {
 	return <AlignmentStyles { ...props } />
 }
 
 Style.Content = props => {
-	return <AlignmentStyles.Content { ...props } />
+	return <AlignmentStyles { ...props } />
 }

src/block-components/block-div/style.js

@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { Fragment, memo } from '@wordpress/element'
+import { Fragment } from '@wordpress/element'
 import { useBlockAttributesContext } from '~stackable/hooks'
 import {
 	BorderStyle, SizeStyle, BackgroundStyle,
 } from '../helpers'
 
-export const Style = memo( props => {
+export const Style = props => {
 	const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
 
 	return (
@@ -17,7 +17,7 @@ export const Style = memo( props => {
 			<SizeStyle { ...props } attrNameTemplate="block%s" />
 		</>
 	)
-} )
+}
 
 Style.Content = props => {
 	return (

src/block-components/button/style.js

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

src/block-components/column/style.js

@@ -3,9 +3,8 @@
  */
 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,
@@ -103,13 +102,10 @@ const _ColumnStyles = props => {
 	)
 }
 
-const ColumnStyles = memo( _ColumnStyles )
-ColumnStyles.Content = _ColumnStyles
-
 export const Style = props => {
 	return <ColumnStyles { ...props } />
 }
 
 Style.Content = props => {
-	return <ColumnStyles.Content { ...props } />
+	return <ColumnStyles { ...props } />
 }

src/block-components/columns/style.js

@@ -12,9 +12,9 @@ import { useBlockAttributesContext } from '~stackable/hooks'
 /**
  * WordPress dependencies
  */
-import { Fragment, memo } from '@wordpress/element'
+import { Fragment } from '@wordpress/element'
 
-const _Styles = props => {
+const Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -186,9 +186,6 @@ 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
@@ -197,5 +194,5 @@ export const Style = props => {
 
 Style.Content = props => {
 	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	return <Styles.Content { ...props } numColumns={ numColumns } />
+	return <Styles { ...props } numColumns={ numColumns } />
 }

src/block-components/container-div/style.js

@@ -6,9 +6,7 @@ import {
 } from '../helpers'
 import { useBlockAttributesContext } from '~stackable/hooks'
 
-import { memo } from '@wordpress/element'
-
-export const Style = memo( props => {
+export const Style = props => {
 	const {
 		backgroundSelector = '.%s-container',
 		borderSelector = '.%s-container',
@@ -52,7 +50,7 @@ export const Style = memo( props => {
 			/>
 		</>
 	)
-} )
+}
 
 Style.defaultProps = {
 	options: {},

src/block-components/effects-animations/style.js

@@ -2,12 +2,11 @@
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks'
-import { memo } from '@wordpress/element'
 
-export const Style = memo( props => {
+export const Style = 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 )

src/block-components/helpers/backgrounds/style.js

@@ -3,9 +3,7 @@
  */
 import { BlockCss } from '~stackable/components'
 
-import { memo } from '@wordpress/element'
-
-const _Styles = props => {
+const Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -314,13 +312,10 @@ const _Styles = props => {
 	)
 }
 
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
 export const BackgroundStyle = props => {
 	return <Styles { ...props } />
 }
 
 BackgroundStyle.Content = props => {
-	return <Styles.Content { ...props } />
+	return <Styles { ...props } />
 }

src/block-components/helpers/borders/style.js

@@ -3,9 +3,7 @@
  */
 import { BlockCss } from '~stackable/components'
 
-import { memo } from '@wordpress/element'
-
-const _Styles = props => {
+const Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -229,13 +227,10 @@ const _Styles = props => {
 	)
 }
 
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
 export const BorderStyle = props => {
 	return <Styles { ...props } />
 }
 
 BorderStyle.Content = props => {
-	return <Styles.Content { ...props } />
+	return <Styles { ...props } />
 }

src/block-components/helpers/flex-gap/style.js

@@ -3,9 +3,7 @@
  */
 import { BlockCss } from '~stackable/components'
 
-import { memo } from '@wordpress/element'
-
-const _Styles = props => {
+const Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -42,13 +40,10 @@ const _Styles = props => {
 	)
 }
 
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
 export const FlexGapStyles = props => {
 	return <Styles { ...props } />
 }
 
 FlexGapStyles.Content = props => {
-	return <Styles.Content { ...props } />
+	return <Styles { ...props } />
 }

src/block-components/helpers/size/style.js

@@ -3,9 +3,7 @@
  */
 import { BlockCss } from '~stackable/components'
 
-import { memo } from '@wordpress/element'
-
-const _Styles = props => {
+const Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -271,13 +269,10 @@ const _Styles = props => {
 	)
 }
 
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
 export const SizeStyle = props => {
 	return <Styles { ...props } />
 }
 
 SizeStyle.Content = props => {
-	return <Styles.Content { ...props } />
+	return <Styles { ...props } />
 }

src/block-components/icon/style.js

@@ -7,9 +7,8 @@ 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,
@@ -305,9 +304,6 @@ 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 )
 
@@ -318,10 +314,10 @@ export const Style = props => {
 }
 
 Style.Content = props => {
-	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style.content', null )
+	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style', null )
 
 	return <>
-		<Styles.Content { ...props } />
+		<Styles { ...props } />
 		{ IndivIconStyles && <IndivIconStyles { ...props } /> }
 	</>
 }