From 2c6947356fa309a5ae82df799c364b3c8fcef897 Mon Sep 17 00:00:00 2001
From: andrei draganescu <me@andreidraganescu.info>
Date: Thu, 30 Apr 2020 14:13:13 +0300
Subject: [PATCH] Block Library: enhance the author block (#19894)

* revert bad merge

* removed author storage

we also set post author on change from the block itself.

* linting

* use sizes to label avatar size

this aloows us to use the sizes as the API serves them

* adds some review suggestions

props @ockham

* removes null coalescing operator
---
 packages/block-editor/README.md               |   4 +
 .../components/color-style-selector/index.js  |  86 ++++++
 packages/block-editor/src/components/index.js |   1 +
 packages/block-library/src/editor.scss        |   1 +
 .../block-library/src/post-author/block.json  |  31 +-
 .../block-library/src/post-author/edit.js     | 264 ++++++++++++++++--
 .../block-library/src/post-author/editor.scss |  34 +++
 .../block-library/src/post-author/icon.js     |  10 +
 .../block-library/src/post-author/index.js    |   2 +
 .../block-library/src/post-author/index.php   | 126 ++++++++-
 .../block-library/src/post-author/style.scss  |  31 ++
 packages/block-library/src/style.scss         |   1 +
 12 files changed, 565 insertions(+), 26 deletions(-)
 create mode 100644 packages/block-editor/src/components/color-style-selector/index.js
 create mode 100644 packages/block-library/src/post-author/editor.scss
 create mode 100644 packages/block-library/src/post-author/icon.js
 create mode 100644 packages/block-library/src/post-author/style.scss

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 4c9673524d397..48f4fad4bdff6 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -93,6 +93,10 @@ _Returns_
 
 -   `WPElement`: Block Breadcrumb.
 
+<a name="BlockColorsStyleSelector" href="#BlockColorsStyleSelector">#</a> **BlockColorsStyleSelector**
+
+Undocumented declaration.
+
 <a name="BlockContextProvider" href="#BlockContextProvider">#</a> **BlockContextProvider**
 
 Component which merges passed value with current consumed block context.
diff --git a/packages/block-editor/src/components/color-style-selector/index.js b/packages/block-editor/src/components/color-style-selector/index.js
new file mode 100644
index 0000000000000..688f614b03058
--- /dev/null
+++ b/packages/block-editor/src/components/color-style-selector/index.js
@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Dropdown,
+	ToolbarGroup,
+	SVG,
+	Path,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { DOWN } from '@wordpress/keycodes';
+
+const ColorSelectorSVGIcon = () => (
+	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
+		<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
+	</SVG>
+);
+
+/**
+ * Color Selector Icon component.
+ *
+ * @param {Object} colorControlProps colorControl properties.
+ * @return {*} React Icon component.
+ */
+const ColorSelectorIcon = ( { style, className } ) => {
+	return (
+		<div className="block-library-colors-selector__icon-container">
+			<div
+				className={ `${ className } block-library-colors-selector__state-selection` }
+				style={ style }
+			>
+				<ColorSelectorSVGIcon />
+			</div>
+		</div>
+	);
+};
+
+/**
+ * Renders the Colors Selector Toolbar with the icon button.
+ *
+ * @param {Object} colorControlProps colorControl properties.
+ * @return {*} React toggle button component.
+ */
+const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
+	onToggle,
+	isOpen,
+} ) => {
+	const openOnArrowDown = ( event ) => {
+		if ( ! isOpen && event.keyCode === DOWN ) {
+			event.preventDefault();
+			event.stopPropagation();
+			onToggle();
+		}
+	};
+
+	return (
+		<ToolbarGroup>
+			<Button
+				className="components-toolbar__control block-library-colors-selector__toggle"
+				label={ __( 'Open Colors Selector' ) }
+				onClick={ onToggle }
+				onKeyDown={ openOnArrowDown }
+				icon={
+					<BackgroundColor>
+						<TextColor>
+							<ColorSelectorIcon />
+						</TextColor>
+					</BackgroundColor>
+				}
+			/>
+		</ToolbarGroup>
+	);
+};
+
+const BlockColorsStyleSelector = ( { children, ...other } ) => (
+	<Dropdown
+		position="bottom right"
+		className="block-library-colors-selector"
+		contentClassName="block-library-colors-selector__popover"
+		renderToggle={ renderToggleComponent( other ) }
+		renderContent={ () => children }
+	/>
+);
+
+export default BlockColorsStyleSelector;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index ad92c523174d1..2e9230b150f70 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -11,6 +11,7 @@ export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { BlockContextProvider } from './block-context';
 export { default as BlockControls } from './block-controls';
+export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 6dc247b6d744a..8bb07fd14d885 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -29,6 +29,7 @@
 @import "./nextpage/editor.scss";
 @import "./paragraph/editor.scss";
 @import "./post-excerpt/editor.scss";
+@import "./post-author/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index a3da72b6d8651..f197674f8beb1 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -1,4 +1,33 @@
 {
 	"name": "core/post-author",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"align": {
+			"type": "string"
+		},
+		"avatarSize": {
+			"type": "number"
+		},
+		"showAvatar": {
+			"type": "boolean"
+		},
+		"showBio": {
+			"type": "boolean"
+		},
+		"byline": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		}
+	}
 }
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 05ab61f3ef92a..84394b41531b0 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -1,31 +1,253 @@
+/**
+ * External dependencies
+ */
+import { forEach } from 'lodash';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
+import { useRef, useState } from '@wordpress/element';
+import { useEntityProp } from '@wordpress/core-data';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	FontSizePicker,
+	InspectorControls,
+	RichText,
+	__experimentalUseColors,
+	BlockColorsStyleSelector,
+	withFontSizes,
+} from '@wordpress/block-editor';
+import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
-
-function PostAuthorDisplay() {
-	const [ authorId ] = useEntityProp( 'postType', 'post', 'author' );
-	const author = useSelect(
-		( select ) =>
-			select( 'core' ).getEntityRecord( 'root', 'user', authorId ),
-		[ authorId ]
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_AVATAR_SIZE = 24;
+
+async function getAuthorDetails( authorId, setAuthorDetails ) {
+	const authorDetails = await apiFetch( {
+		path: '/wp/v2/users/' + authorId + '?context=edit',
+	} );
+	setAuthorDetails( authorDetails );
+}
+
+function PostAuthorDisplay( {
+	postAuthor,
+	setPostAuthor,
+	authorDetails,
+	setAuthorDetails,
+	props,
+} ) {
+	const ref = useRef();
+
+	const { authors } = useSelect( ( select ) => ( {
+		authors: select( 'core' ).getAuthors(),
+	} ) );
+
+	const { isSelected, fontSize, setFontSize } = props;
+	const {
+		TextColor,
+		BackgroundColor,
+		InspectorControlsColorPanel,
+		ColorPanel,
+	} = __experimentalUseColors(
+		[
+			{ name: 'textColor', property: 'color' },
+			{ name: 'backgroundColor', className: 'background-color' },
+		],
+		{
+			contrastCheckers: [
+				{
+					backgroundColor: true,
+					textColor: true,
+					fontSize: fontSize.size,
+				},
+			],
+			colorDetector: { targetRef: ref },
+			colorPanelProps: {
+				initialOpen: true,
+			},
+		},
+		[ fontSize.size ]
+	);
+
+	const { align, showAvatar, showBio, byline } = props.attributes;
+
+	const avatarSizes = [];
+	if ( authorDetails ) {
+		forEach( authorDetails.avatar_urls, ( url, size ) => {
+			avatarSizes.push( {
+				value: size,
+				label: `${ size } x ${ size }`,
+			} );
+		} );
+	}
+
+	let avatarSize = DEFAULT_AVATAR_SIZE;
+	if ( !! props.attributes.avatarSize ) {
+		avatarSize = props.attributes.avatarSize;
+	}
+
+	const blockClassNames = classnames( 'wp-block-post-author', {
+		[ fontSize.class ]: fontSize.class,
+	} );
+	const blockInlineStyles = {
+		fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
+	};
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Author Settings' ) }>
+					<SelectControl
+						label={ __( 'Author' ) }
+						value={ postAuthor }
+						options={ authors.map( ( { id, name } ) => {
+							return {
+								value: id,
+								label: name,
+							};
+						} ) }
+						onChange={ ( newAuthorId ) => {
+							setPostAuthor( newAuthorId );
+							getAuthorDetails( newAuthorId, setAuthorDetails );
+						} }
+					/>
+					<ToggleControl
+						label={ __( 'Show avatar' ) }
+						checked={ showAvatar }
+						onChange={ () =>
+							props.setAttributes( { showAvatar: ! showAvatar } )
+						}
+					/>
+					{ showAvatar && (
+						<SelectControl
+							label={ __( 'Avatar size' ) }
+							value={ props.attributes.avatarSize }
+							options={ avatarSizes }
+							onChange={ ( size ) => {
+								props.setAttributes( {
+									avatarSize: Number( size ),
+								} );
+							} }
+						/>
+					) }
+					<ToggleControl
+						label={ __( 'Show bio' ) }
+						checked={ showBio }
+						onChange={ () =>
+							props.setAttributes( { showBio: ! showBio } )
+						}
+					/>
+				</PanelBody>
+				<PanelBody title={ __( 'Text settings' ) }>
+					<FontSizePicker
+						value={ fontSize.size }
+						onChange={ setFontSize }
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			{ InspectorControlsColorPanel }
+
+			<BlockControls>
+				<AlignmentToolbar
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						props.setAttributes( { align: nextAlign } );
+					} }
+				/>
+				<BlockColorsStyleSelector
+					TextColor={ TextColor }
+					BackgroundColor={ BackgroundColor }
+				>
+					{ ColorPanel }
+				</BlockColorsStyleSelector>
+			</BlockControls>
+
+			<TextColor>
+				<BackgroundColor>
+					<div
+						ref={ ref }
+						className={ classnames( blockClassNames, {
+							[ `has-text-align-${ align }` ]: align,
+						} ) }
+						style={ blockInlineStyles }
+					>
+						{ showAvatar && authorDetails && (
+							<div className="wp-block-post-author__avatar">
+								<img
+									width={ avatarSize }
+									src={
+										authorDetails.avatar_urls[ avatarSize ]
+									}
+									alt={ authorDetails.name }
+								/>
+							</div>
+						) }
+						<div className="wp-block-post-author__content">
+							{ ( ! RichText.isEmpty( byline ) ||
+								isSelected ) && (
+								<RichText
+									className="wp-block-post-author__byline"
+									multiline={ false }
+									placeholder={ __( 'Write byline …' ) }
+									withoutInteractiveFormatting
+									allowedFormats={ [
+										'core/bold',
+										'core/italic',
+										'core/strikethrough',
+									] }
+									value={ byline }
+									onChange={ ( value ) =>
+										props.setAttributes( { byline: value } )
+									}
+								/>
+							) }
+							<p className="wp-block-post-author__name">
+								{ authorDetails.name }
+							</p>
+							{ showBio && (
+								<p className={ 'wp-block-post-author__bio' }>
+									{ authorDetails.description }
+								</p>
+							) }
+						</div>
+					</div>
+				</BackgroundColor>
+			</TextColor>
+		</>
 	);
-	return author ? (
-		<address>
-			{ sprintf(
-				/* translators: %s: author name. */
-				__( 'By %s' ),
-				author.name
-			) }
-		</address>
-	) : null;
 }
 
-export default function PostAuthorEdit() {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
+function PostAuthorEdit( props ) {
+	const [ postAuthor, setPostAuthor ] = useEntityProp(
+		'postType',
+		'post',
+		'author'
+	);
+
+	const [ authorDetails, setAuthorDetails ] = useState( false );
+
+	if ( ! postAuthor ) {
 		return 'Post Author Placeholder';
 	}
-	return <PostAuthorDisplay />;
+
+	if ( ! authorDetails ) {
+		getAuthorDetails( postAuthor, setAuthorDetails );
+	}
+
+	return (
+		<PostAuthorDisplay
+			postAuthor={ postAuthor }
+			setPostAuthor={ setPostAuthor }
+			authorDetails={ authorDetails }
+			setAuthorDetails={ setAuthorDetails }
+			props={ props }
+		/>
+	);
 }
+
+export default withFontSizes( 'fontSize' )( PostAuthorEdit );
diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss
new file mode 100644
index 0000000000000..65c919a25155c
--- /dev/null
+++ b/packages/block-library/src/post-author/editor.scss
@@ -0,0 +1,34 @@
+.block-editor__container .wp-block-post-author {
+	display: flex;
+	flex-wrap: wrap;
+	line-height: 1.5;
+}
+
+.wp-block-post-author__byline {
+	color: $dark-gray-300;
+	font-size: $default-font-size;
+	margin-top: 0;
+	position: relative;
+	font-style: normal;
+}
+
+.wp-block-post-author__content {
+	flex-grow: 1;
+	flex-basis: 0;
+}
+
+.block-editor__container .wp-block-post-author__avatar img {
+	margin: 0;
+}
+
+.block-editor__container .wp-block-post-author__name {
+	margin: 0;
+	margin-top: -$grid-unit-20/2;
+	margin-bottom: -$grid-unit-20/2;
+	font-weight: bold;
+}
+
+.block-editor__container .wp-block-post-author__bio {
+	margin: 0;
+	margin-top: $grid-unit-20;
+}
diff --git a/packages/block-library/src/post-author/icon.js b/packages/block-library/src/post-author/icon.js
new file mode 100644
index 0000000000000..87fa4ecf2a52f
--- /dev/null
+++ b/packages/block-library/src/post-author/icon.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M5.8 11c0-.7.6-1.2 1.2-1.2h4c.7 0 1.2.6 1.2 1.2v1h1.5v-1c0-1.5-1.2-2.8-2.8-2.8H7c-1.5 0-2.8 1.2-2.8 2.8v1h1.5v-1zM4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zM9 7c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/post-author/index.js b/packages/block-library/src/post-author/index.js
index 89496e0351600..37ab0d3ee7fca 100644
--- a/packages/block-library/src/post-author/index.js
+++ b/packages/block-library/src/post-author/index.js
@@ -8,12 +8,14 @@ import { __ } from '@wordpress/i18n';
  */
 import metadata from './block.json';
 import edit from './edit';
+import icon from './icon';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	title: __( 'Post Author' ),
+	icon,
 	supports: {
 		html: false,
 	},
diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index 57f1895f6cb0c..a10357ad22fb2 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -5,18 +5,136 @@
  * @package WordPress
  */
 
+/**
+ * Build an array with CSS classes and inline styles defining the colors
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * @param  array $attributes Navigation block attributes.
+ * @return array Colors CSS classes and inline styles.
+ */
+function post_author_build_css_colors( $attributes ) {
+	$colors = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Text color.
+	$has_named_text_color  = array_key_exists( 'textColor', $attributes );
+	$has_custom_text_color = array_key_exists( 'customTextColor', $attributes );
+
+	// If has text color.
+	if ( $has_custom_text_color || $has_named_text_color ) {
+		// Add has-text-color class.
+		$colors['css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_text_color ) {
+		// Add the color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] );
+	} elseif ( $has_custom_text_color ) {
+		// Add the custom color inline style.
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] );
+	}
+
+	// Background color.
+	$has_named_background_color  = array_key_exists( 'backgroundColor', $attributes );
+	$has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes );
+
+	// If has background color.
+	if ( $has_custom_background_color || $has_named_background_color ) {
+		// Add has-background-color class.
+		$colors['css_classes'][] = 'has-background-color';
+	}
+
+	if ( $has_named_background_color ) {
+		// Add the background-color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
+	} elseif ( $has_custom_background_color ) {
+		// Add the custom background-color inline style.
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
+	}
+
+	return $colors;
+}
+
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * @param  array $attributes Navigation block attributes.
+ * @return array Font size CSS classes and inline styles.
+ */
+function post_author_build_css_font_sizes( $attributes ) {
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'fontSize', $attributes );
+	$has_custom_font_size = array_key_exists( 'customFontSize', $attributes );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] );
+	} elseif ( $has_custom_font_size ) {
+		// Add the custom font size inline style.
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customFontSize'] );
+	}
+
+	return $font_sizes;
+}
+
 /**
  * Renders the `core/post-author` block on the server.
  *
- * @return string Returns the filtered post author for the current post wrapped inside "h6" tags.
+ * @param  Object $block The block to render.
+ * @return string Returns the rendered author block.
  */
-function render_block_core_post_author() {
+function render_block_core_post_author( $block ) {
+
+	$attributes = $block->attributes;
+
+	if ( empty( $attributes ) ) {
+		return '';
+	}
+
 	$post = gutenberg_get_post_from_context();
+
 	if ( ! $post ) {
 		return '';
 	}
-	// translators: %s: The author.
-	return '<address>' . sprintf( __( 'By %s' ), get_the_author() ) . '</address>';
+
+	$avatar = ! empty( $attributes['avatarSize'] ) ? get_avatar(
+		$post->post_author,
+		$attributes['avatarSize']
+	) : null;
+
+	$byline     = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
+	$colors     = post_author_build_css_colors( $attributes );
+	$font_sizes = post_author_build_css_font_sizes( $attributes );
+	$classes    = array_merge(
+		$colors['css_classes'],
+		$font_sizes['css_classes'],
+		array( 'wp-block-post-author' ),
+		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
+		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
+		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array()
+	);
+
+	$class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) );
+	$style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] )
+		? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) )
+		: '';
+
+	return sprintf( '<div %1$s %2$s>', $class_attribute, $style_attribute ) .
+		( $attributes['showAvatar'] ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
+		'<div class="wp-block-post-author__content">' .
+			( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . $byline . '</p>' : '' ) .
+			'<p class="wp-block-post-author__name">' . get_the_author_meta( 'display_name' ) . '</p>' .
+			( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description' ) . '</p>' : '' ) .
+		'</div>' .
+	'</div>';
 }
 
 /**
diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
new file mode 100644
index 0000000000000..86df342883142
--- /dev/null
+++ b/packages/block-library/src/post-author/style.scss
@@ -0,0 +1,31 @@
+.wp-block-post-author {
+	display: flex;
+	flex-wrap: wrap;
+	line-height: 1.5;
+
+	&__byline {
+		width: 100%;
+		margin-top: 0;
+		margin-bottom: 0;
+		font-size: 0.8em;
+	}
+
+	&__avatar {
+		margin-right: $grid-unit-20;
+	}
+
+	&__bio {
+		margin-top: $grid-unit-10;
+	}
+
+	&__content {
+		flex-grow: 1;
+		flex-basis: 0;
+	}
+
+	&__name {
+		font-weight: bold;
+		margin: 0;
+	}
+
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 19b1d3208d4e5..662938ad7f11b 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -20,6 +20,7 @@
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./paragraph/style.scss";
+@import "./post-author/style.scss";
 @import "./pullquote/style.scss";
 @import "./quote/style.scss";
 @import "./rss/style.scss";