Block Library: Post Author: Refactor edit to use block context (#22359)

* Block Library: Post Author: Refactor edit to use block context

* Block Library: Post Author: Use optional chaining for author property

* Block LIbrary: Post Author: Define selector dependencies

Co-Authored-By: Zebulan Stanphill <zebulanstanphill@users.noreply.github.com>

Co-authored-by: Zebulan Stanphill <zebulanstanphill@users.noreply.github.com>

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

@@ -30,5 +30,5 @@
 			"type": "string"
 		}
 	},
-	"context": [ "postId" ]
+	"context": [ "postType", "postId" ]
 }

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

@@ -7,9 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
-import { useRef, useState } from '@wordpress/element';
-import { useEntityProp } from '@wordpress/core-data';
+import { useRef } from '@wordpress/element';
 import {
 	AlignmentToolbar,
 	BlockControls,
@@ -21,32 +19,44 @@ import {
 	withFontSizes,
 } from '@wordpress/block-editor';
 import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 const DEFAULT_AVATAR_SIZE = 24;
 
-async function getAuthorDetails( authorId, setAuthorDetails ) {
-	const authorDetails = await apiFetch( {
-		path: '/wp/v2/users/' + authorId + '?context=edit',
-	} );
-	setAuthorDetails( authorDetails );
-}
-
-function PostAuthorDisplay( {
-	postAuthor,
-	setPostAuthor,
-	authorDetails,
-	setAuthorDetails,
-	props,
+function PostAuthorEdit( {
+	isSelected,
+	fontSize,
+	setFontSize,
+	context,
+	attributes,
+	setAttributes,
 } ) {
-	const ref = useRef();
+	const { postType, postId } = context;
+
+	const { authorId, authorDetails, authors } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getUser, getAuthors } = select(
+				'core'
+			);
+			const _authorId = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			)?.author;
+
+			return {
+				authorId: _authorId,
+				authorDetails: _authorId ? getUser( _authorId ) : null,
+				authors: getAuthors(),
+			};
+		},
+		[ postType, postId ]
+	);
 
-	const { authors } = useSelect( ( select ) => ( {
-		authors: select( 'core' ).getAuthors(),
-	} ) );
+	const { editEntityRecord } = useDispatch( 'core' );
 
-	const { isSelected, fontSize, setFontSize } = props;
+	const ref = useRef();
 	const {
 		TextColor,
 		BackgroundColor,
@@ -73,7 +83,7 @@ function PostAuthorDisplay( {
 		[ fontSize.size ]
 	);
 
-	const { align, showAvatar, showBio, byline } = props.attributes;
+	const { align, showAvatar, showBio, byline } = attributes;
 
 	const avatarSizes = [];
 	if ( authorDetails ) {
@@ -86,8 +96,8 @@ function PostAuthorDisplay( {
 	}
 
 	let avatarSize = DEFAULT_AVATAR_SIZE;
-	if ( !! props.attributes.avatarSize ) {
-		avatarSize = props.attributes.avatarSize;
+	if ( !! attributes.avatarSize ) {
+		avatarSize = attributes.avatarSize;
 	}
 
 	const blockClassNames = classnames( 'wp-block-post-author', {
@@ -103,32 +113,33 @@ function PostAuthorDisplay( {
 				<PanelBody title={ __( 'Author Settings' ) }>
 					<SelectControl
 						label={ __( 'Author' ) }
-						value={ postAuthor }
+						value={ authorId }
 						options={ authors.map( ( { id, name } ) => {
 							return {
 								value: id,
 								label: name,
 							};
 						} ) }
-						onChange={ ( newAuthorId ) => {
-							setPostAuthor( newAuthorId );
-							getAuthorDetails( newAuthorId, setAuthorDetails );
+						onChange={ ( nextAuthorId ) => {
+							editEntityRecord( 'postType', postType, postId, {
+								author: nextAuthorId,
+							} );
 						} }
 					/>
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }
 						onChange={ () =>
-							props.setAttributes( { showAvatar: ! showAvatar } )
+							setAttributes( { showAvatar: ! showAvatar } )
 						}
 					/>
 					{ showAvatar && (
 						<SelectControl
 							label={ __( 'Avatar size' ) }
-							value={ props.attributes.avatarSize }
+							value={ attributes.avatarSize }
 							options={ avatarSizes }
 							onChange={ ( size ) => {
-								props.setAttributes( {
+								setAttributes( {
 									avatarSize: Number( size ),
 								} );
 							} }
@@ -138,7 +149,7 @@ function PostAuthorDisplay( {
 						label={ __( 'Show bio' ) }
 						checked={ showBio }
 						onChange={ () =>
-							props.setAttributes( { showBio: ! showBio } )
+							setAttributes( { showBio: ! showBio } )
 						}
 					/>
 				</PanelBody>
@@ -156,7 +167,7 @@ function PostAuthorDisplay( {
 				<AlignmentToolbar
 					value={ align }
 					onChange={ ( nextAlign ) => {
-						props.setAttributes( { align: nextAlign } );
+						setAttributes( { align: nextAlign } );
 					} }
 				/>
 				<BlockColorsStyleSelector
@@ -202,16 +213,16 @@ function PostAuthorDisplay( {
 									] }
 									value={ byline }
 									onChange={ ( value ) =>
-										props.setAttributes( { byline: value } )
+										setAttributes( { byline: value } )
 									}
 								/>
 							) }
 							<p className="wp-block-post-author__name">
-								{ authorDetails.name }
+								{ authorDetails?.name }
 							</p>
 							{ showBio && (
 								<p className={ 'wp-block-post-author__bio' }>
-									{ authorDetails.description }
+									{ authorDetails?.description }
 								</p>
 							) }
 						</div>
@@ -222,32 +233,4 @@ function PostAuthorDisplay( {
 	);
 }
 
-function PostAuthorEdit( props ) {
-	const [ postAuthor, setPostAuthor ] = useEntityProp(
-		'postType',
-		'post',
-		'author'
-	);
-
-	const [ authorDetails, setAuthorDetails ] = useState( false );
-
-	if ( ! postAuthor ) {
-		return 'Post Author Placeholder';
-	}
-
-	if ( ! authorDetails ) {
-		getAuthorDetails( postAuthor, setAuthorDetails );
-	}
-
-	return (
-		<PostAuthorDisplay
-			postAuthor={ postAuthor }
-			setPostAuthor={ setPostAuthor }
-			authorDetails={ authorDetails }
-			setAuthorDetails={ setAuthorDetails }
-			props={ props }
-		/>
-	);
-}
-
 export default withFontSizes( 'fontSize' )( PostAuthorEdit );