From d6f3a6165e26cef4c00f7a4f406a8b015a2dc08d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 22 Dec 2025 10:39:38 +0100 Subject: [PATCH] Remove OpenedBlockSettingsMenu shared state --- .../block-settings-dropdown.js | 33 ------------------- .../src/components/list-view/block.js | 4 --- .../block-editor/src/store/private-actions.js | 13 -------- .../src/store/private-selectors.js | 10 ------ packages/block-editor/src/store/reducer.js | 16 --------- .../src/store/test/private-actions.js | 17 ---------- .../block-editor/src/store/test/reducer.js | 25 -------------- 7 files changed, 118 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 4f3ddfba129c35..49d5769a25c2d1 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -77,7 +77,6 @@ export function BlockSettingsDropdown( { ...props } ) { // Get the client id of the current block for this menu, if one is set. - const currentClientId = block?.clientId; const count = clientIds.length; const firstBlockClientId = clientIds[ 0 ]; @@ -86,7 +85,6 @@ export function BlockSettingsDropdown( { parentBlockType, previousBlockClientId, selectedBlockClientIds, - openedBlockSettingsMenu, isContentOnly, isZoomOut, } = useSelect( @@ -97,7 +95,6 @@ export function BlockSettingsDropdown( { getPreviousBlockClientId, getSelectedBlockClientIds, getBlockAttributes, - getOpenedBlockSettingsMenu, getBlockEditingMode, isZoomOut: _isZoomOut, } = unlock( select( blockEditorStore ) ); @@ -121,7 +118,6 @@ export function BlockSettingsDropdown( { previousBlockClientId: getPreviousBlockClientId( firstBlockClientId ), selectedBlockClientIds: getSelectedBlockClientIds(), - openedBlockSettingsMenu: getOpenedBlockSettingsMenu(), isContentOnly: getBlockEditingMode( firstBlockClientId ) === 'contentOnly', isZoomOut: _isZoomOut(), @@ -133,10 +129,6 @@ export function BlockSettingsDropdown( { const { getBlockOrder, getSelectedBlockClientIds } = useSelect( blockEditorStore ); - const { setOpenedBlockSettingsMenu } = unlock( - useDispatch( blockEditorStore ) - ); - const shortcuts = useSelect( ( select ) => { const { getShortcutRepresentation } = select( keyboardShortcutsStore ); return { @@ -191,29 +183,6 @@ export function BlockSettingsDropdown( { const parentBlockIsSelected = selectedBlockClientIds?.includes( firstParentClientId ); - // When a currentClientId is in use, treat the menu as a controlled component. - // This ensures that only one block settings menu is open at a time. - // This is a temporary solution to work around an issue with `onFocusOutside` - // where it does not allow a dropdown to be closed if focus was never within - // the dropdown to begin with. Examples include a user either CMD+Clicking or - // right clicking into an inactive window. - // See: https://github.com/WordPress/gutenberg/pull/54083 - const open = ! currentClientId - ? undefined - : openedBlockSettingsMenu === currentClientId || false; - - function onToggle( localOpen ) { - if ( localOpen && openedBlockSettingsMenu !== currentClientId ) { - setOpenedBlockSettingsMenu( currentClientId ); - } else if ( - ! localOpen && - openedBlockSettingsMenu && - openedBlockSettingsMenu === currentClientId - ) { - setOpenedBlockSettingsMenu( undefined ); - } - } - const shouldShowBlockParentMenuItem = ! parentBlockIsSelected && !! firstParentClientId; @@ -254,8 +223,6 @@ export function BlockSettingsDropdown( { label={ __( 'Options' ) } className="block-editor-block-settings-menu" popoverProps={ POPOVER_PROPS } - open={ open } - onToggle={ onToggle } noIcons { ...props } > diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index e917ff4059e2a6..d69715b787f4d8 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -96,7 +96,6 @@ function ListViewBlock( { removeBlocks, insertAfterBlock, insertBeforeBlock, - setOpenedBlockSettingsMenu, updateBlockAttributes, } = unlock( useDispatch( blockEditorStore ) ); const debouncedToggleBlockHighlight = useDebounce( @@ -298,7 +297,6 @@ function ListViewBlock( { const newlySelectedBlocks = getSelectedBlockClientIds(); // Focus the first block of the newly inserted blocks, to keep focus within the list view. - setOpenedBlockSettingsMenu( undefined ); updateFocusAndSelection( newlySelectedBlocks[ 0 ], false ); } else if ( isMatch( 'core/block-editor/insert-after', event ) ) { event.preventDefault(); @@ -308,7 +306,6 @@ function ListViewBlock( { const newlySelectedBlocks = getSelectedBlockClientIds(); // Focus the first block of the newly inserted blocks, to keep focus within the list view. - setOpenedBlockSettingsMenu( undefined ); updateFocusAndSelection( newlySelectedBlocks[ 0 ], false ); } else if ( isMatch( 'core/block-editor/select-all', event ) ) { event.preventDefault(); @@ -368,7 +365,6 @@ function ListViewBlock( { speak( __( 'Selected blocks are grouped.' ) ); const newlySelectedBlocks = getSelectedBlockClientIds(); // Focus the first block of the newly inserted blocks, to keep focus within the list view. - setOpenedBlockSettingsMenu( undefined ); updateFocusAndSelection( newlySelectedBlocks[ 0 ], false ); } } else if ( diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 453c0583604be2..82b6104e9cd092 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -275,19 +275,6 @@ export function setBlockRemovalRules( rules = false ) { }; } -/** - * Sets the client ID of the block settings menu that is currently open. - * - * @param {?string} clientId The block client ID. - * @return {Object} Action object. - */ -export function setOpenedBlockSettingsMenu( clientId ) { - return { - type: 'SET_OPENED_BLOCK_SETTINGS_MENU', - clientId, - }; -} - export function setStyleOverride( id, style ) { return { type: 'SET_STYLE_OVERRIDE', diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 5c4ab1bf8e9d34..dda77c222f8f66 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -198,16 +198,6 @@ export function getBlockRemovalRules( state ) { return state.blockRemovalRules; } -/** - * Returns the client ID of the block settings menu that is currently open. - * - * @param {Object} state Global application state. - * @return {string|null} The client ID of the block menu that is currently open. - */ -export function getOpenedBlockSettingsMenu( state ) { - return state.openedBlockSettingsMenu; -} - /** * Returns all style overrides, intended to be merged with global editor styles. * diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 65868e4b6b9eb8..d98871cd49324b 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -2009,21 +2009,6 @@ export function blockEditingModes( state = new Map(), action ) { return state; } -/** - * Reducer returning the clientId of the block settings menu that is currently open. - * - * @param {string|null} state Current state. - * @param {Object} action Dispatched action. - * - * @return {string|null} Updated state. - */ -export function openedBlockSettingsMenu( state = null, action ) { - if ( 'SET_OPENED_BLOCK_SETTINGS_MENU' === action.type ) { - return action?.clientId ?? null; - } - return state; -} - /** * Reducer returning a map of style IDs to style overrides. * @@ -2145,7 +2130,6 @@ const combinedReducers = combineReducers( { styleOverrides, removalPromptData, blockRemovalRules, - openedBlockSettingsMenu, registeredInserterMediaCategories, zoomLevel, hasBlockSpotlight, diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js index d54a519c9056b6..a390bdd3939e5c 100644 --- a/packages/block-editor/src/store/test/private-actions.js +++ b/packages/block-editor/src/store/test/private-actions.js @@ -7,7 +7,6 @@ import { expandBlock, __experimentalUpdateSettings, setInsertionPoint, - setOpenedBlockSettingsMenu, startDragging, stopDragging, } from '../private-actions'; @@ -84,22 +83,6 @@ describe( 'private actions', () => { } ); } ); - describe( 'setOpenedBlockSettingsMenu', () => { - it( 'should return the SET_OPENED_BLOCK_SETTINGS_MENU action', () => { - expect( setOpenedBlockSettingsMenu() ).toEqual( { - clientId: undefined, - type: 'SET_OPENED_BLOCK_SETTINGS_MENU', - } ); - } ); - - it( 'should return the SET_OPENED_BLOCK_SETTINGS_MENU action with client id if provided', () => { - expect( setOpenedBlockSettingsMenu( 'abcd' ) ).toEqual( { - clientId: 'abcd', - type: 'SET_OPENED_BLOCK_SETTINGS_MENU', - } ); - } ); - } ); - describe( 'startDragging', () => { it( 'should return the START_DRAGGING action', () => { expect( startDragging() ).toEqual( { diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index e9d6b43d6f11f9..ecb44710d573cc 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -38,7 +38,6 @@ import { lastBlockAttributesChange, lastBlockInserted, blockEditingModes, - openedBlockSettingsMenu, expandedBlock, zoomLevel, editedContentOnlySection, @@ -3486,30 +3485,6 @@ describe( 'state', () => { } ); } ); - describe( 'openedBlockSettingsMenu', () => { - it( 'should return null by default', () => { - expect( openedBlockSettingsMenu( undefined, {} ) ).toBe( null ); - } ); - - it( 'should set client id for opened block settings menu', () => { - const state = openedBlockSettingsMenu( null, { - type: 'SET_OPENED_BLOCK_SETTINGS_MENU', - clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1', - } ); - expect( state ).toBe( '14501cc2-90a6-4f52-aa36-ab6e896135d1' ); - } ); - - it( 'should clear the state when no client id is passed', () => { - const state = openedBlockSettingsMenu( - '14501cc2-90a6-4f52-aa36-ab6e896135d1', - { - type: 'SET_OPENED_BLOCK_SETTINGS_MENU', - } - ); - expect( state ).toBe( null ); - } ); - } ); - describe( 'expandedBlock', () => { it( 'should return null by default', () => { expect( expandedBlock( undefined, {} ) ).toBe( null );