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:

[sc0ttkclark]

I'd love to see this implemented though I understand the limitations. Most of the use-cases I have needed this for involve Image blocks that would normally be a link but then I wanted to add text over the image and it turns it into a Cover block. Then only the text can be linked at that point and the rest of the click area of the cover image can't be used.

[passatgt]

Want to add a CSS solution until this feature is available. Add the class-name "full-link" to your cover image block under the advanced tab:

Add a link to any of the content inside the cover image. This can be an empty paragraph with a space too for example, you just need a link inside the block. Then add the following extra CSS under Styles / ... / Additional CSS:

.full-link a:after {
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
content:'';
}

Now your click area is expanded to the whole block. Class can be used on any other block too.

[tnchuntic]

Any updates on this "add link functionality to Cover block"?

[AceMedia]

I'd love to see this implemented.

[passatgt]

Another solution is to create an extra style for the cover block. Add this code to your functions.php:

add_action( 'init', function(){
    register_block_style( 'core/cover', array(
        'name'         => 'full-link',
        'label'        => 'Link',
        'inline_style' => '.wp-block-cover.is-style-full-link a:after {
            display:block;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            content:"";
        }'
    ));
});

This will create a new style for the cover image block called Link, and you can select it in the styles tab:

And after this, it works the same way as my css solution above, just add a link inside the cover image to any element and it will make the whole block clickable.

[ACAwebbuilder]

Hi passatgt!

Thanks for this idea. I just tried it and don't have the Styles section set-up like in your image. I pasted the code in my Child theme's Function.php.

It is my first time editing that file...is there a specific place I am supposed to paste?

[passatgt]

Hi passatgt!

Thanks for this idea. I just tried it and don't have the Styles section set-up like in your image. I pasted the code in my Child theme's Function.php.

It is my first time editing that file...is there a specific place I am supposed to paste?

Might be a theme compatibility issue? I tried it with the default twentytwenty-three theme and works fine in the functions.php.

[davipontesblog]

Similar request from WordPress.com customers as well.

[Gustavo-Hilario]

+1

[masperber]

+1

[dolgelukkig]

• 1

[chekle]

+1

[gregdotelphotography]

+1

[DeanE1]

How has this not been implemented into core yet? I thought I had this problem licked adding an image with a text overlay just to find it converts my block to a cover image which does not allow the image to be clickable. Please add this seemingly basic function to core.

[smetsson]

• 1 👍

[iamtakashi]

+1. It has been said before, but the cover block is useful in a query loop to show featured images with titles etc. It's a very common pattern for the thumbnail(featured image) to be clickable.

[beeceemato]

+1. This is a very essential missing feature.

[mateitudor]

It's been 84 years

[akasunil]

Another solution is to create an extra style for the cover block.

We can do this by creating a layer with a link that overrides the cover block. As the link layer will be on top of everything, other links wont be clickable. It is tricky to prohibit inner blocks from having links. We should consider an alternative approach given this is an essential feature that would benefit many users.

[mateitudor]

A solution I think is good is to surface that information to the user: "hey if you want the whole column / cover to have a link then all the links inside it will be turned into plain text".

I don't think it's okay to have bad markup and just prohibit default behavior from javaScript. It should be pre-rendered correctly by default.

As long as the user knows what is happening it should make for good UX and the end result is valid markup :)

[uniquesolution]

Wordpress core team please consider the solution I am suggesting here https://github.com/WordPress/gutenberg/issues/45959#issuecomment-2196778355 , this way we will have a accessible, easy to implement link to whole card layout created with group block.

[djpane]

@passatgt A pretty clever solution! @ACAwebbuilder It's been a while from your issues. If you change the first line of the css from .full-link a:after { to .is-style-full-link a:after { it should work.

[gOuTM]

Dears. The solution used by many wordpress-site users is down since the wordpress update 6.6 and it is not clear whether it will be fixed or not (https://wordpress.org/support/plugin/block-options/). That's true that plugin support is responsibility of a plugin owner.

But still, the requested feature is essential for a lot of people here. The solution, provided by the plugin, might be not ideal. but it worked. I read the discussion, that as for that time core team did not see a clear solution for that, but I believe that it can be arranged.

So, could somebody from the core team look into this please?

[gOuTM]

Dear @passatgt , is there any chance to have similar functions.php -based solution for column block? (or maybe even group block?) Thanks!

[passatgt]

Dear @passatgt , is there any chance to have similar functions.php -based solution for column block? (or maybe even group block?) Thanks!

You can register the same hook for multiple blocks, should work:

add_action( 'init', function(){
    register_block_style( 'core/group', array(
        'name'         => 'full-link',
        'label'        => 'Link',
        'inline_style' => '.wp-block-group.is-style-full-link a:after {
            display:block;
            position:absolute;
            inset:0;
            content:"";
        }'
    ));

    register_block_style( 'core/column', array(
        'name'         => 'full-link',
        'label'        => 'Link',
        'inline_style' => '
            wp-block-column.is-style-full-link {
                position:relative;
            }
            .wp-block-column.is-style-full-link a:after {
                display:block;
                position:absolute;
                inset:0;
                content:"";
            }
        '
    ));
});

[khristiansnyder]

• 1 to get this added. #8968161-zen-a8c