_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>';