diff --git a/views/blocks/recent-posts/block.json b/views/blocks/recent-posts/block.json new file mode 100644 index 0000000..a055ade --- /dev/null +++ b/views/blocks/recent-posts/block.json @@ -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 + } +} diff --git a/views/blocks/recent-posts/news-vector.svg b/views/blocks/recent-posts/news-vector.svg new file mode 100644 index 0000000..0b84e79 --- /dev/null +++ b/views/blocks/recent-posts/news-vector.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/views/blocks/recent-posts/recent-posts.css b/views/blocks/recent-posts/recent-posts.css new file mode 100644 index 0000000..4a8c483 --- /dev/null +++ b/views/blocks/recent-posts/recent-posts.css @@ -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; + } +} diff --git a/views/blocks/recent-posts/recent-posts.php b/views/blocks/recent-posts/recent-posts.php new file mode 100644 index 0000000..c1d761d --- /dev/null +++ b/views/blocks/recent-posts/recent-posts.php @@ -0,0 +1,116 @@ + 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 ); +?> + +
> + + +
+
+

+ +

+ +

+ +

+
+ + have_posts() ) : ?> +
+ have_posts() ) : + $recent_posts->the_post(); + + $post_title = get_the_title(); + $post_permalink = get_permalink(); + ?> + + +
+ + + + + +
+ + + +
+ +
+