Add a rotating list of tips to the inserter help panel (#20163)

Co-authored-by: Matias Ventura <mv@matiasventura.com>

packages/block-editor/src/components/inserter/menu.js

@@ -20,12 +20,8 @@ import classnames from 'classnames';
  */
 import { speak } from '@wordpress/a11y';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
-import {
-	Component,
-	__experimentalCreateInterpolateElement,
-	createRef,
-} from '@wordpress/element';
-import { PanelBody, withSpokenMessages, Tip } from '@wordpress/components';
+import { Component, createRef } from '@wordpress/element';
+import { PanelBody, withSpokenMessages } from '@wordpress/components';
 import {
 	isReusableBlock,
 	createBlock,
@@ -45,6 +41,7 @@ import BlockPreview from '../block-preview';
 import BlockTypesList from '../block-types-list';
 import BlockCard from '../block-card';
 import ChildBlocks from './child-blocks';
+import Tips from './tips';
 import __experimentalInserterMenuExtension from '../inserter-menu-extension';
 import { searchItems } from './search-items';
 
@@ -537,14 +534,7 @@ export class InserterMenu extends Component {
 										) }
 									</p>
 								</div>
-								<Tip>
-									{ __experimentalCreateInterpolateElement(
-										__(
-											'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'
-										),
-										{ kbd: <kbd /> }
-									) }
-								</Tip>
+								<Tips />
 							</div>
 						) }
 					</div>

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalCreateInterpolateElement,
+	useState,
+} from '@wordpress/element';
+import { Tip } from '@wordpress/components';
+
+const globalTips = [
+	__experimentalCreateInterpolateElement(
+		__(
+			'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'
+		),
+		{ kbd: <kbd /> }
+	),
+	__experimentalCreateInterpolateElement(
+		__(
+			'Indent a list by pressing <kbd>space</kbd> at the beginning of a line.'
+		),
+		{ kbd: <kbd /> }
+	),
+	__experimentalCreateInterpolateElement(
+		__(
+			'Outdent a list by pressing <kbd>backspace</kbd> at the beginning of a line'
+		),
+		{ kbd: <kbd /> }
+	),
+	__( 'Drag files into the editor to automatically insert media blocks.' ),
+	__( "Change a block's type by pressing the block icon on the toolbar." ),
+];
+
+function Tips() {
+	const [ randomIndex ] = useState(
+		// Disable Reason: I'm not generating an HTML id.
+		// eslint-disable-next-line no-restricted-syntax
+		Math.floor( Math.random() * globalTips.length )
+	);
+
+	return <Tip>{ globalTips[ randomIndex ] }</Tip>;
+}
+
+export default Tips;