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 (
+
+ );
+}
/**
* 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 (
-
-
+
+ (
+
+ ) }
+ renderContent={ ( { onClose } ) => (
+
+ ) }
+ />
);
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 } ) {
+
-
{ isTemplate && }
{ fills }
{ ! isPattern &&