From 8b818387dcae1e41acd613b5afa1c8b6332de2ff Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 5 May 2020 11:23:27 +0100 Subject: [PATCH] Fix inserter slot --- .../src/components/inserter/block-list.js | 35 ++++----- .../src/components/inserter/menu.js | 71 +++++++++++-------- .../src/slot-fill/bubbles-virtually/slot.js | 1 + 3 files changed, 61 insertions(+), 46 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index 3b9e2f0a4e40d..cbc7569170655 100644 --- 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 index 3d9864fc14a3e..46219bbc27101 100644 --- 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 index 0483a5057e1f2..f90f8b8f8628c 100644 --- 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 );