From ff4400af125f78804f3246353f1e5254b4fd2d02 Mon Sep 17 00:00:00 2001
From: Nick Diego <nickmdiego@gmail.com>
Date: Fri, 28 Jul 2023 16:25:54 -0500
Subject: [PATCH] Try dynamically moving panel to styles when there are no
 settings.

---
 src/editor/index.js                    |  3 +--
 src/editor/inspector-controls/index.js | 24 +++++++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/editor/index.js b/src/editor/index.js
index 99cd43d3..10945970 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -138,8 +138,7 @@ function addInspectorControls( BlockEdit ) {
 addFilter(
 	'editor.BlockEdit',
 	'block-visibility/add-inspector-controls',
-	addInspectorControls,
-	100 // We want Visibility to appear right above Advanced controls
+	addInspectorControls
 );
 
 /**
diff --git a/src/editor/inspector-controls/index.js b/src/editor/inspector-controls/index.js
index 5a84ca97..402690a6 100644
--- a/src/editor/inspector-controls/index.js
+++ b/src/editor/inspector-controls/index.js
@@ -7,7 +7,11 @@ import { assign, isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withFilters, Spinner } from '@wordpress/components';
+import { 
+	withFilters, 
+	Spinner,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { withSelect } from '@wordpress/data';
 
@@ -42,10 +46,24 @@ function VisibilityInspectorControls( props ) {
 		widgetAreaRestricted,
 	} = props;
 
+	// Determine how many other panels have been slotted into the Settings tab.
+	// see: https://github.com/WordPress/gutenberg/blob/d27c43fda419995a80b1cbdeafe2b24d9a0e2164/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js#L52
+	const settingFills = [
+		...( useSlotFills( 'InspectorControls' ) || [] ),
+		...( useSlotFills( 'InspectorControlsPosition' ) || [] ),
+	];
+	
+	console.log( settingFills );
+
+	// This is not consistent. When the page loads, the Visibility panel is not counted. 
+	// But after clicking around to various blocks, the Editor starts counting the 
+	// Visibility panel as a setting Slot. 
+	const tab = settingFills.length > 1 ? 'settings' : 'styles';
+
 	// Display a default panel with spinner when settings and variables are loading.
 	if ( settings === 'fetching' || variables === 'fetching' ) {
 		return (
-			<InspectorControls group="settings">
+			<InspectorControls group={ tab }>
 				<div className="block-visibility__controls-panel">
 					<div className="controls-panel-header">
 						<h2>{ __( 'Visibility', 'block-visibility' ) }</h2>
@@ -137,7 +155,7 @@ function VisibilityInspectorControls( props ) {
 		// of SlotFill, and is "inside" of a <SlotFillProvider> component.
 		// Therefore we can freely use SlofFill without needing to add the
 		// provider ourselves.
-		<InspectorControls group="settings">
+		<InspectorControls group={ tab }>
 			<div className="block-visibility__controls-panel">
 				<ControlsPanel
 					blockAtts={ blockAtts }