Posts Block

The Posts Block is a versatile and powerful component designed to showcase your WordPress posts in beautifully customized layouts. This block offers extensive flexibility for displaying blog content, news articles, or any post type with complete control over layout, styling, and content presentation. Whether you need a simple blog feed or a sophisticated content showcase, the Posts Block provides all the tools necessary to create engaging post displays.

Key Features

The Posts Block includes a comprehensive set of features for maximum flexibility:

Layout Options: Choose between grid and list layouts with responsive column controls

Content Management: Control which post elements to display (featured images, titles, excerpts, meta information)

Query Customization: Filter posts by categories and control ordering options

Pagination Support: Built-in pagination with customizable styling and alignment

Meta Information: Display author, date, categories, and comment counts with flexible positioning

Typography Controls: Independent styling for titles, content, meta, and buttons

Color Customization: Normal and hover states for all elements

Card Styling: Optional card layout with backgrounds, borders, and shadows

Responsive Design: Device-specific controls for optimal display across all screen sizes

Animation Effects: Choose from various entrance animations to enhance visual appeal

SEO Friendly: Proper HTML structure and semantic markup for search engines

Adding the Posts Block

To add a Posts Block to your page:

Click the “+” icon to open the block inserter
Search for “Posts” or navigate to the “DigiBlocks” category
Click on the “Posts” block to add it to your page
The block will appear with default settings showing your latest posts

The block automatically fetches and displays posts based on your current settings, providing a live preview in the editor.

Layout Configuration

Post Style Options

The Posts Block offers two primary layout styles:

Grid Layout Display posts in a responsive grid format with customizable columns. This layout is ideal for showcasing multiple posts with equal visual weight and creating organized, magazine-style displays.

List Layout Present posts in a vertical list with featured images positioned alongside content. This traditional blog layout provides a chronological reading experience with featured images appearing on the left side of the content.

Column Settings (Grid Layout)

When using the grid layout, you can control the number of columns independently for each device:

Desktop: Up to 6 columns for maximum flexibility
Tablet: Up to 4 columns for optimal tablet viewing
Mobile: Up to 2 columns to maintain readability on small screens

The responsive column system ensures your posts display beautifully across all devices while maintaining proper proportions and readability.

Item Spacing

Control the vertical and horizontal spacing between post items using responsive controls. Adjust spacing independently for desktop, tablet, and mobile devices to ensure optimal visual balance across all screen sizes.

Card Style

Enable the card style option to display posts within contained cards featuring:

Background colors for visual separation
Customizable padding for content spacing
Border styling with multiple style options
Border radius controls for rounded corners
Box shadow effects with normal and hover states
Hover animations for enhanced interactivity

Content Settings

Featured Image Display

Control featured image presentation with comprehensive options:

Image Size Selection Choose from available WordPress image sizes:

Thumbnail: Small preview images
Medium: Balanced size for most layouts
Large: High-impact visual presentation
Full: Maximum resolution display

Image Styling

Responsive border radius controls for rounded corners
Automatic aspect ratio preservation
Hover effects and transitions
Responsive margin controls for spacing

Post Title Configuration

Control title display and behavior:

Toggle title visibility on or off
Choose HTML tag hierarchy (H2, H3, H4, H5, H6, p, div) for proper semantic structure
Independent typography controls for complete customization
Color and hover state styling
Link functionality to post permalinks

Meta Information Display

Configure which post metadata to display:

Author Information

Author name with link to author archive
Author avatar display with customizable size
“Posted by” prefix customization

Publication Date

Formatted date display with localization support
“Posted on” prefix customization
DateTime markup for SEO benefits

Categories

Styled category links with background colors
Hover effects for interactive feedback
Comma-separated category lists
Links to category archive pages

Comments Count

Comment count with proper pluralization
Link to post comments section
Icon integration for visual enhancement
“Leave a Comment” text for posts without comments

Excerpt Management

Control post excerpt display with detailed options:

Excerpt Length Set the number of words to display (5-100 words) to control content preview length while maintaining readability.

HTML Handling Automatic HTML tag removal ensures clean text display while preserving content integrity.

Responsive Typography Independent typography controls allow excerpt styling separate from other text elements.

Query Configuration

Post Ordering

Control how posts are retrieved and displayed:

Order By Options

Date: Display posts by publication date (most common)
Title: Alphabetical ordering by post title
Author: Group posts by author name
Modified Date: Show recently updated content first
Comment Count: Highlight popular posts by engagement

Order Direction

Ascending: Oldest to newest or A to Z
Descending: Newest to oldest or Z to A

Category Filtering

Filter displayed posts by category selection:

All Categories: Display posts from all categories
Specific Category: Show posts from a single selected category
Dynamic category list based on your site’s category structure

Posts Per Page

Control the number of posts displayed (1-20 posts) to balance content volume with page performance. Consider your layout style and content length when selecting the appropriate number.

Pagination Settings

Enable Pagination

When enabled, pagination provides navigation for large post collections:

Pagination Alignment

Left: Align pagination to the left side
Center: Center pagination for balanced appearance
Right: Align pagination to the right side

Pagination Styling

Background and text colors for normal state
Active page highlighting with distinct styling
Hover effects for interactive feedback
Icon integration for previous/next navigation
Responsive button sizing and spacing

Styling Options

Color Customization

The Posts Block provides extensive color controls organized into normal and hover states:

Text Colors

Title color with independent hover state
Excerpt color for content readability
Meta information color for secondary text

Interactive Elements

Category background and text colors
Category hover states for feedback
Button colors with hover transitions
Meta link hover effects

Pagination Colors

Background colors for navigation buttons
Text colors for readability
Active page highlighting
Hover state feedback

Card Styling (when enabled)

Card background colors
Border colors with opacity support
Shadow colors for depth effects

Typography Controls

Independent typography settings for each text element:

Title Typography

Font family selection from available fonts
Responsive font sizes for all devices
Font weight options (light to bold)
Font style (normal, italic)
Text transform (uppercase, lowercase, capitalize)
Text decoration options
Line height for vertical spacing
Letter spacing for character spacing

Meta Typography Separate controls for author, date, and category styling with all typography options available.

Content Typography Independent styling for excerpt text with responsive controls for optimal readability.

Button Typography Complete control over read more button text styling to match your design requirements.

Spacing Controls

Comprehensive spacing options for perfect layout control:

Block Spacing

Responsive padding controls for inner spacing
Responsive margin controls for outer spacing
Device-specific adjustments for optimal display

Content Spacing

Image margin controls for featured image spacing
Content margin for spacing between content elements
Item spacing for gaps between individual posts

Button Spacing

Button padding for internal button spacing
Responsive controls for device-specific adjustments

Border and Shadow Options

Advanced styling options for sophisticated designs:

Image Borders

Responsive border radius controls
Percentage and pixel unit support
Independent corner control

Button Borders

Border radius customization
Responsive controls for all devices
Smooth corner transitions

Card Styling (when card style is enabled)

Border style selection (solid, dashed, dotted, double)
Responsive border width controls
Border radius for card corners
Box shadow controls with normal and hover states
Shadow positioning, blur, spread, and color options

Advanced Features

Animation Effects

Add visual interest with entrance animations:

Available Animation Types

Fade effects (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight)
Slide effects (slideInUp, slideInDown, slideInLeft, slideInRight)
Zoom effects (zoomIn, zoomInUp, zoomInDown)
Bounce effects (bounceIn, bounceInUp, bounceInDown)
Rotation effects (rotateIn, rotateInDownLeft, rotateInDownRight)

Animation Preview Use the preview button in the editor to test animations before publishing. Animations trigger when the block comes into the viewport on the frontend.

Visibility Controls

Control block visibility across different devices:

Hide on Desktop: Hide the block on screens 992px and wider
Hide on Tablet: Hide the block on screens 768px to 991px
Hide on Mobile: Hide the block on screens 767px and narrower

Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.

HTML Settings

HTML Anchor Create a unique anchor link for direct linking to the posts section. Use a short, descriptive phrase without spaces to create a jumpable section on your page.

Additional CSS Classes Add custom CSS classes for advanced styling or theme integration. Separate multiple classes with spaces for complex styling requirements.

Best Practices

Content Organization

Post Selection

Choose an appropriate number of posts to avoid overwhelming users
Consider your page length and loading time when setting post counts
Use category filtering to create focused content sections

Layout Selection

Use grid layout for visual impact and modern magazine-style displays
Choose list layout for traditional blog reading experiences
Consider your content type and user expectations when selecting layout style

Design Considerations

Visual Hierarchy

Use typography controls to create clear content hierarchy
Ensure sufficient color contrast for accessibility
Maintain consistent spacing throughout your design

Responsive Design

Test your posts block on different screen sizes
Adjust column counts appropriately for each device
Ensure text remains readable on all screen sizes

Performance Optimization

Limit the number of displayed posts to improve loading times
Use appropriate image sizes to balance quality and performance
Consider pagination for large post collections

SEO Optimization

Content Structure

Use proper heading hierarchy for title tags
Ensure excerpt content provides valuable post summaries
Include relevant meta information for context

Link Structure

Maintain clean permalink structures
Use descriptive anchor text for read more buttons
Ensure category links lead to relevant archive pages

Integration Tips

Theme Compatibility

The Posts Block is designed to work with any WordPress theme while maintaining its styling independence. However, consider these integration points:

Font Integration: Choose fonts that complement your theme’s typography
Color Harmony: Select colors that align with your site’s color scheme
Spacing Consistency: Match spacing patterns used elsewhere on your site

Plugin Compatibility

The Posts Block works seamlessly with other WordPress plugins:

SEO Plugins: Meta information integrates with SEO plugin data
Caching Plugins: Static HTML output ensures compatibility with caching systems
Image Optimization: Works with image optimization plugins for better performance

Customization Flexibility

For advanced customization:

Use Additional CSS Classes to apply custom styling
Leverage the extensive built-in controls before adding custom CSS
Consider responsive design principles for all customizations

Performance Considerations

Loading Optimization

Image Optimization: Ensure featured images are properly optimized
Post Count: Balance content volume with loading performance
Query Efficiency: Category filtering reduces database load

Asset Management

The Posts Block generates optimized CSS and JavaScript files automatically, ensuring:

Minimal file sizes through automatic minification
Only necessary styles are loaded
Efficient browser caching for repeated visits

Responsive Performance

Device-specific styling reduces unnecessary CSS
Responsive images improve mobile loading times
Efficient layout calculations for smooth scrolling

The Posts Block provides a comprehensive solution for displaying WordPress posts with professional styling, flexible layout options, and optimal performance across all devices. Its extensive customization options allow you to create unique post displays that perfectly match your site’s design while maintaining excellent user experience and search engine optimization.