Reader full post page - add global sidebar and content frame #91990

Addison-Stavlo · 2024-06-20T14:13:22Z

Related to # #92025

Proposed Changes

Updates the full post page to use the new global sidebar for reader and new content frame. Removes old admin bar.
Updates the global sidebar and reader global sidebar to use/pass an optional onClose callback for more contextual back button functionality from the full-post-page (such as firing appropriate tracks/stats events).
Updates the recommended posts component css to be more consistent with potential site title length.

BEFORE

AFTER

Why are these changes being made?

We updated the global (non-site specific) regions of dotcom to have a new interface with a global sidebar and content area/frame. The full-post-page in the reader was never adapted for this, creating an inconsistent experience between reader streams and full post view.

Testing Instructions

Run this calypso branch.
Visit full post page for both blogs and feeds. (you can find one through Read vs. the other through discover).
verify the sidebar is visible and the top admin bar is gone.
test various breakpoints and ensure the layout and scrolling remains good.
verify the author details disappear once they no longer fit side-by-side with the article content.
press j/k shortkeys a couple times to change the posts you are viewing in full post.
press the back button in the sidebar, ensure it goes back through the posts you were looking at and eventually back to the stream you were one. Once it is at the reader stream level, it should still go back to /sites.
back on the full post page, verify you can also see the old back button above the post title on lower screen widths when the sidebar becomes toggle-able. verify this functionality is the same as the other.
verify both of the back buttons are still sending the article-closed tracking event with populated post data. you can use tracks-vigilante to help verify.
on the full post page, scroll down to the bottom for "more on WordPress.com" and look at the recommended post blocks. Update the site title in the meta to be extremely long, verify this no longer changes the width and breaks the layout.
smoke test the recommended posts blocks elsewhere, such as the recent stream and verify there are no regressions.
smoke test the sidebar in full post page and the rest of the reader.
smoke test the reader when logged-out. Currently we do not link to the full-post-page here and go directly to the blog, so there shouldn't be any changes.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests 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 and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
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)?

github-actions · 2024-06-20T14:13:34Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-111920

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-111920&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-111920&env=a8c-for-agencies

matticbot · 2024-06-20T14:24:02Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~252 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
reader                                 +1923 B  (+0.2%)     +237 B  (+0.1%)
woocommerce-installation                 +63 B  (+0.0%)      +15 B  (+0.0%)
woocommerce                              +63 B  (+0.0%)      +15 B  (+0.0%)
themes                                   +63 B  (+0.0%)      +15 B  (+0.0%)
theme                                    +63 B  (+0.0%)      +15 B  (+0.0%)
subscribers                              +63 B  (+0.0%)      +15 B  (+0.0%)
stats                                    +63 B  (+0.0%)      +15 B  (+0.0%)
staging-site                             +63 B  (+0.0%)      +15 B  (+0.0%)
sites-dashboard                          +63 B  (+0.0%)      +15 B  (+0.0%)
site-purchases                           +63 B  (+0.0%)      +15 B  (+0.0%)
site-monitoring                          +63 B  (+0.0%)      +15 B  (+0.0%)
site-logs                                +63 B  (+0.0%)      +15 B  (+0.0%)
site-blocks                              +63 B  (+0.0%)      +15 B  (+0.0%)
settings-writing                         +63 B  (+0.0%)      +15 B  (+0.0%)
settings-security                        +63 B  (+0.0%)      +15 B  (+0.0%)
settings-reading                         +63 B  (+0.0%)      +15 B  (+0.0%)
settings-podcast                         +63 B  (+0.0%)      +15 B  (+0.0%)
settings-performance                     +63 B  (+0.0%)      +15 B  (+0.0%)
settings-newsletter                      +63 B  (+0.0%)      +15 B  (+0.0%)
settings-jetpack                         +63 B  (+0.0%)      +15 B  (+0.0%)
settings-discussion                      +63 B  (+0.0%)      +15 B  (+0.0%)
settings                                 +63 B  (+0.0%)      +15 B  (+0.0%)
security                                 +63 B  (+0.0%)      +15 B  (+0.0%)
scan                                     +63 B  (+0.0%)      +15 B  (+0.0%)
purchases                                +63 B  (+0.0%)      +15 B  (+0.0%)
promote-post-i2                          +63 B  (+0.0%)      +15 B  (+0.0%)
privacy                                  +63 B  (+0.0%)      +15 B  (+0.0%)
preview                                  +63 B  (+0.0%)      +15 B  (+0.0%)
posts-custom                             +63 B  (+0.0%)      +15 B  (+0.0%)
posts                                    +63 B  (+0.0%)      +15 B  (+0.0%)
plugins                                  +63 B  (+0.0%)      +15 B  (+0.0%)
plans                                    +63 B  (+0.0%)      +15 B  (+0.0%)
people                                   +63 B  (+0.0%)      +15 B  (+0.0%)
pages                                    +63 B  (+0.0%)      +15 B  (+0.0%)
notification-settings                    +63 B  (+0.0%)      +15 B  (+0.0%)
migrate                                  +63 B  (+0.0%)      +15 B  (+0.0%)
media                                    +63 B  (+0.0%)      +15 B  (+0.0%)
me                                       +63 B  (+0.0%)      +15 B  (+0.0%)
marketplace                              +63 B  (+0.0%)      +15 B  (+0.0%)
marketing                                +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-social                           +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-search                           +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-connect                          +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-settings                   +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-pricing                    +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-plugin-management          +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-overview                   +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-features-comparison        +63 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud                            +63 B  (+0.0%)      +15 B  (+0.0%)
import                                   +63 B  (+0.0%)      +15 B  (+0.0%)
hosting-features                         +63 B  (+0.0%)      +15 B  (+0.0%)
hosting                                  +63 B  (+0.0%)      +15 B  (+0.0%)
home                                     +63 B  (+0.0%)      +15 B  (+0.0%)
help                                     +63 B  (+0.0%)      +15 B  (+0.0%)
gutenberg-editor                         +63 B  (+0.0%)      +15 B  (+0.0%)
google-my-business                       +63 B  (+0.0%)      +15 B  (+0.0%)
github-deployments                       +63 B  (+0.0%)      +15 B  (+0.0%)
export                                   +63 B  (+0.0%)      +15 B  (+0.0%)
email                                    +63 B  (+0.0%)      +15 B  (+0.0%)
earn                                     +63 B  (+0.0%)      +15 B  (+0.0%)
domains                                  +63 B  (+0.0%)      +15 B  (+0.0%)
developer                                +63 B  (+0.0%)      +15 B  (+0.0%)
customize                                +63 B  (+0.0%)      +15 B  (+0.0%)
concierge                                +63 B  (+0.0%)      +15 B  (+0.0%)
comments                                 +63 B  (+0.0%)      +15 B  (+0.0%)
checkout                                 +63 B  (+0.0%)      +15 B  (+0.0%)
backup                                   +63 B  (+0.0%)      +15 B  (+0.0%)
add-ons                                  +63 B  (+0.0%)      +15 B  (+0.0%)
activity                                 +63 B  (+0.0%)      +15 B  (+0.0%)
account-close                            +63 B  (+0.0%)      +15 B  (+0.0%)
account                                  +63 B  (+0.0%)      +15 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.

Async-loaded Components (~27 bytes added 📈 [gzipped])

name                                        parsed_size           gzip_size
async-load-calypso-reader-sidebar                +141 B  (+0.1%)      +42 B  (+0.1%)
async-load-calypso-blocks-reader-full-post        -96 B  (-0.3%)      -15 B  (-0.1%)

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

Legend

What is parsed and gzip size?

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.

Generated by performance advisor bot at iscalypsofastyet.com.

Addison-Stavlo · 2024-06-20T19:37:44Z

Some current layout/design things to note/discuss:

Currently, Greater than 1270px width means we can fit the author details and story side by side.

Once we get to 1270px and below, we hide the author details since they will no longer fit side by side. Before adding this sidebar, we showed the author details all the way down to 661px - so this change would mean they would disappear for many people using the reader.

The author details and story are now placed in a flex container side by side, we are applying space-around. Since this would get unwieldy at higher screen widths I set the container's max-width to 1200px. This is what it would look like on a 2100+px viewport

(to prevent something like)

Any thoughts on these widths, alignments, etc. ?

For problem 2 with not showing the author details. Perhaps we could update their style here to be a bit to be more horizontally biased instead of vertical and show them above the post instead. Either at all screen widths, or only when the side-by-side doesn't work. Either way could be interesting (always above and horizontal vs. only when cannot fit side-by-side.)

Addison-Stavlo · 2024-06-21T14:52:18Z

client/blocks/reader-full-post/index.jsx

+			// add extra div wrapper for consistent content frame layout/styling for reader.
+			<div>


While the changes here look like a lot, all I have done is wrap everything in an empty div. This makes the structure more consistent with the rest of the reader and able to inherit the content frame styles appropriately.

Addison-Stavlo · 2024-06-21T14:52:52Z

client/blocks/reader-full-post/index.jsx

-		recordAction( 'full_post_close' );
-		recordGaEvent( 'Closed Full Post Dialog' );
-		recordTrackForPost( 'calypso_reader_article_closed', this.props.post );


Moved these into the controller where the onClose is defined so closing via the sidebar can send them as well.

Addison-Stavlo · 2024-06-21T16:48:56Z

client/blocks/reader-related-card/style.scss

+		display: grid;
+		grid-template-columns: auto 1fr auto;


The related card width was expanding with extra long site names, breaking layout and creating hidden overflow for the full post content. This helps ensure the proper width for the site title region of the meta.

Addison-Stavlo · 2024-06-21T16:57:04Z

client/layout/global-sidebar/main.jsx

+		if ( props.onClose ) {
+			ev.preventDefault();
+			ev.stopPropagation();
+			props.onClose();


Having an onClose allows us to use the callback using the page.back handler, so that the back button always goes back to the last place and updates browser history accordingly. Just using context.lastRoute as the href creates an infinite loop of between the last 2 items when using the back button. Also, updating the sidebar to always use page.back history would be problematic for other reasons - this is only necessary from the full post page currently.

On top of the callback using page.back, it also allows us to fire the corresponding tracks/stats events when closing the full post page.

Addison-Stavlo · 2024-06-21T16:59:04Z

client/reader/full-post/controller.js

@@ -61,6 +91,21 @@ export function feedPost( context, next ) {
 			referralStream={ context.lastRoute }
 		/>
 	);
+
+	if ( isUserLoggedIn( state ) ) {
+		context.secondary = (


Note we add the sidebar here in the full post controller instead of using the sidebar middleware function we use in the main reader. This is because the full post page needs special handling/props for back button history and tracking events passed into the sidebar.

Addison-Stavlo · 2024-06-21T17:22:51Z

client/reader/full-post/controller.js

+				returnPath={ lastRoute }
+				onClose={ closer }


While we are already handling the return path and back functionality with the onClose, supplying the returnPath allows the breadcrumb url for the anchor link to be accurate.

davemart-in · 2024-06-21T19:18:54Z

Looking sharp! I noticed two small things:

The gutter padding here jumps awkwardly:

CleanShot.2024-06-21.at.15.15.35.mp4

I prefer the padding at the smaller resolution (a bit more padding) than the one that feels a tad too tight.

At smaller resolutions a back button is introduced. Let's remove this at all resolutions:

CleanShot.2024-06-21.at.15.18.04.mp4

Once those changes are in, this should be ready to ship!

Addison-Stavlo · 2024-06-21T21:12:35Z

At smaller resolutions a back button is introduced. Let's remove this at all resolutions:

I added this on purpose. If a user is browsing a stream on mobile, they shouldnt have to toggle open the sidebar every time they go back to the stream from full post. Avoiding "More clicks, less engagement" 😅

davemart-in · 2024-06-21T21:15:40Z

Gotcha. In that case, let me spend a little bit of time polishing the style up if you don't mind.

Addison-Stavlo

Sounds good @davemart-in ! I updated the gutter padding and left a couple notes below.

Addison-Stavlo · 2024-06-21T21:42:36Z

client/blocks/reader-full-post/style.scss

+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: unset;


re: adjusting the back button positioning this is where that is currently set (relative absolute on the content frame)

Addison-Stavlo · 2024-06-21T21:43:32Z

client/blocks/reader-full-post/style.scss

@@ -140,15 +107,13 @@

 .reader-full-post__story {
 	max-width: 720px;
+	padding: 0 24px;


Re: gutter padding. I got rid of the conflicting sources of padding introduced on different elements at different breakpoints and it should be consolidated here. Feel free to adjust it, but we also need to adjust the breakpoint to hide the sidebar along with this.

Addison-Stavlo · 2024-06-21T21:46:23Z

client/blocks/reader-full-post/style.scss

-
-	@include breakpoint-deprecated( "<660px" ) {
+	// hide the sidebar when it cannot fit to the side of the content.
+	@media (max-width: 1298px) {


Re: gutter padding. If we adjust that we will need to tweak this value similarly. I may look into using variables to connect these values better.

matticbot · 2024-06-24T12:39:31Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/full-post-view-for-global-sidebar on your sandbox.

add reader sidebar to full post pages

e17d1fd

Addison-Stavlo added 7 commits June 20, 2024 11:07

remove css not conditions for reader-full-post page

dd039ed

add div around reader full post content for consistency

b8560c4

make full post content a flex container

e8018c9

ensure padding for story content

738664f

hide author details when they don't fit on side

a4361b9

handle back functionality better

95c269f

move tracking for close article to trigger from sidebar as well

a8a6d93

Addison-Stavlo mentioned this pull request Jun 21, 2024

Reader full post - update with sidebar and content frame #92025

Open

Addison-Stavlo added 5 commits June 21, 2024 10:23

adjust margins and paddings

0fea3a5

fix back button

a5ebbcb

fix back button hiding title at mobile widths

2aefa3a

fix reader related card meta issues breaking layout

0f36bf1

cleanup commented out goo

ad51b29

Addison-Stavlo commented Jun 21, 2024

View reviewed changes

remove need to pass post into the close callback

68d5a35

Addison-Stavlo commented Jun 21, 2024

View reviewed changes

Addison-Stavlo self-assigned this Jun 21, 2024

Addison-Stavlo requested review from eoigal and davemart-in June 21, 2024 17:45

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 21, 2024

Addison-Stavlo marked this pull request as ready for review June 21, 2024 17:45

Addison-Stavlo requested a review from a team as a code owner June 21, 2024 17:45

Addison-Stavlo changed the title ~~Reader full post page - add global sidebar.~~ Reader full post page - add global sidebar and content frame Jun 21, 2024

update margins

234e93f

Addison-Stavlo commented Jun 21, 2024

View reviewed changes

Few minor style updates

62c8a2e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reader full post page - add global sidebar and content frame #91990

Reader full post page - add global sidebar and content frame #91990

Addison-Stavlo commented Jun 20, 2024 •

edited

Loading

github-actions bot commented Jun 20, 2024 •

edited by matticbot

Loading

matticbot commented Jun 20, 2024 •

edited

Loading

Addison-Stavlo commented Jun 20, 2024

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024

davemart-in commented Jun 21, 2024

Addison-Stavlo commented Jun 21, 2024

davemart-in commented Jun 21, 2024

Addison-Stavlo left a comment

Addison-Stavlo Jun 21, 2024

Addison-Stavlo Jun 21, 2024

Addison-Stavlo Jun 21, 2024

matticbot commented Jun 24, 2024

		// add extra div wrapper for consistent content frame layout/styling for reader.
		<div>

Reader full post page - add global sidebar and content frame #91990

Are you sure you want to change the base?

Reader full post page - add global sidebar and content frame #91990

Conversation

Addison-Stavlo commented Jun 20, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jun 20, 2024 • edited by matticbot Loading

matticbot commented Jun 20, 2024 • edited Loading

Addison-Stavlo commented Jun 20, 2024

Addison-Stavlo Jun 21, 2024 • edited Loading

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024 • edited Loading

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024 • edited Loading

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024 • edited Loading

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024

Choose a reason for hiding this comment

davemart-in commented Jun 21, 2024

Addison-Stavlo commented Jun 21, 2024

davemart-in commented Jun 21, 2024

Addison-Stavlo left a comment

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024

Choose a reason for hiding this comment

Addison-Stavlo Jun 21, 2024

Choose a reason for hiding this comment

matticbot commented Jun 24, 2024

Addison-Stavlo commented Jun 20, 2024 •

edited

Loading

github-actions bot commented Jun 20, 2024 •

edited by matticbot

Loading

matticbot commented Jun 20, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024 •

edited

Loading

Addison-Stavlo Jun 21, 2024 •

edited

Loading