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 the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk