Use checkbox for Open in new tab within Link Control (#50961)

* Use checkbox control * Align controls * Fix toggle replaced with checkbox
WordPress · May 26, 2023 · e0f300d · e0f300d · github-actions · May 26, 2023
1 parent 156ac69
commit e0f300d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/link-control/settings.js b/packages/block-editor/src/components/link-control/settings.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
 
 const noop = () => {};
 
@@ -19,7 +19,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 	};
 
 	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
+		<CheckboxControl
 			__nextHasNoMarginBottom
 			className="block-editor-link-control__setting"
 			key={ setting.id }

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -495,6 +495,11 @@ $preview-image-height: 140px;
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
 
+	// Cancel left margin inherited from WP Admin Forms CSS.
+	input {
+		margin-left: 0;
+	}
+
 	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}

diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -130,7 +130,7 @@ describe( 'Links', () => {
 
 		// Toggle should still have focus and be checked.
 		await page.waitForSelector(
-			':focus:checked.components-form-toggle__input'
+			':focus:checked.components-checkbox-control__input'
 		);
 
 		// Ensure that the contents of the post have not been changed, since at
@@ -539,7 +539,9 @@ describe( 'Links', () => {
 
 		// Confirm that focus was not prematurely returned to the paragraph on
 		// a changing value of the setting.
-		await page.waitForSelector( ':focus.components-form-toggle__input' );
+		await page.waitForSelector(
+			':focus.components-checkbox-control__input'
+		);
 
 		// Submit link. Expect that "Open in new tab" would have been applied
 		// immediately.