Add Link Option to Cover Block

[boomtemp123]

Is your feature request related to a problem? Please describe.
There appears to be no way of adding a link to a cover block – this seems like a very basic feature which should exist.

Describe the solution you'd like
Let’s say you want to create a column block with 3 inner columns for 3 pages of your site, each containing a cover block (background image with text overlay) which when clicked takes you to another page. There is no way of doing this currently in Gutenberg at all, you can link an image block but this has no means of applying a text overlay.

Describe alternatives you've considered
I tried creating a single link in the block and then adding a class and then making that link cover the entire block to make it clickable, but if you needed more than one block inside the cover block this doesn't work. Also I don't really want to add a custom class and custom css to the stylesheet just to link an element (a user wouldn't remember to add the class each time they wanted to achieve this)

[boomtemp123]

Further discussion/feedback here too:

https://wordpress.org/support/topic/no-way-to-link-a-cover-block/
https://wordpress.org/support/topic/add-link-option-to-cover-image-block/

[paaljoachim]

I believe this issue should get some more attention.
@phpbits Is this something you can help out with Jeffrey?

[phpbits]

@boomtemp123 @paaljoachim Nice timing :) I've just added this option to EditorsKit plugin. Starting version 1.25 you can add link to Cover, Group and Column Blocks. I hope this could be a huge help. Thanks!

[boomtemp123]

Hey, although it's good this functionality is available in a plugin, this is such basic and widely used functionality it really should be in core.

[paaljoachim]

Hey @boomtemp123

I agree it should be included in Core.

What you can do is bring it up during the Open Floor section at tomorrows Core Editor meeting to bring additional attention to this issue. Agenda will be posted later today at https://make.wordpress.org/core/

[boomtemp123]

Okay i'll try to raise this once if I it's within working hours

[paaljoachim]

I am wondering if you could look into adding the option to link the Cover Block image Jeffrey @phpbits ?

Or

Andrei @draganescu has earlier worked on this issue: #15422 to add a link to the media in the Media & Text Block. Andrei could you possibility also add a link option to the Cover Block as well?

[phpbits]

@paaljoachim I'm not sure if this fits in the core 80/20 rules and should be on the plugin territory. Specially because of the rel attributes.

I may be wrong though, because it seems that Media and Text now has link option. @paaljoachim do you have a link that explaining the 80/20 rule? Thanks!

[paaljoachim]

Hey Jeffrey.

Here is a link: https://wordpress.org/about/philosophy/
The 80/20 rule is not greatly followed. As it is hard to know what 80% think. Today one rather guesses as to what might belong in Core and what might not.
Basic features will easier be added then more complex. A basic feature can over time though grow into something more complex if needed.

I will add the following information for someone who might not know the process of suggesting a feature to Gutenberg.
Let's say there is something someone would like to add to Gutenberg Core.
Then the person creates an issue. Needs design label is added. Design goes through it and gives feedback. Developer label might be added after design has gone through. A developer picks up the issue and creates a PR (Pull Request) to begin the coding process. Developer finishes and design and other developers will make comments on the code. After it has been accepted the PR is then merged into Gutenberg.

[youknowriad]

Duplicate of #12684

[tripledm]

Hey Jeffrey.

Here is a link: https://wordpress.org/about/philosophy/
The 80/20 rule is not greatly followed. As it is hard to know what 80% think. Today one rather guesses as to what might belong in Core and what might not.
Basic features will easier be added then more complex. A basic feature can over time though grow into something more complex if needed.

I will add the following information for someone who might not know the process of suggesting a feature to Gutenberg.
Let's say there is something someone would like to add to Gutenberg Core.
Then the person creates an issue. Needs design label is added. Design goes through it and gives feedback. Developer label might be added after design has gone through. A developer picks up the issue and creates a PR (Pull Request) to begin the coding process. Developer finishes and design and other developers will make comments on the code. After it has been accepted the PR is then merged into Gutenberg.

This is surely a less complex issue with a HUGE requirement and need for it. I have to speak to almost 100 editorial staff on a weekly basis and listen to complaints about having to add it in and most forgetting or getting the syntax wrong. So, how hard can it be to add a nofollow on/off option to core just like open in new window?

[draganescu]

Howdy @tripledm thanks for pushing this forward. There is an issue open and as you can see people are trying to find the best way to solve it. Sometimes the duration of something being "done" is more than the absolute complexity of adding the code to make it work.

While I understand the fact that you're confronted by this shortcoming of the system a lot, asking "how hard can it be" makes it look like all the effort put into thoughtfully doing things is wasted time, which is not the case. Also, just anecdotally, right now there are 2112 issues open, so it is easy so see why some that seem trivial are taking longer than expected to get a PR :)

Let's also move the discussion to #12684. Thank you! 🙏

[Bathories]

@boomtemp123 @paaljoachim Nice timing :) I've just added this option to EditorsKit plugin. Starting version 1.25 you can add link to Cover, Group and Column Blocks. I hope this could be a huge help. Thanks!

Doesn't work for columns other than gutenbergs official columns!
I'm using KadenceWP blocks.

[slewisma]

I have multiple clients needing this now too as we've left other page editors. The cover block at first appears to be a good replacement for similar widgets but because the image is not clickable it does not do what is expected. Perhaps more importantly, it makes the cover block bad from a UX perspective on touchscreens where there is no mouse and hover that might provide a clue to what is and is not clickable.

One of the other threads on this topic that is now closed had a comment that the image is a cover image so is not linkable. That is false. The image is an image if you look at the html in the inspector.

[bracketsberlin]

In case anyone is still searching for a similar option using built-in Gutenberg blocks: I used the core/media-text block instead and added a custom style class to it, to have an option in the backend to enable/disable the style. The core/media-text block allows adding a link to the image but also to the text on top of the image.

The following code allows positioning text on top of the chosen image and adds a button to the backend to toggle this teaser style.

Add to functions.php

add_action('init', function() {
  register_block_style('core/media-text', [
    'name' => 'teaser-element',
    'label' => __('Teaser Element', 'your_theme_slug'),
  ]);
});

Add to your (S)CSS

.wp-block-media-text {
  &.is-style-teaser-element {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    .wp-block-media-text__media, .wp-block-media-text__content {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
    }

    .wp-block-media-text__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 44px 28px;
    }
  }
}

Add block to your page and apply style to it

Enjoy (and further style your block)

Cheers!

[auching]

It's almost 2024 and the cover image is still not clickable, sigh.

[SayedEnayatSadat]

It's almost 2024 and the cover image is still not clickable, sigh.
Hi
did you find any way i have the same Problem

[beeceemato]

+1. Please add the option to add a link to the cover block.

[gyurmey2]

+1.

[rvasco-nw]

+1

[HairyCream]

+1

[WebWrotter]

It's almost 2024 and the cover image is still not clickable, sigh.

It's almost 2025 and the cover image is still not clickable, sigh.

[Azragh]

+1