Repository: Automattic/wp-calypso
Pull request #103039: Stats: Apply new navigation header to Post Details page
Author: login: dognose24
Labels: name: [Feature] Stats
description: Everything related to our analytics product at /stats/
Created: 2025-05-01T11:06:03Z | Merged: 2025-05-02T01:05:30Z

<!--
Link a related issue to this PR. If the PR does not immediately resolve the issue,
for example, it requires a separate deployment to production, avoid
using the "fixes" keyword and instead attach the [Status] Fix Inbound label to
the linked issue.
-->

Related to STATS-22

## Proposed Changes

* Apply the `PageHeader` that wraps the new `NavigationHeader` to the Post Details page.
* Pass props to the new `NavigationHeader` through the `PageHeader` wrapper.

## Why are these changes being made?
<!--
It's easy to see what a PR does but much harder to find out why it was made,
particularly when researching old changes in history. Record an explanation of
the motivation behind this change and how it will help.
-->

* Part of the project **Stats: Improve navigation**.

## Testing Instructions

<!--
Add as many details as possible to help others reproduce the issue and test the fix.
"Before / After" screenshots can also be very helpful when the change is visual.
-->

* Spin this change up with the Calypso Live branch.
* Navigate to Stats > Traffic page for a Simple site, whose post would be previewable.
* Click on any item of the `Posts & pages` module.
* Ensure the Post Details page header title, link to return to the Traffic page, and `View Post` button align with the design.

|Before|After|
|-|-|
|<img width="965" alt="截圖 2025-05-01 晚上9 37 38" src="https://github.com/user-attachments/assets/bc20f52b-64c6-403c-8760-50ae4eb76aca" />|<img width="970" alt="截圖 2025-05-01 晚上9 37 43" src="https://github.com/user-attachments/assets/f1640085-e38c-4e40-8dcb-ca4575644b1d" />|

## Pre-merge Checklist

<!--
Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.
-->

- [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [ ] [Have you written new tests](https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md) for your changes?
- [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- [ ] Have you checked for TypeScript, React or other console errors?
- [ ] Have you used memoizing on expensive computations? More info in [Memoizing with create-selector](https://github.com/Automattic/wp-calypso/blob/trunk/packages/state-utils/src/create-selector/README.md) and [Using memoizing selectors](https://react-redux.js.org/api/hooks#using-memoizing-selectors) and [Our Approach to Data](https://github.com/Automattic/wp-calypso/blob/trunk/docs/our-approach-to-data.md)
- [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    - [ ] For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages. 
- [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?



Diff:
diff --git a/client/components/navigation-header/navigation-header.scss b/client/components/navigation-header/navigation-header.scss
index 03b530ffd8cf..5bcead681749 100644
--- a/client/components/navigation-header/navigation-header.scss
+++ b/client/components/navigation-header/navigation-header.scss
@@ -28,6 +28,11 @@
 	&__right-section {
 		display: flex;
 		align-items: center;
+
+		.components-button {
+			height: 32px;
+			padding: 4px 8px;
+		}
 	}
 
 	&__back-link {
diff --git a/client/my-sites/stats/components/headers/page-header.tsx b/client/my-sites/stats/components/headers/page-header.tsx
index 47a263c33485..6e249e9d0ce8 100644
--- a/client/my-sites/stats/components/headers/page-header.tsx
+++ b/client/my-sites/stats/components/headers/page-header.tsx
@@ -5,7 +5,7 @@ import NavigationHeaderImpr, {
 } from 'calypso/components/navigation-header/navigation-header';
 import { STATS_PRODUCT_NAME, STATS_PRODUCT_NAME_IMPR } from '../../constants';
 
-function PageHeader( props: HeaderProps ) {
+function PageHeader( { titleProps, ...otherProps }: HeaderProps ) {
 	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
 
 	if ( isOdysseyStats ) {
@@ -15,8 +15,9 @@ function PageHeader( props: HeaderProps ) {
 				titleProps={ {
 					title: STATS_PRODUCT_NAME,
 					titleLogo: <JetpackLogo size={ 24 } monochrome={ false } />,
+					...titleProps,
 				} }
-				{ ...props }
+				{ ...otherProps }
 			/>
 		);
 	}
@@ -26,8 +27,9 @@ function PageHeader( props: HeaderProps ) {
 			className="stats__section-header modernized-header"
 			titleProps={ {
 				title: STATS_PRODUCT_NAME_IMPR,
+				...titleProps,
 			} }
-			{ ...props }
+			{ ...otherProps }
 		/>
 	);
 }
diff --git a/client/my-sites/stats/stats-post-detail/index.jsx b/client/my-sites/stats/stats-post-detail/index.jsx
index a0979657a67a..dfab0043e67a 100644
--- a/client/my-sites/stats/stats-post-detail/index.jsx
+++ b/client/my-sites/stats/stats-post-detail/index.jsx
@@ -1,6 +1,7 @@
 import config from '@automattic/calypso-config';
 import { Button } from '@automattic/components';
 import { localizeUrl } from '@automattic/i18n-utils';
+import { Button as CoreButton } from '@wordpress/components';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
 import { flowRight } from 'lodash';
@@ -16,6 +17,7 @@ import JetpackColophon from 'calypso/components/jetpack-colophon';
 import NavigationHeader from 'calypso/components/navigation-header';
 import WebPreview from 'calypso/components/web-preview';
 import { decodeEntities, stripHTML } from 'calypso/lib/formatting';
+import PageHeader from 'calypso/my-sites/stats/components/headers/page-header';
 import Main from 'calypso/my-sites/stats/components/stats-main';
 import { getSitePost, getPostPreviewUrl } from 'calypso/state/posts/selectors';
 import { countPostLikes } from 'calypso/state/posts/selectors/count-post-likes';
@@ -190,6 +192,19 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		// TODO: Refactor navigationItems to a single object with backLink and title attributes.
+		const navigationItems = this.getNavigationItemsWithTitle( this.getTitle() );
+
+		const backLinkProps = {
+			text: navigationItems[ 0 ].label,
+			url: navigationItems[ 0 ].href,
+		};
+		const titleProps = {
+			title: navigationItems[ 1 ].label,
+			// Remove the default logo for Odyssey stats.
+			titleLogo: null,
+		};
+
 		return (
 			<Main fullWidthLayout>
 				<PageViewTracker
@@ -200,13 +215,27 @@ class StatsPostDetail extends Component {
 				{ siteId && <QueryPostStats siteId={ siteId } postId={ postId } /> }
 
 				<div className={ postDetailPageClasses }>
-					<NavigationHeader navigationItems={ this.getNavigationItemsWithTitle( this.getTitle() ) }>
-						{ showViewLink && (
-							<Button onClick={ this.openPreview }>
-								<span>{ actionLabel }</span>
-							</Button>
-						) }
-					</NavigationHeader>
+					{ config.isEnabled( 'stats/navigation-improvement' ) ? (
+						<PageHeader
+							backLinkProps={ backLinkProps }
+							titleProps={ titleProps }
+							rightSection={
+								showViewLink && (
+									<CoreButton onClick={ this.openPreview } variant="primary">
+										<span>{ actionLabel }</span>
+									</CoreButton>
+								)
+							}
+						/>
+					) : (
+						<NavigationHeader navigationItems={ navigationItems }>
+							{ showViewLink && (
+								<Button onClick={ this.openPreview }>
+									<span>{ actionLabel }</span>
+								</Button>
+							) }
+						</NavigationHeader>
+					) }
 
 					<PostDetailHighlightsSection siteId={ siteId } postId={ postId } post={ passedPost } />
 


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR applies a new navigation header to the Post Details page by wrapping the new NavigationHeader in a PageHeader component and conditionally rendering it based on a feature flag.  
- Updated the Post Details page to use PageHeader when the 'stats/navigation-improvement' feature is enabled.  
- Refactored the PageHeader component to accept and forward HeaderProps to the NavigationHeader implementation.  
- Exported HeaderProps from the NavigationHeader module for improved type sharing and clarity.

### Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| client/my-sites/stats/stats-post-detail/index.jsx | Introduces conditional rendering for the navigation header using the new PageHeader wrapper. |
| client/my-sites/stats/components/headers/page-header.tsx | Updates the PageHeader component to accept HeaderProps and forwards additional props to the improved navigation header. |
| client/components/navigation-header/navigation-header.tsx | Exports HeaderProps to be used by other components. |


<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**client/my-sites/stats/components/headers/page-header.tsx:3**
* [nitpick] The alias 'NavigationHeaderImpr' may be ambiguous. Consider renaming it to 'ImprovedNavigationHeader' for clearer intent.
```
import NavigationHeaderImpr, {
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T11:06:45Z
user: login: dognose24
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T13:14:23Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR updates the Post Details page to use the new PageHeader component with NavigationHeader improvements, in support of the overall Stats navigation improvements.  
- Introduces the new PageHeader with backLink and title props on the Post Details page.  
- Adjusts the conditional rendering logic to use either the new PageHeader or the legacy NavigationHeader based on a feature flag.  
- Exports HeaderProps from NavigationHeader to facilitate prop type sharing with PageHeader.

### Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

| File | Description |
| ---- | ----------- |
| client/my-sites/stats/stats-post-detail/index.jsx | Adds PageHeader integration and prepares navigation props for the new header. |
| client/my-sites/stats/components/headers/page-header.tsx | Modifies PageHeader to accept and spread HeaderProps for both legacy and modern header scenarios. |
| client/components/navigation-header/navigation-header.tsx | Exports the HeaderProps interface for external consumption. |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T13:15:36Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR applies the new navigation header design to the Post Details page by integrating the PageHeader component to conditionally display either the updated PageHeader or the legacy NavigationHeader based on configuration.  
- Replaces the NavigationHeader with PageHeader when the 'stats/navigation-improvement' flag is enabled  
- Prepares navigation items by splitting them into backLinkProps and titleProps for improved clarity and design consistency

### Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| client/my-sites/stats/stats-post-detail/index.jsx | Implements conditional rendering to support the new PageHeader component and refactors navigation items preparation |
| client/my-sites/stats/components/headers/page-header.tsx | Updates the PageHeader component to receive and spread additional HeaderProps |
| client/components/navigation-header/navigation-header.tsx | Exports HeaderProps interface for consistency and better integration |

<details>
<summary>Files not reviewed (1)</summary>

* **client/components/navigation-header/navigation-header.scss**: Language not supported
</details>



state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T13:43:56Z
user: login: dognose24
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T13:44:38Z
user: login: dognose24
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T13:49:36Z
user: login: kangzj
body: It works well on Calypso; however on Odyssey, it show a Jetpack icon on the left and the button to view post doesn't show:

<img width="1305" alt="image" src="https://github.com/user-attachments/assets/c7203432-9756-44dc-afc8-5eaa87545ca6" />

Happy for you to ship and iterate as it's still behind the feature flag.

state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T22:17:01Z
user: login: kangzj
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T22:18:24Z
user: login: dognose24
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T23:10:13Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR updates the Post Details page to use the new PageHeader wrapper for improved navigation as part of the Stats navigation improvements.  
- Conditional rendering of PageHeader with backLinkProps and titleProps when the 'stats/navigation-improvement' feature flag is enabled.  
- Fallback to the existing NavigationHeader when the feature flag is disabled.  
- Updated PageHeader to merge provided titleProps with default header properties.

### Reviewed Changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| client/my-sites/stats/stats-post-detail/index.jsx | Implements conditional rendering of PageHeader with prepared navigation props. |
| client/my-sites/stats/components/headers/page-header.tsx | Refactors PageHeader to accept titleProps and spread additional props appropriately. |

<details>
<summary>Files not reviewed (1)</summary>

* **client/components/navigation-header/navigation-header.scss**: Language not supported
</details>



state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T23:11:37Z
user: login: kangzj
body: :shipit: 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-02T01:03:51Z

Review comments:
diff_hunk: @@ -190,6 +191,17 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		const navigationItems = this.getNavigationItemsWithTitle( this.getTitle() );
+
+		const backLinkProps = {
+			text: navigationItems[ 0 ].label,
+			url: navigationItems[ 0 ].href,
+		};
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: Copilot
body: Accessing navigationItems[0] assumes the array is non-empty. Consider adding a safeguard or a clear expectation in the code that this array will always have at least one element.
```suggestion
		const backLinkProps = navigationItems.length > 0
			? {
				text: navigationItems[ 0 ].label,
				url: navigationItems[ 0 ].href,
			}
			: {
				text: translate( 'Back' ),
				url: '#',
			};
```
created_at: 2025-05-01T11:06:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -190,6 +191,17 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		const navigationItems = this.getNavigationItemsWithTitle( this.getTitle() );
+
+		const backLinkProps = {
+			text: navigationItems[ 0 ].label,
+			url: navigationItems[ 0 ].href,
+		};
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: dognose24
body: Even though `navigationItems` is guaranteed to have two items, it still requires refactoring after flipping the `stats/navigation-improvement` feature flag.
created_at: 2025-05-01T13:14:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -190,6 +191,17 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		// TODO: Refactor navigationItems to a single object with backLink and title attributes.
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: Copilot
body: Consider addressing this TODO sooner to simplify prop construction by consolidating navigationItems into a single object, which may improve code clarity and maintainability.
created_at: 2025-05-01T13:15:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -200,13 +212,17 @@ class StatsPostDetail extends Component {
 				{ siteId && <QueryPostStats siteId={ siteId } postId={ postId } /> }
 
 				<div className={ postDetailPageClasses }>
-					<NavigationHeader navigationItems={ this.getNavigationItemsWithTitle( this.getTitle() ) }>
-						{ showViewLink && (
-							<Button onClick={ this.openPreview }>
-								<span>{ actionLabel }</span>
-							</Button>
-						) }
-					</NavigationHeader>
+					{ config.isEnabled( 'stats/navigation-improvement' ) ? (
+						<PageHeader backLinkProps={ backLinkProps } titleProps={ titleProps } />
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: Copilot
body: [nitpick] The new PageHeader branch does not render any children (like the 'View' button included in the fallback NavigationHeader branch). If this omission is unintentional, consider passing children or handling this UI element consistently across both branches.
```suggestion
						<PageHeader backLinkProps={ backLinkProps } titleProps={ titleProps }>
							{ showViewLink && (
								<Button onClick={ this.openPreview }>
									<span>{ actionLabel }</span>
								</Button>
							) }
						</PageHeader>
```
created_at: 2025-05-01T13:15:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -190,6 +191,17 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		// TODO: Refactor navigationItems to a single object with backLink and title attributes.
+		const navigationItems = this.getNavigationItemsWithTitle( this.getTitle() );
+
+		const backLinkProps = {
+			text: navigationItems[ 0 ].label,
+			url: navigationItems[ 0 ].href,
+		};
+		const titleProps = {
+			title: navigationItems[ 1 ].label,
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: Copilot
body: Consider updating the navigationItems structure to use a single object with separate backLink and title keys, rather than relying on array indices. This change would reduce the risk of errors if the expected array structure changes.
```suggestion
		// Refactored navigationItems to a single object with backLink and title attributes.
		const navigationItems = this.getNavigationItemsWithTitle( this.getTitle() );

		const backLinkProps = {
			text: navigationItems.backLink.label,
			url: navigationItems.backLink.href,
		};
		const titleProps = {
			title: navigationItems.title.label,
```
created_at: 2025-05-01T13:43:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -200,13 +212,27 @@ class StatsPostDetail extends Component {
 				{ siteId && <QueryPostStats siteId={ siteId } postId={ postId } /> }
 
 				<div className={ postDetailPageClasses }>
-					<NavigationHeader navigationItems={ this.getNavigationItemsWithTitle( this.getTitle() ) }>
-						{ showViewLink && (
-							<Button onClick={ this.openPreview }>
-								<span>{ actionLabel }</span>
-							</Button>
-						) }
-					</NavigationHeader>
+					{ config.isEnabled( 'stats/navigation-improvement' ) ? (
+						<PageHeader
+							backLinkProps={ backLinkProps }
+							titleProps={ titleProps }
+							rightSection={
+								showViewLink && (
+									<Button onClick={ this.openPreview } primary>
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: dognose24
body: Any idea about whether we should use Button from `@automattic/components` or `@wordpress/components`?
created_at: 2025-05-01T13:44:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -190,6 +191,17 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		// TODO: Refactor navigationItems to a single object with backLink and title attributes.
+		const navigationItems = this.getNavigationItemsWithTitle( this.getTitle() );
+
+		const backLinkProps = {
+			text: navigationItems[ 0 ].label,
+			url: navigationItems[ 0 ].href,
+		};
+		const titleProps = {
+			title: navigationItems[ 1 ].label,
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: dognose24
body: Even though `navigationItems` is guaranteed to have two items, it still requires refactoring after flipping the `stats/navigation-improvement` feature flag.
created_at: 2025-05-01T13:49:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -200,13 +212,27 @@ class StatsPostDetail extends Component {
 				{ siteId && <QueryPostStats siteId={ siteId } postId={ postId } /> }
 
 				<div className={ postDetailPageClasses }>
-					<NavigationHeader navigationItems={ this.getNavigationItemsWithTitle( this.getTitle() ) }>
-						{ showViewLink && (
-							<Button onClick={ this.openPreview }>
-								<span>{ actionLabel }</span>
-							</Button>
-						) }
-					</NavigationHeader>
+					{ config.isEnabled( 'stats/navigation-improvement' ) ? (
+						<PageHeader
+							backLinkProps={ backLinkProps }
+							titleProps={ titleProps }
+							rightSection={
+								showViewLink && (
+									<Button onClick={ this.openPreview } primary>
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: kangzj
body: I think we should use Core than A8C components if possible.
created_at: 2025-05-01T22:18:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -200,13 +212,27 @@ class StatsPostDetail extends Component {
 				{ siteId && <QueryPostStats siteId={ siteId } postId={ postId } /> }
 
 				<div className={ postDetailPageClasses }>
-					<NavigationHeader navigationItems={ this.getNavigationItemsWithTitle( this.getTitle() ) }>
-						{ showViewLink && (
-							<Button onClick={ this.openPreview }>
-								<span>{ actionLabel }</span>
-							</Button>
-						) }
-					</NavigationHeader>
+					{ config.isEnabled( 'stats/navigation-improvement' ) ? (
+						<PageHeader
+							backLinkProps={ backLinkProps }
+							titleProps={ titleProps }
+							rightSection={
+								showViewLink && (
+									<Button onClick={ this.openPreview } primary>
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: dognose24
body: Updated in [a3c87d7](https://github.com/Automattic/wp-calypso/pull/103039/commits/a3c87d79cd49ca73cfd6098d43207628f1c5ed94). 🙂
created_at: 2025-05-01T23:10:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -190,6 +192,17 @@ class StatsPostDetail extends Component {
 			'is-odyssey-stats': isWPAdmin,
 		} );
 
+		// TODO: Refactor navigationItems to a single object with backLink and title attributes.
path: client/my-sites/stats/stats-post-detail/index.jsx
user: login: Copilot
body: Consider refactoring 'navigationItems' to use a structured object with named properties (e.g., backLink and title) instead of relying on array indexes. This would make the code clearer and reduce the risk of index-related errors.
created_at: 2025-05-01T23:11:37Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-01T11:06:17Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-142473">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-142473%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-142473">https://calypso.live?image=registry.a8c.com/calypso/app:build-142473</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-142473&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-142473%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-142473&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-142473&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-142473&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-142473%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-142473&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-142473&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-05-01T11:06:24Z
body: <!-- icfy-watermark: c52822 -->
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

**Sections** (~52 bytes added 📈 [gzipped])
<details>

```
name   parsed_size           gzip_size
stats       +440 B  (+0.0%)      +52 B  (+0.0%)
```

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.
</details>

**Async-loaded Components** (~141 bytes added 📈 [gzipped])
<details>

```
name                                                 parsed_size           gzip_size
async-load-calypso-my-sites-stats-stats-post-detail       +416 B  (+1.2%)     +141 B  (+1.4%)
```

React components that are loaded lazily, when a certain part of UI is displayed for the first time.
</details>

**Legend**
<details>
<summary>What is parsed and gzip size?</summary>

**Parsed Size:** Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
**Gzip Size:** Compressed size of the JS and CSS files. This much data needs to be downloaded over network.
</details>

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-05-01T13:24:34Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* odyssey-stats

To test WordPress.com changes, run `install-plugin.sh $pluginSlug update/apply_new_page_header_to_post_details_page` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: dognose24
created_at: 2025-05-01T22:32:23Z
body: > however on Odyssey, it show a Jetpack icon on the left and the button to view post doesn't show

I think it's because the Jetpack site **does not** support the post preview.
https://github.com/Automattic/wp-calypso/blob/0a0163f7bcc0b70f9e5e3fc26a62d03858c37e80/client/my-sites/stats/stats-post-detail/index.jsx#L301
author_association: CONTRIBUTOR
user: login: kangzj
created_at: 2025-05-01T23:28:52Z
body: > I think it's because the Jetpack site does not support the post preview.

Ah right, we might want it, but it'll be another PR I suppose.

We probably still wouldn't like the little logo for the post details page tho:

<img width="1305" alt="Screenshot 2025-05-02 at 10 15 40 AM" src="https://github.com/user-attachments/assets/228b5028-ed02-47c9-92be-748d1a71c9bc" />

author_association: CONTRIBUTOR
user: login: dognose24
created_at: 2025-05-01T23:51:25Z
body: > We probably still wouldn't like the little logo for the post details page tho:

Good catch! Addressed in [1e520ee](https://github.com/Automattic/wp-calypso/pull/103039/commits/1e520ee25c09dfa54afb98e145e4074bd044aa2a).

A redundant padding originates from `.wp-admin .is-section-stats .has-fixed-nav`, which could be addressed in another pull request.

<img width="1095" alt="截圖 2025-05-02 清晨7 49 21" src="https://github.com/user-attachments/assets/dd3c8c87-2815-4eb9-9591-22e350ba34ff" />
author_association: CONTRIBUTOR