Spearhead: Add related posts block styles (#2559)

* Add related posts block styles.

* Add related posts as a block pattern.

* Fix phpcs errors.

spearhead/assets/sass/_block-extends.scss

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

spearhead/assets/sass/_text.scss

@@ -1,5 +1,5 @@
 .has-link-color a, a {
-    border-bottom: none;
+    border-bottom: 1px solid transparent;
     transition: all 0.1s ease;
 
     &:hover {

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

@@ -0,0 +1,23 @@
+.wp-block-jetpack-related-posts {
+	.jp-related-posts-i2__post {
+		margin: 0 var(--global--spacing-horizontal) 0 0;
+	}
+
+	.jp-related-posts-i2__row {
+		margin: auto;
+	}
+
+	.jp-related-posts-i2__post-link {
+		font-weight: 500;
+		font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+		line-height: var(--global--line-height-body);
+		width: fit-content;
+	}
+
+	.jp-related-posts-i2__post-date,
+	.jp-related-posts-i2__post-context {
+		font-family: var(--global--font-primary);
+		font-size: var(--global--font-size-xs);
+		text-transform: uppercase;
+	}
+}

spearhead/functions.php

@@ -24,11 +24,13 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
 		add_theme_support( 'dark-editor-style' );
 
 		// Enqueue editor styles.
-		add_editor_style( array(
-			spearhead_fonts_url(),
-			'variables.css',
-			'style.css',
-		) );
+		add_editor_style(
+			array(
+				spearhead_fonts_url(),
+				'variables.css',
+				'style.css',
+			)
+		);
 
 		// Add child theme editor font sizes to match Sass-map variables in `_config-child-theme-deep.scss`.
 		add_theme_support(
@@ -93,7 +95,7 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
 					'color' => '#FFFFFF',
 				),
 			)
-        );
+		);
 	}
 endif;
 add_action( 'after_setup_theme', 'spearhead_setup', 12 );
@@ -111,13 +113,13 @@ add_filter( 'seedlet_content_width', 'spearhead_content_width' );
  */
 function spearhead_scripts() {
 	// enqueue Google fonts, if necessary
-    wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
+	wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
 
 	// Child theme variables
 	wp_enqueue_style( 'spearhead-variables-style', get_stylesheet_directory_uri() . '/variables.css', array(), wp_get_theme()->get( 'Version' ) );
 
 	// enqueue child styles
-	wp_enqueue_style('spearhead-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ));
+	wp_enqueue_style( 'spearhead-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
 
 	// enqueue child RTL styles
 	wp_style_add_data( 'spearhead-style', 'rtl', 'replace' );
@@ -129,7 +131,8 @@ add_action( 'wp_enqueue_scripts', 'spearhead_scripts', 11 );
  */
 function spearhead_block_extends() {
 	// Block Tweaks
-	wp_enqueue_script( 'spearhead-block-extends',
+	wp_enqueue_script(
+		'spearhead-block-extends',
 		get_stylesheet_directory_uri() . '/assets/js/extend-blocks.js',
 		array( 'wp-blocks', 'wp-edit-post' ) // wp-edit-post is added to avoid a race condition when trying to unregister a style variation
 	);
@@ -142,17 +145,17 @@ add_action( 'enqueue_block_assets', 'spearhead_block_extends' );
  * @return string
  */
 function spearhead_fonts_url() : string {
-    $fonts_url = '';
+	$fonts_url = '';
 
 	$font_families   = array();
 	$font_families[] = 'family=Libre+Franklin:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700';
 	$font_families[] = 'family=IBM+Plex+Mono:wght@400;700';
 	$font_families[] = 'display=swap';
 
-    // Make a single request for the theme fonts.
-    $fonts_url = 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families );
+	// Make a single request for the theme fonts.
+	$fonts_url = 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families );
 
-    return $fonts_url;
+	return $fonts_url;
 }
 
 /**
@@ -166,3 +169,8 @@ function seedlet_entry_meta_header() : void {
 	}
 }
 // require get_stylesheet_directory() . '/inc/custom-header.php';
+
+/**
+ * Block Patterns.
+ */
+require get_stylesheet_directory() . '/inc/block-patterns.php';

spearhead/inc/block-patterns.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Spearhead Theme: Block Patterns
+ *
+ * @package Spearhead
+ * @since   1.0.0
+ */
+
+/**
+ * Register Block Pattern Category.
+ */
+if ( function_exists( 'register_block_pattern_category' ) ) {
+
+	unregister_block_pattern_category( 'seedlet' );
+
+	register_block_pattern_category(
+		'spearhead',
+		array( 'label' => __( 'Spearhead', 'spearhead' ) )
+	);
+}
+
+/**
+ * Register Block Patterns.
+ */
+if ( function_exists( 'register_block_pattern' ) ) {
+
+	unregister_block_pattern( 'seedlet/group-split-background' );
+	unregister_block_pattern( 'seedlet/group-image-overlap' );
+	unregister_block_pattern( 'seedlet/latest-posts-alternating-grid' );
+
+	register_block_pattern(
+		'spearhead/related-posts',
+		array(
+			'title'      => __( 'Related Posts', 'spearhead' ),
+			'categories' => array( 'spearhead' ),
+			'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 /-->',
+		)
+	);
+}

spearhead/style-rtl.css

@@ -59,7 +59,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-link-color a, a {
-	border-bottom: none;
+	border-bottom: 1px solid transparent;
 	transition: all 0.1s ease;
 }
 
@@ -122,4 +122,26 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .wp-block-latest-posts > li > a:hover {
 	color: var(--global--color-primary);
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post {
+	margin: 0 0 0 var(--global--spacing-horizontal);
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__row {
+	margin: auto;
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
+	font-weight: 500;
+	font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+	line-height: var(--global--line-height-body);
+	width: fit-content;
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-xs);
+	text-transform: uppercase;
 }

spearhead/style.css

@@ -59,7 +59,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-link-color a, a {
-	border-bottom: none;
+	border-bottom: 1px solid transparent;
 	transition: all 0.1s ease;
 }
 
@@ -124,4 +124,26 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post {
+	margin: 0 var(--global--spacing-horizontal) 0 0;
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__row {
+	margin: auto;
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
+	font-weight: 500;
+	font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+	line-height: var(--global--line-height-body);
+	width: fit-content;
+}
+
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-xs);
+	text-transform: uppercase;
+}
+
 /*# sourceMappingURL=style.css.map */