Add community rough templates (#88)

Add a very rough and incomplete version of the Community category template.

The main incomplete issues are:
* It's not full-width on desktop as per the Figma design
* Some spacing issues in the grid in both desktop and mobile
* Pagination nav is not yet finished (that's true of other pages too).

I'm merging this as WIP to unblock other work, and so we can get some iteration and refinement happening on the layout.

env/import.sh

@@ -2,5 +2,6 @@
 
 root=$( dirname $( wp config path ) )
 
+wp import "${root}/env/media.xml" --authors=create
 wp import "${root}/env/podcasts.xml" --authors=create
 wp import "${root}/env/posts.xml" --authors=create

source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-community.html

@@ -0,0 +1,12 @@
+<!-- wp:group {"tagName":"header","className":"entry-header",style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
+<header class="wp-block-group entry-header">
+	<!-- wp:post-title {"level":3,"isLink":true} /-->
+	<!-- wp:post-featured-image {"isLink":true,"width":"200","height":"200"} /-->
+
+	<!-- wp:group {"className":"entry-meta"} -->
+	<div class="wp-block-group entry-meta">
+		<!-- wp:post-date /-->
+	</div>
+	<!-- /wp:group -->
+</header>
+<!-- /wp:group -->

source/wp-content/themes/wporg-news-2021/block-templates/category-community.html

@@ -0,0 +1,17 @@
+<!-- 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","query":{"category":"community","perPage":"20","postType":"post","inherit":false},"displayLayout":{"type":"flex","columns":4},"align":"full"} -->
+<main class="wp-block-query site-content-container">
+	<!-- wp:post-template -->
+		<!-- wp:template-part {"slug":"content-category-community","tagName":"article","layout":{"inherit":true}} /-->
+	<!-- /wp:post-template -->
+
+	<!-- wp:template-part {"slug":"query-navigation","className":"query-navigation-container","layout":{"inherit":true}} /-->
+</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

@@ -16,6 +16,9 @@
 add_filter( 'template_include', __NAMESPACE__ . '\override_front_page_template' );
 add_action( 'pre_get_posts', __NAMESPACE__ . '\offset_paginated_index_posts' );
 add_filter( 'body_class', __NAMESPACE__ . '\clarify_body_classes' );
+add_filter( 'post_class', __NAMESPACE__ . '\specify_post_classes', 10, 3 );
+add_filter( 'theme_file_path', __NAMESPACE__ . '\conditional_template_part', 10, 2 );
+add_filter( 'render_block_data', __NAMESPACE__ . '\custom_query_block_attributes' );
 
 /**
  * Register theme support.
@@ -231,3 +234,96 @@ function clarify_body_classes( $classes ) {
 
 	return $classes;
 }
+
+/**
+ * Add post classes to help make possible some design elements such as spacers between groups of posts.
+ *
+ * @param array $classes
+ *
+ * @return array
+ */
+function specify_post_classes( $classes, $extra_classes, $post_id ) {
+	$classes[] = 'post-year-' . get_the_date('Y');
+
+	global $wp_query;
+
+	// Add first-in-year and last-in-year to help put design elements in between year groups in the Month In WordPress category
+	if ( is_object( $wp_query ) && $wp_query->post_count > 1 ) {
+		// Seems like the wp:query loop block doesn't count as "in the loop" so we'll do this the hard way:
+		$current_post = null;
+		for ( $i=0; $i < count ( $wp_query->posts ); $i++ ) {
+			if ( $wp_query->posts[ $i ]->ID === $post_id ) {
+				$current_post = $i;
+			}
+		}
+		// TODO: first/last-in-year may not be needed. Remove this for launch if it's unnecessary.
+		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 ) {
+				// Last in the query
+				$classes[] = 'last-in-year';
+			} else {
+				if ( get_the_date( 'Y' ) !== get_the_date( 'Y', $wp_query->posts[ $current_post - 1 ] ) ) {
+					$classes[] = 'first-in-year';
+				}
+				if ( get_the_date( 'Y' ) !== get_the_date( 'Y', $wp_query->posts[ $current_post + 1 ] ) ) {
+					$classes[] = 'last-in-year';
+				}
+			}
+		}
+	}
+
+	return $classes;
+}
+
+function conditional_template_part( $path, $file ) {
+	// Crudely simulate the $name parameter to get_template_part() for the wp:template-part block
+	// Example: <!-- wp:template-part {"slug":"foo-bar{-test}"} -->
+	// will attempt to use "foo-bar-test", and fall back to "foo-bar" if that template file does not exist
+	if ( false !== strpos( $path, '{' ) && !file_exists( $path ) ) {
+		if ( preg_match( '/[{]([-\w]+)[}]/', $path, $matches ) ) {
+			$name = $matches[1];
+			// Try "foo-bar-test"
+			$new_path = str_replace( '{' . $name . '}', $name, $path );
+			if ( file_exists( $new_path ) ) {
+				$path = $new_path;
+			} else {
+				// If that doesn't exist, try "foo-bar"
+				$new_path = str_replace( '{' . $name . '}', '', $path );
+				if ( file_exists( $new_path ) ) {
+					$path = $new_path;
+				}
+			}
+		}
+
+	}
+
+	return $path;
+}
+
+/**
+ * Support some additional pseudo-attributes for the wp:query block; notably category slugs.
+ *
+ * This could be removed if https://github.com/WordPress/gutenberg/issues/36785 is resolved.
+ *
+ * @param array         $parsed_block The block being rendered.
+ *
+ * @return array
+ */
+
+function custom_query_block_attributes( $parsed_block ) {
+	if ( 'core/query' === $parsed_block['blockName'] ) {
+		// If the block has a `category` attribute, then find the corresponding cat ID and set the `categoryIds` attribute.
+		// TODO: support multiple?
+		if ( isset( $parsed_block[ 'attrs' ][ 'query' ][ 'category' ] ) ) {
+			$category = get_category_by_slug( $parsed_block[ 'attrs' ][ 'query' ][ 'category' ] );
+			if ( $category ) {
+				$parsed_block[ 'attrs' ][ 'query' ][ 'categoryIds' ] = [ $category->term_id ];
+			}
+		}
+	}
+
+	return $parsed_block;
+}

source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss

@@ -54,6 +54,24 @@
 	}
 }
 
+%four-column-grid-container {
+	@include break-wide() {
+		justify-self: center;
+		width: var(--wp--custom--layout--wide-size);
+		max-width: var(--wp--custom--layout--wide-size);
+
+		display: grid;
+		grid-template-columns: repeat( 4, 1fr );
+
+		/*
+		 * This defines the minimum horizontal gap. An additional implicit gap is created because the right column
+		 * contents have a `max-width` and are justified in the center.
+		 */
+		grid-gap: 0 var( --wp--style--block-gap );
+	}
+}
+
+
 :root {
 	--wpadmin-bar--height: 46px;
 }

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

@@ -60,3 +60,43 @@ body.category-security {
 		--bar-background-color: var( --wp--preset--color--coral-red );
 	}
 }
+
+
+body.category-community {
+	@extend %local-header-lightish;
+
+	li.post {
+		//margin: 1px;
+
+
+	}
+
+	.wp-block-post-title,
+	.wp-block-post-date {
+		font-size: var( --wp--preset--font--size--tiny);
+	}
+
+	// Alternating blue-1 and blue-2 for non-thumbnail posts
+	li.post:not(.has-post-thumbnail):nth-of-type(even) {
+		background-color: var(--wp--preset--color--blue-1);
+		color: var(--wp--preset--color--white);
+		vertical-align: bottom;
+	}
+	li.post:not(.has-post-thumbnail):nth-of-type(odd) {
+		background-color: var(--wp--preset--color--blue-2);
+		color: var(--wp--preset--color--white);
+		vertical-align: bottom;
+	}
+
+	// Featured image only for posts that have one
+	li.post.has-post-thumbnail .wp-block-post-title,
+	li.post.has-post-thumbnail .entry-meta {
+		display: none;
+	}
+
+	// B&W featured image
+	li.post.has-post-thumbnail .wp-block-post-featured-image {
+		filter: grayscale(100%);
+		object-fit: cover;
+	}
+}

source/wp-content/themes/wporg-news-2021/sass/post/_content.scss

@@ -9,3 +9,7 @@ body.single .site-content-container .wp-block-post-content,
 body.page .site-content-container .wp-block-post-content {
 	@extend %two-column-grid-container-dynamic-rows;
 }
+
+body.category-community .site-content-container {
+	@extend %four-column-grid-container;
+}