The NUX module exposes components, and wp.data
methods useful for onboarding a new user to the WordPress admin interface. Specifically, it exposes tips and guides.
A tip is a component that points to an element in the UI and contains text that explains the element's functionality. The user can dismiss a tip, in which case it never shows again. The user can also disable tips entirely. Information about tips is persisted between sessions using localStorage
.
A guide allows a series of of tips to be presented to the user one by one. When a user dismisses a tip that is in a guide, the next tip in the guide is shown.
DotTip
is a React component that renders a single tip on the screen. The tip will point to the React element that DotTip
is nested within. Each tip is uniquely identified by a string passed to id
.
See the component's README for more information.
<button onClick={ ... }>
Add to Cart
<DotTip id="acme/add-to-cart">
Click here to add the product to your shopping cart.
</DotTip>
</button>
}
You can programmatically determine if a tip is visible using the isTipVisible
select method.
const isVisible = select( 'core/nux' ).isTipVisible( 'acme/add-to-cart' );
console.log( isVisible ); // true or false
dismissTip
is a dispatch method that allows you to programmatically dismiss a tip.
<button
onClick={ () => {
dispatch( 'core/nux' ).dismissTip( 'acme/add-to-cart' );
}
>
Dismiss tip
</button>
disableTips
is a dispatch method that allows you to programmatically disable all tips.
<button
onClick={ () => {
dispatch( 'core/nux' ).disableTips();
}
>
Disable tips
</button>
You can group a series of tips into a guide by calling the triggerGuide
dispatch method. The given tips will then appear one by one.
A tip cannot be added to more than one guide.
dispatch( 'core/nux' ).triggerGuide( [ 'acme/product-info', 'acme/add-to-cart', 'acme/checkout' ] );
getAssociatedGuide
is a select method that returns useful information about the state of the guide that a tip is associated with.
const guide = select( 'core/nux' ).getAssociatedGuide( 'acme/add-to-cart' );
console.log( 'Tips in this guide:', guide.tipIds );
console.log( 'Currently showing:', guide.currentTipId );
console.log( 'Next to show:', guide.nextTipId );