Moo Digital Media and Text

A WordPress block plugin that replicates the native Media and Text block, with the addition of an image overlay colour and opacity control — matching the Cover block's overlay UI.

Features

• All standard Media and Text features (image/video, media position, stack on mobile, image fill, vertical alignment, media width)
• Overlay colour picker — sits in the Colour panel in the block sidebar
• Overlay opacity slider — appears when an overlay colour is set

Setup

Requirements

• Node.js (v18+)
• npm

Install dependencies

npm install

Build for production

npm run build

Start dev mode (watch)

npm run start

The compiled files will be output to the /build directory. This directory must exist (and contain the compiled assets) before the plugin will work.

Installation

1. Build the plugin (npm run build)
2. Upload the entire moo-digital-media-text folder to /wp-content/plugins/
3. Activate via Plugins in the WordPress admin
4. Find the block in the editor by searching "Media and Text Overlay"

Folder Structure

moo-digital-media-text/
├── moo-digital-media-text.php   Main plugin file
├── package.json                 npm config
├── src/
│   └── blocks/
│       └── media-text-overlay/
│           ├── block.json       Block metadata
│           ├── index.js         Block JS (edit + save)
│           ├── editor.css       Editor-only styles
│           └── style.css        Frontend + editor styles
└── build/                       Compiled output (generated)