Fix whitespace around the link icon

WordPress · Jun 12, 2020 · e03fceb · e03fceb
1 parent 91fa23a
commit e03fceb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -154,6 +154,7 @@ function NavigationLinkEdit( {
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
 						onClick={ () => setIsLinkOpen( true ) }
+						className="navigation-link-edit-link-button"
 					>
 						<span className="navigation-link-edit-link-label">
 							{ displayUrl }

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -8,17 +8,24 @@
 }
 
 // Truncate long URLs in the toolbar
-.block-editor-block-toolbar .navigation-link-edit-link-label {
-	display: inline-block;
-	max-width: 230px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.block-editor-block-toolbar .navigation-link-edit-link-button {
+	&,
+	&.components-button.components-button.has-icon svg {
+		margin-right: 0;
+	}
+
+	.navigation-link-edit-link-label {
+		display: inline-block;
+		max-width: 230px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 }
 
 /**
- * Adjust Navigation Item.
- */
+* Adjust Navigation Item.
+*/
 .wp-block-navigation-link {
 	.block-editor-block-list__layout {
 		display: block;