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

Author: talldan

package-lock.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/package.json

@@ -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>
+	);
+}

packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.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 />
 	</>
 );
 

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

@@ -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;
+}