Update LinkControl component to utilitse dynamic settings for additional settings "drawer"

[getdave]

Closes #18206.

The new experimental Link UI provided by LinkControl allows for a currently selected link to have settings such as "Open in new tab"...etc

As things stand the only setting that is possible is "new tab" as this has been hard coded.

This PR updates so that multiple settings can be provided by passing the currentSettings prop to LinkControl:

<LinkControl
	// ...other props here
	currentSettings={ [
		{
			id: 'newTab',
			title: 'Open in New Tab',
			checked: false,
		},
		{ // this is custom!
			id: 'noFollow',
			title: 'No follow',
			checked: true,
		},
	] }
/>

How has this been tested?

Automated tests cover this change.

Types of changes

Breaking change (fix or feature that would cause existing functionality to not work as expected).

As this updates LinkControl we can expect this PR to break. It will need updating so that:

• new-tab becomes newTab in any settings provided.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[getdave]

@phpbits This is relevant to #17557 (comment)

[getdave]

@retrofox I'm interested in how you see my change working with https://github.com/WordPress/gutenberg/pull/18062/files#diff-17e2993cb0b8cf64434015038b235162R214

[retrofox]

Testing

I've tested locally in my dev env. It looks pretty good!

It's pretty easy to use and narrows very good with the block attributes:

<LinkControl
	currentSettings={ [
		{
			id: 'opensInNewTab',
			title: __( 'Open in New Tab' ),
			checked: opensInNewTab,
		},
		{
			id: 'noFollow',
			title: 'No follow',
			checked: noFollow,
		},
	] }
	onSettingsChange={ ( setting, value ) => setAttributes( { [ setting ]: value } ) }
/>

[retrofox]

btw feel free to go-ahead not waiting for #18062 👍

[getdave]

I'll be rebasing this branch shortly and tweaking the visual styles. Then we're 👍 to merge.

[getdave]

@retrofox Having to pass the entire config object even to use the default setting feels like a lot of effort:

<LinkControl
	currentSettings={ [
		{
			id: 'opensInNewTab', // why can't I omit this?
			title: __( 'Open in New Tab' ), // why can't I omit this?
			checked: opensInNewTab, 
		},
	] }
	onSettingsChange={ ( setting, value ) => setAttributes( { [ setting ]: value } ) }

Is there a way to make this API nicer?

[retrofox]

While I was testing I immediately thought that the id and checked properties could be combined in just one. At least it could be optional:
If the checked is not defined we can try to apply the value through of the id

<LinkControl
	currentSettings={ [
		{
			id: 'opensInNewTab',
			title: __( 'Open in New Tab' ), // why can't I omit this?
		},
	] }

About the title, maybe? I guess that maybe it could be handled by the parent component? Not sure, though. We can just remove the title if it isn't defined.

[retrofox]

Dave, I think we should update how the Menu Item updates the link settings: something like that?

const updateLinkSetting = ( setter ) => ( setting, value ) => {
	setter( { [setting]: value } );
};

[retrofox]

Also, we will need to update the setting ID here to opensInNewTab

[getdave]

Ok @retrofox this is updated.