From 99c644dc92867e3bc87ea0df6d56a9d20962a729 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Fri, 24 Apr 2020 17:10:57 +0300
Subject: [PATCH 1/6] revert bad merge

---
 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  |  43 ++-
 .../block-library/src/post-author/edit.js     | 262 ++++++++++++++++--
 .../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   | 129 ++++++++-
 .../block-library/src/post-author/style.scss  |  31 +++
 packages/block-library/src/style.scss         |   1 +
 12 files changed, 578 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..bf87b06d1c196 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -1,4 +1,45 @@
 {
 	"name": "core/post-author",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"align": {
+			"type": "string"
+		},
+		"id": {
+			"type": "number"
+		},
+		"name": {
+			"type": "string"
+		},
+		"avatarSize": {
+			"type": "number"
+		},
+		"avatarUrl": {
+			"type": "string"
+		},
+		"showAvatar": {
+			"type": "boolean"
+		},
+		"showBio": {
+			"type": "boolean"
+		},
+		"byline": {
+			"type": "string"
+		},
+		"description": {
+			"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..8b29bc6b4f72b 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -1,31 +1,251 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { invoke } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
+import { useRef, useEffect, 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;
+
+function PostAuthorDisplay( { props, postAuthorId } ) {
+	const ref = useRef();
+
+	const [ authorId, setAuthorId ] = useState( props.attributes.id );
+
+	const { author, authors } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getAuthors } = select( 'core' );
+			return {
+				author: getEntityRecord( 'root', 'user', postAuthorId ),
+				authors: getAuthors(),
+			};
+		},
+		[ postAuthorId ]
+	);
+
+	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, id, showAvatar, showBio, byline } = props.attributes;
+
+	const avatarSizes = [
+		{ value: 24, label: __( 'Small' ) },
+		{ value: 48, label: __( 'Medium' ) },
+		{ value: 96, label: __( 'Large' ) },
+	];
+
+	let avatarSize = DEFAULT_AVATAR_SIZE;
+	if ( !! props.attributes.avatarSize ) {
+		avatarSize = props.attributes.avatarSize;
+	}
+	useEffect( () => {
+		if ( author && ! props.attributes.id ) {
+			props.setAttributes( {
+				id: Number( author.id ),
+				name: author.name,
+				description: author.description,
+				avatarSize,
+				avatarUrl: author.avatar_urls[ avatarSize ],
+			} );
+		} else if ( authorId ) {
+			const authorFetch = apiFetch( {
+				path: '/wp/v2/users/' + authorId + '?context=edit',
+			} );
+			authorFetch.then( ( newAuthor ) => {
+				props.setAttributes( {
+					id: newAuthor.id,
+					name: newAuthor.name,
+					avatarUrl:
+						newAuthor.avatar_urls[ props.attributes.avatarSize ],
+					description: newAuthor.description,
+				} );
+			} );
+			return () => {
+				if ( authorFetch ) {
+					invoke( authorFetch, [ 'abort' ] );
+				}
+			};
+		}
+	}, [ authorId, author ] );
+
+	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={ id }
+						options={ authors.map( ( theAuthor ) => {
+							return {
+								value: theAuthor.id,
+								label: theAuthor.name,
+							};
+						} ) }
+						onChange={ ( newAuthorId ) => {
+							setAuthorId( newAuthorId );
+						} }
+					/>
+					<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 && (
+							<div className="wp-block-post-author__avatar">
+								<img
+									width={ props.attributes.avatarSize }
+									src={ props.attributes.avatarUrl }
+									alt={ props.attributes.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">
+								{ props.attributes.name }
+							</p>
+							{ showBio && (
+								<p className={ 'wp-block-post-author__bio' }>
+									{ props.attributes.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 [ postAuthorId ] = useEntityProp( 'postType', 'post', 'author' );
+	if ( ! postAuthorId ) {
 		return 'Post Author Placeholder';
 	}
-	return <PostAuthorDisplay />;
+
+	return <PostAuthorDisplay postAuthorId={ postAuthorId } 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..f606d01a277b5 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -5,18 +5,139 @@
  * @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  array $attributes Author block attributes.
+ * @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;
+
+
+	$author_name = $attributes['name'];
+	$byline      = ! empty( $attributes['byline'] ) ? $attributes['byline'] : __( 'Written by:' );
+
+	$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">' . $author_name . '</p>' .
+			( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . $attributes['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";

From a35f2f43d0957e79e2f134323dac0a249273ae53 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Tue, 28 Apr 2020 17:42:42 +0300
Subject: [PATCH 2/6] removed author storage

we also set post author on change from the block itself.
---
 .../block-library/src/post-author/block.json  |  12 --
 .../block-library/src/post-author/edit.js     | 118 +++++++++---------
 .../block-library/src/post-author/index.php   |  10 +-
 3 files changed, 63 insertions(+), 77 deletions(-)

diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index bf87b06d1c196..f197674f8beb1 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -5,18 +5,9 @@
 		"align": {
 			"type": "string"
 		},
-		"id": {
-			"type": "number"
-		},
-		"name": {
-			"type": "string"
-		},
 		"avatarSize": {
 			"type": "number"
 		},
-		"avatarUrl": {
-			"type": "string"
-		},
 		"showAvatar": {
 			"type": "boolean"
 		},
@@ -26,9 +17,6 @@
 		"byline": {
 			"type": "string"
 		},
-		"description": {
-			"type": "string"
-		},
 		"backgroundColor": {
 			"type": "string"
 		},
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 8b29bc6b4f72b..a426d665b6ccc 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { invoke } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import { useEntityProp } from '@wordpress/core-data';
 import {
 	AlignmentToolbar,
@@ -25,21 +25,28 @@ import { __ } from '@wordpress/i18n';
 
 const DEFAULT_AVATAR_SIZE = 24;
 
-function PostAuthorDisplay( { props, postAuthorId } ) {
-	const ref = useRef();
+async function getAuthorDetails( authorId, setAuthorDetails ) {
+	const authorDetails = await apiFetch( {
+		path: '/wp/v2/users/' + authorId + '?context=edit',
+	} );
+	setAuthorDetails( authorDetails );
+}
 
-	const [ authorId, setAuthorId ] = useState( props.attributes.id );
+function PostAuthorDisplay( {
+	postAuthor,
+	setPostAuthor,
+	authorDetails,
+	setAuthorDetails,
+	props,
+} ) {
+	const ref = useRef();
 
-	const { author, authors } = useSelect(
-		( select ) => {
-			const { getEntityRecord, getAuthors } = select( 'core' );
-			return {
-				author: getEntityRecord( 'root', 'user', postAuthorId ),
-				authors: getAuthors(),
-			};
-		},
-		[ postAuthorId ]
-	);
+	const { authors } = useSelect( ( select ) => {
+		const { getAuthors } = select( 'core' );
+		return {
+			authors: getAuthors(),
+		};
+	} );
 
 	const { isSelected, fontSize, setFontSize } = props;
 	const {
@@ -68,7 +75,7 @@ function PostAuthorDisplay( { props, postAuthorId } ) {
 		[ fontSize.size ]
 	);
 
-	const { align, id, showAvatar, showBio, byline } = props.attributes;
+	const { align, showAvatar, showBio, byline } = props.attributes;
 
 	const avatarSizes = [
 		{ value: 24, label: __( 'Small' ) },
@@ -80,35 +87,6 @@ function PostAuthorDisplay( { props, postAuthorId } ) {
 	if ( !! props.attributes.avatarSize ) {
 		avatarSize = props.attributes.avatarSize;
 	}
-	useEffect( () => {
-		if ( author && ! props.attributes.id ) {
-			props.setAttributes( {
-				id: Number( author.id ),
-				name: author.name,
-				description: author.description,
-				avatarSize,
-				avatarUrl: author.avatar_urls[ avatarSize ],
-			} );
-		} else if ( authorId ) {
-			const authorFetch = apiFetch( {
-				path: '/wp/v2/users/' + authorId + '?context=edit',
-			} );
-			authorFetch.then( ( newAuthor ) => {
-				props.setAttributes( {
-					id: newAuthor.id,
-					name: newAuthor.name,
-					avatarUrl:
-						newAuthor.avatar_urls[ props.attributes.avatarSize ],
-					description: newAuthor.description,
-				} );
-			} );
-			return () => {
-				if ( authorFetch ) {
-					invoke( authorFetch, [ 'abort' ] );
-				}
-			};
-		}
-	}, [ authorId, author ] );
 
 	const blockClassNames = classnames( 'wp-block-post-author', {
 		[ fontSize.class ]: fontSize.class,
@@ -123,15 +101,16 @@ function PostAuthorDisplay( { props, postAuthorId } ) {
 				<PanelBody title={ __( 'Author Settings' ) }>
 					<SelectControl
 						label={ __( 'Author' ) }
-						value={ id }
-						options={ authors.map( ( theAuthor ) => {
+						value={ postAuthor }
+						options={ authors.map( ( { id, name } ) => {
 							return {
-								value: theAuthor.id,
-								label: theAuthor.name,
+								value: id,
+								label: name,
 							};
 						} ) }
 						onChange={ ( newAuthorId ) => {
-							setAuthorId( newAuthorId );
+							setPostAuthor( newAuthorId );
+							getAuthorDetails( newAuthorId, setAuthorDetails );
 						} }
 					/>
 					<ToggleControl
@@ -195,12 +174,14 @@ function PostAuthorDisplay( { props, postAuthorId } ) {
 						} ) }
 						style={ blockInlineStyles }
 					>
-						{ showAvatar && (
+						{ showAvatar && authorDetails && (
 							<div className="wp-block-post-author__avatar">
 								<img
-									width={ props.attributes.avatarSize }
-									src={ props.attributes.avatarUrl }
-									alt={ props.attributes.name }
+									width={ avatarSize }
+									src={
+										authorDetails.avatar_urls[ avatarSize ]
+									}
+									alt={ authorDetails.name }
 								/>
 							</div>
 						) }
@@ -224,11 +205,11 @@ function PostAuthorDisplay( { props, postAuthorId } ) {
 								/>
 							) }
 							<p className="wp-block-post-author__name">
-								{ props.attributes.name }
+								{ authorDetails.name }
 							</p>
 							{ showBio && (
 								<p className={ 'wp-block-post-author__bio' }>
-									{ props.attributes.description }
+									{ authorDetails.description }
 								</p>
 							) }
 						</div>
@@ -240,12 +221,31 @@ function PostAuthorDisplay( { props, postAuthorId } ) {
 }
 
 function PostAuthorEdit( props ) {
-	const [ postAuthorId ] = useEntityProp( 'postType', 'post', 'author' );
-	if ( ! postAuthorId ) {
+	const [ postAuthor, setPostAuthor ] = useEntityProp(
+		'postType',
+		'post',
+		'author'
+	);
+
+	const [ authorDetails, setAuthorDetails ] = useState( false );
+
+	if ( ! postAuthor ) {
 		return 'Post Author Placeholder';
 	}
 
-	return <PostAuthorDisplay postAuthorId={ postAuthorId } props={ props } />;
+	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/index.php b/packages/block-library/src/post-author/index.php
index f606d01a277b5..b1fcdaf555f3f 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -99,7 +99,7 @@ function render_block_core_post_author( $block ) {
 		return '';
 	}
 
-	$post = gutenberg_get_post_from_context();
+	$post = gutenberg_get_post_from_context();	
 
 	if ( ! $post ) {
 		return '';
@@ -110,9 +110,7 @@ function render_block_core_post_author( $block ) {
 		$attributes['avatarSize']
 	) : null;
 
-
-	$author_name = $attributes['name'];
-	$byline      = ! empty( $attributes['byline'] ) ? $attributes['byline'] : __( 'Written by:' );
+	$byline      = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
 
 	$colors     = post_author_build_css_colors( $attributes );
 	$font_sizes = post_author_build_css_font_sizes( $attributes );
@@ -134,8 +132,8 @@ function render_block_core_post_author( $block ) {
 		( $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">' . $author_name . '</p>' .
-			( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . $attributes['description'] . '</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>';
 }

From 1f58cd34ea62c75dbc27221fc85bab3b8e3ebe19 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 29 Apr 2020 12:04:28 +0300
Subject: [PATCH 3/6] linting

---
 packages/block-library/src/post-author/index.php | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index b1fcdaf555f3f..a10357ad22fb2 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -88,7 +88,7 @@ function post_author_build_css_font_sizes( $attributes ) {
 /**
  * Renders the `core/post-author` block on the server.
  *
- * @param  array $attributes Author block attributes.
+ * @param  Object $block The block to render.
  * @return string Returns the rendered author block.
  */
 function render_block_core_post_author( $block ) {
@@ -99,7 +99,7 @@ function render_block_core_post_author( $block ) {
 		return '';
 	}
 
-	$post = gutenberg_get_post_from_context();	
+	$post = gutenberg_get_post_from_context();
 
 	if ( ! $post ) {
 		return '';
@@ -110,8 +110,7 @@ function render_block_core_post_author( $block ) {
 		$attributes['avatarSize']
 	) : null;
 
-	$byline      = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
-
+	$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(

From 9be1ffe5147a15fd8320c1fd9645a0876a4deac5 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 29 Apr 2020 16:10:14 +0300
Subject: [PATCH 4/6] use sizes to label avatar size

this aloows us to use the sizes as the API serves them
---
 packages/block-library/src/post-author/edit.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index a426d665b6ccc..93b0afe199662 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { forEach } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -77,11 +78,15 @@ function PostAuthorDisplay( {
 
 	const { align, showAvatar, showBio, byline } = props.attributes;
 
-	const avatarSizes = [
-		{ value: 24, label: __( 'Small' ) },
-		{ value: 48, label: __( 'Medium' ) },
-		{ value: 96, label: __( 'Large' ) },
-	];
+	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 ) {

From a40a9efd287d4d9cd6fc52c004bfa44bf898c582 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Thu, 30 Apr 2020 10:43:27 +0300
Subject: [PATCH 5/6] adds some review suggestions

props @ockham
---
 packages/block-library/src/post-author/edit.js   | 9 +++------
 packages/block-library/src/post-author/index.php | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 93b0afe199662..84394b41531b0 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -42,12 +42,9 @@ function PostAuthorDisplay( {
 } ) {
 	const ref = useRef();
 
-	const { authors } = useSelect( ( select ) => {
-		const { getAuthors } = select( 'core' );
-		return {
-			authors: getAuthors(),
-		};
-	} );
+	const { authors } = useSelect( ( select ) => ( {
+		authors: select( 'core' ).getAuthors(),
+	} ) );
 
 	const { isSelected, fontSize, setFontSize } = props;
 	const {
diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index a10357ad22fb2..602cb0d3a1b7c 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -117,7 +117,7 @@ function render_block_core_post_author( $block ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
 		array( 'wp-block-post-author' ),
-		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
+		array( $attributes['className'] ) ?? array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
 		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array()
 	);

From ca56f991cfb9c51b63dc599571462af30668001e Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Thu, 30 Apr 2020 13:41:40 +0300
Subject: [PATCH 6/6] removes null coalescing operator

---
 packages/block-library/src/post-author/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index 602cb0d3a1b7c..a10357ad22fb2 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -117,7 +117,7 @@ function render_block_core_post_author( $block ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
 		array( 'wp-block-post-author' ),
-		array( $attributes['className'] ) ?? array(),
+		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
 		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array()
 	);