Update visuals to match updated design

Addresses #17557 (comment)
WordPress · Oct 29, 2019 · 604e8eb · 604e8eb
1 parent 29c263f
commit 604e8eb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	Button,
 	IconButton,
 	Icon,
 	ToggleControl,
@@ -170,8 +171,10 @@ function LinkControl( { currentLink, fetchSearchSuggestions, renderAdditionalSet
 								</ExternalLink>
 								<span className="block-editor-link-control__search-item-info">{ currentLink.info || filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' }</span>
 							</span>
-							<span className="block-editor-link-control__search-item-type">{ currentLink.type.toLowerCase() || '' }</span>
-							<IconButton className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit" icon="edit" label={ __( 'Edit' ) } onClick={ onStartEditing } />
+
+							<Button isDefault onClick={ onStartEditing } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
+								Change
+							</Button>
 						</div>
 					) }
 

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -92,16 +92,16 @@
 
 	&.is-current {
 		background: transparent;
-		border: 2px solid #ccc;
-		margin: $grid-size-large;
-		width: calc(100% - #{$grid-size-large*2});
+		border: 0;
+		width: 100%;
 		cursor: default;
-		padding-right: 10px; // visually compensate for edit icon padding
+		padding: $grid-size-large;
+		padding-left: $grid-size-xlarge;
 	}
 
 	.block-editor-link-control__search-item-header {
 		display: block;
-		margin-right: 1em;
+		margin-right: $grid-size-xlarge;
 	}
 
 	.block-editor-link-control__search-item-icon {
@@ -148,8 +148,8 @@
 
 .block-editor-link-control__settings {
 	border-top: 1px solid #e1e1e1;
-	margin: 0 $grid-size-large;
-	padding: $grid-size-large $grid-size-large;
+	margin: 0;
+	padding: $grid-size-large $grid-size-xlarge;
 
 	:last-child {
 		margin-bottom: 0;
@@ -172,6 +172,6 @@
 }
 
 .block-editor-link-control__search-item-action {
-	margin-left: 0.5em;
+	margin-left: auto; // push to far right hand side
 	flex-shrink: 0;
 }