Avoid rerenders of the entire BlockInspector when block attributes ch…

…ange (#21990)

* Avoid rerenders of the entire BlockInspector when block attributes change

* Return null instead of not returning anything

packages/block-editor/src/components/block-inspector/index.js

@@ -31,8 +31,6 @@ const BlockInspector = ( {
 	selectedBlockName,
 	showNoBlockSelectedMessage = true,
 } ) => {
-	const slot = useSlot( InspectorAdvancedControls.slotName );
-
 	if ( count > 1 ) {
 		return <MultiSelectionInspector />;
 	}
@@ -59,8 +57,6 @@ const BlockInspector = ( {
 		return null;
 	}
 
-	const hasFills = Boolean( slot.fills && slot.fills.length );
-
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard blockType={ blockType } />
@@ -80,21 +76,34 @@ const BlockInspector = ( {
 			) }
 			<InspectorControls.Slot bubblesVirtually />
 			<div>
-				{ hasFills && (
-					<PanelBody
-						className="block-editor-block-inspector__advanced"
-						title={ __( 'Advanced' ) }
-						initialOpen={ false }
-					>
-						<InspectorAdvancedControls.Slot bubblesVirtually />
-					</PanelBody>
-				) }
+				<AdvancedControls
+					slotName={ InspectorAdvancedControls.slotName }
+				/>
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
+const AdvancedControls = ( { slotName } ) => {
+	const slot = useSlot( slotName );
+	const hasFills = Boolean( slot.fills && slot.fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__advanced"
+			title={ __( 'Advanced' ) }
+			initialOpen={ false }
+		>
+			<InspectorAdvancedControls.Slot bubblesVirtually />
+		</PanelBody>
+	);
+};
+
 export default withSelect( ( select ) => {
 	const {
 		getSelectedBlockClientId,