fix memo

gambitph · Jul 15, 2024 · 7d0176a · 7d0176a
1 parent 0d27ee7
commit 7d0176a
Show file tree

Hide file tree

Showing 37 changed files with 217 additions and 93 deletions.
diff --git a/src/block-components/advanced/style.js b/src/block-components/advanced/style.js
@@ -4,7 +4,7 @@
 import { BlockCss } from '~stackable/components'
 import { memo } from '@wordpress/element'
 
-const Styles = memo( props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -337,12 +337,15 @@ const Styles = memo( 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
@@ -5,7 +5,7 @@ import { BlockCss } from '~stackable/components'
 
 import { memo } from '@wordpress/element'
 
-const AlignmentStyles = memo( props => {
+const _AlignmentStyles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -210,7 +210,7 @@ const AlignmentStyles = memo( props => {
 				styleRule="columnGap"
 				attrName="innerBlockColumnGap"
 				key="innerBlockColumnGapEdit"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
 				dependencies={ [
@@ -225,7 +225,7 @@ const AlignmentStyles = memo( props => {
 				styleRule="columnGap"
 				attrName="innerBlockColumnGap"
 				key="innerBlockColumnGapSave"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
 				dependencies={ [
@@ -240,7 +240,7 @@ const AlignmentStyles = memo( props => {
 				styleRule="rowGap"
 				attrName="innerBlockRowGap"
 				key="innerBlockRowGapEdit"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => {
 					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
@@ -259,7 +259,7 @@ const AlignmentStyles = memo( props => {
 				styleRule="rowGap"
 				attrName="innerBlockRowGap"
 				key="innerBlockRowGapSave"
-				format={ `%spx` }
+				format="%spx"
 				responsive="all"
 				enabledCallback={ getAttribute => {
 					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
@@ -305,12 +305,15 @@ const AlignmentStyles = memo( 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/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
@@ -5,7 +5,7 @@ import { __getValue } from '~stackable/util'
 import { BlockCss } from '~stackable/components'
 import { memo } from '@wordpress/element'
 
-const ColumnStyles = memo( props => {
+const _ColumnStyles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -101,12 +101,15 @@ const ColumnStyles = memo( 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
@@ -14,7 +14,7 @@ import { useBlockAttributesContext } from '~stackable/hooks'
  */
 import { Fragment, memo } from '@wordpress/element'
 
-const Styles = memo( props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -184,7 +184,10 @@ const Styles = memo( props => {
 			} ) }
 		</>
 	)
-} )
+}
+
+const Styles = memo( _Styles )
+Styles.Content = _Styles
 
 export const Style = props => {
 	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
@@ -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/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 )
 
@@ -317,7 +321,7 @@ Style.Content = props => {
 	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style', null )
 
 	return <>
-		<Styles { ...props } />
+		<Styles.Content { ...props } />
 		{ IndivIconStyles && <IndivIconStyles { ...props } /> }
 	</>
 }
diff --git a/src/block-components/image/style.js b/src/block-components/image/style.js
@@ -9,6 +9,8 @@ import { getShapeCSS } from './get-shape-css'
 import { toNumber } from 'lodash'
 import { BlockCss } from '~stackable/components'
 
+import { memo } from '@wordpress/element'
+
 const focalPointToPosition = ( { x, y } ) => {
 	let _x = toNumber( x )
 	let _y = toNumber( y )
@@ -17,7 +19,7 @@ const focalPointToPosition = ( { x, y } ) => {
 	return `${ _x }% ${ _y }%`
 }
 
-const Styles = props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -508,6 +510,9 @@ const Styles = props => {
 	)
 }
 
+const Styles = memo( _Styles )
+Styles.Content = _Styles
+
 export const Style = props => {
 	return <Styles { ...props } />
 }

diff --git a/src/block-components/margin-bottom/style.js b/src/block-components/margin-bottom/style.js
@@ -5,7 +5,7 @@ import { BlockCss } from '~stackable/components'
 
 import { memo } from '@wordpress/element'
 
-const Styles = memo( props => {
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -29,12 +29,13 @@ const Styles = memo( 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/progress-bar/style.js b/src/block-components/progress-bar/style.js
@@ -1,7 +1,9 @@
 import { hexToRgba } from '~stackable/util'
 import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+import { memo } from '@wordpress/element'
+
+const _Styles = props => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -231,10 +233,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 } />
 }