CPT Like Latest Post Widget

Hi,

Currently, Twentig doesn’t include a way to replicate the card style for the Query Loop block. We’ll explore how we can enhance this block in a future release.

To achieve the card style for your latest guides, you can use the Query Loop block and add custom CSS as follow:

1) In the editor, insert this code to create the query (set your Guide CPT as the Post type):

<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide","className":"query-cards"} -->
<div class="wp-block-query alignwide query-cards"><!-- wp:post-template -->
<!-- wp:post-featured-image /-->

<!-- wp:post-title {"isLink":true,"className":"tw-mt-0 tw-mb-0"} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

Then in the Customizer > Additional CSS panel (or inside your child theme), add this CSS:

.query-cards ul li {
	background-color: #fff;
	box-shadow: var(--tw-block-shadow);
	padding: 30px 24px;
	transition: box-shadow .2s ease-in-out;
	position: relative;
}

.query-cards ul li:focus-within, .query-cards ul li:hover {
	box-shadow: var(--tw-block-shadow-lg);
}

.query-cards .wp-block-post-featured-image {
	margin: -30px -24px 20px;
}

.query-cards h2 {
	font-size: 2.4rem;
}

.query-cards h2 a {
	color: currentcolor;
	text-decoration: none;
}

.query-cards h2 a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: auto;
	background-color: transparent;
}

@media (max-width: 699px) {
	.wp-block-query.query-cards ul li {
		width: 100% !important;
		margin-right: 0 !important;
	}
}

@media (min-width: 700px) and (max-width: 1023px) {
	.wp-block-query.query-cards ul li {
		width: calc(50% - 16px) !important;
	}
	
	.wp-block-query.query-cards ul li:nth-child(2n) {
		margin-right: 0;
	}
}

Hope that helps.

If you enjoy Twentig, please rate it. It would really help me out ??
Tom

Thanks Tom.
I tried this, but couldn’t get it to work for me. However I’ve replaced the SECTION with one of the CARDS to link to the appropriate PAGE ??

It’s a simple work-around for me, but I very much appreciate your helpful reply.

Andrew.