Site Editor: Add the Post Author component to the Page sidebar (WordP…

…ress#56368)
bph · Nov 21, 2023 · 3e42c03 · 3e42c03
1 parent ffa9ff7
commit 3e42c03
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 41 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-author/index.js b/packages/edit-post/src/components/sidebar/post-author/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-author/style.scss b/packages/edit-post/src/components/sidebar/post-author/style.scss
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -8,6 +8,7 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
+	PostAuthorPanel,
 	PostSchedulePanel,
 	PostSwitchToDraftButton,
 	PostSyncStatus,
@@ -20,7 +21,6 @@ import {
 import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
 import PostSticky from '../post-sticky';
-import PostAuthor from '../post-author';
 import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
@@ -69,7 +69,7 @@ export default function PostStatus() {
 						<PostPendingStatus />
 						<PostFormat />
 						<PostSlug />
-						<PostAuthor />
+						<PostAuthorPanel />
 						{ fills }
 						<HStack
 							style={ {

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -10,7 +10,6 @@
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/last-revision/style.scss";
-@import "./components/sidebar/post-author/style.scss";
 @import "./components/sidebar/post-format/style.scss";
 @import "./components/sidebar/post-slug/style.scss";
 @import "./components/sidebar/post-template/style.scss";

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { PostURLPanel, PostSchedulePanel } from '@wordpress/editor';
+import {
+	PostAuthorPanel,
+	PostURLPanel,
+	PostSchedulePanel,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,7 +22,7 @@ export default function PageSummary( {
 	postType,
 } ) {
 	return (
-		<VStack>
+		<VStack spacing={ 0 }>
 			<PageStatus
 				status={ status }
 				date={ date }
@@ -29,6 +33,7 @@ export default function PageSummary( {
 			<PostSchedulePanel />
 			<EditTemplate />
 			<PostURLPanel />
+			<PostAuthorPanel />
 		</VStack>
 	);
 }
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -26,6 +26,7 @@ export { default as PageAttributesParent } from './page-attributes/parent';
 export { default as PageTemplate } from './post-template';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
+export { default as PostAuthorPanel } from './post-author/panel';
 export { default as PostComments } from './post-comments';
 export { default as PostExcerpt } from './post-excerpt';
 export { default as PostExcerptCheck } from './post-excerpt/check';

diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostAuthorCheck from './check';
+import PostAuthorForm from './index';
+import PostPanelRow from '../post-panel-row';
+
+export function PostAuthor() {
+	return (
+		<PostAuthorCheck>
+			<PostPanelRow className="editor-post-author__panel">
+				<PostAuthorForm />
+			</PostPanelRow>
+		</PostAuthorCheck>
+	);
+}
+
+export default PostAuthor;
diff --git a/packages/editor/src/components/post-author/style.scss b/packages/editor/src/components/post-author/style.scss
@@ -0,0 +1,7 @@
+.editor-post-author__panel {
+	padding-top: $grid-unit-10;
+}
+
+.editor-post-author__panel .editor-post-panel__row-control > div {
+	width: 100%;
+}
diff --git a/packages/editor/src/components/post-panel-row/index.js b/packages/editor/src/components/post-panel-row/index.js
@@ -15,18 +15,10 @@ const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
 			className={ classnames( 'editor-post-panel__row', className ) }
 			ref={ ref }
 		>
-			{ label ? (
-				<>
-					<div className="editor-post-panel__row-label">
-						{ label }
-					</div>
-					<div className="editor-post-panel__row-control">
-						{ children }
-					</div>
-				</>
-			) : (
-				children
+			{ label && (
+				<div className="editor-post-panel__row-label">{ label }</div>
 			) }
+			<div className="editor-post-panel__row-control">{ children }</div>
 		</HStack>
 	);
 } );

diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
@@ -15,4 +15,7 @@
 
 .editor-post-panel__row-control {
 	flex-grow: 1;
+	min-height: $button-size;
+	display: flex;
+	align-items: center;
 }
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
@@ -3,6 +3,7 @@
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
+@import "./components/post-author/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";