Moo Digital Clickable Container

A WordPress block that wraps its content in a clickable link. Perfect for making entire card sections, cover blocks, or any container fully clickable.

Features

• 🔗 Wrap any blocks in a clickable link
• 🎨 Supports all standard block styling (colours, spacing, typography)
• 🎯 "Open in new tab" option
• 📱 Fully responsive
• ♿ Accessibility-friendly (prevents nested links)
• 🎭 Visual indicator in the editor showing the link URL

Installation

Option 1: Build from source (Recommended for development)

1. Copy the moo-digital-clickable-container folder to your WordPress plugins directory
2. Navigate to the plugin folder in your terminal:

   cd wp-content/plugins/moo-digital-clickable-container

3. Install dependencies:

   npm install

4. Build the block:

   npm run build

5. Activate the plugin in WordPress admin

Option 2: Pre-built (if you have the build folder)

1. Copy the entire moo-digital-clickable-container folder to your WordPress plugins directory
2. Activate the plugin in WordPress admin

Usage

1. In the WordPress block editor, add a new block
2. Search for "Clickable Container"
3. Insert your content blocks inside the container (Cover blocks, images, text, etc.)
4. In the block sidebar, add your link URL
5. Optionally toggle "Open in new tab"
6. Done! The entire container is now clickable

Tips

• Remove nested links: If you have "Learn more..." links inside your content, remove them to avoid nested anchor tags
• Styling: The container supports all standard block styling options (background colours, padding, margins, etc.)
• Use with Cover blocks: Perfect for making entire Cover blocks clickable (your original use case!)

Example Use Case

You have three Cover blocks showing services:

1. Add a Clickable Container block
2. Move your Cover block inside it
3. Add the service page URL to the container
4. Repeat for the other two services
5. Now users can click anywhere on the card to visit that service

Development

Start development mode (with hot reload):

npm start

Build for production:

npm run build

Lint JavaScript:

npm run lint:js

Lint CSS:

npm run lint:css

Technical Details

• Built with @wordpress/scripts
• Uses React hooks and modern WordPress block API
• Follows WordPress coding standards
• Prevents nested <a> tags automatically with CSS pointer-events: none

Browser Support

Works in all modern browsers that support WordPress Gutenberg editor.

License

GPL v2 or later

Author

Moo Digital Ltd. - https://moo.digital