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

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.

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.