Link Format: Label with selected text, not full text (#12154)

* Only label with selected text * Add e2e test
WordPress · Nov 22, 2018 · 509fc16 · 509fc16
1 parent 6e8e1bc
commit 509fc16
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
@@ -21,6 +21,8 @@ import {
 	insert,
 	isCollapsed,
 	applyFormat,
+	getTextContent,
+	slice,
 } from '@wordpress/rich-text';
 import { URLInput, URLPopover } from '@wordpress/editor';
 
@@ -51,7 +53,7 @@ function createLinkFormat( { url, opensInNewWindow, text } ) {
 
 	if ( opensInNewWindow ) {
 		// translators: accessibility label for external links, where the argument is the link text
-		const label = sprintf( __( '%s (opens in a new tab)' ), text ).trim();
+		const label = sprintf( __( '%s (opens in a new tab)' ), text );
 
 		format.attributes.target = '_blank';
 		format.attributes.rel = 'noreferrer noopener';
@@ -173,7 +175,13 @@ class InlineLinkUI extends Component {
 
 		// Apply now if URL is not being edited.
 		if ( ! isShowingInput( this.props, this.state ) ) {
-			onChange( applyFormat( value, createLinkFormat( { url, opensInNewWindow, text: value.text } ) ) );
+			const selectedText = getTextContent( slice( value ) );
+
+			onChange( applyFormat( value, createLinkFormat( {
+				url,
+				opensInNewWindow,
+				text: selectedText,
+			} ) ) );
 		}
 	}
 
@@ -186,7 +194,12 @@ class InlineLinkUI extends Component {
 		const { isActive, value, onChange, speak } = this.props;
 		const { inputValue, opensInNewWindow } = this.state;
 		const url = prependHTTP( inputValue );
-		const format = createLinkFormat( { url, opensInNewWindow, text: value.text } );
+		const selectedText = getTextContent( slice( value ) );
+		const format = createLinkFormat( {
+			url,
+			opensInNewWindow,
+			text: selectedText,
+		} );
 
 		event.preventDefault();
 

diff --git a/test/e2e/specs/__snapshots__/links.test.js.snap b/test/e2e/specs/__snapshots__/links.test.js.snap
@@ -41,3 +41,9 @@ exports[`Links can be removed 1`] = `
 <p>This is Gutenberg</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Links should contain a label when it should open in a new tab 1`] = `
+"<!-- wp:paragraph -->
+<p>This is <a href=\\"http://w.org\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\" aria-label=\\"WordPress (opens in a new tab)\\">WordPress</a></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/test/e2e/specs/links.test.js b/test/e2e/specs/links.test.js
@@ -483,4 +483,29 @@ describe( 'Links', () => {
 		const popover = await page.$$( '.editor-url-popover' );
 		expect( popover ).toHaveLength( 1 );
 	} );
+
+	it( 'should contain a label when it should open in a new tab', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'This is WordPress' );
+		// Select "WordPress".
+		await pressWithModifier( 'shiftAlt', 'ArrowLeft' );
+		await pressWithModifier( 'primary', 'k' );
+		await waitForAutoFocus();
+		await page.keyboard.type( 'w.org' );
+		// Navigate to the settings toggle.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		// Open settings.
+		await page.keyboard.press( 'Space' );
+		// Navigate to the "Open in New Tab" checkbox.
+		await page.keyboard.press( 'Tab' );
+		// Check the checkbox.
+		await page.keyboard.press( 'Space' );
+		// Navigate back to the input field.
+		await page.keyboard.press( 'Tab' );
+		// Submit the form.
+		await page.keyboard.press( 'Enter' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );