From 28847b04ce121fd333ee364a6525d2ca7f969e10 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Sun, 19 May 2024 11:54:14 +0200
Subject: [PATCH] Update: Implement new author panel design. (#61362)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../src/components/post-author/combobox.js    |  1 +
 .../editor/src/components/post-author/hook.js |  2 +-
 .../src/components/post-author/panel.js       | 66 ++++++++++++++++++-
 .../src/components/post-author/select.js      |  1 +
 .../src/components/post-author/style.scss     |  6 ++
 .../src/components/sidebar/post-summary.js    |  2 +-
 6 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/post-author/combobox.js b/packages/editor/src/components/post-author/combobox.js
index 0ba74b072d3956..867eca7947976a 100644
--- a/packages/editor/src/components/post-author/combobox.js
+++ b/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
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-author/hook.js b/packages/editor/src/components/post-author/hook.js
index 9189736f21502a..116c354669ca8e 100644
--- a/packages/editor/src/components/post-author/hook.js
+++ b/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 };
 }
diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js
index ad2aa01dee3ab2..908617a86f2900 100644
--- a/packages/editor/src/components/post-author/panel.js
+++ b/packages/editor/src/components/post-author/panel.js
@@ -1,9 +1,36 @@
+/**
+ * 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.
@@ -11,10 +38,45 @@ import PostPanelRow from '../post-panel-row';
  * @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>
 	);
diff --git a/packages/editor/src/components/post-author/select.js b/packages/editor/src/components/post-author/select.js
index 03bb9be23060f1..e51cc288cc4530 100644
--- a/packages/editor/src/components/post-author/select.js
+++ b/packages/editor/src/components/post-author/select.js
@@ -29,6 +29,7 @@ export default function PostAuthorSelect() {
 			options={ authorOptions }
 			onChange={ setAuthorId }
 			value={ authorId }
+			hideLabelFromVision
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-author/style.scss b/packages/editor/src/components/post-author/style.scss
index 349ad712334c8d..548f781241b0a2 100644
--- a/packages/editor/src/components/post-author/style.scss
+++ b/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;
+}
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
index 807ff25c2d9ff0..839d60c3b188a2 100644
--- a/packages/editor/src/components/sidebar/post-summary.js
+++ b/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 &&