Merge pull request #2575 from Automattic/add/spearhead-excerpt-posts

Spearhead posts excerpts styles

spearhead/assets/sass/_posts-and-pages.scss

@@ -1,3 +1,4 @@
+.archive .post .entry-title,
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
 	margin-bottom: 0;
@@ -49,3 +50,35 @@
 .sticky-post {
 	display: none;
 }
+
+.entry-content {
+    .more-link {
+        margin-top: 0;
+        display: inline-block;
+        color: var(--global--color-foreground);
+
+        &:hover {
+            color: var(--global--color-primary-hover);
+		}
+
+        &:after {
+            content: none;
+		}
+
+        svg {
+            height: var(--global--font-size-base);
+            width: var(--global--font-size-base);
+            margin-left: -0.25em;
+            display: inline-block;
+            vertical-align: middle;
+            transform: rotate(-90deg);
+        }
+	}
+
+	.excerpt-more-link {
+		.more-link {
+			font-size: calc(0.75 * var(--global--font-size-base));
+			margin-left: 1rem;
+		}
+	}
+}

spearhead/functions.php

@@ -96,6 +96,8 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
 				),
 			)
 		);
+		remove_filter( 'excerpt_more', 'seedlet_continue_reading_link' );
+		remove_filter( 'the_content_more_link', 'seedlet_continue_reading_link' );
 	}
 endif;
 add_action( 'after_setup_theme', 'spearhead_setup', 12 );
@@ -192,3 +194,54 @@ add_filter(
 		return $classes;
 	}
 );
+
+/**
+ * Create the continue reading link.
+ */
+function spearhead_continue_reading_link( $more ) {
+	if ( ! is_admin() ) {
+		$more_link = spearhead_more_link();
+
+		return '<p>' . $more_link . '</p>';
+	}
+}
+
+/**
+ * Create a more link for use in both "Read more" and excerpt contexts.
+ */
+function spearhead_more_link() {
+	$more_text = sprintf(
+		/* translators: %s: Name of current post. */
+		wp_kses( __( 'More', 'spearhead' ), array( 'span' => array( 'class' => array() ) ) ),
+		the_title( '<span class="screen-reader-text">"', '"</span>', false )
+	);
+
+	return '<a class="more-link" href="' . esc_url( get_permalink() ) . '">' . $more_text . ' ' . seedlet_get_icon_svg( 'dropdown' ) . '</a>';
+}
+
+/**
+ * Use this instead of the default WordPress ellipsis which is […].
+ */
+function spearhead_excerpt_more() {
+	return '…';
+}
+
+
+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 . '<span class="excerpt-more-link">' . spearhead_more_link() . '</span>';
+}
+
+// Filter the excerpt more link
+add_filter( 'excerpt_more', 'spearhead_excerpt_more' );
+
+// Filter the content more link
+add_filter( 'the_content_more_link', 'spearhead_continue_reading_link' );
+
+// Filter the excerpt
+add_filter( 'get_the_excerpt', 'spearhead_the_excerpt' );

spearhead/style-rtl.css

@@ -30,6 +30,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+.archive .post .entry-title,
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
 	margin-bottom: 0;
@@ -83,6 +84,34 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	display: none;
 }
 
+.entry-content .more-link {
+	margin-top: 0;
+	display: inline-block;
+	color: var(--global--color-foreground);
+}
+
+.entry-content .more-link:hover {
+	color: var(--global--color-primary-hover);
+}
+
+.entry-content .more-link:after {
+	content: none;
+}
+
+.entry-content .more-link svg {
+	height: var(--global--font-size-base);
+	width: var(--global--font-size-base);
+	margin-right: -0.25em;
+	display: inline-block;
+	vertical-align: middle;
+	transform: rotate(90deg);
+}
+
+.entry-content .excerpt-more-link .more-link {
+	font-size: calc(0.75 * var(--global--font-size-base));
+	margin-right: 1rem;
+}
+
 .has-link-color a, a {
 	border-bottom: 1px solid transparent;
 	transition: all 0.1s ease;

spearhead/style.css

@@ -30,6 +30,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+.archive .post .entry-title,
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
 	margin-bottom: 0;
@@ -83,6 +84,34 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	display: none;
 }
 
+.entry-content .more-link {
+	margin-top: 0;
+	display: inline-block;
+	color: var(--global--color-foreground);
+}
+
+.entry-content .more-link:hover {
+	color: var(--global--color-primary-hover);
+}
+
+.entry-content .more-link:after {
+	content: none;
+}
+
+.entry-content .more-link svg {
+	height: var(--global--font-size-base);
+	width: var(--global--font-size-base);
+	margin-left: -0.25em;
+	display: inline-block;
+	vertical-align: middle;
+	transform: rotate(-90deg);
+}
+
+.entry-content .excerpt-more-link .more-link {
+	font-size: calc(0.75 * var(--global--font-size-base));
+	margin-left: 1rem;
+}
+
 .has-link-color a, a {
 	border-bottom: 1px solid transparent;
 	transition: all 0.1s ease;

spearhead/template-parts/content/content-excerpt.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Template part for displaying post archives and search results
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package Spearhead
+ * @since 1.0.0
+ */
+
+?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<header class="entry-header default-max-width">
+		<?php
+		if ( is_sticky() && is_home() && ! is_paged() ) {
+			printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'seedlet' ) );
+		}
+		the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
+		?>
+	</header><!-- .entry-header -->
+
+	<?php seedlet_post_thumbnail(); ?>
+
+	<div class="entry-content">
+		<?php the_excerpt(); ?>
+	</div><!-- .entry-content -->
+
+</article><!-- #post-${ID} -->