use panel row

WordPress · Jun 7, 2024 · 97d22df · 97d22df
1 parent abca5d0
commit 97d22df
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js
@@ -11,26 +11,27 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import PostLastRevisionCheck from './check';
+import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
-/**
- * Renders the component for displaying the last revision of a post.
- *
- * @return {Component} The component to be rendered.
- */
-function PostLastRevision() {
-	return <PrivatePostLastRevision isLink={ false } />;
-}
-
-export function PrivatePostLastRevision( { isLink } ) {
-	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
+function usePostLastRevisionInfo() {
+	return useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
 			select( editorStore );
 		return {
 			lastRevisionId: getCurrentPostLastRevisionId(),
 			revisionsCount: getCurrentPostRevisionsCount(),
 		};
 	}, [] );
+}
+
+/**
+ * Renders the component for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostLastRevision() {
+	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
 
 	return (
 		<PostLastRevisionCheck>
@@ -39,17 +40,34 @@ export function PrivatePostLastRevision( { isLink } ) {
 					revision: lastRevisionId,
 				} ) }
 				className="editor-post-last-revision__title"
-				icon={ isLink ? undefined : backup }
+				icon={ backup }
 				iconPosition="right"
 				text={ sprintf(
 					/* translators: %s: number of revisions */
 					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }
-				variant={ isLink ? 'link' : undefined }
 			/>
 		</PostLastRevisionCheck>
 	);
 }
 
+export function PrivatePostLastRevision() {
+	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	return (
+		<PostLastRevisionCheck>
+			<PostPanelRow label={ __( 'Revisions' ) }>
+				<Button
+					href={ addQueryArgs( 'revision.php', {
+						revision: lastRevisionId,
+					} ) }
+					className="editor-private-post-last-revision__button"
+					text={ revisionsCount }
+					variant="tertiary"
+				/>
+			</PostPanelRow>
+		</PostLastRevisionCheck>
+	);
+}
+
 export default PostLastRevision;
diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
@@ -1,11 +1,6 @@
 .editor-post-last-revision__title {
 	width: 100%;
 	font-weight: 500;
-
-	&.is-link {
-		width: fit-content;
-		font-weight: unset;
-	}
 }
 
 .editor-post-last-revision__title.components-button.has-icon {
@@ -33,3 +28,7 @@
 		padding: $grid-unit-20;
 	}
 }
+
+.editor-private-post-last-revision__button {
+	display: inline-block;
+}
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
@@ -67,7 +67,6 @@ export default function PostSummary( { onActionPerformed } ) {
 							<VStack spacing={ 1 }>
 								<PostContentInformation />
 								<PostLastEditedPanel />
-								<PrivatePostLastRevision isLink />
 							</VStack>
 							{ ! isRemovedPostStatusPanel && (
 								<VStack spacing={ 2 }>
@@ -78,6 +77,7 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostAuthorPanel />
 										<PostTemplatePanel />
 										<PostDiscussionPanel />
+										<PrivatePostLastRevision />
 										<PageAttributesPanel />
 										<PostSyncStatus />
 										<BlogTitle />