diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 2526b00b61e2df..2308403bb71ccf 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -53,16 +53,17 @@
.components-menu-item__button.components-button {
min-height: $button-size;
height: auto;
- padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
text-align: left;
+ padding-left: $grid-unit-10;
+ padding-right: $grid-unit-10;
- &.has-icon {
- padding-left: $grid-unit-10;
+ .components-menu-item__info-wrapper {
+ max-width: calc(100% - #{ $button-size-small + $grid-unit-10 });
}
}
.components-menu-group {
- padding: $grid-unit-15;
+ padding: $grid-unit-15 $grid-unit-10;
margin-top: 0;
margin-bottom: 0;
margin-left: -$grid-unit-15;
@@ -80,7 +81,7 @@
.components-menu-group + .components-menu-group {
margin-top: 0;
border-top: $border-width solid $gray-400;
- padding: $grid-unit-15;
+ padding: $grid-unit-15 $grid-unit-10;
.is-alternate & {
border-color: $gray-900;
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index 72fd95d66588a4..c2228944cdd2df 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -5,7 +5,7 @@
}
.components-menu-group__label {
- padding: 0;
+ padding: 0 $grid-unit-10;
margin-bottom: $grid-unit-15;
color: $gray-700;
text-transform: uppercase;
diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
index ccd02dbe8af020..c80c113827971a 100644
--- a/packages/components/src/menu-item/index.js
+++ b/packages/components/src/menu-item/index.js
@@ -14,6 +14,7 @@ import { cloneElement, forwardRef } from '@wordpress/element';
*/
import Shortcut from '../shortcut';
import Button from '../button';
+import Icon from '../icon';
/**
* Renders a generic menu item for use inside the more menu.
@@ -63,7 +64,6 @@ export function MenuItem(
return (
);
}
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index de8b24b397bffa..feecf4b4ba3c96 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -8,7 +8,8 @@
.components-menu-items__item-icon,
svg.components-menu-items__item-icon,
> span > svg {
- margin-right: $grid-unit-10;
+ margin-right: 0;
+ margin-left: auto;
}
.components-menu-items__item-icon {
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 182f8984719392..5de8363be0d6e8 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,12 +1,10 @@
.components-menu-items-choice,
.components-menu-items-choice.components-button {
- padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
-
svg {
- margin-right: $grid-unit-10;
+ margin-right: $grid-unit-15;
}
&.has-icon {
- padding-left: $grid-unit-10;
+ padding-left: $grid-unit-15;
}
}
diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
index 5eaf29ce6b97f5..ea255bbc0d0646 100644
--- a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
+++ b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
@@ -4,6 +4,7 @@
import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
import { BlockSettingsMenuControls } from '@wordpress/block-editor';
import { MenuItem } from '@wordpress/components';
+import { reusableBlock } from '@wordpress/icons';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
@@ -68,6 +69,7 @@ export default function ReusableBlockConvertButton( { clientIds } ) {
{ ( { onClose } ) => (