From 32e57fcf48920d8d51f2164136b0af30553d77e6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 30 Apr 2021 16:39:17 +0100
Subject: [PATCH] Improve the typing performance by render hooks panels for
 selected blocks only (#31381)

---
 packages/block-editor/src/hooks/style.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 382f62288fd6fc..e856f8e91bd828 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -22,6 +22,7 @@ import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
 import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
 import { SPACING_SUPPORT_KEY, SpacingPanel } from './spacing';
+import useDisplayBlockControls from '../components/use-display-block-controls';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -182,13 +183,21 @@ export function addEditProps( settings ) {
  */
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		return [
-			<TypographyPanel key="typography" { ...props } />,
-			<BorderPanel key="border" { ...props } />,
-			<ColorEdit key="colors" { ...props } />,
-			<BlockEdit key="edit" { ...props } />,
-			<SpacingPanel key="spacing" { ...props } />,
-		];
+		const shouldDisplayControls = useDisplayBlockControls();
+
+		return (
+			<>
+				{ shouldDisplayControls && (
+					<>
+						<TypographyPanel { ...props } />
+						<BorderPanel { ...props } />
+						<ColorEdit { ...props } />
+						<SpacingPanel { ...props } />
+					</>
+				) }
+				<BlockEdit { ...props } />
+			</>
+		);
 	},
 	'withToolbarControls'
 );