Rough starting template for month in WP (#81)

* Rough starting templates

This is a starting point for the month-in-wordpress templates. There's no CSS changes yet, just the markup.

Some notes:
* The wp:query block has some limitations and oddities. I've set columns to 4 because otherwise it was only showing 2. Could be an off-by-one bug or just some quirky layout stuff.
* I used perPage:10000. 0/-1 don't work like WP_Query. I'd prefer to set the limit to something like 60 (5 years per page), but it seems that the pagination block doesn't pay attention to the query block's page parameters and that would mean putting a magic number in two places. Probably there's a sensible way to handle that, but for now I've just removed the pagination altogether.

* Limit the query to the right category

This uses the `category` pseudo-attribute from #88.

* Make headings links

* Fix link colour, align text

* Workaround for an issue in query handling

There's a weird bug or unexpected behaviour around setting the query vars in this context. This isn't right but it'll look better for the demo.

* Rough version of the in-between-years divider

source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-month-in-wordpress.html

@@ -0,0 +1,11 @@
+<!-- wp:group {"tagName":"header","className":"entry-header"} -->
+<header class="wp-block-group entry-header">
+	<h2><!-- wp:post-date {"format":"M","isLink":true} /--></h2>
+
+	<!-- wp:group {"className":"entry-meta"} -->
+	<div class="wp-block-group entry-meta">
+		<!-- wp:post-date {"format":"Y"} /-->
+	</div>
+	<!-- /wp:group -->
+</header>
+<!-- /wp:group -->

source/wp-content/themes/wporg-news-2021/block-templates/category-month-in-wordpress.html

@@ -0,0 +1,16 @@
+<!-- wp:template-part {"slug":"header","align":"full","className":"site-header-container"} /-->
+<!-- This is a hack to ensure content isn't covered by the fixed header -->
+<!-- wp:template-part {"slug":"header","align":"full","className":"site-header-offset"} /-->
+
+<!-- wp:query {"tagName":"main","className":"site-content-container","displayLayout":{"type":"flex","columns":4},"query":{"category":"month-in-wordpress","perPage":"10000","inherit":false}} -->
+<main class="wp-block-query site-content-container">
+	<!-- wp:post-template -->
+		<!-- wp:template-part {"slug":"content-category-month-in-wordpress","tagName":"article","layout":{"inherit":true}} /-->
+	<!-- /wp:post-template -->
+
+</main>
+<!-- /wp:query -->
+
+<!-- wp:template-part {"tagName":"footer","slug":"footer-archive","className":"footer-archive","layout":{"inherit":true}} /-->
+
+<!-- wp:wporg/global-footer /-->

source/wp-content/themes/wporg-news-2021/functions.php

@@ -261,10 +261,10 @@ function specify_post_classes( $classes, $extra_classes, $post_id ) {
 		if ( !is_null( $current_post ) ) {
 			if ( $current_post == 0 ) {
 				// First in the query
-				$classes[] = 'first-in-year';
-			} elseif ( $current_post >= $wp_query->post_count - 1 ) {
+				#$classes[] = 'first-in-year first-in-query';
+			} elseif ( $current_post >= count( $wp_query->posts ) - 1 ) {
 				// Last in the query
-				$classes[] = 'last-in-year';
+				#$classes[] = 'last-in-year last-in-query';
 			} else {
 				if ( get_the_date( 'Y' ) !== get_the_date( 'Y', $wp_query->posts[ $current_post - 1 ] ) ) {
 					$classes[] = 'first-in-year';

source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss

@@ -40,11 +40,29 @@ body.category-releases {
 body.category-month-in-wordpress {
 
 	@extend %local-header-dark;
+	text-align: center;
 
 	.site-content-container {
 		color: var(--wp--preset--color--off-white-2);
 	}
 
+	.wp-block-post-date a {
+		color: var( --wp--preset--color--off-white-2 );
+		text-transform: uppercase;
+	}
+
+	.last-in-year::after {
+		content: "-";
+		display: inline-block;
+		line-height: 7em;
+		width: 100%;
+		background-image: url("images/brush-stroke-short-blue-4.svg");
+		background-position: center;
+		background-repeat: no-repeat;
+		//background-size: fill;
+		color: var(--wp--preset--color--blue-1);
+
+	}
 	@extend %footer-archive-dark;
 }