This commit is contained in:
Keith Solomon
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "acf/recent-posts",
|
||||||
|
"title": "Recent Posts",
|
||||||
|
"description": "Display the latest posts in a three-column card layout.",
|
||||||
|
"style": [
|
||||||
|
"file:./recent-posts.css"
|
||||||
|
],
|
||||||
|
"category": "vdi-block",
|
||||||
|
"icon": "calendar-alt",
|
||||||
|
"keywords": [
|
||||||
|
"Recent Posts"
|
||||||
|
],
|
||||||
|
"acf": {
|
||||||
|
"blockVersion": 3,
|
||||||
|
"autoInlineEditing": true,
|
||||||
|
"mode": "preview",
|
||||||
|
"renderTemplate": "recent-posts.php"
|
||||||
|
},
|
||||||
|
"supports": {
|
||||||
|
"align": true,
|
||||||
|
"anchor": true,
|
||||||
|
"color": true,
|
||||||
|
"html": false,
|
||||||
|
"jsx": false,
|
||||||
|
"mode": true,
|
||||||
|
"multiple": false
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 157 KiB |
@@ -0,0 +1,267 @@
|
|||||||
|
/* Recent Posts block styles */
|
||||||
|
|
||||||
|
.recent-posts {
|
||||||
|
--recent-posts-card-bg: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
|
||||||
|
--recent-posts-gap: clamp(1.5rem, 3vw, 3rem);
|
||||||
|
--recent-posts-vector-height: clamp(31rem, 40vw, 37.875rem);
|
||||||
|
|
||||||
|
background: var(--color-white);
|
||||||
|
overflow: hidden;
|
||||||
|
padding: clamp(8rem, 11vw, 13.5rem) 0 clamp(4rem, 8vw, 8rem);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__background {
|
||||||
|
height: var(--recent-posts-vector-height);
|
||||||
|
inset-block-start: 0;
|
||||||
|
inset-inline: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__vector {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
min-height: var(--recent-posts-vector-height);
|
||||||
|
object-fit: cover;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__inner {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__header {
|
||||||
|
align-items: start;
|
||||||
|
display: grid;
|
||||||
|
gap: clamp(1.5rem, 5vw, 5rem);
|
||||||
|
grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
|
||||||
|
margin: 0 auto clamp(2rem, 4vw, 3.25rem);
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__heading {
|
||||||
|
color: var(--color-cwc-blue-01);
|
||||||
|
font-family: var(--font-quincy);
|
||||||
|
font-size: clamp(2.75rem, 5vw, 4rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__heading span {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__intro {
|
||||||
|
color: var(--color-dark);
|
||||||
|
font-size: var(--text-20px);
|
||||||
|
line-height: 1.35;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 44rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__grid {
|
||||||
|
container-type: inline-size;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--recent-posts-gap);
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 397px));
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__grid::before {
|
||||||
|
background: var(--color-cwc-blue-03);
|
||||||
|
content: "";
|
||||||
|
height: 16px;
|
||||||
|
left: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: min(250px, calc(((100cqw - (2 * var(--recent-posts-gap))) / 3) * 250 / 397));
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 100vw;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 397px;
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__image-link {
|
||||||
|
aspect-ratio: 397 / 250;
|
||||||
|
border-radius: 0.75rem 0.75rem 0 0;
|
||||||
|
display: block;
|
||||||
|
max-height: 250px;
|
||||||
|
max-width: 397px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__image {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 250px;
|
||||||
|
max-width: 397px;
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__image--placeholder {
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
135deg,
|
||||||
|
color-mix(in oklch, var(--color-cwc-blue-03) 45%, white),
|
||||||
|
color-mix(in oklch, var(--color-cwc-blue-01) 18%, white)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__body {
|
||||||
|
background: var(--recent-posts-card-bg);
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: clamp(1.5rem, 3vw, 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__title {
|
||||||
|
color: var(--color-cwc-blue-01);
|
||||||
|
font-family: var(--font-quincy);
|
||||||
|
font-size: var(--text-30px);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0 0 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__title::after {
|
||||||
|
background: var(--color-secondary);
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 4px;
|
||||||
|
margin-top: 0.45rem;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__title a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__title a:hover,
|
||||||
|
.recent-posts__title a:focus {
|
||||||
|
color: var(--color-cwc-blue-02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__excerpt {
|
||||||
|
color: var(--color-dark);
|
||||||
|
font-size: var(--text-18px);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__excerpt p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__read-more {
|
||||||
|
align-self: flex-start;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
display: inline-block;
|
||||||
|
font-size: var(--text-18px);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: clamp(1.75rem, 3vw, 2.75rem);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-thickness: 4px;
|
||||||
|
text-underline-offset: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__read-more:hover,
|
||||||
|
.recent-posts__read-more:focus {
|
||||||
|
color: var(--color-cwc-blue-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: clamp(3rem, 5vw, 4.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__blog-link.button {
|
||||||
|
background: var(--color-white);
|
||||||
|
font-size: var(--text-18px);
|
||||||
|
min-width: 10rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.recent-posts__background {
|
||||||
|
height: clamp(33rem, 59vw, 38rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__vector {
|
||||||
|
min-height: clamp(33rem, 59vw, 38rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__header {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
max-width: 48rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__intro {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 397px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__grid::before {
|
||||||
|
top: min(250px, calc(((100cqw - var(--recent-posts-gap)) / 2) * 250 / 397));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.recent-posts {
|
||||||
|
padding-top: clamp(15.5rem, 64vw, 17rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__background {
|
||||||
|
height: clamp(45rem, 192vw, 49rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__vector {
|
||||||
|
min-height: clamp(45rem, 192vw, 49rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__heading {
|
||||||
|
font-size: var(--text-54px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__grid {
|
||||||
|
grid-template-columns: minmax(0, 397px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__grid::before {
|
||||||
|
top: min(250px, calc(100cqw * 250 / 397));
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts__body {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
<?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">
|
||||||
|
<header class="recent-posts__header">
|
||||||
|
<h2 class="recent-posts__heading">
|
||||||
|
<?php echo esc_html__( 'Latest Insights', 'cwc' ); ?><span aria-hidden="true">.</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="recent-posts__intro">
|
||||||
|
<?php
|
||||||
|
echo esc_html__(
|
||||||
|
'Explore our latest articles on community, land stewardship, engagement and stories about our collaborations. We publish new insights every two months to share knowledge, project lessons, and emerging ideas shaping our work.',
|
||||||
|
'cwc'
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<?php if ( $recent_posts->have_posts() ) : ?>
|
||||||
|
<div class="recent-posts__grid">
|
||||||
|
<?php
|
||||||
|
while ( $recent_posts->have_posts() ) :
|
||||||
|
$recent_posts->the_post();
|
||||||
|
|
||||||
|
$post_title = get_the_title();
|
||||||
|
$post_permalink = get_permalink();
|
||||||
|
?>
|
||||||
|
<article class="recent-posts__card">
|
||||||
|
<?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 endwhile; ?>
|
||||||
|
</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>
|
||||||
Reference in New Issue
Block a user