WP Manifestindependent plugin directory
manifest / editor / gutenberg-article-grid-block

Block Article Grid

Custom WordPress Gutenberg block for displaying blog posts in responsive grid layouts

by The WordPress Contributors · github.com/msaadfarooq27/gutenberg-article-grid-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/msaadfarooq27/gutenberg-article-grid-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/msaadfarooq27/gutenberg-article-grid-block ↗

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