Link interface unification using one in navigation block

[karmatosed]

There is a new link interface being used for navigation:

Whilst the #17557 was closed this only brought it into navigation. I would like to see it replacing the one also used anywhere else. Unfortunately, right now we have 2 ways to add links so let's fix that.

[noisysocks]

Unfortunately, right now we have 2 ways to add links so let's fix that.

We have four by my count! 😀 Soon to be five if #18139 is merged.

Paragraph block:

Image block:

Navigation block:

Button block:

[phpbits]

Do you have any link for the documentation on how to extend the new interface? Thanks!

[noisysocks]

@phpbits:

There is a little documentation on the LinkControl component (which is what the Navigation block uses) here:

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/link-control/README.md

[noisysocks]

Just thinking through what might be involved here:

• Need to update the built-in link format (format-library/src/link/index.js) to use LinkControl.
• Need to update the Image block to use LinkControl.
• Potentially should also update the Button block to use LinkControl.
• Potentially should deprecate the old components (URLInput, URLPopover, etc.)

There's no need to do everything at once. We can start small and iterate.

LinkControl will also need to be updated to support more than just checkbox settings so that the Image block can show the Link Rel and Link CSS Class settings. For this I would suggest replacing the currentSettings prop with an API designed around composition, e.g:

<LinkControl currentLink={ ... } onLinkChange={ ... }>
	<LinkControl.ToggleSetting title="Open in new tab" onToggle={ ... } />
	<LinkControl.TextSetting title="Link rel" value="" onToggle={ ... } />
	<LinkControl.TextSetting title="Link CSS class" value="" onToggle={ ... } />
</LinkControl>

[karmatosed]

Closing this one as making individual issues for each area that needs this.

[phpbits]

@noisysocks Any updates on how we can add extra controls on the Link popover? Planning to add extra 'trash' icon at the bottom to remove link. Thanks!