feat: add specific styles for the query block (#184)

src/scss/_gutenberg-shim.scss

@@ -54,19 +54,6 @@ figcaption a {
 	}
 }
 
-/*
- * Search styles
- * Hide date and byline for pages; may want to flip this in the future to all but posts.
- */
-.search-results {
-	.type-page {
-		.wp-block-post-author,
-		.wp-block-post-date {
-			display: none;
-		}
-	}
-}
-
 /*
  * Editor styles
  *

src/scss/blocks/_blocks.scss

@@ -14,6 +14,7 @@
 @import url('./_post-carousel.scss');
 @import url('./_post-terms.scss');
 @import url('./_pullquote.scss');
+@import url('./_query.scss');
 @import url('./_query-pagination.scss');
 @import url('./_quote.scss');
 @import url('./_separator.scss');

src/scss/blocks/_query-pagination.scss

@@ -13,7 +13,7 @@
 
 	.wp-block-comments-pagination-numbers,
 	.wp-block-query-pagination-numbers {
-		gap: calc(var(--wp--preset--spacing--20) / 2);
+		gap: calc( var( --wp--preset--spacing--20 ) / 2 );
 		margin: 0;
 
 		a,
@@ -36,9 +36,9 @@
 .wp-block-query-pagination {
 	// Justification = Space Between
 	&.is-content-justification-space-between {
-		@include sass-utils.media(small) {
+		@include sass-utils.media( small ) {
 			display: grid;
-			grid-template-columns: repeat(12, 1fr);
+			grid-template-columns: repeat( 12, 1fr );
 		}
 
 		> * {
@@ -49,15 +49,19 @@
 		> .wp-block-query-pagination-numbers:first-child {
 			grid-column-end: span 8;
 
-			@include sass-utils.media(small) {
+			@include sass-utils.media( small ) {
 				&::before {
 					content: '';
 					display: inline-block;
 					height: 100%;
-					margin-right: var(--wp--preset--spacing--30);
-					width: calc(50% - (var(--wp--preset--spacing--30) / 2));
+					margin-right: var( --wp--preset--spacing--30 );
+					width: calc( 50% - var( --wp--preset--spacing--30 ) / 2 );
 				}
 			}
 		}
 	}
+
+	&__container:not( :has( & ) ) {
+		display: none;
+	}
 }

src/scss/blocks/_query.scss

@@ -0,0 +1,21 @@
+.wp-block-query {
+	.wp-block-post:not( .type-post ) {
+		.post-meta,
+		.wp-block-post-author,
+		.wp-block-post-date {
+			display: none;
+		}
+	}
+
+	.wp-block-post:not( .has-post-thumbnail ) {
+		.wp-block-columns:not( .block-editor-block-list__layout ) {
+			display: block;
+
+			.wp-block-column {
+				&:empty {
+					display: none;
+				}
+			}
+		}
+	}
+}

src/scss/blocks/_search.scss

@@ -26,13 +26,8 @@
 		width: 100%;
 
 		&:focus-within {
-			outline: 2px solid var( --wp--preset--color--contrast-3 );
+			outline: 2px solid var( --wp--preset--color--contrast );
 			outline-offset: -1px;
-
-			@media ( prefers-contrast: more ) {
-				border-color: var( --wp--preset--color--contrast );
-				outline-color: var( --wp--preset--color--contrast );
-			}
 		}
 
 		.wp-block-search__inside-wrapper {

templates/archive.html

@@ -7,32 +7,44 @@
 <!-- wp:term-description /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-template -->
-<!-- wp:columns {"className":"is-style-first-col-to-second"} -->
-<div class="wp-block-columns is-style-first-col-to-second"><!-- wp:column {"width":"31.5%"} -->
-<div class="wp-block-column" style="flex-basis:31.5%"><!-- wp:post-featured-image {"aspectRatio":"3/2"} /--></div>
+<!-- wp:columns {"align":"wide","className":"is-style-first-col-to-second newspack-grid"} -->
+<div class="wp-block-columns alignwide is-style-first-col-to-second newspack-grid"><!-- wp:column {"width":"50%","metadata":{"name":"Post"}} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-template {"layout":{"type":"default"}} -->
+<!-- wp:columns {"className":"is-style-first-col-to-second newspack-grid-small","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<div class="wp-block-columns is-style-first-col-to-second newspack-grid-small" style="margin-top:0;margin-bottom:0"><!-- wp:column {"width":"33.33%","metadata":{"name":"Image"}} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-featured-image {"aspectRatio":"3/2","style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}}} /--></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"width":"68.5%","style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
-<div class="wp-block-column" style="flex-basis:68.5%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<!-- wp:column {"width":"66.66%","metadata":{"name":"Content"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group"><!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
 
 <!-- wp:post-title {"level":4,"isLink":true} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-excerpt {"moreText":"","fontSize":"small"} /-->
+<!-- wp:post-excerpt {"showMoreOnNewLine":false,"fontSize":"small"} /-->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"fontSize":"x-small"} /-->
+<!-- wp:group {"metadata":{"name":"Post Meta"},"className":"post-meta","style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group post-meta"><!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"fontSize":"x-small"} /-->
 
 <!-- wp:post-date {"fontSize":"x-small"} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
-<!-- /wp:post-template -->
+<!-- /wp:post-template --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
 
-<!-- wp:group {"metadata":{"name":"Pagination"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--80)"><!-- wp:separator {"align":"wide","className":"is-style-wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
+<!-- wp:group {"metadata":{"name":"Pagination"},"align":"wide","className":"wp-block-query-pagination__container","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide wp-block-query-pagination__container" style="margin-top:var(--wp--preset--spacing--80)"><!-- wp:separator {"align":"wide","className":"is-style-wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" style="margin-bottom:var(--wp--preset--spacing--30)"/>
 <!-- /wp:separator -->
 

templates/author.html

@@ -22,10 +22,10 @@
 <!-- wp:post-title {"level":4,"isLink":true} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-excerpt {"fontSize":"small"} /-->
+<!-- wp:post-excerpt {"showMoreOnNewLine":false,"fontSize":"small"} /-->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"fontSize":"x-small"} /-->
+<!-- wp:group {"metadata":{"name":"Post Meta"},"className":"post-meta","style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group post-meta"><!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"fontSize":"x-small"} /-->
 
 <!-- wp:post-date {"fontSize":"x-small"} /--></div>
 <!-- /wp:group --></div>
@@ -43,8 +43,8 @@
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 
-<!-- wp:group {"metadata":{"name":"Pagination"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--80)"><!-- wp:separator {"align":"wide","className":"is-style-wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
+<!-- wp:group {"metadata":{"name":"Pagination"},"align":"wide","className":"wp-block-query-pagination__container","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide wp-block-query-pagination__container" style="margin-top:var(--wp--preset--spacing--80)"><!-- wp:separator {"align":"wide","className":"is-style-wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" style="margin-bottom:var(--wp--preset--spacing--30)"/>
 <!-- /wp:separator -->
 

templates/search.html

@@ -5,42 +5,52 @@
 <h1 class="wp-block-heading">Search results for:</h1>
 <!-- /wp:heading -->
 
-<!-- wp:search {"label":"","placeholder":"Search...","buttonPosition":"button-inside","buttonUseIcon":true} /--></div>
+<!-- wp:search {"label":"","fontSize":"small"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"tagName":"main","layout":{"type":"default"}} -->
-<main class="wp-block-query"><!-- wp:post-template -->
-<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:columns {"isStackedOnMobile":false,"className":"is-style-default"} -->
-<div class="wp-block-columns is-not-stacked-on-mobile is-style-default"><!-- wp:column {"width":"75%"} -->
-<div class="wp-block-column" style="flex-basis:75%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"fontSize":"small"} /-->
+<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-query"><!-- wp:columns {"align":"wide","className":"is-style-first-col-to-second newspack-grid"} -->
+<div class="wp-block-columns alignwide is-style-first-col-to-second newspack-grid"><!-- wp:column {"width":"50%","metadata":{"name":"Post"}} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-template {"layout":{"type":"default"}} -->
+<!-- wp:columns {"className":"is-style-first-col-to-second newspack-grid-small","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<div class="wp-block-columns is-style-first-col-to-second newspack-grid-small" style="margin-top:0;margin-bottom:0"><!-- wp:column {"width":"33.33%","metadata":{"name":"Image"}} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-featured-image {"aspectRatio":"3/2","style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}}} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"66.66%","metadata":{"name":"Content"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
 
-<!-- wp:post-title {"isLink":true,"fontSize":"large"} /--></div>
+<!-- wp:post-title {"level":4,"isLink":true} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-excerpt /-->
+<!-- wp:post-excerpt {"showMoreOnNewLine":false,"fontSize":"small"} /-->
 
-<!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true} /-->
+<!-- wp:group {"metadata":{"name":"Post Meta"},"className":"post-meta","style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group post-meta"><!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"fontSize":"x-small"} /-->
 
-<!-- wp:post-date {"isLink":true} /--></div>
+<!-- wp:post-date {"fontSize":"x-small"} /--></div>
 <!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+<!-- /wp:post-template --></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"25%"} -->
-<div class="wp-block-column" style="flex-basis:25%"><!-- wp:post-featured-image {"aspectRatio":"3/2"} /--></div>
+<div class="wp-block-column" style="flex-basis:25%"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 
-<!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
+<!-- wp:group {"metadata":{"name":"Pagination"},"align":"wide","className":"wp-block-query-pagination__container","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide wp-block-query-pagination__container" style="margin-top:var(--wp--preset--spacing--80)"><!-- wp:separator {"align":"wide","className":"is-style-wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
+<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" style="margin-bottom:var(--wp--preset--spacing--30)"/>
 <!-- /wp:separator -->
-<!-- /wp:group -->
-<!-- /wp:post-template -->
 
-<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
 <!-- wp:query-pagination-previous /-->
 
 <!-- wp:query-pagination-numbers /-->