From 4d5795f758b3500a325b5fac5516d70d8ff73f8e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 12 Aug 2024 14:05:40 +0100 Subject: [PATCH] Block Insertion: Clear the insertion point when selecting a different block or clearing block selection (#64048) * Clear the insertion point when selecting a different block or clearing block selection * Use the block insertion point in the inserter, not the the one from the editor package * use block insertion point index * Don't change the insertion point when clearing block selection * Also set the insertion point in the quick inserter Co-authored-by: scruffian Co-authored-by: MaggieCabrera --- .../src/components/inserter/quick-inserter.js | 5 ++++- packages/block-editor/src/store/reducer.js | 2 ++ .../src/components/inserter-sidebar/index.js | 14 ++++++++++---- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index aa3d54e87a7fd1..f4c52c04d20c4b 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -9,7 +9,7 @@ import clsx from 'clsx'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button, SearchControl } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -82,6 +82,8 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); + const { showInsertionPoint } = useDispatch( blockEditorStore ); + // When clicking Browse All select the appropriate block so as // the insertion point can work as expected. const onBrowseAll = () => { @@ -91,6 +93,7 @@ export default function QuickInserter( { filterValue, onSelect, } ); + showInsertionPoint( rootClientId, insertionIndex ); }; let maxBlockPatterns = 0; diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index cd4569c45e5801..91d853a50a6a42 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1624,6 +1624,8 @@ export function insertionPoint( state = null, action ) { } case 'HIDE_INSERTION_POINT': + case 'CLEAR_SELECTED_BLOCK': + case 'SELECT_BLOCK': return null; } diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 675ae5e11544bc..bf613b5c8c001a 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -22,6 +22,7 @@ const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis ); export default function InserterSidebar() { const { + blockInsertionPoint, blockSectionRootClientId, inserterSidebarToggleRef, insertionPoint, @@ -33,8 +34,12 @@ export default function InserterSidebar() { getInsertionPoint, isPublishSidebarOpened, } = unlock( select( editorStore ) ); - const { getBlockRootClientId, __unstableGetEditorMode, getSettings } = - select( blockEditorStore ); + const { + getBlockInsertionPoint, + getBlockRootClientId, + __unstableGetEditorMode, + getSettings, + } = select( blockEditorStore ); const { get } = select( preferencesStore ); const { getActiveComplementaryArea } = select( interfaceStore ); const getBlockSectionRootClientId = () => { @@ -47,6 +52,7 @@ export default function InserterSidebar() { return getBlockRootClientId(); }; return { + blockInsertionPoint: getBlockInsertionPoint(), inserterSidebarToggleRef: getInserterSidebarToggleRef(), insertionPoint: getInsertionPoint(), showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ), @@ -85,9 +91,9 @@ export default function InserterSidebar() { showInserterHelpPanel shouldFocusBlock={ isMobileViewport } rootClientId={ - blockSectionRootClientId ?? insertionPoint.rootClientId + blockSectionRootClientId ?? blockInsertionPoint.rootClientId } - __experimentalInsertionIndex={ insertionPoint.insertionIndex } + __experimentalInsertionIndex={ blockInsertionPoint.index } onSelect={ insertionPoint.onSelect } __experimentalInitialTab={ insertionPoint.tab } __experimentalInitialCategory={ insertionPoint.category }