WP Manifestindependent plugin directory
manifest / editor / meridian-blocks

Meridian Blocks

16 premium Gutenberg blocks for WordPress — dark-first, gold-accented, Meridian design system

by Meridian Theme · github.com/jordandalove/meridian-blocks · 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/jordandalove/meridian-blocks/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/jordandalove/meridian-blocks ↗

16 premium Gutenberg blocks for WordPress — dark-first, gold-accented, production-ready.

Built to pair with the Meridian Astro Theme or as a standalone block library for any WordPress site.

Requirements

Item Minimum
WordPress 6.4+
PHP 8.0+
Block Editor Required (Classic Editor not supported)

Installation

Via plugin zip (recommended)

  1. Download meridian-blocks.zip.
  2. In your WordPress admin, go to Plugins → Add New → Upload Plugin.
  3. Upload the zip and click Install Now.
  4. Click Activate Plugin.

Via FTP/SSH

  1. Extract meridian-blocks.zip.
  2. Upload the meridian-blocks/ folder to wp-content/plugins/.
  3. Activate from Plugins → Installed Plugins.

The 16 Blocks

All blocks appear under the Meridian category in the block inserter.

Block Slug Description
Hero Split meridian-blocks/hero-split Full-width hero with headline, sub, CTAs, and image
Metrics Grid meridian-blocks/metrics-grid Row of stat tiles with large numbers
Feature Cards meridian-blocks/feature-cards 2–3 column icon + text cards
Testimonials meridian-blocks/testimonial-slider Quote cards with avatar initials
Pricing Table meridian-blocks/pricing-table Side-by-side plans with features list
FAQ Accordion meridian-blocks/faq-accordion Native <details> accordion, zero JS
CTA Banner meridian-blocks/cta-banner Full-width call-to-action section
Logo Bar meridian-blocks/logo-bar Grayscale client logo strip
Image Feature meridian-blocks/image-feature Split image + text, left or right
Newsletter Signup meridian-blocks/newsletter-signup Email capture form
Video Embed meridian-blocks/video-embed Click-to-play with poster, YouTube/Vimeo/mp4
Team Grid meridian-blocks/team-grid Team member cards with photos
Process Steps meridian-blocks/process-steps Numbered horizontal/vertical steps
Comparison Table meridian-blocks/comparison-table Feature comparison with ✓ / ✕
Blog Grid meridian-blocks/blog-grid Live posts grid from WP_Query
Announcement Bar meridian-blocks/announcement-bar Sticky dismissible top banner

See BLOCKS.md for detailed per-block attribute reference.

Design System

All blocks share the same CSS custom properties. Override them in your theme's style.css or a Custom CSS block:

:root {
  --mb-bg:          #0F0F0F;   /* Page background */
  --mb-surface:     #1A1A1A;   /* Card / panel background */
  --mb-border:      #2E2E2E;   /* Border colour */
  --mb-text:        #F0EDE8;   /* Primary text */
  --mb-muted:       #A09A93;   /* Secondary / muted text */
  --mb-accent:      #C8A96E;   /* Gold accent */
  --mb-accent-dark: #B8944E;   /* Gold hover */
  --mb-font-display: 'DM Serif Display', serif; /* Display font */
}

Animation System

Every block has an Animation panel in the inspector sidebar:

  • Enable scroll animation — toggle on/off
  • Animation type — fade-up, fade-down, fade-left, fade-right, zoom-in
  • Delay — 0–480ms in 80ms steps (for staggered reveals)

The animation JS uses IntersectionObserver and automatically respects prefers-reduced-motion.

Development

# Install dependencies
npm install

# Start webpack watcher (development)
npm run start

# Production build
npm run build

# Create distributable zip
npm run plugin-zip

# Lint JavaScript
npm run lint:js

# Lint CSS
npm run lint:css

Directory Structure

meridian-blocks/
├── meridian-blocks.php        Main plugin file
├── package.json
├── webpack.config.js          Custom wp-scripts webpack config
├── src/
│   ├── animations/
│   │   ├── animations.css     Shared scroll animation CSS
│   │   └── animations.js      IntersectionObserver runner
│   ├── shared/
│   │   ├── colors.js          Design token palette
│   │   ├── icons.js           SVG block icons
│   │   └── inspector.js       Shared InspectorControls utilities
│   └── blocks/
│       └── {block-name}/
│           ├── block.json     Block metadata
│           ├── index.js       Block registration
│           ├── edit.js        React editor component
│           ├── render.php     PHP front-end render callback
│           ├── style.css      Front-end CSS
│           └── editor.css     Editor-only CSS (where needed)
└── build/                     Compiled output (committed for distribution)

Customisation Tips

  1. Override CSS variables in your theme rather than editing plugin files — updates won't break your customisations.
  2. Disable animations globally by adding { opacity: 1 !important; transform: none !important; } to .mb-animate in your theme CSS.
  3. Use the Announcement Bar sticky option for launch-day promotions — pair with a CTA Banner block below the fold.
  4. Blog Grid + Category filter — set categoryId to a specific category term ID to filter posts.

License

GPL-2.0-or-later. See https://www.gnu.org/licenses/gpl-2.0.html.

© 2026 Meridian Theme.