diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 85b5e45f2d95c9..211b053be1495a 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -257,11 +257,25 @@ function LinkControl( { /> ) } - +
+ + { value && ! isEditingLink && ! isCreatingPage && ( + + ) } +
); } diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index b1b6958dbe5f8c..3d5d5941bb7749 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -380,10 +380,23 @@ $preview-image-height: 140px; padding: 10px; } -.block-editor-link-control__settings { +.block-editor-link-control__tools { + display: flex; + align-items: center; border-top: $border-width solid $gray-300; margin: 0; padding: $grid-unit-20 $grid-unit-30; +} + +.block-editor-link-control__unlink { + padding-left: $grid-unit-20; + padding-right: $grid-unit-20; +} + +.block-editor-link-control__settings { + flex: 1; + margin: 0; + :last-child { margin-bottom: 0; diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index 5687cb67c05932..11c843d3680359 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; exports[`Rich link previews should display a rich preview when data is available 1`] = ` .emotion-2 { diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index d015267a8e38f7..c0098b1393758d 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -11,6 +11,7 @@ import { isCollapsed, applyFormat, useAnchorRef, + removeFormat, } from '@wordpress/rich-text'; import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor'; @@ -49,6 +50,15 @@ function InlineLinkUI( { }; function onChangeLink( nextValue ) { + // null values trigger removal of link format. + if ( null === nextValue ) { + const newValue = removeFormat( value, 'core/link' ); + onChange( newValue ); + stopAddingLink(); + speak( __( 'Link removed.' ), 'assertive' ); + return; + } + // Merge with values from state, both for the purpose of assigning the // next state value, and for use in constructing the new link format if // the link is ready to be applied.