Tip: Migrate inserter usages to Notice and deprecate the component

packages/block-directory/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Replace the no-results tip with an info notice and a documentation action link ([#84197](https://github.com/WordPress/gutenberg/pull/84197)).
+
 ## 5.57.0 (2026-10-07)
 
 ## 5.56.0 (2026-09-23)

packages/block-directory/src/components/downloadable-blocks-panel/no-results.jsx

@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { Tip, ExternalLink } from '@wordpress/components';
+import { tip } from '@wordpress/icons';
+import { Notice } from '@wordpress/ui';
 
 function DownloadableBlocksNoResults() {
 	return (
@@ -8,13 +9,19 @@ function DownloadableBlocksNoResults() {
 				<p>{ __( 'No results found.' ) }</p>
 			</div>
 			<div className="block-editor-inserter__tips">
-				<Tip>
-					{ __( 'Interested in creating your own block?' ) }
-					<br />
-					<ExternalLink href="https://developer.wordpress.org/block-editor/">
-						{ __( 'Get started here' ) }.
-					</ExternalLink>
-				</Tip>
+				<Notice.Root intent="info" icon={ tip }>
+					<Notice.Description>
+						{ __( 'Interested in creating your own block?' ) }
+					</Notice.Description>
+					<Notice.Actions>
+						<Notice.ActionLink
+							href="https://developer.wordpress.org/block-editor/"
+							openInNewTab
+						>
+							{ __( 'Get started here' ) }.
+						</Notice.ActionLink>
+					</Notice.Actions>
+				</Notice.Root>
 			</div>
 		</>
 	);

packages/block-editor/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Inserter: Replace random tips with info notices using the same light-bulb icon and style keyboard hints as keys ([#84197](https://github.com/WordPress/gutenberg/pull/84197)).
+
+### Bug Fixes
+
+-   Inserter: Only show the block-section separator when both sections contain blocks, avoiding a double border above the tip ([#84197](https://github.com/WordPress/gutenberg/pull/84197)).
+
 ## 18.1.0 (2026-10-07)
 
 ### New Features

packages/block-editor/src/components/inserter/style.scss

@@ -8,6 +8,14 @@ $block-inserter-preview-height: 350px;
 $block-quick-inserter-width: 350px;
 $block-inserter-tabs-height: 44px;
 
+.block-editor-inserter__tip kbd {
+	padding: 0 $grid-unit-05;
+	border: 1px solid var(--wpds-color-stroke-surface-neutral-strong);
+	border-radius: var(--wpds-border-radius-xs);
+	font-family: var(--wpds-typography-font-family-mono);
+	white-space: nowrap;
+}
+
 .block-editor-inserter {
 	display: inline-block;
 	background: none;
@@ -224,8 +232,8 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__insertable-blocks-at-selection {
-	border-bottom: $border-width solid $gray-200;
+.block-editor-inserter__insertable-blocks-at-selection:not(:empty) + .block-editor-inserter__all-blocks:not(:empty) {
+	border-top: $border-width solid $gray-200;
 }
 
 .block-editor-inserter__media-tabs-container,

packages/block-editor/src/components/inserter/tips.jsx

@@ -1,13 +1,25 @@
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
-import { Tip } from '@wordpress/components';
+import { tip } from '@wordpress/icons';
+import { Notice, VisuallyHidden } from '@wordpress/ui';
+
+function SlashKey( { children } ) {
+	return (
+		<>
+			<kbd aria-hidden="true">{ children }</kbd>
+			<VisuallyHidden render={ <span /> }>
+				{ _x( 'Forward slash', 'keyboard key' ) }
+			</VisuallyHidden>
+		</>
+	);
+}
 
 const globalTips = [
 	createInterpolateElement(
 		__(
 			'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'
 		),
-		{ kbd: <kbd /> }
+		{ kbd: <SlashKey /> }
 	),
 	createInterpolateElement(
 		__(
@@ -30,7 +42,17 @@ function Tips() {
 		Math.floor( Math.random() * globalTips.length )
 	);
 
-	return <Tip>{ globalTips[ randomIndex ] }</Tip>;
+	return (
+		<Notice.Root
+			className="block-editor-inserter__tip"
+			intent="info"
+			icon={ tip }
+		>
+			<Notice.Description>
+				{ globalTips[ randomIndex ] }
+			</Notice.Description>
+		</Notice.Root>
+	);
 }
 
 export default Tips;

packages/components/CHANGELOG.md

@@ -7,6 +7,10 @@
 -   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
     -   `DateTimePicker` ([#84129](https://github.com/WordPress/gutenberg/pull/84129))
 
+### Deprecations
+
+-   `Tip`: Deprecate in favor of `Notice` from `@wordpress/ui`, preserving the legacy component for existing consumers ([#84197](https://github.com/WordPress/gutenberg/pull/84197)).
+
 ## 42.0.0 (2026-10-07)
 
 ### Breaking Changes

packages/components/src/tip/index.tsx

@@ -1,9 +1,21 @@
 import { Icon, tip } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 import type { TipProps } from './types';
 
+/**
+ * Displays a contextual tip with a decorative light-bulb icon.
+ *
+ * @deprecated Use `Notice.Root` and `Notice.Description` from `@wordpress/ui` instead.
+ */
 export function Tip( props: TipProps ) {
 	const { children } = props;
 
+	deprecated( 'wp.components.Tip', {
+		since: '7.2',
+		version: '7.4',
+		alternative: 'Notice from @wordpress/ui',
+	} );
+
 	return (
 		<div className="components-tip">
 			<Icon icon={ tip } />

packages/components/src/tip/stories/index.story.tsx

@@ -3,7 +3,7 @@ import Tip from '..';
 
 const meta: Meta< typeof Tip > = {
 	component: Tip,
-	title: 'Components/@wordpress-components/Feedback/Tip',
+	title: 'Components/@wordpress-components/Deprecated/Tip',
 	id: 'components-tip',
 	argTypes: {
 		children: { control: { type: 'text' } },
@@ -14,8 +14,9 @@ const meta: Meta< typeof Tip > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'unaudited',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Deprecated. Use [`Notice`](?path=/docs/design-system-components-notice--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-tip--migration-guide).',
 		},
 	},
 };

packages/components/src/tip/stories/migration-guide.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as TipStories from './index.story';
+
+<Meta of={ TipStories } name="Migration Guide" />
+
+# Tip migration guide
+
+`Tip` is deprecated since WordPress 7.2 and scheduled for removal in WordPress 7.4. Use [`Notice`](?path=/docs/design-system-components-notice--docs) from `@wordpress/ui` instead.
+
+## Basic migration
+
+Use `Notice.Root` with `intent="info"` and `Notice.Description` for the content. Pass the `tip` icon from `@wordpress/icons` to retain the light-bulb icon. The notice uses the design system's info colors, border, and padding.
+
+```jsx
+import { tip } from '@wordpress/icons';
+import { Notice } from '@wordpress/ui';
+
+const MyTip = ( { children } ) => (
+	<Notice.Root intent="info" icon={ tip }>
+		<Notice.Description>{ children }</Notice.Description>
+	</Notice.Root>
+);
+```
+
+For a call to action, use `Notice.Actions` and `Notice.ActionLink`. Pass `openInNewTab` to retain an external link's new-tab indicator and accessible notice. Add `Notice.CloseIconButton` only if the consuming interface supports dismissal.
+
+Like Tip, Notice does not announce its content automatically. Consumers must announce dynamic updates when needed. See the [Notice announcement guidance](?path=/docs/design-system-components-notice-announcements--docs).
+
+The `.components-tip` selector belongs to the legacy component. Update custom consumer styles when migrating to Notice rather than carrying this class name into the new composition.

packages/eslint-plugin/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `use-recommended-components`: Recommend `Notice` from `@wordpress/ui` instead of `Tip` from `@wordpress/components` ([#84197](https://github.com/WordPress/gutenberg/pull/84197)).
+
 ## 27.1.0 (2026-10-07)
 
 ### New Features

packages/eslint-plugin/docs/rules/use-recommended-components.md

@@ -13,12 +13,14 @@ The rule checks named imports and direct destructuring from `unlock( privateApis
 - `__experimentalInputControl` — [`InputControl` migration guide][inputcontrol-migration-guide]
 - `TextControl` — [`InputControl` migration guide][inputcontrol-migration-guide]
 - `TextareaControl` — [`TextareaControl` migration guide][textareacontrol-migration-guide]
+- `Tip` — [`Tip` migration guide][tip-migration-guide]
 
 [checkboxcontrol-migration-guide]: https://wordpress.github.io/gutenberg/?path=/docs/components-checkboxcontrol--migration-guide
 [inputcontrol-migration-guide]: https://wordpress.github.io/gutenberg/?path=/docs/components-inputcontrol--migration-guide
 [radiocontrol-migration-guide]: https://wordpress.github.io/gutenberg/?path=/docs/components-radiocontrol--migration-guide
 [togglecontrol-migration-guide]: https://wordpress.github.io/gutenberg/?path=/docs/components-togglecontrol--migration-guide
 [textareacontrol-migration-guide]: https://wordpress.github.io/gutenberg/?path=/docs/components-textareacontrol--migration-guide
+[tip-migration-guide]: https://wordpress.github.io/gutenberg/?path=/docs/components-tip--migration-guide
 
 ## Rule details
 

packages/eslint-plugin/rules/use-recommended-components.js

@@ -148,6 +148,7 @@ const DENYLIST = {
 			'Use `InputControl` from `@wordpress/ui` instead. See migration guide in the lint rule documentation.',
 		TextareaControl:
 			'Use `TextareaControl` from `@wordpress/ui` instead. See migration guide in the lint rule documentation.',
+		Tip: 'Use `Notice` from `@wordpress/ui` instead. See migration guide in the lint rule documentation.',
 		ToggleControl:
 			'Use `SwitchControl` from `@wordpress/ui` instead. See migration guide in the lint rule documentation.',
 		Tooltip: 'Use `Tooltip` from `@wordpress/ui` instead.',

packages/ui/src/notice/stories/index.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { unseen } from '@wordpress/icons';
+import { tip, unseen } from '@wordpress/icons';
 import * as Notice from '../index';
 
 const meta: Meta< typeof Notice.Root > = {
@@ -173,3 +173,19 @@ export const CustomIcon: Story = {
 		],
 	},
 };
+
+/**
+ * Use an info notice with the tip icon for contextual guidance.
+ */
+export const Tip: Story = {
+	args: {
+		intent: 'info',
+		icon: tip,
+		children: [
+			<Notice.Description key="description">
+				While writing, you can press <kbd>/</kbd> to quickly insert new
+				blocks.
+			</Notice.Description>,
+		],
+	},
+};

tools/eslint/suppressions.json

@@ -70,9 +70,6 @@
 		}
 	},
 	"packages/block-directory/src/components/downloadable-blocks-panel/no-results.jsx": {
-		"@wordpress/use-recommended-components": {
-			"count": 1
-		},
 		"react/jsx-filename-extension": {
 			"count": 1
 		}