Add a link section for Cover Image Block Settings

[CalumChilds]

Is your feature request related to a problem? Please describe. I want to link a cover image block to a particular page, which I can't do without delving into the code.

Describe the solution you'd like A "Link" section in the Block settings sidebar (see below)

Describe alternatives you've considered For now, I will use HTML to link it to the page I want. But most people using this new editor have probably never heard of HTML, let alone coded in it. (Edit: I've just tried to do this and it says that the block contains "unexpected content" - see below:) This is the code I entered:

[jaclyntan]

Along with link options I'd also like to add headings and paragraphs within the block. I know a section block was being explored but I'd like to see more options in the cover block so it's more flexible. Thank you!

[CalumChilds]

@jaclyntan This has been done in Gutenberg 5.3, where you can now add blocks within the Cover Block.

[foosantos]

Someone just asked about it here. https://wordpress.org/support/topic/how-to-link-a-pdf-to-a-cover-image-in-5-2/

[affeldt28]

I would like to see the feature implemented, its a bit annoying to always manually edit as html and add links. Sad that since 2018 nobody done it. i think it shouldn't be very difficult to do.

[boomtemp123]

Same here, being able to link these is a good idea and something that you'd expect to be one of the basic functions. Kioken blocks allows this on it's image block.

[boomtemp123]

Similar issue raised here: https://wordpress.org/support/topic/no-way-to-link-a-cover-block/

[phpbits]

Added Link toolbar to EditorsKit plugin for the following blocks. I hope this could be of huge help. Thanks!

• Cover Block
• Group Block
• Column Block

Options available are:

• Link to New Tab
• NoFollow rel attribute
• Sponsored rel attribute
• Hover animation option

Here's the preview and EditorsKit is available for free on the plugin directory.

[paaljoachim]

We need a developer to add this into the Cover Block similar to how Media & Text Block now has a link.

Media & Text Block has in the toolbar a link icon to the left of the Replace button.

For the Cover Block one would do something similar. Adding a link to the left of Replace button. Like this mockup:

[CalumChilds]

As mentioned earlier in this thread, there is already a plugin (EditorsKit) with this feature embedded. We have a working prototype, all someone needs to do is add it to the Gutenberg code.

[tripledm]

As mentioned earlier in this thread, there is already a plugin (EditorsKit) with this feature embedded. We have a working prototype, all someone needs to do is add it to the Gutenberg code.

Sadly EditorsKit works on one site but the others I manage not as just getting a blank screen and timeout when I try edit a post during tests. Anyway, not the forum for that topic as it's a conflict somewhere but to bump your request up with my response.

The issue was raised (this thread) 1.5 years ago and considering the importance of this I would only hope it's added to core sooner rather than later.

[kjellr]

Just want to add my voice here to say that the native ability to link an entire Group or Cover block to a single URL would definitely come in handy for a variety of layouts.

Here's an example pattern that features two "Cards". Ideally, these entire cards would be clickable, but there's no way in Gutenberg today to make that happen.

(design via @beafialho)

[CalumChilds]

I agree. Maybe we could get this feature in for WordPress 5.6?

Sent from my iPod

On 17 Aug 2020, at 18:02, Kjell Reigstad notifications@github.com<mailto:notifications@github.com> wrote:

Just want to add my voice here to say that the native ability to link an entire Group or Cover block to a single URL would definitely come in handy for a variety of layouts.

Here's an example pattern that features two "Cards". Ideally, these entire cards would be clickable, but there's no way in Gutenberg today to make that happen.

[Screen Shot 2020-08-17 at 1 00 08 PM]https://user-images.githubusercontent.com/1202812/90422960-a749e280-e089-11ea-9232-cfd32b793e9b.png

(design via @beafialhohttps://github.com/beafialho)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/WordPress/gutenberg/issues/12684#issuecomment-674997801, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGBR2AJXXPXQB2T5NL4Y4ODSBFPBXANCNFSM4GJDD7VA.

[cguntur]

I can take up this one.

[ZebulanStanphill]

I know links can often eat semantics when used improperly, so I think we ought to be careful about adding something like this. It's possible that this may be an accessibility anti-pattern that we should avoid at all costs... or it could be completely fine. I'm not really sure. Pinging @afercia from the accessibility team to check this out and give feedback.

[afercia]

Cover blocks (and group blocks, and possibly other blocks) can already contain links:

When a "block-level link" is added to wrap the block, there shouldn't be other links within the block content to avoid nested links. So this feature should make sure to:

• automatically remove links within the content, if any
• remove from the UI of any block within the cover/group the ability do add links into the content

[afercia]

I know links can often eat semantics when used improperly,

Yep, it really depends on what's inside the linked block. Expanding my previous comment: what if inside the block there's, say, an input field, or a button, or any other interactive element? A link should contain only non-interactive elements. The implementation should make sure to avoid nested interactive elements. At a first glance, this appears to be a bit complicated especially with existing content: should the block content be "cleared" of any interactive element when the block gets linked?

[CalumChilds]

an input field, or a button I don't think anyone putting a link around the Cover block would be having any input fields or buttons inside it, as this would defeat the purpose of a link surrounding the Cover block.

---

From: Andrea Fercia notifications@github.com Sent: 24 September 2020 10:43 To: WordPress/gutenberg gutenberg@noreply.github.com Cc: Calum Childs calumchilds@hotmail.co.uk; Author author@noreply.github.com Subject: Re: [WordPress/gutenberg] Add a link section for Cover Image Block Settings (#12684)

I know links can often eat semantics when used improperly,

Yep, it really depends on what's inside the linked block. Expanding my previous comment: what if inside the block there's, say, an input field, or a button, or any other interactive element? A link should contain only non-interactive elements. The implementation should make sure to avoid nested interactive elements. At a first glance, this appears to be a bit complicated especially with existing content: should the block content be "cleared" of any interactive element when the block gets linked?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/WordPress/gutenberg/issues/12684#issuecomment-698265671, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGBR2AKVXYPSJJDF2CEVZPLSHMPEDANCNFSM4GJDD7VA.

[afercia]

I don't think anyone putting a link around the Cover block would be having any input fields or buttons inside it,

I don't think we can trust users this way 🙂 Valid, semantic, accessible markup should be enforced via code.

[ZebulanStanphill]

The disable-link-control-on-nested blocks idea sounds very similar to the issue where sometimes we want to disable the block alignment controls for blocks when they are nested inside another block with a layout/style that doesn't support those alignments. Perhaps the solution to both problems is the same... but I'm not sure what that solution is.

[cguntur]

I might need some guidance on this one.

[paaljoachim]

Hi Chandrika @cguntur

After you get a bit going you can then ask questions that arise directly in the core-editor Slack channel, and let people know that are you are new and working on figuring out ...... You can also ask questions during the Open Floor of a core editor chat. There are many people that can give help.

[cguntur]

@paaljoachim Ok, I will give it a try. Thank you for the help.

[talldan]

Not that I disagree with the intent of preventing invalid markup, but this feature sounds like a bit of a minefield in terms of implementation.

Any feature would have to handle various situations:

• Links already exist on inner blocks when the user wants to apply the cover block link (is the cover block link interface disabled in this situation? Or alternatively inner block links are stripped when the cover links is applied? What about blocks that represent entire links (e.g. buttons), how are they handled? Third-party blocks?)
• The user applies the outer link and then tries to add inner links (is the inner block link interface disabled in this situation? And then what about button blocks and third party blocks?)
• Detection of inner links would have to work for any level of block nesting.

I also think it's going to be hard to relay to the user what the problem is that's preventing the addition of links.

Feels like this particular problem needs some design input more than anything, so I'll apply that label.

[kjellr]

Seems like the simplest solution might be to have a distinct, "clickable card" block. It would function similarly to a Cover or Group block, but it would accept a single link, and blocks inside of it would not be linkable.

If a user converted a group/cover block to a "clickable card" block, we'd strip out all links inside the block (and maybe even show a warning before we do that if it's applicable?)

[phpbits]

Seems like the simplest solution might be to have a distinct, "clickable card" block. It would function similarly to a Cover or Group block, but it would accept a single link, and blocks inside of it would not be linkable.

@kjellr this might complicate blocks more for some users. Right now it's hard to differentiate Cover to Group block and creating a new block with similar function might not be a good idea.

[CalumChilds]

@kjellr The only way I can see it working is if you call the new block "Cover With Hyperlink", otherwise, as @phpbits said, it's not going to make much sense for new users.

[paaljoachim]

I did a search for nested links accessibility and came across this: https://css-tricks.com/nested-links/

"Speaking of accessibility, Heydon Pickering has a whole article about card components https://inclusive-components.design/cards/ which is a popular design pattern where this situation often comes up. His solution is to have a relatively positioned parent element, then a normally-placed and functional main link. That first link has an absolutely positioned pseudo-element on it covering the entire card. Any sub-links are relatively positioned and come after the initial link, so they’d sit on top of the first link by way of z-index."

Btw @talldan I do not think this issue needs a label for design, but perhaps one for CSS instead.

[lankymalay]

I think a new block seems like a more sensible solution. At the moment it seems like a lot of people are trying to use the Cover block as a CTA block which isn't really what it seems like its designed for?

Could there be a CTA block added to Gutenberg where the only place you can add a link is to the box itself? This should then workaround the nested links issue.

[paaljoachim]

Perhaps Isabel @tellthemachines and Joe @joedolson might have some additional input on this issue.

[megphillips91]

After reviewing all that...I think that the best solution is to use a new block. My immediate need is not so much for a full screen - full width hero which links across the whole element and can contain an unlimited number of inner blocks. In fact, I think that would be less accessible and quite annoying for users with screen readers.

Rather, I think the more applicable use case is an image button which can have a nested rich text field or button so basically aiming at something that probably ends up being a div with a background image and a nested button or rich text. Using inner blocks we could make informed decisions for the site creators by limiting the blocks which are possible to add and make good suggestions of what could (should) be added with the template feature.

Either way, I have an immediate need to build this in plugin land and I can share that here

[uniquesolution]

the cover block should also support an external image link as cover image, as how its provided in image block. Because basically when I create a pattern I simply use any external stock image url or https://picsum.photos/ image.

[donalirl]

+1 for this feature.

[uniquesolution]

For making whole cover block clickable and go to a link, we can apply the approach bootstrap follow using "stretched-link" class https://getbootstrap.com/docs/5.1/helpers/stretched-link/ , for example how I have done it on this site https://valleyfootanklecenter.com/ , for these cover blocks https://nimb.ws/xgKLMT

So if there is an option like "make whole cover as link" choosing it, there will be a option to add link, we can apply same bootstrap approach, as our cover block is already position-relative, stretched link with some css make it position-absolute and cover the whole cover block, being inside the cover, so there will be no chance of overlapping parent child links, but we have to provide "aria-label" attribute too, because link without text need this attribute to make it ADA compliance. So there are some effort involve. But providing external link image support is a simple thing, that I think must be supported in cover block.

[bradhogan]

Definitely +1 🙏

[Nilros]

+1 for this ! Please !

[KainerW]

+1 Definitely needed.

[antonyjsmith]

Definite +1, can't believe this is still rumbling on from 2018!

[exstheme]

+1 also. Does anyone knows - is this feature will be implemented some day?

[akasunil]

Added link option in cover block PR 41908

[exstheme]

Dear @sunil25393 ! Thank you for your quick reply but it seems that this is not resolving current issue. We want to ability to add a custom link for whole cover image so it could be clickable. But as I see - your PR adds an ability to insert custom cover background from custom URL.

Sorry if I misunderstood you.

Best regards!

[gOuTM]

Hej!

Any chance to have this useful feature as a core functionality?

[bradhogan]

Any updates on this? This should really be added at this point. We need to be able to link rows, columns, groups and cover blocks.

[petko]

We definitely need this soon!

[gilsonviana]

+1 ✨

[mrfoxtalbot]

There is a related conversation (but discussing the columns block) on this issue https://github.com/WordPress/gutenberg/issues/45959

[clairedornic]

+1 for this, please !

[gaswirth]

+1!!!

[bradhogan]

Any updates on this? Cover and Group/Row/Column blocks should have an option to link.

[LeoBoudet]

+1 here

[Gustavo-Hilario]

Chatted with a user recently who wanted the Cover block to work as a link when added inside the Query Loop block. When added inside the Query Loop, we can use the Featured image as the cover image, but it would be awesome to have that image clickable too.