update onSplit

gambitph · Jan 8, 2024 · 17c92d4 · 17c92d4
1 parent 9099941
commit 17c92d4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 29 deletions.
diff --git a/src/block/icon-list-item/edit.js b/src/block/icon-list-item/edit.js
@@ -4,7 +4,10 @@
 import { TextStyles } from './style'
 import { getUseSvgDef } from '../icon-list-new/util'
 import {
-	useOutdentListItem, useIndentListItem, useMerge,
+	useOutdentListItem,
+	useIndentListItem,
+	useMerge,
+	useOnSplit,
 } from './util'
 
 /**
@@ -37,7 +40,6 @@ import { useBlockContext } from '~stackable/hooks'
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks'
 import {
 	useBlockProps, useInnerBlocksProps, BlockControls,
 } from '@wordpress/block-editor'
@@ -65,11 +67,15 @@ const Edit = props => {
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
 	const {
-		'stackable/ordered': ordered, 'stackable/uniqueId': parentUniqueId, 'stackable/isIndented': isIndented,
+		'stackable/ordered': ordered,
+		'stackable/uniqueId': parentUniqueId,
+		'stackable/isIndented': isIndented,
 	} = context
 
 	const blockContext = useBlockContext()
-	const { blockIndex } = blockContext
+	const {
+		blockIndex,
+	} = blockContext
 
 	useEffect( () => {
 		setAttributes( { ordered } )
@@ -93,28 +99,7 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
-	const onSplit = ( value, isOriginal ) => {
-		// TODO: update when block is split and has inner blocks
-		let block
-
-		if ( isOriginal || value ) {
-			block = createBlock( 'stackable/icon-list-item', {
-				...attributes,
-				text: value,
-			} )
-		} else {
-			block = createBlock( 'stackable/icon-list-item', {
-				...attributes,
-				text: '',
-			} )
-		}
-
-		if ( isOriginal ) {
-			block.clientId = clientId
-		}
-
-		return block
-	}
+	const onSplit = useOnSplit( clientId, attributes )
 
 	const onMerge = useMerge( blockContext, clientId, attributes.text )
 

diff --git a/src/block/icon-list-item/util.js b/src/block/icon-list-item/util.js
@@ -67,7 +67,7 @@ export const useOutdentListItem = ( blockContext, clientId ) => {
 				removeBlock( parentIconListClientId )
 			}
 		} )
-	}, [ blockContext ] )
+	}, [ blockContext, clientId ] )
 }
 
 export const useIndentListItem = ( blockContext, clientId ) => {
@@ -87,7 +87,7 @@ export const useIndentListItem = ( blockContext, clientId ) => {
 	return useCallback( () => {
 		// Clone the icon list item to be indented
 		// and the preceding icon list item.
-		const item = [ cloneBlock( getBlock( clientId ) ) ]
+		const item = cloneBlock( getBlock( clientId ) )
 		const previousItem = cloneBlock( getBlock( previousBlock.clientId ) )
 
 		// Create an icon list block for the preceding icon list item if it doesn't exist.
@@ -99,7 +99,7 @@ export const useIndentListItem = ( blockContext, clientId ) => {
 			// Get the last icon list block of the preceding icon list item.
 			innerBlocks[ previousItem.innerBlocks.length - 1 ].
 			// Add the cloned icon list item to the end of the preceding icon list item's last icon list block.
-			innerBlocks.push( ...item )
+			innerBlocks.push( item )
 
 		// Replace the preceding icon list item with the cloned icon list item.
 		replaceBlocks( [ previousBlock.clientId, clientId ], [ previousItem ] )
@@ -166,3 +166,35 @@ export const useMerge = ( blockContext, clientId, text ) => {
 		} )
 	}, [ blockContext, clientId ] )
 }
+
+export const useOnSplit = ( clientId, attributes ) => {
+	const {
+		getBlock,
+	} = useSelect( 'core/block-editor' )
+
+	return useCallback( ( value, isOriginal ) => {
+		const block = getBlock( clientId )
+		let newBlock
+
+		if ( isOriginal || value ) {
+			newBlock = cloneBlock( block, {
+				...attributes,
+				text: value,
+			} )
+		} else {
+			newBlock = cloneBlock( block, {
+				...attributes,
+				text: '',
+			} )
+		}
+
+		if ( isOriginal ) {
+			newBlock.clientId = clientId
+			if ( newBlock.innerBlocks?.length ) {
+				newBlock.innerBlocks = []
+			}
+		}
+
+		return newBlock
+	}, [ clientId, attributes ] )
+}