diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
index ee17b9b3c45e3b..c352646eea0075 100644
--- a/edit-post/assets/stylesheets/_mixins.scss
+++ b/edit-post/assets/stylesheets/_mixins.scss
@@ -304,3 +304,16 @@
text-align: center;
font-size: $default-font-size;
}
+
+@mixin dropdown-arrow() {
+ content: "";
+ pointer-events: none;
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-left: 3px solid transparent;
+ border-right: 3px solid transparent;
+ border-top: 5px solid currentColor;
+ right: 6px;
+}
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
index 106accd7702283..ff969d6d054061 100644
--- a/packages/components/src/dropdown-menu/index.js
+++ b/packages/components/src/dropdown-menu/index.js
@@ -13,7 +13,6 @@ import { DOWN } from '@wordpress/keycodes';
* Internal dependencies
*/
import IconButton from '../icon-button';
-import Dashicon from '../dashicon';
import Dropdown from '../dropdown';
import { NavigableMenu } from '../navigable-container';
@@ -61,7 +60,7 @@ function DropdownMenu( {
label={ label }
tooltip={ label }
>
-
+
);
} }
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 1c480cb5c6541f..da561de1797698 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -38,6 +38,17 @@
background-color: $dark-gray-500;
color: $white;
}
+
+ .components-dropdown-menu__indicator {
+ display: inline-block;
+ margin-left: 10px;
+
+ // Add a dropdown arrow indicator.
+ &::after {
+ @include dropdown-arrow();
+ top: $icon-button-size-small / 2 + 1px;
+ }
+ }
}
}
.components-dropdown-menu__popover .components-popover__content {
@@ -58,11 +69,6 @@
outline: none;
cursor: pointer;
- .dashicon {
- margin-right: 8px;
- }
-
-
&.has-separator {
margin-top: 6px;
position: relative;
diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss
index 39cf29a819b857..a5c2292b01fb9f 100644
--- a/packages/editor/src/components/block-switcher/style.scss
+++ b/packages/editor/src/components/block-switcher/style.scss
@@ -36,17 +36,8 @@
// Add a dropdown arrow indicator.
.editor-block-icon::after {
- content: "";
- pointer-events: none;
- display: block;
- position: absolute;
+ @include dropdown-arrow();
top: $icon-button-size-small / 2 - 1px;
- width: 0;
- height: 0;
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- border-top: 5px solid currentColor;
- right: 6px;
}
.editor-block-switcher__transform {