add visibility status to innerBlocks

WordPress · Feb 17, 2021 · 310156f · 310156f
1 parent ea9c9c4
commit 310156f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 41 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -66,12 +66,12 @@ function Navigation( {
 
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
-	const containerHeight = useMaxHeight( navItemsElement );
-	const { isWrapping } = useAutohide(
-		clientId,
-		innerBlocks,
-		navItemsElement
+	const autohideParams = useMemo(
+		() => [ clientId, innerBlocks, navItemsElement ],
+		[ innerBlocks ]
 	);
+	const containerHeight = useMaxHeight( navItemsElement );
+	const { isWrapping } = useAutohide( ...autohideParams );
 
 	const blockProps = useBlockProps( {
 		className: classnames( className, {

diff --git a/packages/block-library/src/navigation/use-autohide.js b/packages/block-library/src/navigation/use-autohide.js
@@ -5,16 +5,19 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
 
 export default function useAutohide( clientId, innerBlocks, ref ) {
 	const [ state, setState ] = useState( {
 		isWrapping: false,
 		visibilityMap: [],
 	} );
 
-	const handleResize = debounce( ( nav ) => {
+	const getRef = () => ref;
+
+	const handleResize = debounce( () => {
+		const { current: nav } = getRef();
 		const { bottom } = nav.getBoundingClientRect();
 
 		const items = Array.from( nav.childNodes );
@@ -27,54 +30,38 @@ export default function useAutohide( clientId, innerBlocks, ref ) {
 				[ blockId ]: isHidden,
 			};
 		}, {} );
-		const hasWrappedElements = Object.values( visibilityMap ).some(
+		const isWrapping = Object.values( visibilityMap ).some(
 			( item ) => item.isHidden
 		);
 
 		setState( {
-			isWrapping: hasWrappedElements,
+			isWrapping,
 			visibilityMap,
 		} );
 	}, 100 );
 
 	useEffect( () => {
-		const element = ref.current;
-
-		if ( ! element ) {
-			return;
-		}
-
-		const { ownerDocument } = element;
-
-		window.addEventListener(
-			'resize',
-			() => handleResize( element ),
-			false
-		);
+		window.addEventListener( 'resize', handleResize );
 
-		handleResize( element );
+		return () => window.removeEvenetListener( 'resize', handleResize );
+	}, [] );
 
-		return () => {
-			window.removeEventListener( 'resize', () =>
-				handleResize( element )
-			);
-		};
-	}, [ innerBlocks ] );
+	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
 
-	const updatedBlocks = innerBlocks.map( ( block ) => ( {
-		...block,
-		isHidden: state.visibilityMap[ block.clientId ],
-	} ) );
+	/*
+		Memoize innerBlocks value in order to avoid an infinite look of
+		replacing innerBlocks and calling replaceInnerBlocks again on the new blocks.
+	*/
+	const memoizedInnerBlocks = useMemo( () => innerBlocks, [] );
 
-	console.log( updatedBlocks );
+	useMemo( () => {
+		const updatedBlocks = memoizedInnerBlocks.map( ( block ) => ( {
+			...block,
+			isHidden: state.visibilityMap[ block.clientId ],
+		} ) );
 
-	useDispatch( ( dispatch ) =>
-		dispatch( 'core/block-editor' ).replaceInnerBlocks(
-			clientId,
-			updatedBlocks,
-			true
-		)
-	);
+		replaceInnerBlocks( clientId, updatedBlocks, true );
+	}, [ state.visibilityMap, memoizedInnerBlocks ] );
 
 	return state;
 }