diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 6fb98c963b501..989c60b3ebd16 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -9,7 +9,7 @@ import { castArray, flow, noop } from 'lodash'; import { __ } from '@wordpress/i18n'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; -import { moreVertical } from '@wordpress/icons'; +import { moreVertical, insertAfter, insertBefore } from '@wordpress/icons'; import { Children, cloneElement, useCallback } from '@wordpress/element'; import { serialize } from '@wordpress/blocks'; @@ -138,6 +138,8 @@ export function BlockSettingsDropdown( { { canInsertDefaultBlock && ( <> { isGroupable && ( { onConvertToGroup(); onClose(); @@ -58,6 +61,8 @@ function ConvertToGroupButton( { ) } { isUngroupable && ( { onConvertFromGroup(); onClose(); diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md index 9408754861961..9df572b9fccab 100644 --- a/packages/components/src/menu-item/README.md +++ b/packages/components/src/menu-item/README.md @@ -50,6 +50,14 @@ Refer to documentation for [`label`](#label). Refer to documentation for [Button's `icon` prop](/packages/components/src/icon-button/README.md#icon). +### `iconPosition` + +- Type: `string` +- Required: No +- Default: `'right'` + +Determines where to display the provided `icon`. + ### `isSelected` - Type: `boolean` diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js index 8bed60d84df8f..23851b8fe0518 100644 --- a/packages/components/src/menu-item/index.js +++ b/packages/components/src/menu-item/index.js @@ -19,15 +19,16 @@ import Icon from '../icon'; /** * Renders a generic menu item for use inside the more menu. * - * @param {Object} props Component props. - * @param {WPElement} props.children Element to render as child of button. - * @param {string} props.info Text to use as description for button text. - * @param {string} props.className Class to set on the container. - * @param {WPIcon} props.icon Button's `icon` prop. - * @param {string|Object} props.shortcut Shortcut's `shortcut` prop. - * @param {boolean} props.isSelected Whether or not the menu item is currently selected. - * @param {string} [props.role="menuitem"] ARIA role of the menu item. - * @param {Object} ref React Element ref. + * @param {Object} props Component props. + * @param {WPElement} props.children Element to render as child of button. + * @param {string} props.info Text to use as description for button text. + * @param {string} props.className Class to set on the container. + * @param {WPIcon} props.icon Button's `icon` prop. + * @param {string} [props.iconPosition="right"] Button's `icon` position (left|right). + * @param {string|Object} props.shortcut Shortcut's `shortcut` prop. + * @param {boolean} props.isSelected Whether or not the menu item is currently selected. + * @param {string} [props.role="menuitem"] ARIA role of the menu item. + * @param {Object} ref React Element ref. * * @return {WPComponent} The component to be rendered. */ @@ -37,6 +38,7 @@ export function MenuItem( info, className, icon, + iconPosition = 'right', shortcut, isSelected, role = 'menuitem', @@ -57,7 +59,9 @@ export function MenuItem( if ( icon && ! isString( icon ) ) { icon = cloneElement( icon, { - className: 'components-menu-items__item-icon', + className: classnames( 'components-menu-items__item-icon', { + 'has-icon-right': iconPosition === 'right', + } ), } ); } @@ -71,6 +75,7 @@ export function MenuItem( : undefined } role={ role } + icon={ iconPosition === 'left' ? icon : undefined } className={ className } { ...props } > @@ -79,7 +84,7 @@ export function MenuItem( className="components-menu-item__shortcut" shortcut={ shortcut } /> - { icon && } + { icon && iconPosition === 'right' && } ); } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index 69e5c6f50fd7e..5c88db241f4e0 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -12,13 +12,15 @@ } .components-menu-items__item-icon { - margin-right: -2px; // This optically balances the icon. - margin-left: $grid-unit-30; display: inline-block; flex: 0 0 auto; + &.has-icon-right { + margin-right: -2px; // This optically balances the icon. + margin-left: $grid-unit-30; + } } - .components-menu-item__shortcut + .components-menu-items__item-icon { + .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right { margin-left: $grid-unit-10; } diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap index 2349726c1d07a..a546e6078a79f 100644 --- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap +++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap @@ -19,7 +19,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = ` @@ -79,7 +79,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally diff --git a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js index 77024f45a5c93..096339323e7fc 100644 --- a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js +++ b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js @@ -86,6 +86,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) => const PluginBlockSettingsMenuItem = ( { allowedBlocks, icon, + iconPosition, label, onClick, small, @@ -100,6 +101,7 @@ const PluginBlockSettingsMenuItem = ( { diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index ab7d8b12e4416..dabd27e95a23e 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -114,6 +114,7 @@ export default function ReusableBlockConvertButton( { <> { setIsModalOpen( true ); } }