From 675e13868f800fcac05a962748f66479c05254bf Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Thu, 27 Jan 2022 04:44:53 +0100
Subject: [PATCH 01/12] Add post author avatar block

---
 lib/blocks.php                                |   1 +
 packages/block-library/src/index.js           |   2 +
 .../src/post-author-avatar/block.json         |  50 ++++++
 .../src/post-author-avatar/edit.js            | 170 ++++++++++++++++++
 .../src/post-author-avatar/index.js           |  18 ++
 .../src/post-author-avatar/index.php          |  90 ++++++++++
 6 files changed, 331 insertions(+)
 create mode 100644 packages/block-library/src/post-author-avatar/block.json
 create mode 100644 packages/block-library/src/post-author-avatar/edit.js
 create mode 100644 packages/block-library/src/post-author-avatar/index.js
 create mode 100644 packages/block-library/src/post-author-avatar/index.php

diff --git a/lib/blocks.php b/lib/blocks.php
index 0094ef32230b9..16bc48e05dd91 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -82,6 +82,7 @@ function gutenberg_reregister_core_block_types() {
 				'page-list.php'                    => 'core/page-list',
 				'pattern.php'                      => 'core/pattern',
 				'post-author.php'                  => 'core/post-author',
+				'post-author-avatar.php'           => 'core/post-author-avatar',
 				'post-author-name.php'             => 'core/post-author-name',
 				'post-comment.php'                 => 'core/post-comment',
 				'post-comments.php'                => 'core/post-comments',
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 037eaa0f3df70..2a82ca65d0ab7 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -59,6 +59,7 @@ import * as pattern from './pattern';
 import * as pageList from './page-list';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
+import * as postAuthorAvatar from './post-author-avatar';
 import * as postAuthorName from './post-author-name';
 import * as postComment from './post-comment';
 import * as postComments from './post-comments';
@@ -204,6 +205,7 @@ export const __experimentalGetCoreBlocks = () => [
 	termDescription,
 	queryTitle,
 	postAuthorName,
+	postAuthorAvatar,
 ];
 
 /**
diff --git a/packages/block-library/src/post-author-avatar/block.json b/packages/block-library/src/post-author-avatar/block.json
new file mode 100644
index 0000000000000..5cdf72dbc82d6
--- /dev/null
+++ b/packages/block-library/src/post-author-avatar/block.json
@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/post-author-avatar",
+	"title": "Post Author Avatar",
+	"category": "theme",
+	"description": "Add the avatar of this post's author.",
+	"textdomain": "default",
+	"attributes": {
+		"width": {
+			"type": "number",
+			"default": 48
+		},
+		"height": {
+			"type": "number",
+			"default": 48
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+	},
+	"usesContext": [ "postType", "postId" ],
+	"supports": {
+		"html": false,
+		"align": true,
+		"alignWide": false,
+		"spacing": {
+			"margin": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"width": true,
+			"color": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		},
+		"color": {
+			"text": false,
+			"background": false,
+			"__experimentalDuotone": "img"
+		}
+	}
+}
diff --git a/packages/block-library/src/post-author-avatar/edit.js b/packages/block-library/src/post-author-avatar/edit.js
new file mode 100644
index 0000000000000..ab1a80e917342
--- /dev/null
+++ b/packages/block-library/src/post-author-avatar/edit.js
@@ -0,0 +1,170 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	ResizableBox,
+	RangeControl,
+	ToggleControl,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, _x, isRTL } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+function PostAuthorAvatarEdit( {
+	isSelected,
+	context: { postType, postId },
+	attributes,
+	setAttributes,
+} ) {
+	const { height, width, isLink, linkTarget } = attributes;
+
+	const { authorDetails } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getUser } = select( coreStore );
+			const _authorId = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			)?.author;
+
+			return {
+				authorDetails: _authorId ? getUser( _authorId ) : null,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	const avatarUrls = authorDetails
+		? Object.values( authorDetails.avatar_urls )
+		: null;
+	const sizes = authorDetails
+		? Object.keys( authorDetails.avatar_urls )
+		: null;
+	const minSize = sizes ? sizes[ 0 ] : 24;
+	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
+	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
+	const blockProps = useBlockProps();
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Avatar Settings' ) }>
+				<RangeControl
+					label={ __( 'Image size' ) }
+					onChange={ ( newWidth ) =>
+						setAttributes( {
+							width: newWidth,
+							height: newWidth,
+						} )
+					}
+					min={ minSize }
+					max={ maxSizeBuffer }
+					initialPosition={ width }
+					value={ width }
+				/>
+				<ToggleControl
+					label={ __( 'Link to author archive' ) }
+					onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					checked={ isLink }
+				/>
+				{ isLink && (
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	const avatarImage = avatarUrls ? (
+		<ResizableBox
+			size={ {
+				width,
+				height,
+			} }
+			showHandle={ isSelected }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				setAttributes( {
+					height: parseInt( height + delta.height, 10 ),
+					width: parseInt( width + delta.width, 10 ),
+				} );
+			} }
+			lockAspectRatio
+			enable={ {
+				top: false,
+				right: ! isRTL(),
+				bottom: true,
+				left: isRTL(),
+			} }
+			minWidth={ minSize }
+			maxWidth={ maxSizeBuffer }
+		>
+			<img
+				src={ avatarUrls[ avatarUrls.length - 1 ] }
+				alt={ authorDetails.name }
+				className={ classnames(
+					'wp-post-author-avatar__image',
+					colorProps.className,
+					borderProps.className
+				) }
+				style={ {
+					...borderProps.style, // Border radius, width and style.
+				} }
+			/>
+		</ResizableBox>
+	) : (
+		// Displays while loading. TODO: Replace with an avatar placeholder.
+		<p>{ _x( 'Post Author Avatar', 'block title' ) } </p>
+	);
+
+	const displayAvatar = isLink ? (
+		<a
+			href="#author-pseudo-link"
+			className="wp-post-author-avatar__link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ avatarImage }
+		</a>
+	) : (
+		avatarImage
+	);
+
+	return (
+		<>
+			{ inspectorControls }
+			<figure
+				{ ...blockProps }
+				/*
+				 * The spacing properties need to be added to the wrapper,
+				 * not the image element, otherwise they affect the ResizableBox.
+				 */
+				style={ { ...spacingProps.style } }
+			>
+				{ displayAvatar }
+			</figure>
+		</>
+	);
+}
+
+export default PostAuthorAvatarEdit;
diff --git a/packages/block-library/src/post-author-avatar/index.js b/packages/block-library/src/post-author-avatar/index.js
new file mode 100644
index 0000000000000..68fb2c2f737c2
--- /dev/null
+++ b/packages/block-library/src/post-author-avatar/index.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+/**
+ * WordPress dependencies
+ */
+import { postAuthor as icon } from '@wordpress/icons';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
new file mode 100644
index 0000000000000..39177892776e2
--- /dev/null
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-author-avatar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-author-avatar` block on the server.
+ *
+ * @param  array    $attributes Block attributes.
+ * @param  string   $content    Block default content.
+ * @param  WP_Block $block      Block instance.
+ * @return string Returns the rendered author avatar block.
+ */
+function render_block_core_post_author_avatar( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$author_id = get_post_field( 'post_author', $block->context['postId'] );
+	if ( empty( $author_id ) ) {
+		return '';
+	}
+
+	/**
+	 * Separate styles from class names since we need to place them on different elements.
+	 * This is the only way to retreive style and classes on different instances.
+	 */
+	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
+
+	$width       = isset( $attributes['width'] ) ? $attributes['width'] : 96;
+	$height      = isset( $attributes['height'] ) ? $attributes['height'] : 96;
+	$styles      = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
+	$classes     = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
+	$author_name = get_the_author_meta( 'display_name', $author_id );
+	$image_classes = '';
+
+	if ( isset( $attributes['style']['border'] ) ) {
+		/**
+		 * Remove the border class from the figure element,
+		 * because we only want it to be visible around the image:
+		 */
+		$classes = str_replace( $classes, 'has-border-color', '' );
+
+		// Add the border classes to the image element for consistency:
+		$image_classes = 'has-border-color';
+		if ( isset( $attributes['borderColor'] ) ) {
+			$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
+		}
+	}
+
+	/* translators: %s is the Author name */
+	$alt = sprintf( __( '%s Avatar' ), $author_name );
+
+	$avatar = get_avatar(
+		$author_id,
+		null, // Default size is unused: Use height and width instead.
+		'',   // Default gravatar.
+		$alt,
+		array(
+			'height'     => $height,
+			'width'      => $width,
+			'extra_attr' => sprintf( 'style="%1s"', $styles ),
+			'class'      => "wp-block-post-author-avatar__image $image_classes",
+		)
+	);
+
+	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+		$avatar = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-avatar__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $avatar );
+	}
+
+	return sprintf('<figure class="wp-block-post-author-avatar %1$s">%2$s</figure>',
+		$classes,
+		$avatar
+	);
+}
+
+/**
+ * Registers the `core/post-author-avatar` block on the server.
+ */
+function register_block_core_post_author_avatar() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-author-avatar',
+		array(
+			'render_callback' => 'render_block_core_post_author_avatar',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_author_avatar' );

From 71024f5216e4cc3306d14ac81ef2a0c7df63b0a4 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Thu, 27 Jan 2022 05:21:26 +0100
Subject: [PATCH 02/12] Linting, fixtures, docs

---
 docs/reference-guides/core-blocks.md          | 21 +++++++++++++------
 .../src/post-author-avatar/index.php          | 15 ++++++-------
 .../blocks/core__post-author-avatar.html      |  1 +
 .../blocks/core__post-author-avatar.json      | 15 +++++++++++++
 .../core__post-author-avatar.parsed.json      |  9 ++++++++
 .../core__post-author-avatar.serialized.html  |  1 +
 6 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__post-author-avatar.html
 create mode 100644 test/integration/fixtures/blocks/core__post-author-avatar.json
 create mode 100644 test/integration/fixtures/blocks/core__post-author-avatar.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__post-author-avatar.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index f121f20204fd1..72d9dd94cc92f 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -159,7 +159,7 @@ Contains the block elements used to render a comment, like the title, date, auth
 -	**Name:** core/comment-template
 -	**Category:** design
 -	**Supports:** align, ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments Pagination
 
@@ -186,7 +186,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Previous Page
 
@@ -402,7 +402,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 -	**Name:** core/nextpage
 -	**Category:** design
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Page List
 
@@ -440,6 +440,15 @@ Display post author details such as name, avatar, and bio. ([Source](https://git
 -	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** avatarSize, byline, showAvatar, showBio, textAlign
 
+## Post Author Avatar
+
+Add the avatar of this post's author. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-avatar))
+
+-	**Name:** core/post-author-avatar
+-	**Category:** theme
+-	**Supports:** align, color (~~background~~, ~~text~~), spacing (margin), ~~alignWide~~, ~~html~~
+-	**Attributes:** height, isLink, linkTarget, width
+
 ## Post Author Name
 
 The author name. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-name))
@@ -501,7 +510,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Date
 
@@ -546,7 +555,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Name:** core/post-template
 -	**Category:** theme
 -	**Supports:** align, ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Terms
 
@@ -618,7 +627,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
 -	**Name:** core/query-pagination-numbers
 -	**Category:** theme
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Previous Page
 
diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index 39177892776e2..6bccba03c1f84 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -29,11 +29,11 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	 */
 	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
 
-	$width       = isset( $attributes['width'] ) ? $attributes['width'] : 96;
-	$height      = isset( $attributes['height'] ) ? $attributes['height'] : 96;
-	$styles      = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
-	$classes     = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
-	$author_name = get_the_author_meta( 'display_name', $author_id );
+	$width         = isset( $attributes['width'] ) ? $attributes['width'] : 96;
+	$height        = isset( $attributes['height'] ) ? $attributes['height'] : 96;
+	$styles        = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
+	$classes       = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
+	$author_name   = get_the_author_meta( 'display_name', $author_id );
 	$image_classes = '';
 
 	if ( isset( $attributes['style']['border'] ) ) {
@@ -43,7 +43,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 		 */
 		$classes = str_replace( $classes, 'has-border-color', '' );
 
-		// Add the border classes to the image element for consistency:
+		// Add the border classes to the image element for consistency.
 		$image_classes = 'has-border-color';
 		if ( isset( $attributes['borderColor'] ) ) {
 			$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
@@ -70,7 +70,8 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 		$avatar = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-avatar__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $avatar );
 	}
 
-	return sprintf('<figure class="wp-block-post-author-avatar %1$s">%2$s</figure>',
+	return sprintf(
+		'<figure class="wp-block-post-author-avatar %1$s">%2$s</figure>',
 		$classes,
 		$avatar
 	);
diff --git a/test/integration/fixtures/blocks/core__post-author-avatar.html b/test/integration/fixtures/blocks/core__post-author-avatar.html
new file mode 100644
index 0000000000000..29c80dc9a5c57
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-author-avatar.html
@@ -0,0 +1 @@
+<!-- wp:post-author-avatar /-->
diff --git a/test/integration/fixtures/blocks/core__post-author-avatar.json b/test/integration/fixtures/blocks/core__post-author-avatar.json
new file mode 100644
index 0000000000000..f365781071ea5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-author-avatar.json
@@ -0,0 +1,15 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-author-avatar",
+		"isValid": true,
+		"attributes": {
+			"width": 48,
+			"height": 48,
+			"isLink": false,
+			"linkTarget": "_self"
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-author-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-author-avatar.parsed.json
new file mode 100644
index 0000000000000..6a219923039ab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-author-avatar.parsed.json
@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/post-author-avatar",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-author-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-author-avatar.serialized.html
new file mode 100644
index 0000000000000..29c80dc9a5c57
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-author-avatar.serialized.html
@@ -0,0 +1 @@
+<!-- wp:post-author-avatar /-->

From 17e820da2a99758863dd03b7da39b296b44ea046 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Fri, 28 Jan 2022 05:51:07 +0100
Subject: [PATCH 03/12] Update border styles and wrapper width

---
 packages/block-library/src/editor.scss        |  1 +
 .../src/post-author-avatar/block.json         | 11 ++-
 .../src/post-author-avatar/edit.js            | 15 +---
 .../src/post-author-avatar/editor.scss        |  3 +
 .../src/post-author-avatar/index.php          | 85 +++++++++++++------
 .../src/post-author-avatar/style.scss         |  3 +
 packages/block-library/src/style.scss         |  1 +
 7 files changed, 75 insertions(+), 44 deletions(-)
 create mode 100644 packages/block-library/src/post-author-avatar/editor.scss
 create mode 100644 packages/block-library/src/post-author-avatar/style.scss

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index f42dd28fa2e25..e60c929bfcdc7 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -25,6 +25,7 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post-author-avatar/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";
diff --git a/packages/block-library/src/post-author-avatar/block.json b/packages/block-library/src/post-author-avatar/block.json
index 5cdf72dbc82d6..864ff77e8337b 100644
--- a/packages/block-library/src/post-author-avatar/block.json
+++ b/packages/block-library/src/post-author-avatar/block.json
@@ -9,11 +9,11 @@
 	"attributes": {
 		"width": {
 			"type": "number",
-			"default": 48
+			"default": 60
 		},
 		"height": {
 			"type": "number",
-			"default": 48
+			"default": 60
 		},
 		"isLink": {
 			"type": "boolean",
@@ -39,12 +39,15 @@
 			"style": true,
 			"__experimentalDefaultControls": {
 				"radius": true
-			}
+			},
+			"__experimentalSkipSerialization": true
 		},
 		"color": {
 			"text": false,
 			"background": false,
 			"__experimentalDuotone": "img"
 		}
-	}
+	},
+	"editorStyle": "wp-block-post-author-avatar",
+	"style": "wp-block-post-author-avatar"
 }
diff --git a/packages/block-library/src/post-author-avatar/edit.js b/packages/block-library/src/post-author-avatar/edit.js
index ab1a80e917342..2c42cd651c5f4 100644
--- a/packages/block-library/src/post-author-avatar/edit.js
+++ b/packages/block-library/src/post-author-avatar/edit.js
@@ -11,7 +11,6 @@ import {
 	useBlockProps,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
-	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -59,7 +58,6 @@ function PostAuthorAvatarEdit( {
 	const blockProps = useBlockProps();
 	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
-	const spacingProps = useSpacingProps( attributes );
 
 	const inspectorControls = (
 		<InspectorControls>
@@ -134,7 +132,7 @@ function PostAuthorAvatarEdit( {
 			/>
 		</ResizableBox>
 	) : (
-		// Displays while loading. TODO: Replace with an avatar placeholder.
+		// Displays while loading
 		<p>{ _x( 'Post Author Avatar', 'block title' ) } </p>
 	);
 
@@ -153,16 +151,7 @@ function PostAuthorAvatarEdit( {
 	return (
 		<>
 			{ inspectorControls }
-			<figure
-				{ ...blockProps }
-				/*
-				 * The spacing properties need to be added to the wrapper,
-				 * not the image element, otherwise they affect the ResizableBox.
-				 */
-				style={ { ...spacingProps.style } }
-			>
-				{ displayAvatar }
-			</figure>
+			<figure { ...blockProps }>{ displayAvatar }</figure>
 		</>
 	);
 }
diff --git a/packages/block-library/src/post-author-avatar/editor.scss b/packages/block-library/src/post-author-avatar/editor.scss
new file mode 100644
index 0000000000000..b10c5cc6eda31
--- /dev/null
+++ b/packages/block-library/src/post-author-avatar/editor.scss
@@ -0,0 +1,3 @@
+.wp-block-post-author-avatar {
+	width: fit-content;
+}
diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index 6bccba03c1f84..63e1e238264a3 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -23,35 +23,64 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 		return '';
 	}
 
-	/**
-	 * Separate styles from class names since we need to place them on different elements.
-	 * This is the only way to retreive style and classes on different instances.
-	 */
-	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
-
-	$width         = isset( $attributes['width'] ) ? $attributes['width'] : 96;
-	$height        = isset( $attributes['height'] ) ? $attributes['height'] : 96;
-	$styles        = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
-	$classes       = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
-	$author_name   = get_the_author_meta( 'display_name', $author_id );
-	$image_classes = '';
+	// Add border width styles.
+	$has_border_width = ! empty( $attributes['style']['border']['width'] );
+
+	if ( $has_border_width ) {
+		$border_width = $attributes['style']['border']['width'];
+		$image_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+	}
+
+	// Add border radius styles.
+	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
 
-	if ( isset( $attributes['style']['border'] ) ) {
-		/**
-		 * Remove the border class from the figure element,
-		 * because we only want it to be visible around the image:
-		 */
-		$classes = str_replace( $classes, 'has-border-color', '' );
-
-		// Add the border classes to the image element for consistency.
-		$image_classes = 'has-border-color';
-		if ( isset( $attributes['borderColor'] ) ) {
-			$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
+	if ( $has_border_radius ) {
+		$border_radius   = $attributes['style']['border']['radius'];
+
+		if ( is_array( $border_radius ) ) {
+			// Apply styles for individual corner border radii.
+			foreach ( $border_radius as $key => $value ) {
+				if ( null !== $value ) {
+					// Convert camelCase key to kebab-case.
+					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
+
+					// Add shared styles for individual border radii.
+					$border_style    = sprintf(
+						'border-%s-radius: %s;',
+						esc_attr( $name ),
+						esc_attr( $value )
+					);
+					$image_styles[] = $border_style;
+				}
+			}
+		} else {
+			$border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
+			$image_styles[] = $border_style;
 		}
 	}
 
+	// Add border color styles.
+	$has_border_color = ! empty( $attributes['style']['border']['color'] );
+
+	if ( $has_border_color ) {
+		$border_color = $attributes['style']['border']['color'];
+		$image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
+	}
+
+	// Add border classes to the avatar image for both custom colors and palette colors.
+	$image_classes = '';
+	if ( $has_border_color || isset( $attributes['borderColor'] ) ) {
+		$image_classes .= 'has-border-color';
+	}
+	if ( isset( $attributes['borderColor'] ) ) {
+		$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
+	}
+
+	$author_name = get_the_author_meta( 'display_name', $author_id );
 	/* translators: %s is the Author name */
-	$alt = sprintf( __( '%s Avatar' ), $author_name );
+	$alt    = sprintf( __( '%s Avatar' ), $author_name );
+	$width  = isset( $attributes['width'] ) ? $attributes['width'] : 96;
+	$height = isset( $attributes['height'] ) ? $attributes['height'] : 96;
 
 	$avatar = get_avatar(
 		$author_id,
@@ -61,18 +90,20 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 		array(
 			'height'     => $height,
 			'width'      => $width,
-			'extra_attr' => sprintf( 'style="%1s"', $styles ),
+			'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
 			'class'      => "wp-block-post-author-avatar__image $image_classes",
 		)
 	);
 
+	$wrapper_attributes = get_block_wrapper_attributes();
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$avatar = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-avatar__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $avatar );
 	}
 
 	return sprintf(
-		'<figure class="wp-block-post-author-avatar %1$s">%2$s</figure>',
-		$classes,
+		'<figure %1$s>%2$s</figure>',
+		$wrapper_attributes,
 		$avatar
 	);
 }
diff --git a/packages/block-library/src/post-author-avatar/style.scss b/packages/block-library/src/post-author-avatar/style.scss
new file mode 100644
index 0000000000000..b10c5cc6eda31
--- /dev/null
+++ b/packages/block-library/src/post-author-avatar/style.scss
@@ -0,0 +1,3 @@
+.wp-block-post-author-avatar {
+	width: fit-content;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 7174095a59576..828bfdef0c0ab 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -24,6 +24,7 @@
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
+@import "./post-author-avatar/style.scss";
 @import "./post-comments/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-excerpt/style.scss";

From ea223c040f367268cb4fcae5c78251f1ad2dd666 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Fri, 28 Jan 2022 06:18:44 +0100
Subject: [PATCH 04/12] linting

---
 .../block-library/src/post-author-avatar/index.php   | 12 +++++++-----
 .../fixtures/blocks/core__post-author-avatar.json    |  4 ++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index 63e1e238264a3..ac1d48cc31ae6 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -23,11 +23,13 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$image_styles = array();
+
 	// Add border width styles.
 	$has_border_width = ! empty( $attributes['style']['border']['width'] );
 
 	if ( $has_border_width ) {
-		$border_width = $attributes['style']['border']['width'];
+		$border_width   = $attributes['style']['border']['width'];
 		$image_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
 	}
 
@@ -35,7 +37,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
 
 	if ( $has_border_radius ) {
-		$border_radius   = $attributes['style']['border']['radius'];
+		$border_radius = $attributes['style']['border']['radius'];
 
 		if ( is_array( $border_radius ) ) {
 			// Apply styles for individual corner border radii.
@@ -45,7 +47,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
 
 					// Add shared styles for individual border radii.
-					$border_style    = sprintf(
+					$border_style = sprintf(
 						'border-%s-radius: %s;',
 						esc_attr( $name ),
 						esc_attr( $value )
@@ -54,7 +56,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 				}
 			}
 		} else {
-			$border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
+			$border_style   = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
 			$image_styles[] = $border_style;
 		}
 	}
@@ -63,7 +65,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	$has_border_color = ! empty( $attributes['style']['border']['color'] );
 
 	if ( $has_border_color ) {
-		$border_color = $attributes['style']['border']['color'];
+		$border_color   = $attributes['style']['border']['color'];
 		$image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
 	}
 
diff --git a/test/integration/fixtures/blocks/core__post-author-avatar.json b/test/integration/fixtures/blocks/core__post-author-avatar.json
index f365781071ea5..c061c261c2069 100644
--- a/test/integration/fixtures/blocks/core__post-author-avatar.json
+++ b/test/integration/fixtures/blocks/core__post-author-avatar.json
@@ -4,8 +4,8 @@
 		"name": "core/post-author-avatar",
 		"isValid": true,
 		"attributes": {
-			"width": 48,
-			"height": 48,
+			"width": 60,
+			"height": 60,
 			"isLink": false,
 			"linkTarget": "_self"
 		},

From 2566425f97eb52db3aba8d6cf051c57d05d41c45 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Fri, 28 Jan 2022 06:48:00 +0100
Subject: [PATCH 05/12] more PHP linting

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

diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index ac1d48cc31ae6..ed378a45ac40f 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -47,7 +47,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
 
 					// Add shared styles for individual border radii.
-					$border_style = sprintf(
+					$border_style   = sprintf(
 						'border-%s-radius: %s;',
 						esc_attr( $name ),
 						esc_attr( $value )

From 033b6c89c336067d7b8e1f7270ca940d01c89cac Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Fri, 28 Jan 2022 07:22:19 +0100
Subject: [PATCH 06/12] try to build docs again

---
 docs/reference-guides/core-blocks.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 72d9dd94cc92f..7f2df62344800 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -159,7 +159,7 @@ Contains the block elements used to render a comment, like the title, date, auth
 -	**Name:** core/comment-template
 -	**Category:** design
 -	**Supports:** align, ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Comments Pagination
 
@@ -186,7 +186,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Previous Page
 
@@ -402,7 +402,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 -	**Name:** core/nextpage
 -	**Category:** design
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Page List
 
@@ -510,7 +510,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Post Date
 
@@ -555,7 +555,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Name:** core/post-template
 -	**Category:** theme
 -	**Supports:** align, ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Post Terms
 
@@ -627,7 +627,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
 -	**Name:** core/query-pagination-numbers
 -	**Category:** theme
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Previous Page
 

From 53be022b11e6ccc70f0169aedcb97af0f292e21a Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Mon, 31 Jan 2022 10:18:36 +0100
Subject: [PATCH 07/12] Add placeholder svg and CSS

---
 .../src/post-author-avatar/edit.js            | 55 +++++++++++++------
 .../src/post-author-avatar/editor.scss        | 10 ++++
 2 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/post-author-avatar/edit.js b/packages/block-library/src/post-author-avatar/edit.js
index 2c42cd651c5f4..aa5b4460dc45b 100644
--- a/packages/block-library/src/post-author-avatar/edit.js
+++ b/packages/block-library/src/post-author-avatar/edit.js
@@ -17,6 +17,8 @@ import {
 	ResizableBox,
 	RangeControl,
 	ToggleControl,
+	SVG,
+	Path,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __, _x, isRTL } from '@wordpress/i18n';
@@ -96,6 +98,39 @@ function PostAuthorAvatarEdit( {
 	);
 
 	const avatarImage = avatarUrls ? (
+		<img
+			src={ avatarUrls[ avatarUrls.length - 1 ] }
+			alt={ authorDetails.name }
+			className={ classnames(
+				'wp-post-author-avatar__image',
+				colorProps.className,
+				borderProps.className
+			) }
+			style={ {
+				...borderProps.style, // Border radius, width and style.
+			} }
+		/>
+	) : (
+		// Placeholder that displays when there is no avatar URL.
+		<SVG
+			className={ classnames(
+				'wp-block-post-author-avatar__placeholder',
+				colorProps.className,
+				borderProps.className
+			) }
+			style={ {
+				...borderProps.style, // Border radius, width and style.
+			} }
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 60 60"
+			preserveAspectRatio="none"
+		>
+			<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
+		</SVG>
+	);
+
+	const resizableImage = (
 		<ResizableBox
 			size={ {
 				width,
@@ -118,22 +153,8 @@ function PostAuthorAvatarEdit( {
 			minWidth={ minSize }
 			maxWidth={ maxSizeBuffer }
 		>
-			<img
-				src={ avatarUrls[ avatarUrls.length - 1 ] }
-				alt={ authorDetails.name }
-				className={ classnames(
-					'wp-post-author-avatar__image',
-					colorProps.className,
-					borderProps.className
-				) }
-				style={ {
-					...borderProps.style, // Border radius, width and style.
-				} }
-			/>
+			{ avatarImage }
 		</ResizableBox>
-	) : (
-		// Displays while loading
-		<p>{ _x( 'Post Author Avatar', 'block title' ) } </p>
 	);
 
 	const displayAvatar = isLink ? (
@@ -142,10 +163,10 @@ function PostAuthorAvatarEdit( {
 			className="wp-post-author-avatar__link"
 			onClick={ ( event ) => event.preventDefault() }
 		>
-			{ avatarImage }
+			{ resizableImage }
 		</a>
 	) : (
-		avatarImage
+		resizableImage
 	);
 
 	return (
diff --git a/packages/block-library/src/post-author-avatar/editor.scss b/packages/block-library/src/post-author-avatar/editor.scss
index b10c5cc6eda31..64c9e2f003337 100644
--- a/packages/block-library/src/post-author-avatar/editor.scss
+++ b/packages/block-library/src/post-author-avatar/editor.scss
@@ -1,3 +1,13 @@
 .wp-block-post-author-avatar {
 	width: fit-content;
+
+	.wp-block-post-author-avatar__placeholder{
+		width: 100%;
+		height: 100%;
+		stroke: currentColor;
+		stroke-dasharray: 3;
+		opacity: 0.4;
+		border: $border-width dashed currentColor;
+		border-radius: inherit;
+	}
 }

From 29f40549959dc0e7d976964b1bbb0d47abde86e9 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Mon, 31 Jan 2022 10:32:37 +0100
Subject: [PATCH 08/12] scss linting

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

diff --git a/packages/block-library/src/post-author-avatar/editor.scss b/packages/block-library/src/post-author-avatar/editor.scss
index 64c9e2f003337..46e619057e346 100644
--- a/packages/block-library/src/post-author-avatar/editor.scss
+++ b/packages/block-library/src/post-author-avatar/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-post-author-avatar {
 	width: fit-content;
 
-	.wp-block-post-author-avatar__placeholder{
+	.wp-block-post-author-avatar__placeholder {
 		width: 100%;
 		height: 100%;
 		stroke: currentColor;

From 8c792ffb52c019debc7f9e15eb506af511f7a060 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Mon, 31 Jan 2022 10:51:08 +0100
Subject: [PATCH 09/12] Re-add the missing border style on the front (solid,
 dashed, dotted).

---
 packages/block-library/src/post-author-avatar/index.php | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index ed378a45ac40f..9c2d08266a7be 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -69,6 +69,14 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 		$image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
 	}
 
+	// Add border style (solid, dashed, dotted ).
+	$has_border_style = ! empty( $attributes['style']['border']['style'] );
+
+	if ( $has_border_style ) {
+		$border_style = $attributes['style']['border']['style'];
+		$image_styles[] = sprintf( 'border-style: %s;', esc_attr( $border_style ) );
+	}
+
 	// Add border classes to the avatar image for both custom colors and palette colors.
 	$image_classes = '';
 	if ( $has_border_color || isset( $attributes['borderColor'] ) ) {

From 992a4e7ddd13466b6a41bfd47dac3d8a4bac4708 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Mon, 31 Jan 2022 11:15:23 +0100
Subject: [PATCH 10/12] PHP linting

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

diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index 9c2d08266a7be..636831e4feb16 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -73,7 +73,7 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	$has_border_style = ! empty( $attributes['style']['border']['style'] );
 
 	if ( $has_border_style ) {
-		$border_style = $attributes['style']['border']['style'];
+		$border_style   = $attributes['style']['border']['style'];
 		$image_styles[] = sprintf( 'border-style: %s;', esc_attr( $border_style ) );
 	}
 

From a8e9fb76274c8a4b4b0f6b8dbec40d937ea5f7b1 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Tue, 1 Feb 2022 11:22:21 +0100
Subject: [PATCH 11/12] Fix class name and alt text inconsistencies, add
 aria-label

---
 .../block-library/src/post-author-avatar/edit.js    |  8 ++++++--
 .../src/post-author-avatar/editor.scss              |  1 -
 .../block-library/src/post-author-avatar/index.php  | 13 +++++++++----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/post-author-avatar/edit.js b/packages/block-library/src/post-author-avatar/edit.js
index aa5b4460dc45b..0d31f2086c006 100644
--- a/packages/block-library/src/post-author-avatar/edit.js
+++ b/packages/block-library/src/post-author-avatar/edit.js
@@ -21,7 +21,7 @@ import {
 	Path,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { __, _x, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
 function PostAuthorAvatarEdit( {
@@ -100,8 +100,12 @@ function PostAuthorAvatarEdit( {
 	const avatarImage = avatarUrls ? (
 		<img
 			src={ avatarUrls[ avatarUrls.length - 1 ] }
-			alt={ authorDetails.name }
+			// translators: %s is the Author name.
+			alt={ sprintf( __( '%s Avatar' ), authorDetails.name ) }
 			className={ classnames(
+				'avatar',
+				'avatar-' + width,
+				'photo',
 				'wp-post-author-avatar__image',
 				colorProps.className,
 				borderProps.className
diff --git a/packages/block-library/src/post-author-avatar/editor.scss b/packages/block-library/src/post-author-avatar/editor.scss
index 46e619057e346..62d63f01c9ef9 100644
--- a/packages/block-library/src/post-author-avatar/editor.scss
+++ b/packages/block-library/src/post-author-avatar/editor.scss
@@ -6,7 +6,6 @@
 		height: 100%;
 		stroke: currentColor;
 		stroke-dasharray: 3;
-		opacity: 0.4;
 		border: $border-width dashed currentColor;
 		border-radius: inherit;
 	}
diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index 636831e4feb16..abc88540edfa2 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -87,15 +87,15 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	}
 
 	$author_name = get_the_author_meta( 'display_name', $author_id );
-	/* translators: %s is the Author name */
+	// translators: %s is the Author name.
 	$alt    = sprintf( __( '%s Avatar' ), $author_name );
 	$width  = isset( $attributes['width'] ) ? $attributes['width'] : 96;
 	$height = isset( $attributes['height'] ) ? $attributes['height'] : 96;
 
 	$avatar = get_avatar(
 		$author_id,
-		null, // Default size is unused: Use height and width instead.
-		'',   // Default gravatar.
+		$width, // Avatar size.
+		'',     // Default gravatar.
 		$alt,
 		array(
 			'height'     => $height,
@@ -108,7 +108,12 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes();
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$avatar = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-avatar__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $avatar );
+		$label = '';
+		if ( '_blank' === $attributes['linkTarget'] ) {
+			$label = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
+		}
+		// translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
+		$avatar = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-post-author-avatar__link">%4$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $label, $avatar );
 	}
 
 	return sprintf(

From 8206e6e4bf3292cf03696355034588ec82b89bdc Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Wed, 2 Feb 2022 06:52:12 +0100
Subject: [PATCH 12/12] Move the block to the list of experimental blocks,
 improve avatar link text.

---
 packages/block-library/src/index.js                     | 2 +-
 packages/block-library/src/post-author-avatar/index.php | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index d9893972b1f02..7c72fc14e9574 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -206,7 +206,6 @@ export const __experimentalGetCoreBlocks = () => [
 	termDescription,
 	queryTitle,
 	postAuthorName,
-	postAuthorAvatar,
 	postAuthorBiography,
 ];
 
@@ -252,6 +251,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 			[
 				// Experimental blocks.
 				homeLink,
+				postAuthorAvatar,
 
 				// Full Site Editing blocks.
 				...( enableFSEBlocks
diff --git a/packages/block-library/src/post-author-avatar/index.php b/packages/block-library/src/post-author-avatar/index.php
index abc88540edfa2..5ca20767f58cf 100644
--- a/packages/block-library/src/post-author-avatar/index.php
+++ b/packages/block-library/src/post-author-avatar/index.php
@@ -110,7 +110,8 @@ function render_block_core_post_author_avatar( $attributes, $content, $block ) {
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$label = '';
 		if ( '_blank' === $attributes['linkTarget'] ) {
-			$label = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
+			// translators: %s is the Author name.
+			$label = 'aria-label="' . sprintf( esc_attr__( '( %s author archive, opens in a new tab)' ), $author_name ) . '"';
 		}
 		// translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
 		$avatar = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-post-author-avatar__link">%4$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $label, $avatar );