updates linkViewer to match the button style

WordPress · Feb 4, 2020 · d41f1e3 · d41f1e3
1 parent 3b00abf
commit d41f1e3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -34,7 +34,6 @@ const MediaReplaceFlow = ( {
 	onError,
 	name = __( 'Replace' ),
 } ) => {
-	const [ showURLInput, setShowURLInput ] = useState( false );
 	const [ showEditURLInput, setShowEditURLInput ] = useState( false );
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -94,6 +93,7 @@ const MediaReplaceFlow = ( {
 	if ( showEditURLInput ) {
 		urlInputUIContent = (
 			<LinkEditor
+				className="block-editor-media-replace-flow__link-editor"
 				onKeyDown={ stopPropagationRelevantKeys }
 				onKeyPress={ stopPropagation }
 				value={ mediaURLValue }
@@ -109,14 +109,20 @@ const MediaReplaceFlow = ( {
 		);
 	} else {
 		urlInputUIContent = (
-			<LinkViewer
-				isFullWidth={ true }
-				className="block-editor-media-replace-flow__link-viewer"
-				url={ mediaURLValue }
-				onEditLinkClick={ () =>
-					setShowEditURLInput( ! showEditURLInput )
-				}
-			/>
+			<>
+				<span className="block-editor-media-replace-flow__image-url-label">
+					{ __( ' Current media URL:' ) }
+				</span>
+				<LinkViewer
+					isFullWidth={ true }
+					iconButton={ false }
+					className="block-editor-media-replace-flow__link-viewer"
+					url={ mediaURLValue }
+					onEditLinkClick={ () =>
+						setShowEditURLInput( ! showEditURLInput )
+					}
+				/>
+			</>
 		);
 	}
 
@@ -168,19 +174,8 @@ const MediaReplaceFlow = ( {
 								} }
 							/>
 						</MediaUploadCheck>
-						{ onSelectURL && (
-							<MenuItem
-								icon="admin-links"
-								onClick={ () =>
-									setShowURLInput( ! showURLInput )
-								}
-								aria-expanded={ showURLInput }
-							>
-								<div> { __( 'Insert from URL' ) } </div>
-							</MenuItem>
-						) }
 					</NavigableMenu>
-					{ showURLInput && (
+					{ onSelectURL && (
 						<div className="block-editor-media-flow__url-input">
 							{ urlInputUIContent }
 						</div>

diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -15,15 +15,28 @@
 
 .block-editor-media-flow__url-input {
 	padding: 0 15px;
-	max-width: 255px;
+	max-width: 258px;
 	padding-bottom: 10px;
+	border-top: 1px solid $light-gray-800;
+	margin-top: 5px;
+	padding-top: 15px;
 
 	input {
 		max-width: 180px;
 	}
 }
 
+.block-editor-media-replace-flow__image-url-label {
+	color: $dark-gray-300;
+	font-size: $default-font-size;
+	padding-left: 4px;
+	margin-bottom: -8px;
+	display: block;
+}
+
 .block-editor-media-replace-flow__link-viewer {
+	margin-left: -3px;
+
 	// Overflow is not working properly if we show the icon.
 	.components-external-link__icon {
 		display: none;
@@ -34,4 +47,15 @@
 	.components-button {
 		flex-shrink: 0;
 	}
+
+	button {
+		position: relative;
+		top: -8px;
+	}
+}
+
+.block-editor-media-replace-flow__link-editor {
+	.block-editor-url-input .components-base-control__field input[type="text"] {
+		border: 1px solid $dark-gray-200;
+	}
 }
diff --git a/packages/block-editor/src/components/url-popover/link-viewer.js b/packages/block-editor/src/components/url-popover/link-viewer.js
@@ -33,6 +33,7 @@ export default function LinkViewer( {
 	onEditLinkClick,
 	url,
 	urlLabel,
+	iconButton = true,
 	...props
 } ) {
 	return (
@@ -50,10 +51,13 @@ export default function LinkViewer( {
 			/>
 			{ onEditLinkClick && (
 				<Button
-					icon="edit"
-					label={ __( 'Edit' ) }
+					icon={ iconButton ? 'edit' : false }
+					isSecondary={ iconButton ? false : true }
 					onClick={ onEditLinkClick }
-				/>
+					className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit"
+				>
+					{ iconButton ? '' : __( 'Edit' ) }
+				</Button>
 			) }
 		</div>
 	);