Merge pull request #2685 from Automattic/update/seedlet-hide-author-bio

Seedlet: Make it possible to hide the author bio

seedlet/assets/css/print.css

@@ -41,7 +41,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	.has-regular-font-size,
 	.has-large-font-size,
 	h2.author-title,
-	p.author-bio,
+	p.entry-author,
 	.comments-title, h3 {
 		font-size: 14pt;
 		margin-top: 25px;
@@ -101,7 +101,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	.site-branding-container:before,
 	.entry .entry-title:before,
 	.entry-footer,
-	.author-description:before,
+	.author-bio:before,
 	.post-navigation,
 	.widget-area,
 	.comment-form-flex,

seedlet/assets/css/style-editor.css

@@ -1756,24 +1756,40 @@ pre.wp-block-verse {
  * Author
  */
 /* Author description */
-.author-bio {
+.entry-author {
 	font-size: var(--global--font-size-xs);
 	max-width: var(--responsive--aligndefault-width);
 }
 
-.site-main > article > .author-bio {
+.entry-author .author-avatar {
+	display: none;
+}
+
+.site-main > article > .entry-author {
 	margin-top: calc(2 * var(--global--spacing-vertical));
 }
 
-.author-bio .author-title {
+.entry-author .author-title {
+	font-family: var(--global--font-ui);
+	font-size: var(--global--font-size-xs);
+}
+
+.entry-author .author-title .author-name {
+	display: block;
+	margin-top: 4px;
 	font-family: var(--entry-author-bio--font-family);
 	font-size: var(--entry-author-bio--font-size);
 }
 
-.author-bio .author-description {
+.entry-author .author-bio {
 	font-size: var(--global--font-size-md);
 }
 
+.entry-author .author-link::before {
+	content: '';
+	display: block;
+}
+
 /**
  * Jetpack editor styles
  */

seedlet/assets/sass/components/entry/_author-bio.scss

@@ -4,21 +4,37 @@
 
 /* Author description */
 
-.author-bio {
+.entry-author {
 
 	font-size: var(--global--font-size-xs);
 	max-width: var(--responsive--aligndefault-width);
 
+	.author-avatar {
+		display: none;
+	}
+
 	.site-main > article > & {
 		margin-top: calc(2 * var(--global--spacing-vertical));
 	}
 
 	.author-title {
-		font-family: var(--entry-author-bio--font-family);
-		font-size: var(--entry-author-bio--font-size);
+		font-family: var(--global--font-ui);
+		font-size: var(--global--font-size-xs);
+
+		.author-name {
+			display: block;
+			margin-top: 4px;
+			font-family: var(--entry-author-bio--font-family);
+			font-size: var(--entry-author-bio--font-size);
+		}
 	}
 
-	.author-description {
+	.author-bio {
 		font-size: var(--global--font-size-md);
 	}
+
+	.author-link::before {
+		content: '';
+		display: block;
+	}
 }

seedlet/assets/sass/print.scss

@@ -51,7 +51,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   .has-regular-font-size,
   .has-large-font-size,
   h2.author-title,
-  p.author-bio,
+  p.entry-author,
   .comments-title, h3 {
     font-size: 14pt;
     margin-top: 25px;
@@ -126,7 +126,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   .site-branding-container:before,
   .entry .entry-title:before,
   .entry-footer,
-  .author-description:before,
+  .author-bio:before,
   .post-navigation,
   .widget-area,
   .comment-form-flex,

seedlet/assets/sass/structure/_vertical-margins.scss

@@ -84,7 +84,7 @@
 .post-thumbnail,
 .entry-content,
 .entry-footer,
-.author-bio,
+.entry-author,
 .widget-area {
 	margin-top: var(--global--spacing-vertical);
 	margin-right: auto;
@@ -131,7 +131,7 @@
 .post-thumbnail > *,
 .page-content > *,
 .comment-content > *,
-.author-bio > *,
+.entry-author > *,
 .widget > * {
 	margin-top: var(--global--spacing-unit);
 	margin-bottom: var(--global--spacing-unit);

seedlet/functions.php

@@ -422,6 +422,21 @@ function seedlet_skip_link_focus_fix() {
 }
 add_action( 'wp_print_footer_scripts', 'seedlet_skip_link_focus_fix' );
 
+if ( ! function_exists( 'seedlet_author_bio' ) ) {
+	/**
+	 * Implements the Jetpack Author bio
+	 */
+	function seedlet_author_bio() {
+		if ( ! function_exists( 'jetpack_author_bio' ) ) {
+			if ( ! is_singular( 'attachment' ) ) {
+				get_template_part( 'template-parts/post/author-bio' );
+			}
+		} else {
+			jetpack_author_bio();
+		}
+	}
+}
+
 /**
  * SVG Icons class.
  */
@@ -470,3 +485,8 @@ require get_template_directory() . '/inc/block-styles.php';
 if ( class_exists( 'WooCommerce' ) ) {
 	require get_template_directory() . '/inc/woocommerce.php';
 }
+
+/**
+ * Load Jetpack compatibility file.
+ */
+require get_template_directory() . '/inc/jetpack.php';

seedlet/inc/jetpack.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Jetpack Compatibility File
+ *
+ * @link https://jetpack.com/
+ *
+ * @package Seedlet
+ */
+
+/**
+ * Jetpack setup function.
+ *
+ * See: https://jetpack.com/support/infinite-scroll/
+ * See: https://jetpack.com/support/responsive-videos/
+ */
+function seedlet_jetpack_setup() {
+	// Add theme support for Responsive Videos.
+	add_theme_support( 'jetpack-responsive-videos' );
+
+	// Add theme support for Content Options.
+	add_theme_support( 'jetpack-content-options', array(
+		'author-bio' => true,
+	) );
+}
+add_action( 'after_setup_theme', 'seedlet_jetpack_setup' );

seedlet/style-rtl.css

@@ -441,7 +441,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail,
 .entry-content,
 .entry-footer,
-.author-bio,
+.entry-author,
 .widget-area {
 	margin-top: var(--global--spacing-vertical);
 	margin-left: auto;
@@ -510,7 +510,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail > *,
 .page-content > *,
 .comment-content > *,
-.author-bio > *,
+.entry-author > *,
 .widget > * {
 	margin-top: var(--global--spacing-unit);
 	margin-bottom: var(--global--spacing-unit);
@@ -521,7 +521,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail > *:first-child,
 .page-content > *:first-child,
 .comment-content > *:first-child,
-.author-bio > *:first-child,
+.entry-author > *:first-child,
 .widget > *:first-child {
 	margin-top: 0;
 }
@@ -531,7 +531,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail > *:last-child,
 .page-content > *:last-child,
 .comment-content > *:last-child,
-.author-bio > *:last-child,
+.entry-author > *:last-child,
 .widget > *:last-child {
 	margin-bottom: 0;
 }
@@ -3290,24 +3290,40 @@ nav a {
  * Author
  */
 /* Author description */
-.author-bio {
+.entry-author {
 	font-size: var(--global--font-size-xs);
 	max-width: var(--responsive--aligndefault-width);
 }
 
-.site-main > article > .author-bio {
+.entry-author .author-avatar {
+	display: none;
+}
+
+.site-main > article > .entry-author {
 	margin-top: calc(2 * var(--global--spacing-vertical));
 }
 
-.author-bio .author-title {
+.entry-author .author-title {
+	font-family: var(--global--font-ui);
+	font-size: var(--global--font-size-xs);
+}
+
+.entry-author .author-title .author-name {
+	display: block;
+	margin-top: 4px;
 	font-family: var(--entry-author-bio--font-family);
 	font-size: var(--entry-author-bio--font-size);
 }
 
-.author-bio .author-description {
+.entry-author .author-bio {
 	font-size: var(--global--font-size-md);
 }
 
+.entry-author .author-link::before {
+	content: '';
+	display: block;
+}
+
 /* Next/Previous navigation */
 .navigation {
 	color: var(--global--color-foreground);

seedlet/style.css

@@ -441,7 +441,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail,
 .entry-content,
 .entry-footer,
-.author-bio,
+.entry-author,
 .widget-area {
 	margin-top: var(--global--spacing-vertical);
 	margin-right: auto;
@@ -510,7 +510,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail > *,
 .page-content > *,
 .comment-content > *,
-.author-bio > *,
+.entry-author > *,
 .widget > * {
 	margin-top: var(--global--spacing-unit);
 	margin-bottom: var(--global--spacing-unit);
@@ -521,7 +521,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail > *:first-child,
 .page-content > *:first-child,
 .comment-content > *:first-child,
-.author-bio > *:first-child,
+.entry-author > *:first-child,
 .widget > *:first-child {
 	margin-top: 0;
 }
@@ -531,7 +531,7 @@ Included in theme screenshot and in block patterns.
 .post-thumbnail > *:last-child,
 .page-content > *:last-child,
 .comment-content > *:last-child,
-.author-bio > *:last-child,
+.entry-author > *:last-child,
 .widget > *:last-child {
 	margin-bottom: 0;
 }
@@ -3311,24 +3311,40 @@ nav a {
  * Author
  */
 /* Author description */
-.author-bio {
+.entry-author {
 	font-size: var(--global--font-size-xs);
 	max-width: var(--responsive--aligndefault-width);
 }
 
-.site-main > article > .author-bio {
+.entry-author .author-avatar {
+	display: none;
+}
+
+.site-main > article > .entry-author {
 	margin-top: calc(2 * var(--global--spacing-vertical));
 }
 
-.author-bio .author-title {
+.entry-author .author-title {
+	font-family: var(--global--font-ui);
+	font-size: var(--global--font-size-xs);
+}
+
+.entry-author .author-title .author-name {
+	display: block;
+	margin-top: 4px;
 	font-family: var(--entry-author-bio--font-family);
 	font-size: var(--entry-author-bio--font-size);
 }
 
-.author-bio .author-description {
+.entry-author .author-bio {
 	font-size: var(--global--font-size-md);
 }
 
+.entry-author .author-link::before {
+	content: '';
+	display: block;
+}
+
 /* Next/Previous navigation */
 .navigation {
 	color: var(--global--color-foreground);

seedlet/template-parts/content/content-single.php

@@ -53,8 +53,6 @@
 		<?php seedlet_entry_meta_footer(); ?>
 	</footer><!-- .entry-footer -->
 
-	<?php if ( ! is_singular( 'attachment' ) ) : ?>
-		<?php get_template_part( 'template-parts/post/author-bio' ); ?>
-	<?php endif; ?>
+	<?php seedlet_author_bio(); ?>
 
 </article><!-- #post-${ID} -->

seedlet/template-parts/post/author-bio.php

@@ -3,29 +3,30 @@
  * The template for displaying Author info
  *
  * @package Seedlet
- * @since 1.0.0
  */
 
 if ( (bool) get_the_author_meta( 'description' ) ) : ?>
-<div class="author-bio">
-	<?php
-	_e( 'Published by', 'seedlet' );
-	?>
-	<h2 class="author-title">
-		<span class="author-heading">
-			<?php
-			printf(
-				/* post author */
-				esc_html( get_the_author() )
-			);
-			?>
-		</span>
-	</h2>
-	<p class="author-description">
-		<?php the_author_meta( 'description' ); ?></br>
+<div class="entry-author">
+
+	<div class="author-heading">
+		<h2 class="author-title">
+			<?php esc_html_e( 'Published by', 'seedlet' ); ?>
+			<span class="author-name">
+				<?php
+				printf(
+					/* post author */
+					esc_html( get_the_author() )
+				);
+				?>
+			</span><!-- .author-name -->
+		</h2>
+	</div><!-- .author-heading -->
+
+	<p class="author-bio">
+		<?php the_author_meta( 'description' ); ?>
 		<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
-			<?php _e( 'View more posts', 'seedlet' ); ?>
+			<?php printf( esc_html__( 'View all posts by %s', 'seedlet' ), get_the_author() ); ?>
 		</a>
-	</p><!-- .author-description -->
-</div><!-- .author-bio -->
+	</p><!-- .author-bio -->
+</div><!-- .entry-author -->
 <?php endif; ?>

spearhead/assets/sass/_author-bio.scss

@@ -0,0 +1,22 @@
+.author-link {
+	font-size: var(--global--font-size-xs);
+	position: relative;
+
+	&:after {
+		background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23DB0042'%3E%3C/path%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: 14px 14px;
+		content: '';
+		position: absolute;
+		bottom: 0;
+		right: -14px;
+		width: 14px;
+		height: 14px;
+		transform: rotate(-90deg);
+
+		@media ( prefers-color-scheme: dark ) {
+			background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
+		}
+	}
+}

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

@@ -38,7 +38,7 @@
 	article > * {
 		margin-top: calc( 0.48 * var(--global--spacing-vertical) );
 		margin-bottom: calc( 0.48 * var(--global--spacing-vertical) );
- 
+
 		/* This overrides Seedlet's style for this breakpoint */
 	 	@include media(mobile) {
 			margin-top: calc( 0.48 * var(--global--spacing-vertical) );
@@ -117,5 +117,5 @@
 }
 
 .single {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground);
 }

spearhead/assets/sass/style.scss

@@ -14,6 +14,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 */
 
 @import "../../../seedlet/assets/sass/abstracts/mixins";
+@import "author-bio";
 @import "breakpoints";
 @import "responsive";
 @import "posts-and-pages";

spearhead/style-rtl.css

@@ -15,6 +15,31 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 /**
  * Required Variables
  */
+.author-link {
+	font-size: var(--global--font-size-xs);
+	position: relative;
+}
+
+.author-link:after {
+	background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23DB0042'%3E%3C/path%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: 14px 14px;
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: -14px;
+	width: 14px;
+	height: 14px;
+	transform: rotate(90deg);
+}
+
+@media (prefers-color-scheme: dark) {
+	.author-link:after {
+		background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
+	}
+}
+
 /**
  * Required Variables
  */
@@ -145,7 +170,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .single {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground);
 }
 
 .has-link-color a, a {

spearhead/style.css

@@ -15,6 +15,31 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 /**
  * Required Variables
  */
+.author-link {
+	font-size: var(--global--font-size-xs);
+	position: relative;
+}
+
+.author-link:after {
+	background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23DB0042'%3E%3C/path%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: 14px 14px;
+	content: '';
+	position: absolute;
+	bottom: 0;
+	right: -14px;
+	width: 14px;
+	height: 14px;
+	transform: rotate(-90deg);
+}
+
+@media (prefers-color-scheme: dark) {
+	.author-link:after {
+		background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
+	}
+}
+
 /**
  * Required Variables
  */
@@ -145,7 +170,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .single {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground);
 }
 
 .has-link-color a, a {