Updates to loop over supplied settings

Previously only a “new tab” setting was hardcoded. Update so retain “new tab” as the default, but also allow for custom settings if/when provided.
WordPress · Nov 6, 2019 · ba312a9 · ba312a9
1 parent 63214ff
commit ba312a9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 7 deletions.
diff --git 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 ) => (
+		<ToggleControl
+			key={ setting.id }
+			label={ setting.title }
+			onChange={ partial( onSettingChange, setting.id ) }
+			checked={ setting.checked } />
+	) );
+
 	return (
-		<div className="block-editor-link-control__settings">
-			<ToggleControl
-				label={ settings[ 0 ].title }
-				onChange={ partial( onSettingChange, settings[ 0 ].id ) }
-				checked={ settings[ 0 ].value } />
-		</div>
+		<fieldset className="block-editor-link-control__settings">
+			<legend className="screen-reader-text">
+				{ __( 'Currently selected link settings' ) }
+			</legend>
+			{ theSettings }
+		</fieldset>
 	);
 };
 

diff --git 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 (
+				<LinkControl
+					currentLink={ link }
+					fetchSearchSuggestions={ fetchFauxEntitySuggestions }
+					currentSettings={ customSettings }
+				/>
+			);
+		};
+
+		act( () => {
+			render(
+				<LinkControlConsumer />, 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 );
+	} );
 } );