diff --git a/packages/block-editor/src/components/link-control/link-preview.tsx b/packages/block-editor/src/components/link-control/link-preview.tsx index f00d0b9d7ab86d..3a38d52d60804a 100644 --- a/packages/block-editor/src/components/link-control/link-preview.tsx +++ b/packages/block-editor/src/components/link-control/link-preview.tsx @@ -2,7 +2,6 @@ import clsx from 'clsx'; import { __ } from '@wordpress/i18n'; import { Button, - ExternalLink, __experimentalTruncate as Truncate, __experimentalHStack as HStack, Flex, @@ -21,7 +20,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; import { store as preferencesStore } from '@wordpress/preferences'; -import { Badge } from '@wordpress/ui'; +import { Badge, Link } from '@wordpress/ui'; import { ViewerSlot } from './viewer-slot'; import useRichUrlData from './use-rich-url-data'; import type { LinkPreviewProps } from './types'; @@ -132,14 +131,20 @@ export default function LinkPreview( { > { ! isEmptyURL ? ( <> - { + if ( value.url?.startsWith( '#' ) ) { + event.preventDefault(); + } + } } > { displayTitle } - + { displayURL } diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 314d7a7b0ce36d..284cb53946bf70 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -215,6 +215,8 @@ $block-editor-link-control-number-of-actions: 1; } .block-editor-link-control__preview-title { + display: flex; + align-items: baseline; line-height: var(--wpds-typography-line-height-sm); mark { @@ -226,17 +228,6 @@ $block-editor-link-control-number-of-actions: 1; span { font-weight: 400; } - - .components-external-link__icon { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip-path: inset(50%); - border: 0; - } } } diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 7fd389789a29dc..0830fe8227be88 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -796,7 +796,7 @@ test.describe( 'Pattern Overrides', () => { await button.focus(); await pageUtils.pressKeys( 'primary+k' ); await expect( - page.getByRole( 'link', { name: 'wp.org' } ).getByText( '↗' ) + page.getByRole( 'link', { name: 'wp.org' } ).getByRole( 'img' ) ).toHaveAttribute( 'aria-label', '(opens in a new tab)' ); // The link popup doesn't have a role which is a bit unfortunate. diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json index 79b39e461c57e1..27b2d3d0e95086 100644 --- a/tools/eslint/suppressions.json +++ b/tools/eslint/suppressions.json @@ -1806,7 +1806,7 @@ }, "packages/block-editor/src/components/link-control/link-preview.tsx": { "@wordpress/use-recommended-components": { - "count": 3 + "count": 2 } }, "packages/block-editor/src/components/link-control/settings.tsx": {