Fix inserter slot

WordPress · May 5, 2020 · 8b81838 · 8b81838
1 parent fad752a
commit 8b81838
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 46 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js
@@ -24,7 +24,7 @@ import { addQueryArgs } from '@wordpress/url';
 import { controlsRepeat } from '@wordpress/icons';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useEffect, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -100,22 +100,25 @@ function InserterBlockList( {
 		}
 	}, [] );
 
-	const onSelectItem = ( item ) => {
-		const { name, title, initialAttributes, innerBlocks } = item;
-		const insertedBlock = createBlock(
-			name,
-			initialAttributes,
-			createBlocksFromInnerBlocksTemplate( innerBlocks )
-		);
+	const onSelectItem = useCallback(
+		( item ) => {
+			const { name, title, initialAttributes, innerBlocks } = item;
+			const insertedBlock = createBlock(
+				name,
+				initialAttributes,
+				createBlocksFromInnerBlocksTemplate( innerBlocks )
+			);
 
-		onInsert( insertedBlock );
+			onInsert( insertedBlock );
 
-		if ( ! selectBlockOnInsert ) {
-			// translators: %s: the name of the block that has been added
-			const message = sprintf( __( '%s block added' ), title );
-			speak( message );
-		}
-	};
+			if ( ! selectBlockOnInsert ) {
+				// translators: %s: the name of the block that has been added
+				const message = sprintf( __( '%s block added' ), title );
+				speak( message );
+			}
+		},
+		[ onInsert, selectBlockOnInsert ]
+	);
 
 	const filteredItems = useMemo( () => {
 		return searchBlockItems( items, categories, collections, filterValue );
@@ -190,7 +193,7 @@ function InserterBlockList( {
 
 	const hasItems = ! isEmpty( filteredItems );
 	const hasChildItems = childItems.length > 0;
-	const slot = { fills: [ 'test' ] }; //useSlot( __experimentalInserterMenuExtension.Slot.slotName );
+	const slot = useSlot( __experimentalInserterMenuExtension.Slot.slotName );
 	const hasInserterExtensionFills = Boolean(
 		slot.fills && slot.fills.length
 	);

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -6,7 +6,7 @@ import { includes, pick } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useCallback } from '@wordpress/element';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -91,7 +91,7 @@ function InserterMenu( {
 	// Since it's a function only called when the event handlers are called,
 	// it's fine to extract it.
 	// eslint-disable-next-line no-restricted-syntax
-	function getInsertionIndex() {
+	const getInsertionIndex = useCallback( () => {
 		// If the clientId is defined, we insert at the position of the block.
 		if ( clientId ) {
 			return getBlockIndex( clientId, destinationRootClientId );
@@ -105,37 +105,48 @@ function InserterMenu( {
 
 		// Otherwise, we insert at the end of the current rootClientId
 		return getBlockOrder( destinationRootClientId ).length;
-	}
+	}, [ isAppender, clientId, destinationRootClientId ] );
 
-	const onInsertBlocks = ( blocks ) => {
-		const selectedBlock = getSelectedBlock();
-		if (
-			! isAppender &&
-			selectedBlock &&
-			isUnmodifiedDefaultBlock( selectedBlock )
-		) {
-			replaceBlocks( selectedBlock.clientId, blocks );
-		} else {
-			insertBlocks(
-				blocks,
-				getInsertionIndex(),
-				destinationRootClientId,
-				__experimentalSelectBlockOnInsert
-			);
-		}
+	const onInsertBlocks = useCallback(
+		( blocks ) => {
+			const selectedBlock = getSelectedBlock();
+			if (
+				! isAppender &&
+				selectedBlock &&
+				isUnmodifiedDefaultBlock( selectedBlock )
+			) {
+				replaceBlocks( selectedBlock.clientId, blocks );
+			} else {
+				insertBlocks(
+					blocks,
+					getInsertionIndex(),
+					destinationRootClientId,
+					__experimentalSelectBlockOnInsert
+				);
+			}
 
-		onSelect();
-	};
+			onSelect();
+		},
+		[
+			isAppender,
+			getInsertionIndex,
+			destinationRootClientId,
+			__experimentalSelectBlockOnInsert,
+		]
+	);
 
-	const onHover = ( item ) => {
-		setHoveredItem( item );
-		if ( item ) {
-			const index = getInsertionIndex();
-			showInsertionPoint( destinationRootClientId, index );
-		} else {
-			hideInsertionPoint();
-		}
-	};
+	const onHover = useCallback(
+		( item ) => {
+			setHoveredItem( item );
+			if ( item ) {
+				const index = getInsertionIndex();
+				showInsertionPoint( destinationRootClientId, index );
+			} else {
+				hideInsertionPoint();
+			}
+		},
+		[ getInsertionIndex, destinationRootClientId ]
+	);
 
 	const blocksTab = (
 		<>

diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js
@@ -33,6 +33,7 @@ export default function Slot( {
 
 	// fillProps may be an update that interact with the layout, so
 	// we useLayoutEffect
+	// Make sure to memoize your fill Props to avoid infinite loops.
 	useLayoutEffect( () => {
 		if ( slot.fillProps && ! isShallowEqual( slot.fillProps, fillProps ) ) {
 			registry.updateSlot( name, ref, fillProps );