Skip to content

Add Unlink button to LinkControl popover #32541

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
getdave merged 7 commits into from
Jun 30, 2021
Merged

Add Unlink button to LinkControl popover #32541

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0d3c2e3
Adds initial Unlink button
getdave Jun 9, 2021
cd64845
Add dedicated opt in prop for removing links
getdave Jun 29, 2021
478c2ae
Add tests
getdave Jun 29, 2021
550b4f0
Update docs
getdave Jun 29, 2021
441744e
Focus PR by removing unneeded onChange handler change
getdave Jun 29, 2021
fde237c
Use more accessible query for button
getdave Jun 29, 2021
545ace8
Remove checking if onRemove is a function.
getdave Jun 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add dedicated opt in prop for removing links
  • Loading branch information
@getdave
getdave committed Jun 29, 2021
commit cd648452de723d085d0525458e680b8e87611811
29 changes: 16 additions & 13 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { noop } from 'lodash';
import { noop, isFunction } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -106,6 +106,7 @@ function LinkControl( {
value,
settings,
onChange = noop,
onRemove,
noDirectEntry = false,
showSuggestions = true,
showInitialSuggestions,
Expand Down Expand Up @@ -266,18 +267,20 @@ function LinkControl( {
settings={ settings }
onChange={ onChange }
/>
{ value && ! isEditingLink && ! isCreatingPage && (
<Button
className="block-editor-link-control__unlink"
isDestructive
variant="link"
onClick={ () => {
onChange( null );
} }
>
{ __( 'Unlink' ) }
</Button>
) }
{ onRemove &&
isFunction( onRemove ) &&
value &&
! isEditingLink &&
! isCreatingPage && (
<Button
className="block-editor-link-control__unlink"
isDestructive
variant="link"
onClick={ onRemove }
>
{ __( 'Unlink' ) }
</Button>
) }
</div>
</div>
);
Expand Down
15 changes: 9 additions & 6 deletions packages/format-library/src/link/inline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,16 @@ function InlineLinkUI( {
...nextLinkValue,
};

function removeLink() {
const newValue = removeFormat( value, 'core/link' );
onChange( newValue );
stopAddingLink();
speak( __( 'Link removed.' ), 'assertive' );
}

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;
return removeLink();
}

// Merge with values from state, both for the purpose of assigning the
Expand Down Expand Up @@ -149,6 +151,7 @@ function InlineLinkUI( {
<LinkControl
value={ linkValue }
onChange={ onChangeLink }
onRemove={ removeLink }
forceIsEditingLink={ addingLink }
hasRichPreviews
/>
Expand Down