From 4ef110ca0f1177a720b0d233454bde837ae455a4 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Sun, 5 Feb 2023 03:31:48 +0800
Subject: [PATCH] Show a pointer/hint in the settings tab informing the user
 about the styles tab (#47670)

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

* Add a spoken message when the notice is dismissed

* Update margin around text and button

* Remove spoken message

* Rename to hint and add focus management code

* Relabel dismiss button
---
 package-lock.json                             |  1 +
 packages/block-editor/package.json            |  1 +
 .../settings-tab-hint.js                      | 52 +++++++++++++++++++
 .../inspector-controls-tabs/settings-tab.js   |  2 +
 .../inspector-controls-tabs/style.scss        | 20 +++++++
 5 files changed, 76 insertions(+)
 create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js

diff --git a/package-lock.json b/package-lock.json
index 32dd3a8216dfab..3893e6fe012573 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17309,6 +17309,7 @@
 				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 				"@wordpress/keycodes": "file:packages/keycodes",
 				"@wordpress/notices": "file:packages/notices",
+				"@wordpress/preferences": "file:packages/preferences",
 				"@wordpress/rich-text": "file:packages/rich-text",
 				"@wordpress/shortcode": "file:packages/shortcode",
 				"@wordpress/style-engine": "file:packages/style-engine",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 4416bb686c9af9..a160a757074c79 100644
--- a/packages/block-editor/package.json
+++ b/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",
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js
new file mode 100644
index 00000000000000..4fc829817b4e0f
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isInspectorControlsTabsHintVisible';
+
+export default function InspectorControlsTabsHint() {
+	const isInspectorControlsTabsHintVisible = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const ref = useRef();
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! isInspectorControlsTabsHintVisible ) {
+		return null;
+	}
+
+	return (
+		<div ref={ ref } className="block-editor-inspector-controls-tabs__hint">
+			<div className="block-editor-inspector-controls-tabs__hint-content">
+				{ __(
+					"Looking for other block settings? They've moved to the styles tab."
+				) }
+			</div>
+			<Button
+				className="block-editor-inspector-controls-tabs__hint-dismiss"
+				icon={ close }
+				iconSize="16"
+				label={ __( 'Dismiss hint' ) }
+				onClick={ () => {
+					// Retain focus when dismissing the element.
+					const previousElement = focus.tabbable.findPrevious(
+						ref.current
+					);
+					previousElement?.focus();
+					setPreference( 'core', PREFERENCE_NAME, false );
+				} }
+				showTooltip={ false }
+			/>
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
index ec34035b754a91..bd462837442fe9 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
+++ b/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 SettingsTabHint from './settings-tab-hint';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
@@ -14,6 +15,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 				<AdvancedControls />
 			</div>
 		) }
+		<SettingsTabHint />
 	</>
 );
 
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
index f863f8f844d720..da83073a45590a 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -13,3 +13,23 @@
 		}
 	}
 }
+
+.block-editor-inspector-controls-tabs__hint {
+	align-items: top;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+	color: $gray-900;
+	display: flex;
+	flex-direction: row;
+	margin: $grid-unit-20;
+}
+
+.block-editor-inspector-controls-tabs__hint-content {
+	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+}
+
+.block-editor-inspector-controls-tabs__hint-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-05 $grid-unit-05 $grid-unit-05 0;
+}