Merge pull request #2564 from Automattic/update/spearhead-archive-block-pattern

Spearhead: archive block pattern

spearhead/assets/sass/_archive.scss

@@ -0,0 +1,16 @@
+.archive {
+
+	.page-header {
+		line-height: var(--heading--line-height-h1);
+		margin-bottom: 16px;
+	}
+
+	.page-title {
+		font-size: var(--heading--font-size-h1);
+		color: var(--entry-header--color);
+	}
+
+	.site-main > article:first-of-type {
+		margin-top: 0;
+	}
+}

spearhead/assets/sass/_block-extends.scss

@@ -1,3 +1,5 @@
 // Import the block extends
+@import "block-extends/search";
 @import "block-extends/latest-posts";
 @import "block-extends/related-posts";
+@import "block-extends/categories";

spearhead/assets/sass/block-extends/_categories.scss

@@ -0,0 +1,22 @@
+ul.wp-block-categories,
+.wp-block-categories ul{
+	list-style-type: none;
+	margin-top: 0;
+	padding: 0;
+}
+
+.wp-block-categories {
+	.cat-item {
+		margin: calc( 0.3 * var(--global--spacing-vertical) ) 0;
+	}
+
+	a {
+		color: var(--entry-header--color);
+		font-size: var(--global--font-size-lg);
+
+		&:hover {
+			border-color: transparent;
+			color: var(--global--color-primary);
+		}
+	}
+}

spearhead/assets/sass/block-extends/_latest-posts.scss

@@ -1,8 +1,19 @@
 .wp-block-latest-posts {
-    > li > a {
-        color: var(--global--color-foreground);
-        &:hover {
-            color: var(--global--color-primary);
-        }
-    }
-}
+	> li {
+
+		&:not(.is-grid) {
+			margin: calc( 0.3 * var(--global--spacing-vertical) ) 0;
+		}
+
+		> a {
+			color: var(--global--color-foreground-light);
+			font-size: var(--global--font-size-lg);
+			font-weight: 500;
+
+			&:hover {
+				border-color: transparent;
+				color: var(--global--color-primary);
+			}
+		}
+	}
+}

spearhead/assets/sass/block-extends/_search.scss

@@ -0,0 +1,69 @@
+@mixin input-search-style() {
+	background: transparent;
+	color: var(--global--color-secondary);
+}
+
+.wp-block-search {
+
+	// wrong class on gutenberg editor, we'll need to change it after that's fixed
+	&.wp-block-search__icon-button.wp-block-search__button-inside {
+		.wp-block-search__button {
+			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+		}
+	}
+
+	// wrong class on gutenberg editor, we'll need to change it after that's fixed
+	&.wp-block-search__text-button.wp-block-search__button-inside {
+
+		.wp-block-search__inside-wrapper{
+			flex-direction: row-reverse;
+			padding-left: 0;
+			border: none;
+			border-bottom: var(--form--border-width) solid var(--form--border-color);
+		}
+
+		.wp-block-search__input {
+			border: none;
+			padding: 0 0 0 10px;
+			font-size: var(--global--font-size-sm);
+		}
+
+		.wp-block-search__button {
+			&.has-icon {
+				margin-left: 0;
+				background: transparent;
+				color: var(--entry-header--color);
+				padding: 0;
+				border: none;
+				transform: scaleX(-1);
+				min-width: 14px;
+				svg {
+					width: 14px;
+					height: 14px;
+				}
+			}
+		}
+	}
+
+	.wp-block-search__button {
+		border: none;
+		box-shadow: none;
+		&.has-icon {
+			svg {
+				width: 24px;
+				height: 24px;
+			}
+		}
+	}
+
+	.wp-block-search__inside-wrapper {
+		@include input-search-style();
+		align-items: center;
+	}
+
+	.wp-block-search__input {
+		@include input-search-style();
+		border: none;
+		border-bottom: var(--form--border-width) solid var(--form--border-color);
+	}
+}

spearhead/assets/sass/style.scss

@@ -19,6 +19,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 @import "posts-and-pages";
 @import "text";
 @import "header";
+@import "archive";
 @import "block-extends";
 @import "search";
 @import "meta";

spearhead/functions.php

@@ -230,7 +230,7 @@ function spearhead_the_excerpt( $excerpt ) {
 	// For cases where the post excerpt is empty
 	// (but the post might have content)
 	if ( 0 === strlen( $excerpt ) ) {
-		return $excerpt . $link;
+		return $excerpt;
 	}
 
 	return $excerpt . '<span class="excerpt-more-link">' . spearhead_more_link() . '</span>';

spearhead/inc/block-patterns.php

@@ -35,6 +35,21 @@ if ( ! function_exists( 'spearhead_register_block_patterns' ) ) :
 					'content'    => '<!-- wp:separator {"className":"is-style-wide"} --><hr class="wp-block-separator is-style-wide"/><!-- /wp:separator --><!-- wp:paragraph {"fontSize":"medium"} --><p class="has-medium-font-size">Related</p><!-- /wp:paragraph --><!-- wp:jetpack/related-posts /-->',
 				)
 			);
+
+			register_block_pattern(
+				'spearhead/archive-page',
+				array(
+					'title'      => __( 'Archive page', 'spearhead' ),
+					'categories' => array( 'spearhead' ),
+					'content'    => '<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search...","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->
+					<!-- wp:spacer {"height":30} --><div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
+					<!-- wp:paragraph --><p>' . __( 'Latest Posts', 'spearhead' ) . '</p><!-- /wp:paragraph -->
+					<!-- wp:latest-posts /-->
+					<!-- wp:spacer {"height":10} --><div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
+					<!-- wp:paragraph --><p>' . __( 'Categories', 'spearhead' ) . '</p><!-- /wp:paragraph -->
+					<!-- wp:categories /-->',
+				)
+			);
 		}
 
 		/**

spearhead/style-rtl.css

@@ -287,11 +287,87 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.archive .page-header {
+	line-height: var(--heading--line-height-h1);
+	margin-bottom: 16px;
+}
+
+.archive .page-title {
+	font-size: var(--heading--font-size-h1);
+	color: var(--entry-header--color);
+}
+
+.archive .site-main > article:first-of-type {
+	margin-top: 0;
+}
+
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+	padding-right: 0;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+	border: none;
+	padding: 0 10px 0 0;
+	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+	margin-right: 0;
+	background: transparent;
+	color: var(--entry-header--color);
+	padding: 0;
+	border: none;
+	transform: scaleX(-1);
+	min-width: 14px;
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
+	width: 14px;
+	height: 14px;
+}
+
+.wp-block-search .wp-block-search__button {
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-search .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: var(--global--color-secondary);
+	align-items: center;
+}
+
+.wp-block-search .wp-block-search__input {
+	background: transparent;
+	color: var(--global--color-secondary);
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+}
+
+.wp-block-latest-posts > li:not(.is-grid) {
+	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
+}
+
 .wp-block-latest-posts > li > a {
-	color: var(--global--color-foreground);
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-lg);
+	font-weight: 500;
 }
 
 .wp-block-latest-posts > li > a:hover {
+	border-color: transparent;
 	color: var(--global--color-primary);
 }
 
@@ -317,6 +393,27 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+ul.wp-block-categories,
+.wp-block-categories ul {
+	list-style-type: none;
+	margin-top: 0;
+	padding: 0;
+}
+
+.wp-block-categories .cat-item {
+	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
+}
+
+.wp-block-categories a {
+	color: var(--entry-header--color);
+	font-size: var(--global--font-size-lg);
+}
+
+.wp-block-categories a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
+}
+
 .screen-reader-text, .search-form input[type="submit"] {
 	/* Text meant only for screen readers. */
 	border: 0;

spearhead/style.css

@@ -287,11 +287,87 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.archive .page-header {
+	line-height: var(--heading--line-height-h1);
+	margin-bottom: 16px;
+}
+
+.archive .page-title {
+	font-size: var(--heading--font-size-h1);
+	color: var(--entry-header--color);
+}
+
+.archive .site-main > article:first-of-type {
+	margin-top: 0;
+}
+
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+	padding-left: 0;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+	border: none;
+	padding: 0 0 0 10px;
+	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+	margin-left: 0;
+	background: transparent;
+	color: var(--entry-header--color);
+	padding: 0;
+	border: none;
+	transform: scaleX(-1);
+	min-width: 14px;
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
+	width: 14px;
+	height: 14px;
+}
+
+.wp-block-search .wp-block-search__button {
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-search .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: var(--global--color-secondary);
+	align-items: center;
+}
+
+.wp-block-search .wp-block-search__input {
+	background: transparent;
+	color: var(--global--color-secondary);
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+}
+
+.wp-block-latest-posts > li:not(.is-grid) {
+	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
+}
+
 .wp-block-latest-posts > li > a {
-	color: var(--global--color-foreground);
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-lg);
+	font-weight: 500;
 }
 
 .wp-block-latest-posts > li > a:hover {
+	border-color: transparent;
 	color: var(--global--color-primary);
 }
 
@@ -317,6 +393,27 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+ul.wp-block-categories,
+.wp-block-categories ul {
+	list-style-type: none;
+	margin-top: 0;
+	padding: 0;
+}
+
+.wp-block-categories .cat-item {
+	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
+}
+
+.wp-block-categories a {
+	color: var(--entry-header--color);
+	font-size: var(--global--font-size-lg);
+}
+
+.wp-block-categories a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
+}
+
 .screen-reader-text, .search-form input[type="submit"] {
 	/* Text meant only for screen readers. */
 	border: 0;

spearhead/variables.css

@@ -75,10 +75,8 @@
 	--pullquote--letter-spacing: 0;
 	--pullquote--line-height: 1.15;
 
-	/* --latest-posts--title-font-family: var(--global--font-secondary); */
-	--latest-posts--title-font-size: var(--global--font-size-lg);
-
 	--list--font-family: var(--global--font-secondary);
+
 	/* Sticky Posts */
 	--sticky-posts--color-background: #F9F9F9;
 	--sticky-posts--entry-title-font-size: 24px;
@@ -87,8 +85,12 @@
 	/* Forms */
 	--form--border-color: var(--global--color-secondary);
 	--form--border-width: 1px;
-	--button--padding-vertical: calc(12px - var(--button--border-width));
-	--button--padding-horizontal: var(--button--padding-vertical);
+
+	/* Buttons */
+	--form--spacing-unit: 6px;
+	--button--padding-vertical: var(--form--spacing-unit);
+	--button--padding-horizontal: var(--form--spacing-unit);
+
 }
 
 @media ( prefers-color-scheme: dark ) {