Prevent re-rendering the editor header when the selected block changes (

#57140)
WordPress · Dec 17, 2023 · 2c79c9e · 2c79c9e · github-actions · Dec 17, 2023
1 parent cdeca67
commit 2c79c9e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js
@@ -164,12 +164,7 @@ function useToolbarFocus( {
 		};
 	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
-	const { lastFocus } = useSelect( ( select ) => {
-		const { getLastFocus } = select( blockEditorStore );
-		return {
-			lastFocus: getLastFocus(),
-		};
-	}, [] );
+	const { getLastFocus } = useSelect( blockEditorStore );
 	/**
 	 * Handles returning focus to the block editor canvas when pressing escape.
 	 */
@@ -178,6 +173,7 @@ function useToolbarFocus( {
 
 		if ( focusEditorOnEscape ) {
 			const handleKeyDown = ( event ) => {
+				const lastFocus = getLastFocus();
 				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
 					// Focus the last focused element when pressing escape.
 					event.preventDefault();
@@ -192,7 +188,7 @@ function useToolbarFocus( {
 				);
 			};
 		}
-	}, [ focusEditorOnEscape, lastFocus, toolbarRef ] );
+	}, [ focusEditorOnEscape, getLastFocus, toolbarRef ] );
 }
 
 export default function NavigableToolbar( {

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -64,7 +64,7 @@ function Header( {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const {
-		blockSelectionStart,
+		hasBlockSelection,
 		hasActiveMetaboxes,
 		hasFixedToolbar,
 		isEditingTemplate,
@@ -74,8 +74,8 @@ function Header( {
 		const { get: getPreference } = select( preferencesStore );
 
 		return {
-			blockSelectionStart:
-				select( blockEditorStore ).getBlockSelectionStart(),
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			isEditingTemplate:
 				select( editorStore ).getRenderingMode() === 'template-only',
@@ -90,14 +90,12 @@ function Header( {
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
-	const hasBlockSelected = !! blockSelectionStart;
-
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
-		if ( blockSelectionStart ) {
+		if ( hasBlockSelection ) {
 			setIsBlockToolsCollapsed( false );
 		}
-	}, [ blockSelectionStart ] );
+	}, [ hasBlockSelection ] );
 
 	return (
 		<div className="edit-post-header">
@@ -136,7 +134,7 @@ function Header( {
 							ref={ blockToolbarRef }
 							name="block-toolbar"
 						/>
-						{ isEditingTemplate && hasBlockSelected && (
+						{ isEditingTemplate && hasBlockSelection && (
 							<Button
 								className="edit-post-header__block-tools-toggle"
 								icon={ isBlockToolsCollapsed ? next : previous }
@@ -158,7 +156,7 @@ function Header( {
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
 							isEditingTemplate &&
-							hasBlockSelected &&
+							hasBlockSelection &&
 							! isBlockToolsCollapsed &&
 							hasFixedToolbar &&
 							isLargeViewport,