testing hook to avoid add/remove filter on every render

WordPress · Sep 28, 2020 · 970bca5 · 970bca5
1 parent f78c3c4
commit 970bca5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 39 deletions.
diff --git a/packages/components/src/edit-in-place-control/index.js b/packages/components/src/edit-in-place-control/index.js
@@ -14,7 +14,7 @@ import { ENTER, ESCAPE } from '@wordpress/keycodes';
  */
 import Button from '../button';
 
-function EditInPlaceControl( { label = '', onClick = noop, onChange = noop } ) {
+function EditInPlaceControl( { label = '', onClick = noop, onUpdate = noop } ) {
 	const [ edit, setEdit ] = useState( false );
 	const [ value, setValue ] = useState( label );
 	const prevValue = useRef();
@@ -56,7 +56,7 @@ function EditInPlaceControl( { label = '', onClick = noop, onChange = noop } ) {
 					} }
 					onBlur={ () => {
 						setEdit( false );
-						onChange( value );
+						onUpdate( value );
 					} }
 					onKeyDown={ ( event ) => {
 						if (
@@ -69,7 +69,7 @@ function EditInPlaceControl( { label = '', onClick = noop, onChange = noop } ) {
 								setValue( prevValue.current );
 							} else {
 								setEdit( ! edit );
-								onChange( value );
+								onUpdate( value );
 							}
 						}
 					} }

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -42,9 +42,7 @@ export default function Layout( { blockEditorSettings } ) {
 
 	useMenuNotifications( selectedMenuId );
 
-	useNavigationBlockWithName( {
-		menuId: selectedMenuId,
-	} );
+	useNavigationBlockWithName( selectedMenuId );
 
 	return (
 		<ErrorBoundary>

diff --git a/packages/edit-navigation/src/components/layout/use-navigation-block-with-name.js b/packages/edit-navigation/src/components/layout/use-navigation-block-with-name.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { BlockControls } from '@wordpress/block-editor';
@@ -10,45 +11,49 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 
-export default function useNavigationBlockWithName( { menuId } ) {
+export default function useNavigationBlockWithName( menuId ) {
 	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ), [
 		menuId,
 	] );
 
 	const { saveMenu } = useDispatch( 'core' );
 
-	removeFilter( 'editor.BlockEdit', 'core/edit-navigation/with-menu-name' );
-
-	const withMenuName = createHigherOrderComponent(
-		( BlockEdit ) => ( props ) => {
-			if ( props.name !== 'core/navigation' ) {
-				return <BlockEdit { ...props } />;
-			}
-			return (
-				<>
-					<BlockEdit { ...props } />
-					<BlockControls>
-						<ToolbarGroup>
-							<EditInPlaceControl
-								label={ menu?.name ?? '(untitled menu)' }
-								onChange={ ( value ) => {
-									saveMenu( {
-										...menu,
-										name: value || '(untitled menu)',
-									} );
-								} }
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-				</>
+	useEffect( () => {
+		if ( menu ) {
+			const withMenuName = createHigherOrderComponent(
+				( BlockEdit ) => ( props ) => {
+					if ( props.name !== 'core/navigation' ) {
+						return <BlockEdit { ...props } />;
+					}
+					return (
+						<>
+							<BlockEdit { ...props } />
+							<BlockControls>
+								<ToolbarGroup>
+									<EditInPlaceControl
+										label={ menu?.name ?? '(untitled menu)' }
+										onUpdate={ ( value ) => {
+											saveMenu( {
+												...menu,
+												name: value || '(untitled menu)',
+											} );
+										} }
+									/>
+								</ToolbarGroup>
+							</BlockControls>
+						</>
+					);
+				},
+				'withMenuName'
+			);
+			addFilter(
+				'editor.BlockEdit',
+				'core/edit-navigation/with-menu-name',
+				withMenuName
 			);
-		},
-		'withMenuName'
-	);
+			return () => removeFilter( 'editor.BlockEdit', 'core/edit-navigation/with-menu-name',  withMenuName );
+		}
+	}, [ menu ] );
+
 
-	addFilter(
-		'editor.BlockEdit',
-		'core/edit-navigation/with-menu-name',
-		withMenuName
-	);
 }