Skip to main content
Login Join
4WP Smart Link
Gutenberg · Free

4WP Smart Link

by 4wpdev

30+ active installs
Back to Showcase
Gutenberg Free block link clickable cover group block gutenberg query loop
4WP Smart Link banner

About This Plugin

A plugin by 4wp.dev.

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:

  • Set a custom URL for Cover, Group, or Column.
  • In a Query Loop, link the block to the current post (uses the loop item’s post context).
  • Open the link in a new tab when you need to, with sensible rel handling for target="_blank".
  • Add optional relation (rel) tokens and an accessibility label when you need more than the visible text.

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 <a>. When inner links exist (post title, terms, buttons, etc.), the plugin uses a clickable container (data-forwp-smart-link-url + 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 <a class="forwp-smart-link-wrapper forwp-smart-link-wrapper--{cover|group|column}"> with data-forwp-smart-link.

Host mode (inner links present): wraps markup in <div class="forwp-smart-link-host forwp-smart-link-host--{modifier}"> with data-forwp-smart-link-url, optional data-forwp-smart-link-target, data-forwp-smart-link-rel, and assets/forwp-smart-link-frontend.js for pointer/keyboard navigation on empty areas.

Filters: forwp_smart_link_supported_blocks, forwp_smart_link_has_inner_links, forwp_smart_link_use_host_mode.

You may style .forwp-smart-link-wrapper globally or scope overrides with the --cover modifier. Editor-only UI uses separate forwp-smart-link-cover-panel* classes; do not rely on those for front-end styling.

Further technical discussion: 4wp-smart-link on GitHub.

Community Reviews

No reviews yet. Be the first to share your experience!

Log in to leave a review