diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 432d2f35508a6f..5b84c840ce1b00 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -30,5 +30,5 @@ "type": "string" } }, - "context": [ "postId" ] + "context": [ "postType", "postId" ] } diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 84394b41531b08..e45932907251ff 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/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( { { return { value: id, label: name, }; } ) } - onChange={ ( newAuthorId ) => { - setPostAuthor( newAuthorId ); - getAuthorDetails( newAuthorId, setAuthorDetails ); + onChange={ ( nextAuthorId ) => { + editEntityRecord( 'postType', postType, postId, { + author: nextAuthorId, + } ); } } /> - props.setAttributes( { showAvatar: ! showAvatar } ) + setAttributes( { showAvatar: ! showAvatar } ) } /> { showAvatar && ( { - 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 } ) } /> @@ -156,7 +167,7 @@ function PostAuthorDisplay( { { - props.setAttributes( { align: nextAlign } ); + setAttributes( { align: nextAlign } ); } } /> - props.setAttributes( { byline: value } ) + setAttributes( { byline: value } ) } /> ) }

- { authorDetails.name } + { authorDetails?.name }

{ showBio && (

- { authorDetails.description } + { authorDetails?.description }

) } @@ -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 ( - - ); -} - export default withFontSizes( 'fontSize' )( PostAuthorEdit );