Add post author avatar block

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
 

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',

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,
 ];
 
 /**

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"
+		}
+	}
+}

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;

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