Blog Posts Grid Block

A beautiful and customizable WordPress Gutenberg block for displaying blog posts in a responsive grid layout. Built with modern best practices and a focus on performance and user experience.

Features

• 🎨 Modern, responsive grid layout
• 📱 Mobile-friendly design
• 🔧 Highly customizable
• 🖼️ Featured image support
• 📝 Excerpt display with word limit

Installation

1. Ensure you have the required dependencies in your package.json:

{
  "dependencies": {
    "@wordpress/api-fetch": "^6.48.0",
    "@wordpress/block-editor": "^12.19.0",
    "@wordpress/blocks": "^12.29.0",
    "@wordpress/components": "^27.0.0",
    "@wordpress/element": "^5.29.0",
    "@wordpress/i18n": "^4.51.0",
    "classnames": "^2.5.1"
  }
}

2. Register the block in your theme or plugin:

register_block_type( __DIR__ . '/build/gb-block' );

Usage

1. In the WordPress editor, click the "+" button to add a new block
2. Search for "Gb Blog" or find it in the Widgets category
3. The block will be inserted with default settings
4. Use the block toolbar and sidebar settings to customize the display

Block Settings

Posts Settings

• Number of posts: Control how many posts to display (1-12)
• Order: Choose between ascending or descending order
• Order by: Sort by date, title, or author
• Columns: Set the number of columns (1-4)

Display Settings

• Featured Image: Toggle featured image display
• Excerpt: Toggle excerpt display (limited to 20 words)
• Background Color: Customize the block background
• Text Color: Customize the text color

Styling

The block comes with built-in styles that can be customized using the WordPress block editor. Additional CSS customization can be done by targeting these classes:

.wp-block-gb-blog-blog-posts-grid     /* Main grid container */
.post-card                          /* Individual post card */
.post-featured-image                /* Featured image */
.post-content                       /* Post content wrapper */
.post-excerpt                       /* Post excerpt */

Responsive Design

The grid automatically adjusts based on screen size:

• Desktop: Up to 4 columns
• Tablet: 2 columns
• Mobile: 1 column

Development

Build Process

# Install dependencies
npm install

# Start development
npm run start

# Build for production
npm run build

File Structure

blog-posts/
├── block.json    # Block configuration
├── index.js      # Block registration
├── edit.js       # Edit component
├── save.js       # Save component
├── render.php    # Front-end conetent
├── editor.scss   # Editor-specific styles
└── style.scss    # Front-end styles

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the GPL-2.0-or-later License - see the LICENSE file for details.