Show a pointer/hint in the settings tab informing the user about the styles tab

packages/block-editor/package.json

@@ -54,6 +54,7 @@
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
+		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/style-engine": "file:../style-engine",

packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isInspectorControlsTabsPointerVisible';
+
+export default function InspectorControlsTabsPointer() {
+	const isInspectorControlsTabsPointerVisible = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! isInspectorControlsTabsPointerVisible ) {
+		return null;
+	}
+
+	return (
+		<div className="block-editor-inspector-controls-tabs__pointer">
+			<div className="block-editor-inspector-controls-tabs__pointer-content">
+				{ __(
+					"Looking for other block settings? They've moved to the styles tab."
+				) }
+			</div>
+			<Button
+				className="block-editor-inspector-controls-tabs__pointer-dismiss"
+				icon={ close }
+				iconSize="16"
+				label={ __( 'Dismiss' ) }
+				onClick={ () => {
+					setPreference( 'core', PREFERENCE_NAME, false );
+					speak( __( 'Notice dismissed.' ) );
+				} }
+				showTooltip={ false }
+			/>
+		</div>
+	);
+}

packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js

@@ -4,6 +4,7 @@
 import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
+import SettingsTabPointer from './settings-tab-pointer';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
@@ -14,6 +15,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 				<AdvancedControls />
 			</div>
 		) }
+		<SettingsTabPointer />
 	</>
 );
 

packages/block-editor/src/components/inspector-controls-tabs/style.scss

@@ -13,3 +13,22 @@
 		}
 	}
 }
+
+.block-editor-inspector-controls-tabs__pointer {
+	align-items: top;
+	background: $gray-100;
+	color: $gray-900;
+	display: flex;
+	flex-direction: row;
+	margin: $grid-unit-20;
+}
+
+.block-editor-inspector-controls-tabs__pointer-content {
+	margin: $grid-unit-20 0 $grid-unit-20 $grid-unit-20;
+}
+
+.block-editor-inspector-controls-tabs__pointer-dismiss {
+	// The dismiss button has a lot of empty space through its padding.
+	// Apply margin to visually align the icon with the top of the text to its left.
+	margin: $grid-unit-10 $grid-unit-10 $grid-unit-10 0;
+}