CODOPLEX BLOG

junaidte14
10–15 minutes

Ep.024 WordPress Blog Layout Design: Gutenberg-First Professional Templates (2026)

Views: 17

Creating professional WordPress blog layout Gutenberg designs doesn’t require complex page builders or heavy plugins. In this comprehensive guide, you’ll learn how to build pixel-perfect blog layouts using native WordPress blocks and minimal custom code—perfect for best-seller block themes.

In the previous episode 23, we have built 3 footer layouts for our WordPress block theme.

Why Gutenberg-First Blog Layouts Matter in 2026

The WordPress landscape has shifted dramatically toward Full Site Editing (FSE) and Gutenberg blocks. Modern WordPress blog layout Gutenberg approaches offer several critical advantages:

Performance Benefits

  • 50% lighter code – No page builder bloat
  • Faster loading – Native WordPress rendering
  • Better caching – Standard HTML output
  • Mobile-optimized – Responsive by default

User Experience Advantages

  • Familiar interface – WordPress native editor
  • Easy customization – No learning curve
  • Future-proof – Follows WordPress direction
  • No vendor lock-in – Pure WordPress code

SEO Improvements

  • Clean HTML – Search engine friendly
  • Semantic structure – Better crawlability
  • Fast performance – Core Web Vitals optimized
  • Mobile-first – Google’s preference

Let’s build professional blog layouts using these principles.

The Two Essential Blog Layout Styles

1. List Layout: Content-Focused Reading

The list layout is the gold standard for content-heavy blogs and publications. It prioritizes readability and scanning efficiency.

Key Characteristics:

  • Vertical stack of posts
  • Large featured images (16:9 aspect ratio)
  • Generous spacing between posts
  • Full-width excerpts
  • Clear visual hierarchy

Perfect For:

  • News websites
  • Long-form content blogs
  • Professional publications
  • Tutorial sites
  • Editorial content

2. Grid Layout: Visual Discovery

The grid layout transforms your blog into a visual magazine, perfect for image-heavy content and portfolio-style presentations.

Key Characteristics:

  • Multi-column cards (2-3 columns)
  • Equal-height cards
  • Card-based design with borders
  • Hover animations
  • Compact excerpts

Perfect For:

  • Photography blogs
  • Design portfolios
  • Recipe sites
  • Product showcases
  • Visual magazines

Intelligent Content Display: The Secret Weapon

The hallmark of professional WordPress blog layout Gutenberg design is handling missing content gracefully. Traditional layouts break when posts lack featured images, categories, or excerpts. Our intelligent approach ensures perfect layouts regardless of populated fields.

Smart Category Display

.wp-block-post-terms:empty {
    display: none; /* Hide if no categories */
}

Result: Posts without categories don’t show empty badges or broken layout.

Graceful Image Handling

Gutenberg’s post-featured-image block automatically hides when no image exists. Combined with proper spacing, this creates clean layouts even with mixed content.

The Intelligent Display Checklist

✅ Categories – Hide if empty

✅ Featured Images – Only show if exists

✅ Excerpts – Auto-generate if not set

✅ Author Names – Link or hide based on site

✅ Post Dates – Consistent format

✅ Tags – Hide if none assigned

Building the Blog Layout

Create a production-ready blog layout in minutes. It can be added in templates/home.html and templates/archive.html

Complete Template Code

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","className":"blog-archive","layout":{"type":"constrained"}} -->
<main class="wp-block-group blog-archive">

    <!-- wp:group {"className":"blog-archive-group","align":"wide","layout":{"type":"constrained"}} -->
    <div class="wp-block-group blog-archive-group alignwide">
        <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide","layout":{"type":"constrained"}} -->
        <div class="wp-block-query alignwide">
            
            <!-- wp:post-template {"align":"wide","style":{"spacing":{"blockGap":"0"}}} -->
                
                <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} /-->
                
                <!-- wp:group {"className":"post-meta","style":{"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
                <div class="wp-block-group post-meta">
                    
                    <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-100"}}}}} /-->
                    
                    <!-- wp:post-date {"format":"M j, Y","isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}},"typography":{"fontSize":"0.875rem"}}} /-->
                    
                    <!-- wp:post-author-name {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}},"typography":{"fontSize":"0.875rem"}}} /-->
                    
                </div>
                <!-- /wp:group -->
                
                <!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(1.5rem, 3vw, 2rem)","fontWeight":"700","lineHeight":"1.3"}}} /-->
                
                <!-- wp:post-excerpt {"moreText":"Continue reading →","excerptLength":30,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} /-->
                
            <!-- /wp:post-template -->
            
            <!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}}} -->
                <!-- wp:query-pagination-previous /-->
                <!-- wp:query-pagination-numbers /-->
                <!-- wp:query-pagination-next /-->
            <!-- /wp:query-pagination -->
            
            <!-- wp:query-no-results -->
                
                <!-- wp:heading {"textAlign":"center","level":2,"style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|30"}}}} -->
                <h2 class="wp-block-heading has-text-align-center">No posts found</h2>
                <!-- /wp:heading -->
                
                <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|70"}}}} -->
                <p class="has-text-align-center">Start creating your first blog post to see it appear here!</p>
                <!-- /wp:paragraph -->
                
            <!-- /wp:query-no-results -->
            
        </div>
        <!-- /wp:query -->

        <!-- wp:group {"className":"blog-sidebar","align":"full","layout":{"type":"constrained"}} -->
        <aside class="wp-block-group blog-sidebar alignfull">
            
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","align":"wide","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-neutral-100-background-color has-background alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
                
                <!-- wp:heading {"level":3,"fontSize":"lg"} -->
                <h3 class="wp-block-heading has-lg-font-size">Search</h3>
                <!-- /wp:heading -->
                
                <!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search posts...","buttonText":"Search"} /-->
                
            </div>
            <!-- /wp:group -->
            
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","align":"wide","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-neutral-100-background-color has-background alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
                
                <!-- wp:heading {"level":3,"fontSize":"lg"} -->
                <h3 class="wp-block-heading has-lg-font-size">Categories</h3>
                <!-- /wp:heading -->
                
                <!-- wp:categories {"showHierarchy":true,"showPostCounts":true} /-->
                
            </div>
            <!-- /wp:group -->
            
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","align":"wide","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-neutral-100-background-color has-background alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
                
                <!-- wp:heading {"level":3,"fontSize":"lg"} -->
                <h3 class="wp-block-heading has-lg-font-size">Recent Posts</h3>
                <!-- /wp:heading -->
                
                <!-- wp:latest-posts {"displayPostDate":true,"displayFeaturedImage":true,"featuredImageSizeSlug":"thumbnail"} /-->
                
            </div>
            <!-- /wp:group -->
            
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","align":"wide","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-neutral-100-background-color has-background alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
                
                <!-- wp:heading {"level":3,"fontSize":"lg"} -->
                <h3 class="wp-block-heading has-lg-font-size">Tags</h3>
                <!-- /wp:heading -->
                
                <!-- wp:tag-cloud /-->
                
            </div>
            <!-- /wp:group -->
            
        </aside>
        <!-- /wp:group -->
    </div>
    <!-- /wp:group -->
    
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Key Features Explained

Aspect Ratio Control:

"aspectRatio":"16/9"

Prevents layout shift, ensures consistent visual rhythm.

Fluid Typography:

"fontSize":"clamp(1.5rem, 3vw, 2rem)"

Scales smoothly from mobile (24px) to desktop (32px).

Flexible Meta Layout:

"layout":{"type":"flex","flexWrap":"wrap"}

Automatically handles varying meta information.

Blog CSS Code

Create a new css file assets/css/blog.css and add the following code in it:

/**
 * Blog Layouts - Production Ready
 * Maximizes Gutenberg/theme.json, minimal custom styles
 *
 * @package Versana
 * @since 1.0.0
 */

/* ==========================================================================
   Default List Layout - Gutenberg First
   ========================================================================== */

/**
 * Archive/Blog Container
 * Uses theme.json spacing and colors
 */
.blog-archive{
    padding-block: var(--wp--preset--spacing--60, 3rem);
    margin-top: 0;
}

/**
 * Blog Header
 * Leverages Gutenberg heading blocks
 */
.blog-header {
    margin-block-end: var(--wp--preset--spacing--60, 3rem);
    padding-block-end: var(--wp--preset--spacing--40, 2rem);
    border-block-end: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   Query Loop Posts - Default Stacked Layout
   ========================================================================== */

/**
 * Post Template Container
 * Gutenberg Query Loop handles this, we just enhance spacing
 */
.wp-block-post-template {
    list-style: none;
    padding: 0;
    margin: 0;
}

/**
 * Individual Post in List
 * Clean, professional spacing
 */
.wp-block-post-template > li {
    margin-block-end: var(--wp--preset--spacing--60, 3rem);
    padding-block-end: var(--wp--preset--spacing--60, 3rem);
    border-block-end: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
}

.wp-block-post-template > li:last-child {
    border-block-end: none;
    margin-block-end: 0;
    padding-block-end: 0;
}

/**
 * Featured Image
 * Consistent aspect ratio, smooth hover
 */
.wp-block-post-featured-image {
    margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
    overflow: hidden;
    border-radius: 8px;
}

.wp-block-post-featured-image img {
    transition: transform 0.4s ease;
    display: block;
    width: 100%;
    height: auto;
}

.wp-block-post-featured-image:hover img {
    transform: scale(1.03);
}

/**
 * Post Title
 * Gutenberg handles typography, we add interaction
 */
.wp-block-post-title a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-post-title a:hover {
    color: var(--wp--preset--color--primary, #1A73E8);
}

/**
 * Post Meta (Date, Author, Categories, Tags)
 * Flexbox for inline display, intelligent spacing
 */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30, 1rem);
    align-items: center;
    margin-block-end: var(--wp--preset--spacing--30, 1rem);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--wp--preset--color--neutral-700, #424242);
}

.post-meta > * {
    margin: 0;
}

/**
 * Category Badge
 * Inline, professional styling
 */
.wp-block-post-terms {
    margin: 0;
}

.wp-block-post-terms a {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--wp--preset--color--primary, #1A73E8);
    color: var(--wp--preset--color--neutral-100, #fff);
    border-radius: 4px;
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.wp-block-post-terms a:hover {
    background: var(--wp--preset--color--secondary, #E91E63);
}

/**
 * Multiple Categories - Intelligent Display
 * Handles 0, 1, or multiple categories gracefully
 */
.wp-block-post-terms:empty {
    display: none;
}

.wp-block-post-terms a + a {
    margin-inline-start: 0.5rem;
}

/**
 * Post Date
 * Clean, readable
 */
.wp-block-post-date {
    margin: 0;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--wp--preset--color--neutral-700, #424242);
}

.wp-block-post-date a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.wp-block-post-date a:hover {
    opacity: 0.7;
}

/**
 * Post Author
 */
.wp-block-post-author {
    margin: 0;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.wp-block-post-author__name a {
    text-decoration: none;
    color: var(--wp--preset--color--neutral-700, #424242);
    font-weight: 500;
    transition: color 0.2s ease;
}

.wp-block-post-author__name a:hover {
    color: var(--wp--preset--color--primary, #1A73E8);
}

/**
 * Post Excerpt
 * Gutenberg handles most styling
 */
.wp-block-post-excerpt {
    margin-block-start: var(--wp--preset--spacing--30, 1rem);
}

.wp-block-post-excerpt__excerpt {
    color: var(--wp--preset--color--neutral-700, #424242);
    line-height: 1.7;
}

.wp-block-post-excerpt__more-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary, #1A73E8);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.wp-block-post-excerpt__more-text:hover {
    gap: 0.75rem;
}

.wp-block-post-excerpt__more-text::after {
    content: "→";
    font-size: 1.25em;
}

/* ==========================================================================
   Multi-Column Grid Layout (Custom Template)
   ========================================================================== */

/**
 * Grid Container Class
 * Applied via template or block class
 */
.blog-layout-grid .wp-block-post-template,
.archive-layout-grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--wp--preset--spacing--50, 2rem);
}

/* 2 Column Grid */
.blog-layout-2col .wp-block-post-template,
.archive-layout-2col .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--50, 2rem);
}

/* 3 Column Grid */
.blog-layout-3col .wp-block-post-template,
.archive-layout-3col .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--50, 2rem);
}

/**
 * Grid Post Cards
 * Card-style with hover effects
 */
.blog-layout-grid .wp-block-post-template > li,
.blog-layout-2col .wp-block-post-template > li,
.blog-layout-3col .wp-block-post-template > li,
.archive-layout-grid .wp-block-post-template > li,
.archive-layout-2col .wp-block-post-template > li,
.archive-layout-3col .wp-block-post-template > li {
    background: var(--wp--preset--color--neutral-100, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    padding: 15px 0 0 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-layout-grid .wp-block-post-template > li:hover,
.blog-layout-2col .wp-block-post-template > li:hover,
.blog-layout-3col .wp-block-post-template > li:hover,
.archive-layout-grid .wp-block-post-template > li:hover,
.archive-layout-2col .wp-block-post-template > li:hover,
.archive-layout-3col .wp-block-post-template > li:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.15));
}

/**
 * Grid Card Content Padding
 */
.blog-layout-grid .wp-block-post-featured-image,
.blog-layout-2col .wp-block-post-featured-image,
.blog-layout-3col .wp-block-post-featured-image,
.archive-layout-grid .wp-block-post-featured-image,
.archive-layout-2col .wp-block-post-featured-image,
.archive-layout-3col .wp-block-post-featured-image {
    margin: 0 0 var(--wp--preset--spacing--40, 1.5rem) 0;
    border-radius: 0;
}

.blog-layout-grid .wp-block-post-title,
.blog-layout-grid .post-meta,
.blog-layout-grid .wp-block-post-excerpt,
.blog-layout-2col .wp-block-post-title,
.blog-layout-2col .post-meta,
.blog-layout-2col .wp-block-post-excerpt,
.blog-layout-3col .wp-block-post-title,
.blog-layout-3col .post-meta,
.blog-layout-3col .wp-block-post-excerpt,
.archive-layout-grid .wp-block-post-title,
.archive-layout-grid .post-meta,
.archive-layout-grid .wp-block-post-excerpt,
.archive-layout-2col .wp-block-post-title,
.archive-layout-2col .post-meta,
.archive-layout-2col .wp-block-post-excerpt,
.archive-layout-3col .wp-block-post-title,
.archive-layout-3col .post-meta,
.archive-layout-3col .wp-block-post-excerpt {
    padding-inline: var(--wp--preset--spacing--40, 1.5rem);
}

.blog-layout-grid .wp-block-post-excerpt,
.blog-layout-2col .wp-block-post-excerpt,
.blog-layout-3col .wp-block-post-excerpt,
.archive-layout-grid .wp-block-post-excerpt,
.archive-layout-2col .wp-block-post-excerpt,
.archive-layout-3col .wp-block-post-excerpt {
    padding-block-end: var(--wp--preset--spacing--40, 1.5rem);
}

/**
 * Grid Featured Image Aspect Ratio
 */
.blog-layout-grid .wp-block-post-featured-image,
.blog-layout-2col .wp-block-post-featured-image,
.blog-layout-3col .wp-block-post-featured-image,
.archive-layout-grid .wp-block-post-featured-image,
.archive-layout-2col .wp-block-post-featured-image,
.archive-layout-3col .wp-block-post-featured-image {
    aspect-ratio: 16 / 9;
}

.blog-layout-grid .wp-block-post-featured-image img,
.blog-layout-2col .wp-block-post-featured-image img,
.blog-layout-3col .wp-block-post-featured-image img,
.archive-layout-grid .wp-block-post-featured-image img,
.archive-layout-2col .wp-block-post-featured-image img,
.archive-layout-3col .wp-block-post-featured-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Sidebar Layouts - Three Variations
   ========================================================================== */

/**
 * Sidebar Container Setup
 */
.has-sidebar .blog-archive .blog-archive-group {
    display: grid;
    gap: var(--wp--preset--spacing--60, 3rem);
    align-items: start;
}

/**
 * Right Sidebar (Default)
 */
.has-sidebar.sidebar-right .blog-archive-group {
    grid-template-columns: 1fr 300px;
}

/**
 * Left Sidebar
 */
.has-sidebar.sidebar-left .blog-archive-group{
    grid-template-columns: 300px 1fr;
}

.has-sidebar.sidebar-left .blog-sidebar {
    order: -1;
}

/**
 * No Sidebar (Full Width)
 */
.sidebar-none .wp-block-query {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
}

.sidebar-none .blog-sidebar{
    display: none;
}

/**
 * Sidebar Sticky Behavior
 */
.blog-sidebar {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 2rem);
    margin-block-start: 0;
    padding: 0;
}

/**
 * Sidebar Widget Styling
 * Clean, professional cards
 */
.blog-sidebar .wp-block-group {
    background: var(--wp--preset--color--neutral-100, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    padding: var(--wp--preset--spacing--40, 1.5rem);
    margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
}

.blog-sidebar .wp-block-heading {
    font-size: var(--wp--preset--font-size--lg, 1.25rem);
    margin-block-end: var(--wp--preset--spacing--30, 1rem);
    padding-block-end: var(--wp--preset--spacing--20, 0.75rem);
    border-block-end: 2px solid var(--wp--preset--color--primary, #1A73E8);
}

/* ==========================================================================
   Pagination - Modern, Clean
   ========================================================================== */

.wp-block-query-pagination {
    margin-block-start: var(--wp--preset--spacing--60, 3rem);
    padding-block-start: var(--wp--preset--spacing--40, 2rem);
    border-block-start: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
}

.wp-block-query-pagination > * {
    margin: 0;
}

.wp-block-query-pagination-numbers {
    display: flex;
    gap: var(--wp--preset--spacing--20, 0.5rem);
    flex-wrap: wrap;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--wp--preset--spacing--30, 1rem);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wp-block-query-pagination a {
    background: var(--wp--preset--color--neutral-100, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.12));
    color: var(--wp--preset--color--neutral-900, #111);
}

.wp-block-query-pagination a:hover {
    background: var(--wp--preset--color--primary, #1A73E8);
    color: var(--wp--preset--color--neutral-100, #fff);
    transform: translateY(-2px);
}

.wp-block-query-pagination .current {
    background: var(--wp--preset--color--primary, #1A73E8);
    color: var(--wp--preset--color--neutral-100, #fff);
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.wp-block-query-no-results {
    text-align: center;
    padding-block: var(--wp--preset--spacing--70, 4rem);
}

.wp-block-query-no-results .wp-block-heading {
    font-size: var(--wp--preset--font-size--2-xl, 2rem);
    margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.wp-block-query-no-results p {
    color: var(--wp--preset--color--neutral-700, #424242);
}

/* ==========================================================================
   Responsive Design - Mobile First
   ========================================================================== */

/**
 * Tablet: Stack Sidebars
 */
@media (max-width: 1024px) {
    .has-sidebar.sidebar-right .blog-archive-group,
    .has-sidebar.sidebar-left .blog-archive-group{
        grid-template-columns: 1fr;
    }
    
    .has-sidebar.sidebar-left .blog-archive-group .blog-sidebar {
        order: 0;
    }
}

/**
 * Tablet: 2 Column Grid
 */
@media (min-width: 782px) and (max-width: 1024px) {
    .blog-layout-grid .wp-block-post-template,
    .blog-layout-3col .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }

    .archive-layout-grid .wp-block-post-template,
    .archive-layout-3col .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

/**
 * Mobile: Single Column
 */
@media (max-width: 781px) {
    .blog-layout-grid .wp-block-post-template,
    .blog-layout-2col .wp-block-post-template,
    .blog-layout-3col .wp-block-post-template {
        grid-template-columns: 1fr;
    }

    .archive-layout-grid .wp-block-post-template,
    .archive-layout-2col .wp-block-post-template,
    .archive-layout-3col .wp-block-post-template {
        grid-template-columns: 1fr;
    }
    
    .has-sidebar .blog-archive-group {
        gap: var(--wp--preset--spacing--40, 2rem);
    }
    
    .wp-block-query-pagination {
        font-size: var(--wp--preset--font-size--sm, 0.875rem);
    }
    
    .wp-block-query-pagination a,
    .wp-block-query-pagination .page-numbers {
        min-width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/**
 * Focus States
 */
.wp-block-post-title a:focus-visible,
.wp-block-post-featured-image a:focus-visible,
.wp-block-post-terms a:focus-visible,
.wp-block-query-pagination a:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #1A73E8);
    outline-offset: 2px;
}

/**
 * Reduced Motion Support
 */
@media (prefers-reduced-motion: reduce) {
    .wp-block-post-featured-image img,
    .blog-layout-grid .wp-block-post-template > li,
    .blog-layout-2col .wp-block-post-template > li,
    .blog-layout-3col .wp-block-post-template > li,
    .wp-block-query-pagination a {
        transition: none;
    }
}

/**
 * Skip to Content Link
 */
.skip-to-content:focus {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--wp--preset--spacing--30, 1rem);
    background: var(--wp--preset--color--neutral-900, #111);
    color: var(--wp--preset--color--neutral-100, #fff);
    text-decoration: none;
    z-index: 10000;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .blog-sidebar,
    .wp-block-query-pagination {
        display: none;
    }
    
    .has-sidebar.sidebar-right .blog-archive-group,
    .has-sidebar.sidebar-left .blog-archive-group{
        grid-template-columns: 1fr;
    }
    
    .blog-layout-grid .wp-block-post-template,
    .blog-layout-2col .wp-block-post-template,
    .blog-layout-3col .wp-block-post-template {
        display: block;
    }
    
    .wp-block-post-template > li {
        page-break-inside: avoid;
        margin-block-end: 2rem;
        border: 1px solid #ccc;
    }
}

This CSS file handles, the list layout, grid layout, no-sidebar, right-sidebar, and left sidebar layouts based on the settings defined in the theme options page.

Automatic Responsiveness:

  • Mobile (< 781px): 1 column
  • Tablet (782-1024px): 2 columns
  • Desktop (> 1025px): 3 columns

No media queries needed—auto-fill handles everything!

Essential Sidebar Widgets

Search Block:

<!-- wp:search {"showLabel":false,"placeholder":"Search posts..."} /-->

Categories with Post Counts:

<!-- wp:categories {"showHierarchy":true,"showPostCounts":true} /-->

Recent Posts with Images:

<!-- wp:latest-posts {
    "displayPostDate":true,
    "displayFeaturedImage":true
} /-->

Body Classes based on Theme Options

Update this function in inc/template-functions.php

/**
 * Add dynamic body classes based on theme options
 *
 * @param array $classes Existing body classes.
 * @return array Modified body classes.
 */
function versana_body_classes( $classes ) {
    
    // Sticky Header
    if ( versana_get_option( 'enable_sticky_header' ) ) {
        $classes[] = 'has-sticky-header';
    }
    
    // Header Layout
    $header_layout = versana_get_option( 'header_layout', 'default' );
    $classes[] = 'header-layout-' . sanitize_html_class( $header_layout );

    // Blog Layout (on blog/archive pages)
    if ( is_home() || is_archive() || is_search() ) {
        // Sidebar position
        $sidebar_position = versana_get_option( 'blog_sidebar_position', 'right' );
        $valid_positions = array( 'left', 'right', 'none' );
        if($sidebar_position != 'none'){
            $classes[] = 'has-sidebar';
        }
        if ( in_array( $sidebar_position, $valid_positions, true ) ) {
            $classes[] = 'sidebar-' . sanitize_html_class( $sidebar_position );
        }
    }

    // Blog Layout (on blog/home blog pages)
    if ( is_home()) {
        $blog_layout = versana_get_option( 'blog_layout', 'list' );
        // Validate blog layout
        $valid_blog_layouts = array( 'list', 'grid', '2col', '3col' );
        if ( in_array( $blog_layout, $valid_blog_layouts, true ) ) {
            $classes[] = 'blog-layout-' . sanitize_html_class( $blog_layout );
        } else {
            $classes[] = 'blog-layout-list';
        }
    }

    if ( is_archive() || is_search() ) {
        $archive_layout = versana_get_option( 'archive_layout', 'list' );
        if($archive_layout != 'inherit'){
            $classes[] = 'archive-layout-' . sanitize_html_class( $archive_layout );
        }
    }
    
    return $classes;
}
add_filter( 'body_class', 'versana_body_classes' );

This function will dynamically add relevant classes to the body tag based on the theme options settings. The the CSS code will generate the desired layouts based on the body classes.

Performance Optimization

Conditional CSS Loading

function versana_enqueue_blog_styles() {
    if ( is_home() || is_archive() || is_search() ) {
        wp_enqueue_style( 'versana-blog', get_template_directory_uri() . '/assets/css/blog.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'versana_enqueue_blog_styles' );

Result: Blog CSS only loads on blog pages—not homepage, pages, etc.

Maximize theme.json Usage

{
  "styles": {
    "blocks": {
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--2-xl)",
          "fontWeight": "700"
        }
      }
    }
  }
}

Benefits:

  • Editable in Site Editor
  • No custom CSS needed
  • Better performance

Accessibility Features

Focus Indicators

.wp-block-post-title a:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
    .blog-layout-grid .wp-block-post-template > li {
        transition: none;
    }
}

Semantic HTML

Gutenberg blocks output semantic HTML automatically:

  • <main> for content
  • <article> for posts
  • <time> for dates
  • <aside> for sidebar

SEO Best Practices

Proper Heading Hierarchy

<h1>Archive Title</h1>
    <h2>Post Title</h2>
        <h3>Widget Title</h3>

Schema Markup

Gutenberg adds structured data automatically:

  • Article schema for posts
  • Person schema for authors
  • datePublished for dates

Internal Linking

<!-- Category links -->
<!-- wp:post-terms {"term":"category"} /-->

<!-- Related posts -->
<!-- wp:latest-posts /-->

Common Mistakes to Avoid

1. No Aspect Ratio on Images

Wrong:

<!-- wp:post-featured-image /-->

Right:

<!-- wp:post-featured-image {"aspectRatio":"16/9"} /-->

2. Too Many Sidebar Widgets

Limit to 4-5 essential widgets for performance.

3. Ignoring Mobile

Always test on:

  • iPhone (375px)
  • iPad (768px)
  • Desktop (1440px+)

Testing Checklist

Create test posts with:

  • ✅ No featured image
  • ✅ No categories
  • ✅ Short excerpt (2 words)
  • ✅ Long title (20+ words)
  • ✅ Multiple categories

Verify layout stays perfect.

Conclusion

Modern WordPress blog layout Gutenberg design in 2026 is about working with WordPress, not against it. By leveraging native blocks and minimal CSS, you create fast, accessible, SEO-friendly layouts that users love.

Key Takeaways

  1. Gutenberg-first beats page builders
  2. Intelligent display handles missing content
  3. Two core layouts (list + grid) cover most needs
  4. Conditional loading boosts performance
  5. Accessibility must be built-in

Start with the list layout, add grid for visual content, and enjoy best-seller quality results.

FAQ

Q: Do I need a page builder? A: No. Gutenberg + minimal CSS creates better-performing layouts.

Q: Which layout is better for SEO? A: Both are equal. Choose based on content (list for text, grid for images).

Q: How many posts per page? A: List: 10-12. Grid: 9-12 (divisible by 3).

Q: Are these mobile-responsive? A: Yes, fully responsive with mobile-first CSS.

Tags

Leave a Reply

Search

Categories

Recent Posts

Tags

angular block theme BlockTheme CodoBookings c programming data science docker fastapi full site editing gutenberg java javascript learn angular learn graphql learn html & html5 learn wordpress machine learning mongodb n8n n8n automation n8n beginner guide n8n tutorial n8n workflow nginx nodejs react research methodologies R programming shopify app development shopify apps social media ubuntu vps vps server website migration weebly apps weebly tutorials wordpress blocks wordpress block theme wordpress news wordpress plugin development wordpress plugins wordpress security wordpress theme development wordpress tutorials