diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 350c94386ed85..b007076e8c7f2 100644 --- 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 index be47f91e158f9..6b0ab2795b7af 100644 --- 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`] = `

This is Gutenberg

" `; + +exports[`Links should contain a label when it should open in a new tab 1`] = ` +" +

This is WordPress

+" +`; diff --git a/test/e2e/specs/links.test.js b/test/e2e/specs/links.test.js index a59041f4f7825..eaa159d1bc0a3 100644 --- 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(); + } ); } );