sometimes do not use useAttributeEditHandlers

gambitph · Aug 20, 2024 · aacf30c · aacf30c
1 parent 3e987d5
commit aacf30c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/src/block-components/button/edit.js b/src/block-components/button/edit.js
@@ -12,10 +12,7 @@ import {
 	AdvancedSelectControl,
 } from '~stackable/components'
 import { i18n } from 'stackable'
-import {
-	useAttributeEditHandlers,
-	useBlockAttributesContext,
-} from '~stackable/hooks'
+import { useBlockAttributesContext } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
@@ -31,6 +28,7 @@ import { Icon as _Icon } from '../icon'
 import { applyFilters } from '@wordpress/hooks'
 import { useSelect } from '@wordpress/data'
 import { useBlockEditContext } from '@wordpress/block-editor'
+import { getAttributeNameFunc } from '~stackable/util'
 
 export const Icon = props => (
 	<_Icon.InspectorControls
@@ -111,9 +109,7 @@ export const ColorsControls = props => {
 		attrNameTemplate = 'button%s',
 	} = props
 
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const getAttrName = getAttributeNameFunc( attrNameTemplate )
 
 	const buttonBackgroundColorType = useBlockAttributesContext( attributes => {
 		return attributes[ getAttrName( 'backgroundColorType' ) ]
@@ -182,9 +178,7 @@ const SizeControls = props => {
 		attrNameTemplate = 'button%s',
 	} = props
 
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const getAttrName = getAttributeNameFunc( attrNameTemplate )
 
 	return ( <>
 		{ props.hasFullWidth && (

diff --git a/src/block-components/helpers/size/edit.js b/src/block-components/helpers/size/edit.js
@@ -13,6 +13,7 @@ import { useAttributeEditHandlers, useDeviceType } from '~stackable/hooks'
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
+import { getAttributeNameFunc } from '~stackable/util'
 
 const Layout = props => {
 	const deviceType = useDeviceType()
@@ -114,9 +115,8 @@ Layout.defaultProps = {
 }
 
 const Spacing = props => {
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( props.attrNameTemplate )
+	// Don't use the hook form so we don't rerender
+	const getAttrName = getAttributeNameFunc( props.attrNameTemplate )
 
 	const {
 		labelPaddings = __( 'Paddings', i18n ),

diff --git a/src/block-components/separator/edit.js b/src/block-components/separator/edit.js
@@ -12,7 +12,8 @@ import {
 	InspectorStyleControls,
 } from '~stackable/components'
 import {
-	useAttributeEditHandlers, useBlockAttributesContext, useBlockSetAttributesContext,
+	useBlockAttributesContext,
+	useBlockSetAttributesContext,
 } from '~stackable/hooks'
 
 /*
@@ -26,6 +27,7 @@ import { i18n, showProNotice } from 'stackable'
 import { __ } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
 import { useMemo } from '@wordpress/element'
+import { getAttributeNameFunc } from '~stackable/util'
 
 const SEPARATOR_SHADOWS = [
 	'none',
@@ -47,9 +49,7 @@ const SeparatorControls = props => {
 		hasFlipVertically,
 	} = props
 
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const getAttrName = getAttributeNameFunc( attrNameTemplate )
 
 	const separatorShadowOptions = applyFilters( 'stackable.separator.shadows', SEPARATOR_SHADOWS )
 

diff --git a/src/util/attributes/index.js b/src/util/attributes/index.js
@@ -186,6 +186,14 @@ export const getAttributeName = ( attrName, deviceType = 'desktop', hoverState =
 	return `${ attrName }${ deviceAttrName }${ hoverAttrName }`
 }
 
+// This can be used instead of using a hook to prevent rerenderes:
+// const { getAttrName } = useAttributeEditHandlers( attrNameTemplate )
+// Now:
+// const getAttrName = getAttrNameFunc( attrNameTemplate )
+export const getAttributeNameFunc = attrNameTemplate => ( attrName, device = 'desktop', state = 'normal' ) => {
+	return getAttributeName( getAttrNameFunction( attrNameTemplate )( attrName ), device, state )
+}
+
 /**
  * Checks whether an attribute is empty or is considered as an unset block
  * attribute. Handles top, left, right and bottom default attribute.