Add block inspector virtual bubbling option (#24991)

* Make inspector bubbling optional * Clean up code.
WordPress · Sep 2, 2020 · b96b6e3 · b96b6e3
1 parent 00f824a
commit b96b6e3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -30,12 +30,13 @@ const BlockInspector = ( {
 	selectedBlockClientId,
 	selectedBlockName,
 	showNoBlockSelectedMessage = true,
+	bubblesVirtually = true,
 } ) => {
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot bubblesVirtually />
+				<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
 			</div>
 		);
 	}
@@ -79,18 +80,19 @@ const BlockInspector = ( {
 					</PanelBody>
 				</div>
 			) }
-			<InspectorControls.Slot bubblesVirtually />
+			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
 			<div>
 				<AdvancedControls
 					slotName={ InspectorAdvancedControls.slotName }
+					bubblesVirtually={ bubblesVirtually }
 				/>
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = ( { slotName } ) => {
+const AdvancedControls = ( { slotName, bubblesVirtually } ) => {
 	const slot = useSlot( slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
@@ -104,7 +106,9 @@ const AdvancedControls = ( { slotName } ) => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorAdvancedControls.Slot bubblesVirtually />
+			<InspectorAdvancedControls.Slot
+				bubblesVirtually={ bubblesVirtually }
+			/>
 		</PanelBody>
 	);
 };

diff --git a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js b/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
@@ -110,7 +110,9 @@ export default function BlockEditorArea( {
 							label="Block inspector"
 						/>
 					) }
-					renderContent={ () => <BlockInspector /> }
+					renderContent={ () => (
+						<BlockInspector bubblesVirtually={ false } />
+					) }
 				/>
 			</CardHeader>
 			<CardBody>