Add community rough templates

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}} -->
+<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,95 @@ 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;
+			}
+		}
+		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,20 @@
 	}
 }
 
+%four-column-grid-container {
+	@include break-wide() {
+		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,19 @@ 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;
+}
+
+body.category-community {
+	li.post {
+		margin: 1px;
+	}
+	li.post:not(.has-post-thumbnail):nth-of-type(even) {
+		background-color: var(--wp--preset--color--blue-1);
+	}
+	li.post:not(.has-post-thumbnail):nth-of-type(odd) {
+		background-color: var(--wp--preset--color--blue-2);
+	}
+}