Article Grid Block

A custom Gutenberg block that displays WordPress posts in a responsive grid layout with featured images, titles, dates, and categories.

Features

• Responsive Grid - 1 to 4 columns, adapts to screen size
• Category Filtering - Show posts from specific categories
• Flexible Sorting - Order by date or title
• Clean Design - Modern card layout with hover effects
• Mobile Friendly - Works perfectly on all devices

Installation

From ZIP File

1. Go to WordPress Admin → Plugins → Add New → Upload Plugin
2. Choose the block-article-grid.zip file
3. Click "Install Now" and then "Activate"

Manual Installation

1. Extract the ZIP file
2. Upload "block-article-grid" folder to "/wp-content/plugins/"
3. Activate the plugin in WordPress admin

Requirements

• WordPress 6.1 or higher
• PHP 7.4 or higher

Developed and tested with:

• WordPress 6.8.3
• PHP 8.3.26

How to Use

1. Edit any page or post in WordPress
2. Click the + button to add a block
3. Search for "Article Grid"
4. Configure the block settings:
   • Number of Posts: 1-12 posts
   • Columns: 1-4 column layout
   • Order By: Date or Title
   • Order: Ascending or Descening
   • Category Filter: Select specific categories (optional)

Block Settings

Grid Settings

• Choose how many posts to display (1-12)
• Select column layout (1, 2, 3, or 4 columns)
• Sort by publication date or alphabetically by title

Category Filter

• Filter posts by specific categories
• Leave empty to show all posts
• "Uncategorized" posts are automatically hidden

Development

For Developers

This is a dynamic block built with @wordpress/create-block.

Source code: /src folder
Production files: /build folder

Build Commands

# Install dependencies
npm install

# Development mode (with hot reload)
npm start

# Production build
npm run build