Make Cover, Group, and Column blocks fully clickable in Gutenberg and Query Loop—no wrapper block, no custom code.

4wpdev

Anatoliy Dovgun

A plugin by <a href="https://4wp.dev/plugin/4wp-smart-link/" rel="nofollow ugc">4wp.dev</a>.
Demo video: https://www.youtube.com/watch?v=8ZGojkTl2CM
Query Loop cards and layout blocks (Cover, Group, Column) often need a large click target—open the post, a landing page, or a campaign URL—while titles, tags, and buttons inside the card keep their own links. Core does not offer whole-block linking for these containers.
4WP Smart Link adds toolbar and inspector controls on Cover, Group, and Column so you can:
<ul>
<li>Set a custom URL for Cover, Group, or Column.</li>
<li>In a Query Loop, link the block to the current post (uses the loop item’s post context).</li>
<li>Open the link in a new tab when you need to, with sensible <code>rel</code> handling for <code>target="_blank"</code>.</li>
<li>Add optional relation (<code>rel</code>) tokens and an accessibility label when you need more than the visible text.</li>
</ul>
The actual clickable wrapper is added on the published front end when the URL resolves. If there is no URL, the block output is unchanged.
Important: When the block has no other links inside, the front end wraps it in a normal <code><a></code>. When inner links exist (post title, terms, buttons, etc.), the plugin uses a clickable container (<code>data-forwp-smart-link-url</code> + a small front-end script) so link-in-link HTML is never output—inner links keep their own URLs. 
Theme and integration developers
Anchor mode (no inner links): wraps markup in <code><a class="forwp-smart-link-wrapper forwp-smart-link-wrapper--{cover|group|column}"></code> with <code>data-forwp-smart-link</code>.
Host mode (inner links present): wraps markup in <code><div class="forwp-smart-link-host forwp-smart-link-host--{modifier}"></code> with <code>data-forwp-smart-link-url</code>, optional <code>data-forwp-smart-link-target</code>, <code>data-forwp-smart-link-rel</code>, and <code>assets/forwp-smart-link-frontend.js</code> for pointer/keyboard navigation on empty areas.
Filters: <code>forwp_smart_link_supported_blocks</code>, <code>forwp_smart_link_has_inner_links</code>, <code>forwp_smart_link_use_host_mode</code>.
You may style <code>.forwp-smart-link-wrapper</code> globally or scope overrides with the <code>--cover</code> modifier. Editor-only UI uses separate <code>forwp-smart-link-cover-panel*</code> classes; do not rely on those for front-end styling.
Further technical discussion: <a href="https://github.com/4wpdev/4wp-smart-link" rel="nofollow ugc">4wp-smart-link on GitHub</a>.

Alternatives to 4WP Smart Link

Top alternatives