Avoid node in state

packages/block-editor/src/components/block-list/block-popover.js

@@ -42,7 +42,6 @@ function selector( select ) {
 function BlockPopover( {
 	clientId,
 	rootClientId,
-	node,
 	name,
 	align,
 	isValid,
@@ -92,8 +91,10 @@ function BlockPopover( {
 		return null;
 	}
 
-	if ( capturingClientId ) {
-		node = document.getElementById( 'block-' + capturingClientId );
+	const node = document.getElementById( 'block-' + capturingClientId );
+
+	if ( ! node ) {
+		return null;
 	}
 
 	// Position above the anchor, pop out towards the right, and position in the
@@ -152,14 +153,19 @@ function wrapperSelector( select ) {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
 		getBlockRootClientId,
-		__unstableGetSelectedBlockNode,
+		__unstableGetSelectedMountedBlock,
 		__unstableGetBlockWithoutInnerBlocks,
 		getBlockParents,
 		getBlockListSettings,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( 'core/block-editor' );
 
 	const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+
+	if ( ! clientId ) {
+		return;
+	}
+
 	const rootClientId = getBlockRootClientId( clientId );
 	const { name, attributes = {}, isValid } = __unstableGetBlockWithoutInnerBlocks( clientId ) || {};
 	const blockParentsClientIds = getBlockParents( clientId );
@@ -172,7 +178,7 @@ function wrapperSelector( select ) {
 	// This will be the top most ancestor because getBlockParents() returns tree from top -> bottom
 	const topmostAncestorWithCaptureDescendantsToolbarsIndex = findIndex( ancestorBlockListSettings, [ '__experimentalCaptureToolbars', true ] );
 
-	let capturingClientId;
+	let capturingClientId = clientId;
 
 	if ( topmostAncestorWithCaptureDescendantsToolbarsIndex !== -1 ) {
 		capturingClientId = blockParentsClientIds[ topmostAncestorWithCaptureDescendantsToolbarsIndex ];
@@ -181,7 +187,7 @@ function wrapperSelector( select ) {
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
-		node: __unstableGetSelectedBlockNode(),
+		isMounted: __unstableGetSelectedMountedBlock() === clientId,
 		name,
 		align: attributes.align,
 		isValid,
@@ -192,27 +198,32 @@ function wrapperSelector( select ) {
 }
 
 export default function WrappedBlockPopover() {
+	const selected = useSelect( wrapperSelector, [] );
+
+	if ( ! selected ) {
+		return null;
+	}
+
 	const {
 		clientId,
 		rootClientId,
-		node,
+		isMounted,
 		name,
 		align,
 		isValid,
 		moverDirection,
 		isEmptyDefaultBlock,
 		capturingClientId,
-	} = useSelect( wrapperSelector, [] );
+	} = selected;
 
-	if ( ! name || ! node || node.id !== 'block-' + clientId ) {
+	if ( ! name || ! isMounted ) {
 		return null;
 	}
 
 	return (
 		<BlockPopover
 			clientId={ clientId }
 			rootClientId={ rootClientId }
-			node={ node }
 			name={ name }
 			align={ align }
 			isValid={ isValid }

packages/block-editor/src/components/block-list/block.js

@@ -114,15 +114,15 @@ function BlockListBlock( {
 		};
 	}, [] );
 	const {
-		__unstableSetSelectedBlockNode,
+		__unstableSetSelectedMountedBlock,
 	} = useDispatch( 'core/block-editor' );
 
 	// Reference of the wrapper
 	const wrapper = useRef( null );
 
 	useLayoutEffect( () => {
 		if ( isSelected || isFirstMultiSelected ) {
-			__unstableSetSelectedBlockNode( wrapper.current );
+			__unstableSetSelectedMountedBlock( clientId );
 		}
 	}, [ isSelected, isFirstMultiSelected ] );
 

packages/block-editor/src/store/actions.js

@@ -923,13 +923,13 @@ export function * insertAfterBlock( clientId ) {
 }
 
 /**
- * Sets the mounted DOM node of the selected block.
+ * Sets the client ID for the mounted and selected block.
  *
- * @param {Element} node     The block's DOM node.
+ * @param {Element} clientId The block's client ID.
  */
-export function __unstableSetSelectedBlockNode( node ) {
+export function __unstableSetSelectedMountedBlock( clientId ) {
 	return {
-		type: 'SET_SELECTED_BLOCK_NODE',
-		node,
+		type: 'SET_SELECTED_MOUNTED_BLOCK',
+		clientId,
 	};
 }

packages/block-editor/src/store/reducer.js

@@ -1344,7 +1344,7 @@ export function automaticChangeStatus( state, action ) {
 			return;
 		// Undoing an automatic change should still be possible after mouse
 		// move.
-		case 'SET_SELECTED_BLOCK_NODE':
+		case 'SET_SELECTED_MOUNTED_BLOCK':
 		case 'STOP_TYPING':
 			return state;
 	}
@@ -1353,18 +1353,18 @@ export function automaticChangeStatus( state, action ) {
 }
 
 /**
- * Reducer returning selected block's DOM node. This state is useful for
+ * Reducer returning selected and mounted block. This state is useful for
  * components rendering and positioning controls around the block's node.
  *
  * @param {boolean} state  Current state.
  * @param {Object}  action Dispatched action.
  *
  * @return {boolean} Updated state.
  */
-export function selectedBlockNode( state, action ) {
+export function selectedMountedBlock( state, action ) {
 	switch ( action.type ) {
-		case 'SET_SELECTED_BLOCK_NODE':
-			return action.node;
+		case 'SET_SELECTED_MOUNTED_BLOCK':
+			return action.clientId;
 	}
 
 	return state;
@@ -1389,5 +1389,5 @@ export default combineReducers( {
 	lastBlockAttributesChange,
 	isNavigationMode,
 	automaticChangeStatus,
-	selectedBlockNode,
+	selectedMountedBlock,
 } );

packages/block-editor/src/store/selectors.js

@@ -1534,6 +1534,6 @@ export function didAutomaticChange( state ) {
  *
  * @return {Element} The selected block's DOM node.
  */
-export function __unstableGetSelectedBlockNode( state ) {
-	return state.selectedBlockNode;
+export function __unstableGetSelectedMountedBlock( state ) {
+	return state.selectedMountedBlock;
 }