WP Manifestindependent plugin directory
manifest / editor / visual-grid

Visual Grid

Extend Gutenberg and Kadence blocks with visual grid lines. Add customizable borders that extend to page edges using pseudo-elements. Features presets, per-side configuration, overlap prevention, and mobile disable option.

by Visual Grid Team · github.com/exzenter/visual-grid

★ 2stars

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/exzenter/visual-grid/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/exzenter/visual-grid ↗

A WordPress Gutenberg plugin that extends core blocks and Kadence blocks with visual grid lines - inspired by the Tailwind CSS website design.

Features

  • Visual Grid Lines: Add pseudo-element borders that extend to the page edge
  • Supports Core Blocks: Group, Columns, Column, Cover, Image, Heading, Paragraph
  • Supports Kadence Blocks: Row Layout, Column, Advanced Heading, Icon List, Tabs, Accordion
  • 3 Preset Styles: Tailwind Style, Modern Grid, Subtle Lines
  • Flexible Configuration:
    • Line style: solid, dashed, dotted
    • Width: 1-10px
    • Color with opacity
    • Length modes: Page Edge, Absolute %, Relative %
  • Linked/Unlinked Sides: Configure Top/Bottom and Left/Right together or individually
  • Overlap Prevention: Optional checkbox to prevent duplicate lines at same positions

Installation

  1. Clone/copy to wp-content/plugins/visual-grid/
  2. Run npm install and npm run build
  3. Activate plugin in WordPress Admin

Usage

  1. Add any supported block
  2. Open Block Settings → Visual Grid panel
  3. Enable Visual Grid
  4. Choose a preset or customize settings
  5. Configure which sides should have grid lines

Development

npm install       # Install dependencies
npm run start     # Development mode with watch
npm run build     # Production build

Requirements

  • WordPress 6.0+
  • PHP 7.4+
  • Node.js for building