143 lines
4.9 KiB
PHP
143 lines
4.9 KiB
PHP
<?php
|
|
/**
|
|
* Block Name: Recent Posts
|
|
*
|
|
* Display the latest posts in a three-column card layout.
|
|
*
|
|
* @package CWC
|
|
*/
|
|
|
|
namespace CWC;
|
|
|
|
$recent_posts = new \WP_Query(
|
|
array(
|
|
'ignore_sticky_posts' => true,
|
|
'no_found_rows' => true,
|
|
'post_status' => 'publish',
|
|
'posts_per_page' => 3,
|
|
)
|
|
);
|
|
|
|
$posts_page_id = (int) get_option( 'page_for_posts' );
|
|
$blog_url = $posts_page_id ? get_permalink( $posts_page_id ) : home_url( '/blog/' );
|
|
$classes = 'recent-posts mx-break-out relative z-10 mt-0';
|
|
|
|
/**
|
|
* NOTE: DO NOT remove this function call - it is required to avoid editor issues.
|
|
* $is_preview is a WordPress global when in the editor.
|
|
*/
|
|
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
|
?>
|
|
|
|
<section <?php echo wp_kses_post( $wrapper ); ?>>
|
|
<div class="recent-posts__background" aria-hidden="true">
|
|
<img
|
|
class="recent-posts__vector"
|
|
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/recent-posts/news-vector.svg' ); ?>"
|
|
alt=""
|
|
loading="lazy"
|
|
role="presentation"
|
|
/>
|
|
</div>
|
|
|
|
<div class="recent-posts__inner container px-0!">
|
|
<header class="recent-posts__header">
|
|
<h2 class="recent-posts__heading">
|
|
<?php echo esc_html__( 'Latest Insights', 'cwc' ); ?><span aria-hidden="true">.</span>
|
|
</h2>
|
|
|
|
<div class="recent-posts__intro">
|
|
<?php
|
|
echo wp_kses_post( get_field( 'intro' ) ?? '' );
|
|
?>
|
|
</div>
|
|
</header>
|
|
|
|
<?php if ( $recent_posts->have_posts() ) : ?>
|
|
<div class="recent-posts__grid">
|
|
<?php
|
|
$post_index = 0;
|
|
while ( $recent_posts->have_posts() ) :
|
|
$recent_posts->the_post();
|
|
|
|
$post_title = get_the_title();
|
|
$post_permalink = get_permalink();
|
|
$active_class = 0 === $post_index ? ' is-active' : '';
|
|
?>
|
|
<article class="recent-posts__card<?php echo esc_attr( $active_class ); ?>">
|
|
<?php /* translators: %s: Post title. */ ?>
|
|
<a class="recent-posts__image-link" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
|
|
<?php if ( has_post_thumbnail() ) : ?>
|
|
<?php
|
|
the_post_thumbnail(
|
|
array( 397, 250 ),
|
|
array(
|
|
'class' => 'recent-posts__image',
|
|
'loading' => 'lazy',
|
|
)
|
|
);
|
|
?>
|
|
<?php else : ?>
|
|
<span class="recent-posts__image recent-posts__image--placeholder" aria-hidden="true"></span>
|
|
<?php endif; ?>
|
|
</a>
|
|
|
|
<div class="recent-posts__body">
|
|
<h3 class="recent-posts__title">
|
|
<?php /* translators: %s: Post title. */ ?>
|
|
<a href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>"><?php echo esc_html( $post_title ); ?></a>
|
|
</h3>
|
|
|
|
<div class="recent-posts__excerpt">
|
|
<p><?php echo esc_html( wp_trim_words( get_the_excerpt(), 26 ) ); ?></p>
|
|
</div>
|
|
|
|
<?php /* translators: %s: Post title. */ ?>
|
|
<a class="recent-posts__read-more" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
|
|
<?php echo esc_html__( 'Read More', 'cwc' ); ?>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<?php
|
|
++$post_index;
|
|
endwhile;
|
|
?>
|
|
|
|
<div class="recent-posts__controls">
|
|
<button class="recent-posts__control recent-posts__control--previous" type="button" aria-label="<?php echo esc_attr__( 'Previous article', 'cwc' ); ?>">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path d="M15 5 8 12l7 7" />
|
|
</svg>
|
|
</button>
|
|
<button class="recent-posts__control recent-posts__control--next" type="button" aria-label="<?php echo esc_attr__( 'Next article', 'cwc' ); ?>">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path d="m9 5 7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recent-posts__pagination" aria-label="<?php echo esc_attr__( 'Choose an article', 'cwc' ); ?>">
|
|
<?php for ( $dot_index = 0; $dot_index < $recent_posts->post_count; ++$dot_index ) : ?>
|
|
<button
|
|
class="recent-posts__dot<?php echo 0 === $dot_index ? ' is-active' : ''; ?>"
|
|
type="button"
|
|
aria-label="<?php echo esc_attr( sprintf( /* translators: %d: Article number. */ __( 'Show article %d', 'cwc' ), $dot_index + 1 ) ); ?>"
|
|
<?php echo 0 === $dot_index ? ' aria-current="true"' : ''; ?>
|
|
></button>
|
|
<?php endfor; ?>
|
|
</div>
|
|
|
|
<?php wp_reset_postdata(); ?>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( $blog_url ) : ?>
|
|
<div class="recent-posts__footer">
|
|
<a class="recent-posts__blog-link button" href="<?php echo esc_url( $blog_url ); ?>" data-button-color="secondary" data-button-variant="outline">
|
|
<?php echo esc_html__( 'View Blog', 'cwc' ); ?>
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|