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

1. Open the page/post editor
2. Click "+" to add a block
3. Search for the "Card" block
4. Add an image, title, and description
5. 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