@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
76 lines (74 loc) • 2.63 kB
JavaScript
/**
* WordPress dependencies
*/
import { MenuItem } from '@wordpress/components';
import { usePluginContext } from '@wordpress/plugins';
import { ActionItem } from '@wordpress/interface';
/**
* Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
* The text within the component appears as the menu item label.
*
* @param {Object} props Component properties.
* @param {React.ReactNode} [props.children] Children to be rendered.
* @param {string} [props.href] When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
* @param {Function} [props.onClick=noop] The callback function to be executed when the user clicks the menu item.
* @param {...*} [props.other] Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component.
*
* @example
* ```js
* // Using ES5 syntax
* var __ = wp.i18n.__;
* var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
* var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
*
* function onButtonClick() {
* alert( 'Button clicked.' );
* }
*
* function MyButtonMoreMenuItem() {
* return wp.element.createElement(
* PluginMoreMenuItem,
* {
* icon: moreIcon,
* onClick: onButtonClick,
* },
* __( 'My button title' )
* );
* }
* ```
*
* @example
* ```jsx
* // Using ESNext syntax
* import { __ } from '@wordpress/i18n';
* import { PluginMoreMenuItem } from '@wordpress/editor';
* import { more } from '@wordpress/icons';
*
* function onButtonClick() {
* alert( 'Button clicked.' );
* }
*
* const MyButtonMoreMenuItem = () => (
* <PluginMoreMenuItem
* icon={ more }
* onClick={ onButtonClick }
* >
* { __( 'My button title' ) }
* </PluginMoreMenuItem>
* );
* ```
*
* @return {React.ReactNode} The rendered component.
*/
export default function PluginMoreMenuItem( props ) {
const context = usePluginContext();
return (
<ActionItem
name="core/plugin-more-menu"
as={ props.as ?? MenuItem }
icon={ props.icon || context.icon }
{ ...props }
/>
);
}