diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index dd7a983f9761cc..58c0247bb01046 100644 --- a/packages/block-library/src/post-author/block.json +++ b/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": [ diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index a9d5a66eb07089..ae5dd9f3fd0aff 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/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 ( <> @@ -159,6 +180,32 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { setAttributes( { showBio: ! showBio } ) } /> + + setAttributes( { bylineRatio: ratio } ) + } + min={ 0.1 } + max={ 1 } + step={ 0.1 } + allowReset + resetFallbackValue={ initialAttributes.bylineRatio } + /> + { showBio && ( + + setAttributes( { bioRatio: ratio } ) + } + min={ 0.1 } + max={ 1 } + step={ 0.1 } + allowReset + resetFallbackValue={ initialAttributes.bioRatio } + /> + ) } @@ -206,13 +253,17 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { onChange={ ( value ) => setAttributes( { byline: value } ) } + style={ inlineStyles.byline } /> ) }

{ authorDetails?.name }

{ showBio && ( -

+

{ authorDetails?.description }

) } diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index e57cb18ae23680..fbcaa0f8d9b925 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/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; } } diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 2a96766c5b6bdd..8e8431699c24df 100644 --- a/packages/block-library/src/post-author/index.php +++ b/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( '
', $class_attribute, $style_attribute ) . ( ! empty( $attributes['showAvatar'] ) ? '
' . $avatar . '
' : '' ) . sprintf( '
', $content_class_attribute, $content_style_attribute ) . - ( ! empty( $byline ) ? '' : '' ) . + ( ! empty( $byline ) ? sprintf( '' : '' ) . '' . - ( ! empty( $attributes['showBio'] ) ? '' : '' ) . + ( ! empty( $attributes['showBio'] ) ? sprintf( '' : '' ) . '
' . '
'; } diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index 53fe560773d7a6..96fc91145163a3 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/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; } - } diff --git a/packages/e2e-tests/fixtures/blocks/core__post-author.json b/packages/e2e-tests/fixtures/blocks/core__post-author.json index b5f4fcb918a997..0481be1341c43d 100644 --- a/packages/e2e-tests/fixtures/blocks/core__post-author.json +++ b/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": [],