diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 1baeaffc0f9a6f..1d97b85e4ea388 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/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 { ) }

- - { __experimentalCreateInterpolateElement( - __( - 'While writing, you can press / to quickly insert new blocks.' - ), - { kbd: } - ) } - + ) } diff --git a/packages/block-editor/src/components/inserter/tips.js b/packages/block-editor/src/components/inserter/tips.js new file mode 100644 index 00000000000000..255275c296ce24 --- /dev/null +++ b/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 / to quickly insert new blocks.' + ), + { kbd: } + ), + __experimentalCreateInterpolateElement( + __( + 'Indent a list by pressing space at the beginning of a line.' + ), + { kbd: } + ), + __experimentalCreateInterpolateElement( + __( + 'Outdent a list by pressing backspace at the beginning of a line' + ), + { 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 { globalTips[ randomIndex ] }; +} + +export default Tips;