Latest Posts block: Post links/titles should not be clickable

[mrfoxtalbot]

Steps to reproduce the behavior
Go to the editor and add the Latest Posts block
Click on a post title
Notice the link behaves like an actual link (forcing you to exit the editor), which is not an expected behavior inside the block editor

What I expected to happen
I was expecting to be able to select the post (or the block) to see the options the block provides me

What actually happened
If the post/page is not saved, the browser shows a warning. If the post/page is saved, then you immediately exit the editor

This was first reported on a WordPress.com simple site but we were able to reproduce it on a local WordPress.org, with and without the Gutenberg plugin (Version 10.3.1).

[vdwijngaert]

Also appears to be the case for the categories block. I can pick this up, but I'm not sure on the best solution. As far as I can see, I've seen this issue being solved elsewhere in different ways:

• Wrapping a <Disabled> around the component.
• PreventDefault onClick={e => e.preventDefault()}
• Using a pseudo link: <a href="#post-date-pseudo-link">{ postDate }</a>

The Disabled wrapper is mostly used around server side rendered blocks and otherwise interactive elements (video, audio, ...). It appears to behave normally in this case, but events like hover and focus are also disabled.

In the past the pseudo link approach was used for these cases, but recently a similar issue in the Site Editor was fixed using the preventDefault method. Maybe @carolinan can pitch in here?

[mrfoxtalbot]

Thank you @vdwijngaert.

We probably want to fix this in a way that is consistent with previous issues, but I see two other alternative options:

• Styling the links as pointer-events: none;.
• Adding target="_blank"to the links.

[vdwijngaert]

• Styling the links as pointer-events: none;.

I didn't know this could actually prevent clicking. Nifty! This would prevent being able to preview certain styles for pointer events, though.

• Adding target="_blank"to the links.

Slightly less annoying, but to me that still feels more like a bug than a feature.

I'm starting to get the feeling that there's a need for uniformity, perhaps in the form of a dummy link component? This encapsulates all dummy links to one component, and might make it easier to do UX adjustments later on (like a popover that says something in the likes of "hold CTRL while clicking to open link").

[carolinan]

The way we solved this in other blocks was by adding a # to the link:
href={ isLink ? '#site-title-pseudo-link' : undefined }
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/site-title/edit/index.js#L55

[carolinan]

It would be good if we could decide if a new component should be created, or which method should be used, so that the problem can be resolved.

[mrfoxtalbot]

Thank you @carolinan. Are there any downsides to the solution you mentioned earlier and that has already been used elsewhere? If not, let's go with that!

[t-hamano]

I believe this issue was fixed in #40593. It has been fully discussed in that PR and the approach seems appropriate to me. How about closing this issue?