Caret (arrow) followed by a text link breaks content

[Tancene]

Describe the bug
Found this issue while writing a WordPress tutorial. Please see the screenshots below!

To Reproduce
Steps to reproduce the behavior:

1. Add a block. Either a paragraph or list block will do.
2. Type something that includes a caret ">"
3. Then add a text link
4. See the error on the frontend

Screenshots

Additional context

• Gutenberg version 4.3.0

[designsimply]

Thanks for using Gutenberg and for reporting issues! I was unable to replicate this issue in testing using WordPress 4.9.8 and Gutenberg 4.3 with the Twenty Seventeen 1.7 theme active using Firefox 63.0.1 on macOS 10.13.6. (54s)

May I ask for a list of active plugins you were using when you tested?

Do you have any browser extensions or add-ons installed by chance?

It may be a long shot but could you also note your theme in case it's a factor?

For the published post from your second screenshot, would it be possible for you to view the page source for the part of the page after the word "install" and before the gallery? Is the HTML there but not showing for some reason or is it completely missing from the page?

[Tancene]

Hi @designsimply

Thanks for looking into this!

I'm using Google Chrome (Version 70.0.3538.77) on macOS10.14 I managed to reproduce the bug on two separate WP installs with different themes and plugins.

I tried to reproduce the issue again and I think I figured out what's wrong! Try this:

1. Create a new post
2. Write something that includes a caret (ex., " To make this thing happen, go to Pages > Add New ")
3. Then add a text link (google.com) and set it to Open in New Tab
4. Write something after the link

Now the part after the link should disappear.

At least for me, everything breaks only if I set the link to open in new tab. If I leave the link to open in the same tab, things work as they should.

Hope this helps!

[Tancene]

Let me know if you still need that page source!

[La-Geek]

Confirmed
Windows 10, chrome browser (all recent), theme twentynighteen, WP (5.0-beta5-43907)

Wow, what an odd bug!

[aduth]

Let me know if you still need that page source!

Could you provide what you see on the Code Editor view? (Found in the top-right menu)

[youknowriad]

@aduth Here's what I see

<!-- wp:paragraph -->
<p>To make this thing happen, go to Pages > Add New <a href="http://google.com/" target="_blank" rel="noreferrer noopener" aria-label="To make this thing happen, go to Pages > Add New http://google.com (opens in a new tab)">http://google.com</a></p>
<!-- /wp:paragraph -->

Maybe an issue with RichText.

[youknowriad]

Somehow the aria-label is containing the whole sentence

[aduth]

That seems quite alarming to me. How / why is the aria-label assigned ?

[aduth]

On its own, that markup should not be breaking any page layout:

https://codepen.io/aduth/pen/xQpKKj

[aduth]

aria-label is assigned here:

gutenberg/packages/format-library/src/link/inline.js

Lines 52 to 59 in 563ef41

	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();
	format.attributes.target = '_blank';
	format.attributes.rel = 'noreferrer noopener';
	format.attributes[ 'aria-label' ] = label;
	}

I assume this should only be containing the text within the link.

Technically it's a separate issue from what's originally reported here, but the reason for alarm is that this is something which can invalidate content if "fixed".

[youknowriad]

@aduth I don't think in invalidates content as it will used the saved markup unless you insert a link again.

[Tancene]

Let me know if you still need that page source!

Could you provide what you see on the Code Editor view? (Found in the top-right menu)

Here's what I get in the Code Editor view:

<!-- wp:heading {"level":3} -->
<h3>Text and a link - breaks</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Go to <strong>Plugins > Add New</strong> then install <a rel="noreferrer noopener" aria-label="Go to Plugins > Add New then install Gutenberg plugin , and go back to your blog post. (opens in a new tab)" href="https://wordpress.org/plugins/gutenberg/" target="_blank">Gutenberg</a>, and go back to your blog post.</p>
<!-- /wp:paragraph -->

[aduth]

@aduth I don't think in invalidates content as it will used the saved markup unless you insert a link again.

That's true. It's still incorrect (and forever incorrect unless updated), but I suspect not strictly breaking at least.

[youknowriad]

I think this issue is less critical than I thought initially as > is behaving properly unless "open in a new tab" is clicked. I'm moving out of the current milestone.

[ZebulanStanphill]

@youknowriad

I think this issue is less critical than I thought initially as > is behaving properly unless "open in a new tab" is clicked. I'm moving out of the current milestone.

This still seems like a serious enough bug to warrant a fix before the release of a 5.0 RC. This kind of funky behavior really should not be happening at all at this stage of development. Follow-up bugfix releases are not an excuse to release something with not just bugs (which is perfectly normal), but with known bugs... especially weird ones like this that actually affect the front-end output, possibly even without the user being aware, if they did not happen to check the front-end preview.

[youknowriad]

I did some more debugging here and it turns out this is not a Gutenberg issue but a WordPress issue already existing in the classic editor as well.

Just paste this valid piece of HTML in the classic editor HTML mode.

<p>To make this thing happen, go to Pages <a href="http://google.com/" target="_blank" rel="noreferrer noopener" aria-label="THis is > an aria label">http://google.com</a></p>

I suggest creating a trac ticket for this and close this issue here.

[youknowriad]

Created https://core.trac.wordpress.org/ticket/45387 to track it

[aduth]

Somehow the aria-label is containing the whole sentence

Created a separate issue for this at #12325