Update Post Author block - Support changing bio/byline sizes.

packages/block-library/src/post-author/block.json

@@ -30,6 +30,14 @@
 		},
 		"customTextColor": {
 			"type": "string"
+		},
+		"bylineRatio": {
+			"type": "number",
+			"default": 0.5
+		},
+		"bioRatio": {
+			"type": "number",
+			"default": 0.7
 		}
 	},
 	"context": [

packages/block-library/src/post-author/edit.js

@@ -16,7 +16,12 @@ import {
 	__experimentalUseColors,
 	BlockColorsStyleSelector,
 } from '@wordpress/block-editor';
-import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
+import {
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+	RangeControl,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -114,6 +119,22 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 		};
 	}, [ align ] );
 
+	const inlineStyles = useMemo( () => {
+		return {
+			bio: { fontSize: attributes.bioRatio + 'em' },
+			byline: { fontSize: attributes.bylineRatio + 'em' },
+		};
+	}, [ attributes.bioRatio, attributes.bylineRatio ] );
+
+	// Set initial ratios to use for reset values.
+	const initialAttributes = useMemo( () => {
+		const { bylineRatio, bioRatio } = attributes;
+		return {
+			bylineRatio,
+			bioRatio,
+		};
+	}, [] );
+
 	return (
 		<>
 			<InspectorControls>
@@ -159,6 +180,32 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 							setAttributes( { showBio: ! showBio } )
 						}
 					/>
+					<RangeControl
+						label={ __( 'Relative byline size' ) }
+						value={ attributes.bylineRatio }
+						onChange={ ( ratio ) =>
+							setAttributes( { bylineRatio: ratio } )
+						}
+						min={ 0.1 }
+						max={ 1 }
+						step={ 0.1 }
+						allowReset
+						resetFallbackValue={ initialAttributes.bylineRatio }
+					/>
+					{ showBio && (
+						<RangeControl
+							label={ __( 'Relative bio size' ) }
+							value={ attributes.bioRatio }
+							onChange={ ( ratio ) =>
+								setAttributes( { bioRatio: ratio } )
+							}
+							min={ 0.1 }
+							max={ 1 }
+							step={ 0.1 }
+							allowReset
+							resetFallbackValue={ initialAttributes.bioRatio }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 
@@ -206,13 +253,17 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 									onChange={ ( value ) =>
 										setAttributes( { byline: value } )
 									}
+									style={ inlineStyles.byline }
 								/>
 							) }
 							<p className="wp-block-post-author__name">
 								{ authorDetails?.name }
 							</p>
 							{ showBio && (
-								<p className="wp-block-post-author__bio">
+								<p
+									className="wp-block-post-author__bio"
+									style={ inlineStyles.bio }
+								>
 									{ authorDetails?.description }
 								</p>
 							) }

packages/block-library/src/post-author/editor.scss

@@ -4,7 +4,6 @@
 	line-height: 1.5;
 
 	.wp-block-post-author__byline {
-		font-size: 0.5em;
 		margin-top: 0;
 		position: relative;
 		font-style: normal;
@@ -31,6 +30,5 @@
 
 	.wp-block-post-author__bio {
 		margin: 0 0 $grid-unit-10;
-		font-size: 0.7em;
 	}
 }

packages/block-library/src/post-author/index.php

@@ -140,12 +140,16 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	? sprintf( ' style="%s"', esc_attr( $colors['text']['inline_styles'] ) )
 	: '';
 
+	// Add inline styles for byline and bio relative font sizes.
+	$byline_inline_styles = sprintf( 'style="font-size: %sem"', $attributes['bylineRatio'] );
+	$bio_inline_styles    = sprintf( 'style="font-size: %sem"', $attributes['bioRatio'] );
+
 	return sprintf( '<div %1$s %2$s>', $class_attribute, $style_attribute ) .
 	( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
 	sprintf( '<div %1$s %2$s>', $content_class_attribute, $content_style_attribute ) .
-	( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . $byline . '</p>' : '' ) .
+	( ! empty( $byline ) ? sprintf( '<p class="wp-block-post-author__byline" %s>', $byline_inline_styles ) . $byline . '</p>' : '' ) .
 	'<p class="wp-block-post-author__name">' . get_the_author_meta( 'display_name', $author_id ) . '</p>' .
-	( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
+	( ! empty( $attributes['showBio'] ) ? sprintf( '<p class="wp-block-post-author__bio" %s>', $bio_inline_styles ) . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
 	'</div>' .
 	'</div>';
 }

packages/block-library/src/post-author/style.scss

@@ -7,7 +7,6 @@
 		width: 100%;
 		margin-top: 0;
 		margin-bottom: 0;
-		font-size: 0.5em;
 	}
 
 	&__avatar {
@@ -16,7 +15,6 @@
 
 	&__bio {
 		margin-bottom: $grid-unit-10;
-		font-size: 0.7em;
 	}
 
 	&__content {
@@ -28,5 +26,4 @@
 		font-weight: bold;
 		margin: 0;
 	}
-
 }

packages/e2e-tests/fixtures/blocks/core__post-author.json

@@ -5,6 +5,8 @@
         "isValid": true,
         "attributes": {
 			"avatarSize": 48,
+			"bioRatio": 0.7,
+			"bylineRatio": 0.5,
 			"showAvatar": true
 		},
         "innerBlocks": [],