Post Listing – Scroll Section

_blocks-custom.scss

/* Post Listing --------------------------------------------- */ .block-post-listing { .block-post-listing__inner { margin: 0 -16px 0 -32px; max-width: calc( 100% + 48px ); overflow-x: auto; .post-summary { margin-left: 16px; margin-bottom: 0; } @include media(">=medium") { margin-left: -48px; max-width: calc( 100% + 64px ); .post-summary { margin-left: 32px; } } @supports( display: $grid ) { display: grid; grid-template-columns: 16px; grid-auto-flow: column; grid-auto-columns: calc( calc( 100% - 32px ) / 4 ); @include media("<medium") { grid-auto-columns: calc( calc( 100% - 32px ) / 3.5 ); } @include media("<tablet") { grid-auto-columns: calc( calc( 100% - 32px ) / 2.5 ); } @include media("<400px") { grid-auto-columns: calc( calc( 100% - 32px ) / 1.5 ); } &::before, &::after { content: ''; width: 16px; } } } }

/partials/blocks/post-listing.php

<?php /** * Post Listing block * * @package ShugarySweets2020 * @author Bill Erickson * @since 1.0.0 * @license GPL-2.0+ **/ $classes = ['block-post-listing']; if( !empty( $block['className'] ) ) $classes = array_merge( $classes, explode( ' ', $block['className'] ) ); if( !empty( $block['align'] ) ) $classes[] = 'align' . $block['align']; $anchor = ''; if( !empty( $block['anchor'] ) ) $anchor = ' id="' . sanitize_title( $block['anchor'] ) . '"'; $settings = [ 'orderby' => get_field( 'orderby' ), 'category' => get_field( 'category' ) ]; $loop = new WP_Query( be_post_listing_args( $settings ) ); if( ! $loop->have_posts() ) return; echo '<section class="' . join( ' ', $classes ) . '"' . $anchor . '>'; $title = get_field( 'title' ); if( !empty( $title ) ) echo '<header><h2>' . esc_html( $title ) . '</h2></header>'; echo '<div class="block-post-listing__inner">'; while( $loop->have_posts() ): $loop->the_post(); get_template_part( 'partials/archive' ); endwhile; echo '</div>'; wp_reset_postdata(); echo '</section>';
Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk