WP Manifestindependent plugin directory
manifest / editor / preview-link-block

Preview Link Block

Custom Gutenberg block for link previews with text and images

by Eric Burns · github.com/ericburnsonline/preview-link-block · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/ericburnsonline/preview-link-block/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/ericburnsonline/preview-link-block ↗

A custom Gutenberg block for WordPress that adds hoverable preview explanations and optional images to links. Perfect for glossaries, internal documentation, or any site where you want to provide context without leaving the page.

Status: Vibe-Coded & Untested

This plugin was vibe-coded and has not been tested yet. It's a proof of concept that works in theory but needs real-world testing before any production use. Use at your own risk.

Features

  • Custom Gutenberg block for easy editing in the block editor
  • Link text, URL, and preview explanation all defined per-block
  • Optional preview images from your media library
  • Smooth hover tooltips with fade-in animation
  • Mobile-friendly – tooltips reposition to avoid viewport edges
  • Dark/light mode support – adapts to site preferences
  • Lightweight frontend – vanilla JavaScript, no jQuery dependency

Installation

Prerequisites

  • WordPress 6.0+
  • Node.js 18+ and npm 9+ (for local development/building only)

Setup

  1. Clone the repo:

    git clone https://github.com/ericburnsonline/preview-link-block.git
cd preview-link-block

  2. Build the block (one-time setup):

    npm install
npm run build

    This generates the /build/ folder that WordPress needs. The build process compiles React code and modern JavaScript into browser-compatible code. You only need to do this once locally—the /build/ folder is committed to GitHub for distribution.

  3. Commit and push the /build/ folder:

    git add build/
git commit -m "Build block for distribution"
git push

  4. On your WordPress server:

    • Download the ZIP from GitHub (includes the pre-built /build/ folder)
    • Extract to wp-content/plugins/preview-link-block/
    • Go to Plugins → find "Preview Link Block" → Activate

(TODO) For End Users (No Build Required) NOT YET DONE

  1. Download the latest ZIP from GitHub
  2. Extract to wp-content/plugins/
  3. Activate in WordPress admin
  4. Done

Usage

  1. In a post or page, add a new block

  2. Search for "Preview Link"

  3. Fill in:

    • Link Text – what visitors see (e.g., "chromatography")
    • Link URL – where it goes
    • Preview Explanation – your custom 1–2 sentence explanation
    • Preview Image (optional) – from your media library

  4. On hover, visitors see a tooltip with the image and explanation. Click navigates normally.

Development

npm run dev # Watch mode—rebuilds on file changes npm run build # Production build npm run lint:js # Check JavaScript npm run lint:css # Check CSS npm run format # Auto-format code

File Structure

preview-link-block/
├── plugin.php              # Main plugin file
├── package.json            # Dependencies & build scripts
├── .gitignore
├── LICENSE
├── README.md
├── src/                    # Source code (edit these)
│   ├── block.json
│   ├── index.js
│   ├── frontend.js
│   ├── style.css
│   └── editor.css
└── build/                  # Compiled output (generated by npm run build)

License

MIT – See LICENSE file

Author

Eric Burns https://www.linkedin.com/in/ericburns/