From bbd7e8e3a233ef8f7401f44431616ff5eb61d48a Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Tue, 5 May 2026 11:11:48 +0800 Subject: [PATCH 1/3] fix: early return in toolbar button to avoid unneeded calls to useInteractions --- .../plugins/block-toolbar-button/index.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/editor/plugins/block-toolbar-button/index.js b/src/editor/plugins/block-toolbar-button/index.js index 0a082be..4bb946e 100644 --- a/src/editor/plugins/block-toolbar-button/index.js +++ b/src/editor/plugins/block-toolbar-button/index.js @@ -27,12 +27,24 @@ import useBlockHasInteraction from './use-block-has-interaction' const withBlockToolbarButton = createHigherOrderComponent( BlockEdit => { return props => { + // If the Sidebar isn't available, then do not render the toolbar button + // because we will have no place to edit interactions. + if ( ! dispatch( 'core/edit-post' ) && ! dispatch( 'core/edit-site' ) ) { + return + } + const [ isPopoverOpen, setIsPopoverOpen ] = useState( false ) const hasAnchorAttribute = useSelect( select => { return !! select( 'core/blocks' ).getBlockType( props.name )?.attributes?.anchor }, [ props.name ] ) + // Only blocks that have an anchor attribute can have interactions. + // because we need the ID of the block to be able to target it. + if ( ! hasAnchorAttribute ) { + return + } + const { interactions, deleteInteraction } = useInteractions() const interactionKeys = useBlockHasInteraction( props.attributes.anchor ) const defaultPopoverMode = ! interactionKeys.length ? 'add' : 'select' @@ -80,18 +92,6 @@ const withBlockToolbarButton = createHigherOrderComponent( BlockEdit => { } }, [ isPopoverOpen, popoverMode, props.clientId, props.name, setInteractionLibraryTarget, setInteractionLibraryMode ] ) - // If the Sidebar isn't available, then do not render the toolbar button - // because we will have no place to edit interactions. - if ( ! dispatch( 'core/edit-post' ) && ! dispatch( 'core/edit-site' ) ) { - return - } - - // Only blocks that have an anchor attribute can have interactions. - // because we need the ID of the block to be able to target it. - if ( ! hasAnchorAttribute ) { - return - } - const onAddInteractionHandler = interactionType => { // Open the sidebar openInteractionsSidebar() From 8ca29747924025328cbbcd528222e8f16b20176a Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Tue, 5 May 2026 14:14:11 +0800 Subject: [PATCH 2/3] fix: isolate interactionsFiltered into separate useSelect to reduce editor re-renders and prevent Kadence inspector tab reset --- src/editor/hooks/use-interactions.js | 7 ++++-- .../plugins/block-toolbar-button/index.js | 24 +++++++++---------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/editor/hooks/use-interactions.js b/src/editor/hooks/use-interactions.js index 10d6c85..bd80de7 100644 --- a/src/editor/hooks/use-interactions.js +++ b/src/editor/hooks/use-interactions.js @@ -244,19 +244,22 @@ const useInteractions = () => { } const interactions = select( 'interact/interactions' ).getInteractions() - const interactionsFiltered = interactions.filter( interaction => isInteractionShown( interaction, select ) ) return { interactions, - interactionsFiltered, setInteractions, updateInteraction, deleteInteraction, } }, [] ) + const interactionsFiltered = useSelect( select => { + return data.interactions.filter( interaction => isInteractionShown( interaction, select ) ) + }, [ data ] ) + return { loadingError: useSelect( select => select( 'interact/interactions' ).getLoadingError(), [] ), + interactionsFiltered, ...data, } } diff --git a/src/editor/plugins/block-toolbar-button/index.js b/src/editor/plugins/block-toolbar-button/index.js index 4bb946e..0a082be 100644 --- a/src/editor/plugins/block-toolbar-button/index.js +++ b/src/editor/plugins/block-toolbar-button/index.js @@ -27,24 +27,12 @@ import useBlockHasInteraction from './use-block-has-interaction' const withBlockToolbarButton = createHigherOrderComponent( BlockEdit => { return props => { - // If the Sidebar isn't available, then do not render the toolbar button - // because we will have no place to edit interactions. - if ( ! dispatch( 'core/edit-post' ) && ! dispatch( 'core/edit-site' ) ) { - return - } - const [ isPopoverOpen, setIsPopoverOpen ] = useState( false ) const hasAnchorAttribute = useSelect( select => { return !! select( 'core/blocks' ).getBlockType( props.name )?.attributes?.anchor }, [ props.name ] ) - // Only blocks that have an anchor attribute can have interactions. - // because we need the ID of the block to be able to target it. - if ( ! hasAnchorAttribute ) { - return - } - const { interactions, deleteInteraction } = useInteractions() const interactionKeys = useBlockHasInteraction( props.attributes.anchor ) const defaultPopoverMode = ! interactionKeys.length ? 'add' : 'select' @@ -92,6 +80,18 @@ const withBlockToolbarButton = createHigherOrderComponent( BlockEdit => { } }, [ isPopoverOpen, popoverMode, props.clientId, props.name, setInteractionLibraryTarget, setInteractionLibraryMode ] ) + // If the Sidebar isn't available, then do not render the toolbar button + // because we will have no place to edit interactions. + if ( ! dispatch( 'core/edit-post' ) && ! dispatch( 'core/edit-site' ) ) { + return + } + + // Only blocks that have an anchor attribute can have interactions. + // because we need the ID of the block to be able to target it. + if ( ! hasAnchorAttribute ) { + return + } + const onAddInteractionHandler = interactionType => { // Open the sidebar openInteractionsSidebar() From 851b6bce9b6b5ea4b6d4de35d67b6c4e964087b4 Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Tue, 5 May 2026 19:15:30 +0800 Subject: [PATCH 3/3] fix: use specific dependency to avoid extra calls --- src/editor/hooks/use-interactions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/hooks/use-interactions.js b/src/editor/hooks/use-interactions.js index bd80de7..c007ebb 100644 --- a/src/editor/hooks/use-interactions.js +++ b/src/editor/hooks/use-interactions.js @@ -255,7 +255,7 @@ const useInteractions = () => { const interactionsFiltered = useSelect( select => { return data.interactions.filter( interaction => isInteractionShown( interaction, select ) ) - }, [ data ] ) + }, [ data.interactions ] ) return { loadingError: useSelect( select => select( 'interact/interactions' ).getLoadingError(), [] ),