My Card Block

React card block with image, title, and description for Gutenberg

by Hlib · github.com/hlibpanchenko/my-card-block

★ 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/hlibpanchenko/my-card-block/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/hlibpanchenko/my-card-block ↗

A custom card block for WordPress Gutenberg with an image, title, description, and button.

Features

🖼️ Image upload via the WordPress media library
✏️ Editable title and description
🔘 Optional button with customizable text and link
🎨 Clean design with hover effects
📱 Responsive layout

Installation

1. Clone the folder into plugins

cd wp-content/plugins/
# Copy the my-card-block folder here

2. Install dependencies

cd my-card-block
npm install

3. Build the block

# For production (one-time build)
npm run build

# For development (watches for changes)
npm run start

4. Activate the plugin

Go to the WordPress admin panel → Plugins → Activate "My Card Block"

Usage

Open the page/post editor
Click "+" to add a block
Search for the "Card" block
Add an image, title, and description
Configure the button in the sidebar (text, link, enable/disable)

File Structure

my-card-block/
├── my-card-block.php    # Main plugin file
├── package.json         # Dependencies and scripts
├── src/
│   ├── index.js         # Block React component
│   ├── block.json       # Block metadata
│   ├── style.scss       # Frontend styles
│   └── editor.scss      # Editor styles
└── build/               # Compiled files (generated on build)

Customization

You can modify styles in src/style.scss (frontend) and src/editor.scss (editor).

Don't forget to rebuild after making changes: npm run build