Add post author avatar block

docs/reference-guides/core-blocks.md

@@ -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 Biography
 
 The author biography. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-biography))

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-author-biography.php'        => 'core/post-author-biography',
 				'post-comment.php'                 => 'core/post-comment',

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";

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 postAuthorBiography from './post-author-biography';
 import * as postComment from './post-comment';
@@ -250,6 +251,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 			[
 				// Experimental blocks.
 				homeLink,
+				postAuthorAvatar,
 
 				// Full Site Editing blocks.
 				...( enableFSEBlocks

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

@@ -0,0 +1,53 @@
+{
+	"$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": 60
+		},
+		"height": {
+			"type": "number",
+			"default": 60
+		},
+		"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
+			},
+			"__experimentalSkipSerialization": true
+		},
+		"color": {
+			"text": false,
+			"background": false,
+			"__experimentalDuotone": "img"
+		}
+	},
+	"editorStyle": "wp-block-post-author-avatar",
+	"style": "wp-block-post-author-avatar"
+}

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

@@ -0,0 +1,184 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	ResizableBox,
+	RangeControl,
+	ToggleControl,
+	SVG,
+	Path,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf, 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 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 ? (
+		<img
+			src={ avatarUrls[ avatarUrls.length - 1 ] }
+			// 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
+			) }
+			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,
+				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 }
+		>
+			{ avatarImage }
+		</ResizableBox>
+	);
+
+	const displayAvatar = isLink ? (
+		<a
+			href="#author-pseudo-link"
+			className="wp-post-author-avatar__link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ resizableImage }
+		</a>
+	) : (
+		resizableImage
+	);
+
+	return (
+		<>
+			{ inspectorControls }
+			<figure { ...blockProps }>{ displayAvatar }</figure>
+		</>
+	);
+}
+
+export default PostAuthorAvatarEdit;

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

@@ -0,0 +1,12 @@
+.wp-block-post-author-avatar {
+	width: fit-content;
+
+	.wp-block-post-author-avatar__placeholder {
+		width: 100%;
+		height: 100%;
+		stroke: currentColor;
+		stroke-dasharray: 3;
+		border: $border-width dashed currentColor;
+		border-radius: inherit;
+	}
+}

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,
+};