Consider adding a general purpose Link block or block supports

[noisysocks]

To my knowledge it's not currently possible to build a section like this (from this site) in a block theme:

You can get tantalisingly close using the following structure and setting the Cover block to Use featured image and giving it a gradient overlay.

Query Loop
  Post Template
    Cover
      Title
      Excerpt

The problem is that you can't make the Cover block link to the post.

It would be great if there were a way to achieve this. I'm not sure of the best solution, but two ideas:

1. A general purpose Link block which wraps its contents with an <a> and so allows you to turn anything into a link. This could even replace the existing Link to post and Link to home settings that exists in the Post Featured Image, Post Title, and Site Title blocks. We would need a way to restrict the user from nesting <a> tags though as this is invalid markup.

2. Add a new Link block supports that shows up as a panel in the block inspector and add it to lots of different blocks: Cover, Group, Image, etc.

[andrewserong]

Nice issue! It reminds me of an earlier issue about making the entire post item within a query loop clickable. Potentially related issues:

• Make entire post item in query loop clickable but only the heading linked #38014
• Link control: Make it possible to link to the current post when in a query loop #60499

[noisysocks]

I bet @richtabor has some good ideas here.

[colorful-tones]

I would be careful with the final markup. Typically a clickable card solution relies on CSS positioning and a pseudo-element. A good reference for implementation would be Inclusive Components > Cards

[cbirdsong]

There is a longstanding issue for this over here:

• Add a link section for Cover Image Block Settings #12684

I concur about Inclusive Components being a good reference and that you'd have to be very careful with the markup as well as the editing experience – getting the implementation of this pattern right is difficult.

For instance, in the OP's example screenshot, the whole card is presumably clickable, but there's also a "add comment" link inside of it. The usual recommendation for this pattern is to avoid nested links, but if they have to exist they should have a large clickable interactive area. There is not really a way for that to be applied in the block editor in a generalized way.

There's also the question of what bit of text actually is linked, which is important for accessibility. As described in Inclusive Components, you can't just wrap the whole thing in an <a> without creating accessibility issues. Additionally, a common thing you see in this pattern is having a "read more" tease at the bottom of the card, but if that's the linked text it's an instant accessibility failure. The headline needs to be what's linked so it would be unique.

Needless to say, this all would be very difficult for the average user to understand and manage in the editor UI. My inclination would be to make it so that you could only engage "stretched link" option if the container has one link and no other interactive elements inside of it, and once it is a stretched link then additional interactive elements could not be added.

[mtias]

Also any solution that changes the root element to a is going to be a bit troublesome for block validation and could create too much complexity at the block functions level. It seems a wrapper block could keep things more organized and we could explore enforcing certain restrictions or warnings for nested links or interactive elements. With the support group has for alternative tags, maybe it could even be explored as a variation of group.

[noisysocks]

Good point on block validation. I could see a "Link to" setting in Group and Cover working pretty well. The complex part is getting the UX right around forbidding nested interactive elements.

[Marc-pi]

yep, a strong need indeed see #12684

[sophiegyo]

This would be wonderful if possible! Since I discovered around a year or 18 months ago that the read more block could "hack" this I've used that for example/test work where I wanted the cover block to be clickable - but having the cover itself be a link would be the ideal.

For reference, my terrible, not-accessibility-friendly hack:

• Query loop
  • Post template
    • Cover block, set to featured image. Inner blocks should not use content width. Remove any default padding from the cover block.
      • Read More block, text colour set to fully transparent, and padding jacked up as high as it will go. Optional: text size set to 0px, and customise the text in some manner.
      • Group/stack block with a dark background, slightly opaque
        • Post title
        • Post date

It doesn't let the group containing the Post Title and Post Date be clickable, unfortunately the padding hack doesn't work on those blocks in the same way as the Read More block so only their text is clickable.

Screenshot link - showing some earlier setup of the read more block (large text instead of small, but IMO the small text seems to work just as well if not better)

Edit: considering that adding an a block around the cover might be a problem re block validation, would it be viable to instead add it inside, as long as inner blocks don't use content width?