diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index 867b907fc2788..99681aad93439 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -7,9 +7,8 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, VisuallyHidden } from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url'; -import { external } from '@wordpress/icons'; /** * Internal dependencies @@ -29,25 +28,29 @@ export default function LinkPreview( { value, onEditClick } ) { 'is-current': true, } ) } > + + { displayURL } + + -
- diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 5db25f688f8f1..0514a22694077 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -1,6 +1,6 @@ // The general wrapper, in which everything else resides. .block-editor-link-control { - padding: 6px; + padding: ($grid-unit-15 / 2); } @@ -138,32 +138,27 @@ // ## Link Preview -// Once a link has been set this buttons edit or -// visit the URL. +// When clicking an existing link, the preview popover +// shows the current link with actions to edit and visit. .block-editor-link-control__link { display: flex; align-items: center; } -// A button that displays the URL. When pressed -// the UI switches to editing the URL. -.block-editor-link-control__link-edit { +.block-editor-link-control__link-current-url { + margin: 0 $grid-unit-20 0 $grid-unit-15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 280px; - min-width: 180px; - text-align: left; - line-height: 24px; - background: $gray-100; + cursor: default; +} + +.block-editor-link-control__link-edit { + margin-right: $grid-unit-05; } -// The divider separates the edit button from -// the visit button. -.block-editor-link-control__link-divider { - width: 1px; - height: 48px; - margin: -6px 6px; - background: $gray-900; +.block-editor-link-control__link-visit.components-button.is-tertiary { + padding: ($grid-unit-15 / 2) $grid-unit-15; }