Fix bug with null render if settings has a length and convert to array

Make settings an array so that it can be ordered. Fix incorrect conditional testing for .length to ensure it passes if settings _does_ have a length.

packages/block-editor/src/components/link-control/settings-drawer.js

@@ -11,21 +11,25 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 
-const defaultSettings = {
-	newTab: false,
-};
+const defaultSettings = [
+	{
+		id: 'newTab',
+		title: __( 'Open in New Tab' ),
+		value: false,
+	},
+];
 
 const LinkControlSettingsDrawer = ( { settings = defaultSettings, onSettingChange = noop } ) => {
-	if ( ! settings || settings.length ) {
+	if ( ! settings || ! settings.length ) {
 		return null;
 	}
 
 	return (
 		<div className="block-editor-link-control__settings">
 			<ToggleControl
-				label={ __( 'Open in New Tab' ) }
-				onChange={ partial( onSettingChange, 'newTab' ) }
-				checked={ settings.newTab } />
+				label={ settings[ 0 ].title }
+				onChange={ partial( onSettingChange, settings[ 0 ].id ) }
+				checked={ settings[ 0 ].value } />
 		</div>
 	);
 };

packages/block-editor/src/components/link-control/test/index.js

@@ -559,6 +559,8 @@ describe( 'Addition Settings UI', () => {
 			);
 		} );
 
+		// console.log( container.innerHTML );
+
 		const newTabSettingLabel = Array.from( container.querySelectorAll( 'label' ) ).find( ( label ) => label.innerHTML && label.innerHTML.includes( expectedSettingText ) );
 		expect( newTabSettingLabel ).not.toBeUndefined(); // find() returns "undefined" if not found