diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index 0ff9a00cff3bf..7ee8b5fa38767 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -15,7 +15,7 @@ const defaultSettings = [
{
id: 'newTab',
title: __( 'Open in New Tab' ),
- value: false,
+ checked: false,
},
];
@@ -24,13 +24,21 @@ const LinkControlSettingsDrawer = ( { settings = defaultSettings, onSettingChang
return null;
}
+ const theSettings = settings.map( ( setting ) => (
+
+ ) );
+
return (
-
-
-
+
);
};
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 3716cfb99e1cc..5a69142b5f495 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -569,4 +569,61 @@ describe( 'Addition Settings UI', () => {
expect( newTabSettingInput ).not.toBeNull();
expect( newTabSettingInput.checked ).toBe( false );
} );
+
+ it( 'should display a setting control with correct default state for each of the custom settings provided', async () => {
+ const selectedLink = first( fauxEntitySuggestions );
+
+ const customSettings = [
+ {
+ id: 'newTab',
+ title: 'Open in New Tab',
+ checked: false,
+ },
+ {
+ id: 'noFollow',
+ title: 'No follow',
+ checked: true,
+ },
+ ];
+
+ const customSettingsLabelsText = customSettings.map( ( setting ) => setting.title );
+
+ const LinkControlConsumer = () => {
+ const [ link ] = useState( selectedLink );
+
+ return (
+
+ );
+ };
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Grab the elements using user perceivable DOM queries
+ const settingsLegend = Array.from( container.querySelectorAll( 'legend' ) ).find( ( legend ) => legend.innerHTML && legend.innerHTML.includes( 'Currently selected link settings' ) );
+ const settingsFieldset = settingsLegend.closest( 'fieldset' );
+ const settingControlsLabels = Array.from( settingsFieldset.querySelectorAll( 'label' ) );
+ const settingControlsInputs = settingControlsLabels.map( ( label ) => {
+ return settingsFieldset.querySelector( `#${ label.getAttribute( 'for' ) }` );
+ } );
+
+ const settingControlLabelsText = Array.from( settingControlsLabels ).map( ( label ) => label.innerHTML );
+
+ // Check we have the correct number of controls
+ expect( settingControlsLabels ).toHaveLength( 2 );
+
+ // Check the labels match
+ expect( settingControlLabelsText ).toEqual( expect.arrayContaining( customSettingsLabelsText ) );
+
+ // Assert the default "checked" states match the expected
+ expect( settingControlsInputs[ 0 ].checked ).toEqual( false );
+ expect( settingControlsInputs[ 1 ].checked ).toEqual( true );
+ } );
} );