From bbf70f12c2dd3ca48887249f4c1c40f49dd64dd0 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Mon, 22 Jul 2024 20:15:23 +0800
Subject: [PATCH] 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 16947b5087742cbaf8183c6b3e4db6aaa7ab9c35.
* add timeout in useEffect
---
src/block-components/advanced/style.js | 8 ++-----
src/block-components/alignment/style.js | 17 +++++---------
src/block-components/block-div/style.js | 6 ++---
src/block-components/button/style.js | 9 ++------
src/block-components/column/style.js | 8 ++-----
src/block-components/columns/style.js | 9 +++-----
src/block-components/container-div/style.js | 6 ++---
.../effects-animations/style.js | 5 ++---
.../helpers/backgrounds/style.js | 9 ++------
src/block-components/helpers/borders/style.js | 9 ++------
.../helpers/flex-gap/style.js | 9 ++------
src/block-components/helpers/size/style.js | 9 ++------
src/block-components/icon/style.js | 10 +++------
src/block-components/image/style.js | 9 ++------
src/block-components/margin-bottom/style.js | 9 +++-----
src/block-components/progress-bar/style.js | 9 ++------
src/block-components/separator/style.js | 16 +++++---------
src/block-components/transform/style.js | 5 ++---
src/block-components/typography/style.js | 8 ++-----
src/block/button-group/style.js | 7 ++----
src/block/button/style.js | 7 ++----
src/block/carousel/style.js | 7 ++----
src/block/column/style.js | 7 ++----
src/block/countdown/style.js | 7 ++----
src/block/divider/style.js | 7 ++----
src/block/feature/style.js | 7 ++----
src/block/heading/style.js | 7 ++----
src/block/horizontal-scroller/style.js | 9 +++-----
src/block/icon-label/style.js | 7 ++----
src/block/icon-list/style.js | 7 ++----
src/block/image/style.js | 7 ++----
src/block/map/style.js | 7 ++----
src/block/notification/style.js | 7 ++----
src/block/number-box/style.js | 7 ++----
src/block/posts/style.js | 7 ++----
src/block/separator/style.js | 4 ++--
src/block/spacer/style.js | 7 ++----
src/block/tab-labels/style.js | 7 ++----
src/block/table-of-contents/style.js | 9 +++-----
src/block/tabs/style.js | 7 ++----
src/block/text/style.js | 7 ++----
src/block/timeline/edit.js | 22 +++++++++++--------
src/block/timeline/style.js | 7 ++----
src/block/video-popup/style.js | 7 ++----
src/components/block-css/index.js | 7 +++---
45 files changed, 116 insertions(+), 252 deletions(-)
diff --git a/src/block-components/advanced/style.js b/src/block-components/advanced/style.js
index 3359d909a..7f789c624 100644
--- a/src/block-components/advanced/style.js
+++ b/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
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block-components/alignment/style.js b/src/block-components/alignment/style.js
index 87a4ac4d3..4068db1d8 100644
--- a/src/block-components/alignment/style.js
+++ b/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
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block-components/block-div/style.js b/src/block-components/block-div/style.js
index 6df149482..e0dfdac4d 100644
--- a/src/block-components/block-div/style.js
+++ b/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 => {
)
-} )
+}
Style.Content = props => {
return (
diff --git a/src/block-components/button/style.js b/src/block-components/button/style.js
index f553e7175..aac6d8b0f 100644
--- a/src/block-components/button/style.js
+++ b/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 (
<>
-
diff --git a/src/block-components/column/style.js b/src/block-components/column/style.js
index 63ff206c2..0d240cd5d 100644
--- a/src/block-components/column/style.js
+++ b/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
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block-components/columns/style.js b/src/block-components/columns/style.js
index 7a5235869..5d855194a 100644
--- 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, 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
+ return
}
diff --git a/src/block-components/container-div/style.js b/src/block-components/container-div/style.js
index 5ed815485..7a75965fe 100644
--- a/src/block-components/container-div/style.js
+++ b/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: {},
diff --git a/src/block-components/effects-animations/style.js b/src/block-components/effects-animations/style.js
index f1b2272c4..6cba3bbf1 100644
--- a/src/block-components/effects-animations/style.js
+++ b/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 &&
-} )
+}
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
index 62ba28f65..365516895 100644
--- a/src/block-components/helpers/backgrounds/style.js
+++ b/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
}
BackgroundStyle.Content = props => {
- return
+ return
}
diff --git a/src/block-components/helpers/borders/style.js b/src/block-components/helpers/borders/style.js
index 5f8744ab3..3e1e8d7ca 100644
--- a/src/block-components/helpers/borders/style.js
+++ b/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
}
BorderStyle.Content = props => {
- return
+ return
}
diff --git a/src/block-components/helpers/flex-gap/style.js b/src/block-components/helpers/flex-gap/style.js
index c7e7faa73..93f580699 100644
--- a/src/block-components/helpers/flex-gap/style.js
+++ b/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
}
FlexGapStyles.Content = props => {
- return
+ return
}
diff --git a/src/block-components/helpers/size/style.js b/src/block-components/helpers/size/style.js
index 8ede871fd..c45b9a87d 100644
--- a/src/block-components/helpers/size/style.js
+++ b/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
}
SizeStyle.Content = props => {
- return
+ return
}
diff --git a/src/block-components/icon/style.js b/src/block-components/icon/style.js
index 360d06cea..454cb4139 100644
--- a/src/block-components/icon/style.js
+++ b/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 <>
-
+
{ IndivIconStyles && }
}
diff --git a/src/block-components/image/style.js b/src/block-components/image/style.js
index 133ec971c..6b65b4e69 100644
--- a/src/block-components/image/style.js
+++ b/src/block-components/image/style.js
@@ -9,8 +9,6 @@ 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 )
@@ -19,7 +17,7 @@ const focalPointToPosition = ( { x, y } ) => {
return `${ _x }% ${ _y }%`
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -510,13 +508,10 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const Style = props => {
return
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block-components/margin-bottom/style.js b/src/block-components/margin-bottom/style.js
index 40538d80a..8e9449492 100644
--- a/src/block-components/margin-bottom/style.js
+++ b/src/block-components/margin-bottom/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,
@@ -30,12 +28,11 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
+
export const Style = props => {
return
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block-components/progress-bar/style.js b/src/block-components/progress-bar/style.js
index bfc3af80f..6ea479914 100644
--- a/src/block-components/progress-bar/style.js
+++ b/src/block-components/progress-bar/style.js
@@ -1,9 +1,7 @@
import { hexToRgba } from '~stackable/util'
import { BlockCss } from '~stackable/components'
-import { memo } from '@wordpress/element'
-
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -233,13 +231,10 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const Style = props => {
return
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block-components/separator/style.js b/src/block-components/separator/style.js
index 9124ab8c2..b6b41e480 100644
--- a/src/block-components/separator/style.js
+++ b/src/block-components/separator/style.js
@@ -11,10 +11,9 @@ import { compact } from 'lodash'
/**
* WordPress dependencies
*/
-import { memo } from '@wordpress/element'
import { applyFilters } from '@wordpress/hooks'
-export const _SeparatorStyles = props => {
+export const SeparatorStyles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -126,10 +125,7 @@ export const _SeparatorStyles = props => {
)
}
-export const SeparatorStyles = memo( _SeparatorStyles )
-SeparatorStyles.Content = _SeparatorStyles
-
-const MarginBottomStyles = memo( props => {
+const MarginBottomStyles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -155,7 +151,7 @@ const MarginBottomStyles = memo( props => {
/>
)
-} )
+}
export const Style = props => {
const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
@@ -172,12 +168,12 @@ export const Style = props => {
}
Style.Content = props => {
- const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles.content', null )
+ const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
return (
<>
-
-
+
+
{ SeparatorLayerStyles && }
{ SeparatorLayerStyles && }
diff --git a/src/block-components/transform/style.js b/src/block-components/transform/style.js
index b517046a8..b04d086a8 100644
--- a/src/block-components/transform/style.js
+++ b/src/block-components/transform/style.js
@@ -1,13 +1,12 @@
/**
* WordPress dependencies
*/
-import { memo } from '@wordpress/element'
import { applyFilters } from '@wordpress/hooks'
-export const Style = memo( props => {
+export const Style = props => {
const TransformStyles = applyFilters( 'stackable.block-component.transform.style', null )
return TransformStyles &&
-} )
+}
Style.Content = props => {
const TransformStyles = applyFilters( 'stackable.block-component.transform.style.content', null )
diff --git a/src/block-components/typography/style.js b/src/block-components/typography/style.js
index 0c3127761..e789002d8 100644
--- a/src/block-components/typography/style.js
+++ b/src/block-components/typography/style.js
@@ -3,9 +3,8 @@
*/
import { getFontFamily, clampInheritedStyle } from '~stackable/util'
import { BlockCss } from '~stackable/components'
-import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -192,13 +191,10 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const Style = props => {
return
}
Style.Content = props => {
- return
+ return
}
diff --git a/src/block/button-group/style.js b/src/block/button-group/style.js
index 4aac60d99..5ac0c3880 100644
--- a/src/block/button-group/style.js
+++ b/src/block/button-group/style.js
@@ -25,7 +25,7 @@ const flexGapOptionsSave = {
selector: '.stk-inner-blocks',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -238,9 +238,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const ButtonGroupStyles = memo( props => {
return (
<>
@@ -274,7 +271,7 @@ ButtonGroupStyles.Content = props => {
-
+
)
}
diff --git a/src/block/button/style.js b/src/block/button/style.js
index af1dd58d5..4513bc46b 100644
--- a/src/block/button/style.js
+++ b/src/block/button/style.js
@@ -26,7 +26,7 @@ const typographyOptions = {
hoverSelector: '.stk-button:hover .stk-button__inner-text',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -52,9 +52,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const ButtonStyles = memo( props => {
return (
<>
@@ -86,7 +83,7 @@ ButtonStyles.Content = props => {
-
+
)
}
diff --git a/src/block/carousel/style.js b/src/block/carousel/style.js
index cc18e3b07..0e5f52c47 100644
--- a/src/block/carousel/style.js
+++ b/src/block/carousel/style.js
@@ -23,7 +23,7 @@ const alignmentOptions = {
editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -242,9 +242,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
const numColumns = ( columnArrangement || '' ).split( ',' ).length
@@ -287,7 +284,7 @@ BlockStyles.Content = props => {
-
+
{ ColumnOrderStyle && }
)
diff --git a/src/block/column/style.js b/src/block/column/style.js
index 18780c8d5..02331ef62 100644
--- a/src/block/column/style.js
+++ b/src/block/column/style.js
@@ -41,7 +41,7 @@ const callbacks = {
},
}
-const _ColumnStyles = props => {
+const ColumnStyles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -145,9 +145,6 @@ const _ColumnStyles = props => {
)
}
-const ColumnStyles = memo( _ColumnStyles )
-ColumnStyles.Content = _ColumnStyles
-
const BlockStyles = memo( props => {
return (
<>
@@ -177,7 +174,7 @@ BlockStyles.Content = props => {
return (
-
+
diff --git a/src/block/countdown/style.js b/src/block/countdown/style.js
index df2aa2c68..95dd42c12 100644
--- a/src/block/countdown/style.js
+++ b/src/block/countdown/style.js
@@ -38,7 +38,7 @@ const messageTypographyOptions = {
attrNameTemplate: 'message%s',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -88,9 +88,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const CountdownStyles = memo( props => {
return (
<>
@@ -131,7 +128,7 @@ CountdownStyles.Content = props => {
-
+
)
}
diff --git a/src/block/divider/style.js b/src/block/divider/style.js
index fb5d2c475..dbcdf8f97 100644
--- a/src/block/divider/style.js
+++ b/src/block/divider/style.js
@@ -22,7 +22,7 @@ import { blockStyles } from './block-styles'
*/
import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -140,9 +140,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const DividerStyles = memo( props => {
return (
<>
@@ -173,7 +170,7 @@ DividerStyles.Content = props => {
-
+
)
}
diff --git a/src/block/feature/style.js b/src/block/feature/style.js
index 5954b3ff6..d2c7c676c 100644
--- a/src/block/feature/style.js
+++ b/src/block/feature/style.js
@@ -21,7 +21,7 @@ import { useBlockAttributesContext } from '~stackable/hooks'
import { memo } from '@wordpress/element'
import { applyFilters } from '@wordpress/hooks'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -55,9 +55,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
const numColumns = ( columnArrangement || '' ).split( ',' ).length
@@ -111,7 +108,7 @@ BlockStyles.Content = props => {
columnWrapDesktopSaveStyleRule="--stk-feature-flex-wrap"
/>
{ ColumnOrderStyle && }
-
+
)
}
diff --git a/src/block/heading/style.js b/src/block/heading/style.js
index 52efdf6a7..2ad58d1c2 100644
--- a/src/block/heading/style.js
+++ b/src/block/heading/style.js
@@ -17,7 +17,7 @@ import { BlockCss, BlockCssCompiler } from '~stackable/components'
*/
import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -135,9 +135,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const HeadingStyles = memo( props => {
return (
<>
@@ -170,7 +167,7 @@ HeadingStyles.Content = props => {
-
+
)
}
diff --git a/src/block/horizontal-scroller/style.js b/src/block/horizontal-scroller/style.js
index 695490b53..5aeccd85a 100644
--- a/src/block/horizontal-scroller/style.js
+++ b/src/block/horizontal-scroller/style.js
@@ -22,7 +22,7 @@ const alignmentOptions = {
editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -138,9 +138,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
const numColumns = ( columnArrangement || '' ).split( ',' ).length
@@ -181,8 +178,8 @@ BlockStyles.Content = props => {
-
- { ColumnOrderStyle && }
+
+ { ColumnOrderStyle && }
)
}
diff --git a/src/block/icon-label/style.js b/src/block/icon-label/style.js
index cd53a5bce..2310be452 100644
--- a/src/block/icon-label/style.js
+++ b/src/block/icon-label/style.js
@@ -16,7 +16,7 @@ import { BlockCss, BlockCssCompiler } from '~stackable/components'
*/
import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -50,9 +50,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const IconLabelStyles = memo( props => {
return (
<>
@@ -86,7 +83,7 @@ IconLabelStyles.Content = props => {
-
+
)
}
diff --git a/src/block/icon-list/style.js b/src/block/icon-list/style.js
index 9e405561a..1a805a17e 100644
--- a/src/block/icon-list/style.js
+++ b/src/block/icon-list/style.js
@@ -28,7 +28,7 @@ const typographyOptions = {
],
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -224,9 +224,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const IconListStyles = memo( props => {
const { columns, listDisplayStyle } = useBlockAttributesContext( attributes => ( {
columns: attributes.columns,
@@ -266,7 +263,7 @@ IconListStyles.Content = props => {
-
+
)
}
diff --git a/src/block/image/style.js b/src/block/image/style.js
index f3ec7e38b..aa2a18016 100644
--- a/src/block/image/style.js
+++ b/src/block/image/style.js
@@ -23,7 +23,7 @@ const figcaptionTypographyOptions = {
attrNameTemplate: 'figcaption%s',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -43,9 +43,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
return (
<>
@@ -79,7 +76,7 @@ BlockStyles.Content = props => {
-
+
)
}
diff --git a/src/block/map/style.js b/src/block/map/style.js
index e891528a2..2a1fac0f4 100644
--- a/src/block/map/style.js
+++ b/src/block/map/style.js
@@ -14,7 +14,7 @@ import { BlockCss, BlockCssCompiler } from '~stackable/components'
*/
import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -48,9 +48,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
return (
<>
@@ -78,7 +75,7 @@ BlockStyles.Content = props => {
-
+
)
}
diff --git a/src/block/notification/style.js b/src/block/notification/style.js
index 0c55ae27e..8d57171c9 100644
--- a/src/block/notification/style.js
+++ b/src/block/notification/style.js
@@ -22,7 +22,7 @@ const containerDivOptions = {
sizeHorizontalAlignRule: 'margin',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -56,9 +56,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const ContainerStyles = memo( props => {
return (
<>
@@ -92,7 +89,7 @@ ContainerStyles.Content = props => {
-
+
)
}
diff --git a/src/block/number-box/style.js b/src/block/number-box/style.js
index 767ae5a10..6032f519a 100644
--- a/src/block/number-box/style.js
+++ b/src/block/number-box/style.js
@@ -20,7 +20,7 @@ import { BlockCss, BlockCssCompiler } from '~stackable/components'
*/
import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -56,9 +56,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const HeadingStyles = memo( props => {
const hasShape = useBlockAttributesContext( attributes => attributes.hasShape )
@@ -111,7 +108,7 @@ HeadingStyles.Content = props => {
attrNameTemplate="shape%s"
selector=".stk-block-number-box__text"
/>
-
+
diff --git a/src/block/posts/style.js b/src/block/posts/style.js
index df230379f..cc5a4e910 100644
--- a/src/block/posts/style.js
+++ b/src/block/posts/style.js
@@ -98,7 +98,7 @@ const _imageOptions = {
dependencies: [ 'imageHoverStateInContainer', 'imageOverlayColorType' ],
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -344,9 +344,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const PostsStyles = memo( props => {
const blockStyle = useBlockStyle( variations )
@@ -425,7 +422,7 @@ PostsStyles.Content = props => {
-
+
)
}
diff --git a/src/block/separator/style.js b/src/block/separator/style.js
index 553d7c1f5..39c20ad28 100644
--- a/src/block/separator/style.js
+++ b/src/block/separator/style.js
@@ -52,7 +52,7 @@ SeparatorStyles.Content = props => {
if ( props.attributes.generatedCss ) {
return
}
- const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles.content', null )
+ const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
return (
@@ -60,7 +60,7 @@ SeparatorStyles.Content = props => {
-
+
{ SeparatorLayerStyles && (
{
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -38,9 +38,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const SpacerStyles = memo( props => {
return (
<>
@@ -68,7 +65,7 @@ SpacerStyles.Content = props => {
-
+
)
}
diff --git a/src/block/tab-labels/style.js b/src/block/tab-labels/style.js
index 1a0c25435..4f5050fe2 100644
--- a/src/block/tab-labels/style.js
+++ b/src/block/tab-labels/style.js
@@ -49,7 +49,7 @@ const iconOptions = {
hoverSelector: '.stk-block-tabs__tab:hover',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -208,9 +208,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const TabStyles = memo( props => {
return (
<>
@@ -247,7 +244,7 @@ TabStyles.Content = props => {
-
+
diff --git a/src/block/table-of-contents/style.js b/src/block/table-of-contents/style.js
index 6190b76bc..10cfb02a7 100644
--- a/src/block/table-of-contents/style.js
+++ b/src/block/table-of-contents/style.js
@@ -31,7 +31,7 @@ const titleTypographyOptions = {
attrNameTemplate: 'title%s',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -163,7 +163,7 @@ const _Styles = props => {
attrName="scrollTopOffset"
key="scrollTopOffset"
responsive="all"
- format="%spx"
+ format={ '%spx' }
/>
{
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const TableOfContentsStyles = memo( props => {
return (
<>
@@ -218,7 +215,7 @@ TableOfContentsStyles.Content = props => {
-
+
)
}
diff --git a/src/block/tabs/style.js b/src/block/tabs/style.js
index 8c4ae2489..55bccfd16 100644
--- a/src/block/tabs/style.js
+++ b/src/block/tabs/style.js
@@ -24,7 +24,7 @@ import { memo } from '@wordpress/element'
// editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
// }
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -59,9 +59,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
// const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
// const numColumns = ( columnArrangement || '' ).split( ',' ).length
@@ -106,7 +103,7 @@ BlockStyles.Content = props => {
{ /* */ }
-
+
{ /* { ColumnOrderStyle && } */ }
)
diff --git a/src/block/text/style.js b/src/block/text/style.js
index 526bab665..3984e1e36 100644
--- a/src/block/text/style.js
+++ b/src/block/text/style.js
@@ -22,7 +22,7 @@ const typographyOptions = {
hoverSelector: '.stk-block-text__text:hover',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -53,9 +53,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const TextStyles = memo( props => {
return (
<>
@@ -88,7 +85,7 @@ TextStyles.Content = props => {
-
+
)
}
diff --git a/src/block/timeline/edit.js b/src/block/timeline/edit.js
index 1cf452726..31156bfc6 100644
--- a/src/block/timeline/edit.js
+++ b/src/block/timeline/edit.js
@@ -106,7 +106,7 @@ const Edit = props => {
const middleRef = useRef()
const branchRef = useRef()
const blockRef = useRef()
- const isUpdating = useRef( false )
+ const updateTimeout = useRef( null )
const [ middleTopPosition, setMiddleTopPosition ] = useState( { dot: 0, branch: 0 } )
const [ fillHeight, setFillHeight ] = useState( { verticalLine: 0, middle: 0 } )
const [ verticalLineMaxHeight, setVerticalLineMaxHeight ] = useState( 0 )
@@ -260,7 +260,10 @@ const Edit = props => {
// update max height when device type & padding changes
useEffect( () => {
- updateMaxHeight()
+ clearTimeout( updateTimeout.current )
+ updateTimeout.current = setTimeout( () => {
+ updateMaxHeight()
+ }, 300 )
}, [ deviceType,
timelinePosition,
props.attributes.timelineDotSize,
@@ -296,21 +299,22 @@ const Edit = props => {
// update blocks if position changes
useEffect( () => {
// set attribute for frontend
+ let isUpdating = false
if ( nextBlock && nextBlock.name === 'stackable/timeline' && props.attributes.timelineIsLast ) {
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
setAttributes( { timelineIsLast: false } )
- isUpdating.current = true
+ isUpdating = true
} else if ( ( ! nextBlock || nextBlock.name !== 'stackable/timeline' ) && props.attributes.timelineIsLast ) {
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
setAttributes( { timelineIsLast: true } )
- isUpdating.current = true
+ isUpdating = true
}
- if ( isUpdating.current ) {
- setTimeout( () => {
- updateMaxHeight()
- isUpdating.current = false
+ if ( isUpdating ) {
+ clearTimeout( updateTimeout.current )
+ updateTimeout.current = setTimeout( () => {
+ updateMaxHeight()
}, 300 )
- }
+ }
}, [ nextBlock ] )
useEffect( () => {
diff --git a/src/block/timeline/style.js b/src/block/timeline/style.js
index 8111da3e8..5861246f4 100644
--- a/src/block/timeline/style.js
+++ b/src/block/timeline/style.js
@@ -21,7 +21,7 @@ const typographyOptions = {
hoverSelector: '.stk-block-timeline__date:hover',
}
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -182,9 +182,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
const BlockStyles = memo( props => {
return (
<>
@@ -216,7 +213,7 @@ BlockStyles.Content = props => {
-
+
)
}
diff --git a/src/block/video-popup/style.js b/src/block/video-popup/style.js
index 49a71a6aa..bf3cc84d5 100644
--- a/src/block/video-popup/style.js
+++ b/src/block/video-popup/style.js
@@ -16,7 +16,7 @@ import { BlockCss, BlockCssCompiler } from '~stackable/components'
*/
import { memo } from '@wordpress/element'
-const _Styles = props => {
+const Styles = props => {
const propsToPass = {
...props,
version: props.version,
@@ -38,9 +38,6 @@ const _Styles = props => {
)
}
-const Styles = memo( _Styles )
-Styles.Content = _Styles
-
export const IconLabelStyles = memo( props => {
return (
<>
@@ -72,7 +69,7 @@ IconLabelStyles.Content = props => {
-
+
)
}
diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js
index 09e6b4fbc..bcfcbff75 100644
--- a/src/components/block-css/index.js
+++ b/src/components/block-css/index.js
@@ -37,7 +37,6 @@ import { pick, kebabCase } from 'lodash'
*/
import { sprintf } from '@wordpress/i18n'
import { applyFilters } from '@wordpress/hooks'
-import { memo } from '@wordpress/element'
const BlockCss = props => {
const {
@@ -434,7 +433,7 @@ const BlockCss = props => {
}
// This is used for rendering styles for the editor.
-const BlockCssEdit = memo( props => {
+const BlockCssEdit = props => {
const {
clientId,
} = props
@@ -462,7 +461,7 @@ const BlockCssEdit = memo( props => {
output = applyFilters( 'stackable.block-styles.edit', output, getUniqueBlockClass( attributes.uniqueId ) )
return css ? : null
-} )
+}
// Unify in a single component so it's easier to write block styles.
const _BlockCss = props => {
@@ -472,7 +471,7 @@ const _BlockCss = props => {
// If no compileCssTo prop is provided, then we just print the styles directly.
if ( ! props.compileCssTo ) {
- return
+ return
}
// Else, it means we need to compile all the css into the object passed to the compileCssTo prop.
// Call as a function so we just return the string quickly.