Polish menu item icon locations. (#25106)

* Polish media replace menu. * Polish transforms menu.
WordPress · Sep 7, 2020 · 5e77f46 · 5e77f46
1 parent afc0090
commit 5e77f46
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -23,12 +23,12 @@ const BlockTransformationsMenu = ( {
 					<MenuItem
 						key={ name }
 						className={ getBlockMenuDefaultClassName( name ) }
-						icon={ <BlockIcon icon={ icon } showColors /> }
 						onClick={ ( event ) => {
 							event.preventDefault();
 							onSelect( name );
 						} }
 					>
+						<BlockIcon icon={ icon } showColors />
 						{ title }
 					</MenuItem>
 				);

diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -16,7 +16,11 @@
 }
 
 .block-editor-media-flow__url-input {
-	margin-top: $grid-unit-20;
+	border-top: $border-width solid $gray-900;
+	margin-top: $grid-unit-15;
+	margin-right: -$grid-unit-15;
+	margin-left: -$grid-unit-15;
+	padding: $grid-unit-15 $grid-unit-30 0;
 
 	.block-editor-media-replace-flow__image-url-label {
 		top: $grid-unit-20;

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -12,6 +12,12 @@
 	.components-menu-item__shortcut + .components-menu-items__item-icon {
 		margin-left: $grid-unit-10;
 	}
+
+	// If a block item is shown inline (such as transforms), space it correctly.
+	.block-editor-block-icon {
+		margin-left: -2px; // This optically balances the icon.
+		margin-right: $grid-unit-10;
+	}
 }
 
 .components-menu-item__info-wrapper {

diff --git a/packages/icons/src/library/media.js b/packages/icons/src/library/media.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const media = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M13 11V4c0-.55-.45-1-1-1h-1.67L9 1H5L3.67 3H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h10c.55 0 1-.45 1-1zM7 4.5c1.38 0 2.5 1.12 2.5 2.5S8.38 9.5 7 9.5 4.5 8.38 4.5 7 5.62 4.5 7 4.5zM14 6h5v10.5c0 1.38-1.12 2.5-2.5 2.5S14 17.88 14 16.5s1.12-2.5 2.5-2.5c.17 0 .34.02.5.05V9h-3V6zm-4 8.05V13h2v3.5c0 1.38-1.12 2.5-2.5 2.5S7 17.88 7 16.5 8.12 14 9.5 14c.17 0 .34.02.5.05z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M18.7 3H5.3C4 3 3 4 3 5.3v13.4C3 20 4 21 5.3 21h13.4c1.3 0 2.3-1 2.3-2.3V5.3C21 4 20 3 18.7 3zm.8 15.7c0 .4-.4.8-.8.8H5.3c-.4 0-.8-.4-.8-.8V5.3c0-.4.4-.8.8-.8h13.4c.4 0 .8.4.8.8v13.4zM10 15l5-3-5-3v6z" />
 	</SVG>
 );