Update: Implement new author panel design. (WordPress#61362)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

packages/editor/src/components/post-author/combobox.js

@@ -50,6 +50,7 @@ export default function PostAuthorCombobox() {
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleSelect }
 			allowReset={ false }
+			hideLabelFromVision
 		/>
 	);
 }

packages/editor/src/components/post-author/hook.js

@@ -59,5 +59,5 @@ export function useAuthorsQuery( search ) {
 		return fetchedAuthors;
 	}, [ authors, postAuthor ] );
 
-	return { authorId, authorOptions };
+	return { authorId, authorOptions, postAuthor };
 }

packages/editor/src/components/post-author/panel.js

@@ -1,20 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Dropdown } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
 import PostAuthorForm from './index';
 import PostPanelRow from '../post-panel-row';
+import { useAuthorsQuery } from './hook';
+
+function PostAuthorToggle( { isOpen, onClick } ) {
+	const { postAuthor } = useAuthorsQuery();
+	const authorName = postAuthor?.name || '';
+	return (
+		<Button
+			size="compact"
+			className="editor-post-author__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post link.
+			aria-label={ sprintf( __( 'Change author: %s' ), authorName ) }
+			onClick={ onClick }
+		>
+			{ authorName }
+		</Button>
+	);
+}
 
 /**
  * Renders the Post Author Panel component.
  *
  * @return {Component} The component to be rendered.
  */
 export function PostAuthor() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
 	return (
 		<PostAuthorCheck>
-			<PostPanelRow className="editor-post-author__panel">
-				<PostAuthorForm />
+			<PostPanelRow label={ __( 'Author' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					className="editor-post-author__panel-dropdown"
+					contentClassName="editor-post-author__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostAuthorToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-author">
+							<InspectorPopoverHeader
+								title={ __( 'Author' ) }
+								onClose={ onClose }
+							/>
+							<PostAuthorForm onClose={ onClose } />
+						</div>
+					) }
+				/>
 			</PostPanelRow>
 		</PostAuthorCheck>
 	);

packages/editor/src/components/post-author/select.js

@@ -29,6 +29,7 @@ export default function PostAuthorSelect() {
 			options={ authorOptions }
 			onChange={ setAuthorId }
 			value={ authorId }
+			hideLabelFromVision
 		/>
 	);
 }

packages/editor/src/components/post-author/style.scss

@@ -5,3 +5,9 @@
 .editor-post-author__panel .editor-post-panel__row-control > div {
 	width: 100%;
 }
+
+.editor-post-author__panel-dialog .editor-post-author {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}

packages/editor/src/components/sidebar/post-summary.js

@@ -81,12 +81,12 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostSchedulePanel />
 										<PostTemplatePanel />
 										<PostURLPanel />
+										<PostAuthorPanel />
 										<PostDiscussionPanel />
 										<PostSyncStatus />
 									</VStack>
 									<PostStickyPanel />
 									<PostFormatPanel />
-									<PostAuthorPanel />
 									{ isTemplate && <TemplateAreas /> }
 									{ fills }
 									{ ! isPattern &&