Reader Recent Feed Overhaul: Add mobile view #96127

allilevine · 2024-11-06T23:24:41Z

Related to https://github.com/Automattic/loop/issues/193

Proposed Changes

Add responsive styling and column separation.
Open posts full screen on mobile screen sizes.
Some cleanup to prevent a console warning.
No go: adding a back button from the full post.

Screen.Recording.2024-11-07.at.11.08.10.AM.mov

Why are these changes being made?

See pe7F0s-2iv-p2

Testing Instructions

Go to /read?flags=reader/recent-feed-overhaul
View at different screen sizes.
Click into a post on desktop and it should open on the right.
Click into a post on mobile and it should open full screen.

Note, there's no back button from the full post yet.

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-11-06T23:24:55Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-11-06T23:31: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 add/reader-recent-overhaul-mobile-view on your sandbox.

matticbot · 2024-11-06T23:32:43Z

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

Sections (~53 bytes added 📈 [gzipped])

name    parsed_size           gzip_size
reader       +114 B  (+0.0%)      +53 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.

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.

allilevine · 2024-11-07T15:53:38Z

client/reader/recent/index.tsx


-		// Create a map of posts for all items
-		streamData?.items?.forEach( ( item: ReaderPost ) => {
+	const posts = useSelector( ( state: AppState ) => {


I separated and refactored the selectors to prevent a console warning about them being recreated too often.

allilevine · 2024-11-07T15:54:01Z

client/reader/recent/index.tsx

 			const post = getPostByKey( state, {
-				feedId: +item.blogId,
-				postId: +item.postId,
+				feedId: item.blogId,


I removed the conversion to a number as unnecessary (we get a number from the store).

allilevine · 2024-11-07T15:56:02Z

client/reader/style.scss

@@ -7,7 +7,7 @@ body.is-section-reader {
 			padding: 24px;
 			border-block-end: 1px solid var(--studio-gray-0);
 		}
-		.layout__primary > div {
+		.layout__primary > div:not(:has(.recent-feed)) {


This is a bit hacky but prevents a box shadow around the two columns.

allilevine · 2024-11-07T16:23:28Z

client/reader/recent/style.scss

+					max-width: 125px;
+				}
+
+				@media ( min-width: 1540px ) {


I'm using a custom breakpoint here to prevent squishing the featured image at a specific screen size.

DustyReagan

LGTM!

commit 32d3e82 Author: Richard Ortiz <[email protected]> Date: Fri Nov 8 12:16:03 2024 +0100 Global Styles on Personal: Added FEATURE_STYLE_CUSTOMIZATION to Personal Plan (#96159) * Added FEATURE_STYLE_CUSTOMIZATION to Personal plan when the feature flag is enabled * Fixed code style issue. Added the feature to the upgrade comparison table commit b4ddf2f Author: Tony Arcangelini <[email protected]> Date: Fri Nov 8 04:15:22 2024 -0600 Help Center: use support interactions (#96049) * Help Center: use support interactions * useChat hook added - account for ZD * Yeah... I know this is a lot * Fix update source to event_source * Interactions loading consistently * Fix bug when switching interaction * Fix types * minor fixup * Fix types * Fix a few bugs * Fixed get conversation function return type * Fix useEffect dependency * Working History * Working History 2 * Add stability to data fetching * Fix handoff * Fix types * Fix first reply to ZD * Fix bug in old version * Improved recent conversations * Fix tracking * Help Center: use support interactions * useChat hook added - account for ZD * Yeah... I know this is a lot * Fix update source to event_source * Interactions loading consistently * Fix bug when switching interaction * Fix types * minor fixup * Fix types * Fixed get conversation function return type * Fix a few bugs * Fix useEffect dependency * Working History * Working History 2 * Add stability to data fetching * Fix handoff * Fix types * Fix first reply to ZD * Fix bug in old version * Improved recent conversations * Fix tracking * Fix regex to convert text url --------- Co-authored-by: heavyweight <[email protected]> Co-authored-by: Renan <[email protected]> Co-authored-by: escapemanuele <[email protected]> commit 904fe23 Author: Madhu Dollu <[email protected]> Date: Fri Nov 8 12:52:45 2024 +0530 remove email upsell from checkout/thank-you page (#96138) commit f7c8207 Author: okmttdhr, tada <[email protected]> Date: Fri Nov 8 15:45:54 2024 +0900 Remove unnecessary style overrides regarding fly-out panel (#96097) commit 23a4db8 Author: Yashwin Poojary <[email protected]> Date: Fri Nov 8 09:53:50 2024 +0530 A4A > E2E tests: Creating a new E2E test user (#96132) commit 536b9b8 Author: Candy Tsai <[email protected]> Date: Fri Nov 8 11:16:19 2024 +0800 Fix the flickering of upsell banners in /hosting-config (#96141) * Fix the flickering of upsell banners in /hosting-config * Show banner for ecommerce trial commit cdd3d6b Author: Candy Tsai <[email protected]> Date: Fri Nov 8 11:15:57 2024 +0800 Update /hosting-config layout (#96136) * Move PHP version right after WordPress version * Remove period from Learn more * Remove period for Review privacy settings commit 479fd79 Author: Paulo Marcos Trentin <[email protected]> Date: Thu Nov 7 18:54:58 2024 -0300 Fixed plugin count on the old interface (#96168) commit c3ed7e2 Author: Paulo Marcos Trentin <[email protected]> Date: Thu Nov 7 17:52:00 2024 -0300 Updated auto-update copy (#96165) commit 06e5b5a Author: Paulo Marcos Trentin <[email protected]> Date: Thu Nov 7 17:16:16 2024 -0300 Jetpack cloud visual improvements for DataViews integration (#96156) * Jetpack cloud improvements: - Fixed title, edge of the table, search box, filters aligments - Fixed accent color and hover state colors - Fixed "Button style" on DataViews filters * Improved loading style commit 6aa6b9e Author: Paulo Marcos Trentin <[email protected]> Date: Thu Nov 7 17:06:05 2024 -0300 Optimized how we load plugins and improved load state (#96150) * Improved screen loading state and plugin processing speed * Test updated commit 9648a04 Author: Chris Holder <[email protected]> Date: Thu Nov 7 14:04:25 2024 -0600 Reader Recent Overhaul: Add styling for sidebar section (#96122) commit efefa75 Author: Allison Levine <[email protected]> Date: Thu Nov 7 14:23:35 2024 -0500 Reader Recent Feed Overhaul: Fix site icon (#96152) * Fix site icon for recent feed overhaul. * Use avatar as backup icon. * Fix type. commit a7444c9 Author: Allison Levine <[email protected]> Date: Thu Nov 7 13:43:14 2024 -0500 Reader Recent Feed Overhaul: Add mobile view (#96127) * Add mobile view to Recent Feed Overhaul. * Use CSS to show hide the post. * Fix featured image getting squished. * Revert type changes. commit 925549f Author: Calypso Bot <[email protected]> Date: Thu Nov 7 19:35:41 2024 +0100 chore(deps): update webpack packages (#91492) * chore(deps): update webpack packages * Update snapshots --------- Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: Chris Holder <[email protected]> commit 19b5be3 Author: Anthony Grullon <[email protected]> Date: Thu Nov 7 13:30:10 2024 -0500 Help Center: Update odie header text based on pathname condition (#96153) commit f7cd961 Author: Anthony Grullon <[email protected]> Date: Thu Nov 7 12:28:21 2024 -0500 Help Center Chat: Enhance file upload button styles for better accessibility (#96148) * Help Center Chat: Enhance file upload button styles for better accessibility * change outline color commit c68e28c Author: Roberto Aranda <[email protected]> Date: Thu Nov 7 18:14:53 2024 +0100 Performance Profiler: Remove Generated with AI badge as it confuses users (#96147) commit 9ff488f Author: Emanuele Buccelli <[email protected]> Date: Thu Nov 7 17:45:45 2024 +0100 Help Center: Fix styling padding (#96146) * Fix padding * Fix styles commit c8e6928 Author: Dusty Reagan <[email protected]> Date: Thu Nov 7 09:57:50 2024 -0600 Recent Feed Overhaul: Add FullPostView layout prop (#96072) * Add FullPostView layout prop * Styling in progress * Call translate directly * Name and follow count working * Disable showRelatedPosts if not isDefaultLayout * Added site icon * Completed header formating * Works and updated style * Remove type update * Update comment * Set a default site icon if no src exists and check for default layout commit b7e65ef Author: Gabriel Caires <[email protected]> Date: Thu Nov 7 15:41:35 2024 +0000 Post-purchase: Automatically cancel migration when user exits migration (#96123) * Refactor migration status update hook * Set migration as pending when the credentials are required * Set migration as pending when is DIY * Fix wrong type keyword * Cancel migration when user click on back button * Cancel a migration when the user select Import instead of migrate * Add tests * Rename hook * When the feature flag is off we should continue setting started commit d537efc Author: Damien Alleyne <[email protected]> Date: Thu Nov 7 11:28:49 2024 -0400 Refactor: Move global staticFilters constant to class method (#96116) * Refactor: Move global staticFilters constant to class method Follow-up to #95995 (review) * Implement code review suggestions commit fd0906b Author: Aurorum <[email protected]> Date: Thu Nov 7 15:19:13 2024 +0000 Site Address Changer: Fix Bleeding Dialog Styles (#96142) * Start new branch * Add showCloseIcon * Remove unneeded styles commit 1f1ece8 Author: Gabriel Caires <[email protected]> Date: Thu Nov 7 14:55:04 2024 +0000 Post- Purchase: Set a migration as `pending-DIFM/DIF` when user arrives on the credential/instructions step (#96103) commit 5f34350 Author: Paulo Cruz <[email protected]> Date: Thu Nov 7 10:26:02 2024 -0300 Fix duplicated email verified notice (#96125) commit 9e3be02 Author: Renan Carvalho <[email protected]> Date: Thu Nov 7 13:49:52 2024 +0100 Help Center: Add temp flag for showing simplified chat history (#96139) * Add temporary flag for displaying simplified chat history * Improve border commit 172dc36 Author: Yuliyan Slavchev <[email protected]> Date: Thu Nov 7 14:18:57 2024 +0200 localizeUrl: Update wp-login rule to support Romanian and Vietnamese (#95943) commit 6658443 Author: Ashar Fuadi <[email protected]> Date: Thu Nov 7 18:57:31 2024 +0700 Untangling: Add Marketing -> Connections (#96135) commit 7575c0f Author: Roberto Aranda <[email protected]> Date: Thu Nov 7 12:40:11 2024 +0100 Performance Profiler: Consolidate all time metrics to seconds (#96140) commit fe086b8 Author: Mikael Korpela <[email protected]> Date: Thu Nov 7 13:03:50 2024 +0200 Importer: use "import" term for CTA rather than "Start import" (#96111) commit e782f60 Author: Kosta <[email protected]> Date: Thu Nov 7 11:29:31 2024 +0100 Help Center: add image upload for chats (#96105) * HelpCenter: add upload (wip) * Minor fixes and refactoring * Changed icon * Use correct constants * Improve isAttachingFile state * Store global clientId as fallback * Fix attach button style * Move up the flag check * Improved function --------- Co-authored-by: escapemanuele <[email protected]> Co-authored-by: Anthony Grullon <[email protected]> Co-authored-by: Renan <[email protected]> commit 9f3d633 Author: Anna McPhee <[email protected]> Date: Thu Nov 7 04:08:25 2024 -0600 Stats: Chart refresh- CSS styling (#95980) * create new chart instance behind feature flag * adds a className prop to the chart * Add ChartHeader component for better composition * update show/hide legend prop for legacy vs new chart * Adds dedicated header component with title and controls props * Reorganise header layout * Adds activeTab to the chart title * remove control section for a future PR * add a showChartHeader prop * small fix to header title display * add in accidentally removed comment * add date filtering enabled CSS classname * add chart styling * remove !importants, increase title font size * adjust font weight * update axis marger border color * fix the code styling commit c787874 Author: Emanuele Buccelli <[email protected]> Date: Thu Nov 7 10:42:11 2024 +0100 Help Center: Update copy (#96076) * Update copy * Update help center copies with flag * Change the right component * Fix Odie initial message * Help is on the way * Change header text * Minimized History * Less Odie in HC --------- Co-authored-by: Anthony Grullon <[email protected]>

allilevine self-assigned this Nov 6, 2024

allilevine commented Nov 7, 2024

View reviewed changes

allilevine added 4 commits November 7, 2024 11:16

Add mobile view to Recent Feed Overhaul.

0808d97

Use CSS to show hide the post.

3bc05d8

Fix featured image getting squished.

69d5f80

Revert type changes.

ef18308

allilevine force-pushed the add/reader-recent-overhaul-mobile-view branch from 8bae4a9 to ef18308 Compare November 7, 2024 16:16

allilevine commented Nov 7, 2024

View reviewed changes

allilevine marked this pull request as ready for review November 7, 2024 16:31

allilevine requested a review from a team as a code owner November 7, 2024 16:31

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

DustyReagan approved these changes Nov 7, 2024

View reviewed changes

allilevine merged commit a7444c9 into trunk Nov 7, 2024
14 checks passed

allilevine deleted the add/reader-recent-overhaul-mobile-view branch November 7, 2024 18:43

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reader Recent Feed Overhaul: Add mobile view #96127

Reader Recent Feed Overhaul: Add mobile view #96127

allilevine commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited by matticbot

Loading

matticbot commented Nov 6, 2024 •

edited

Loading

matticbot commented Nov 6, 2024 •

edited

Loading

allilevine Nov 7, 2024

allilevine Nov 7, 2024

allilevine Nov 7, 2024

allilevine Nov 7, 2024

DustyReagan left a comment

Reader Recent Feed Overhaul: Add mobile view #96127

Reader Recent Feed Overhaul: Add mobile view #96127

Conversation

allilevine commented Nov 6, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Nov 6, 2024 • edited by matticbot Loading

matticbot commented Nov 6, 2024 • edited Loading

matticbot commented Nov 6, 2024 • edited Loading

allilevine Nov 7, 2024

Choose a reason for hiding this comment

allilevine Nov 7, 2024

Choose a reason for hiding this comment

allilevine Nov 7, 2024

Choose a reason for hiding this comment

allilevine Nov 7, 2024

Choose a reason for hiding this comment

DustyReagan left a comment

Choose a reason for hiding this comment

allilevine commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited by matticbot

Loading

matticbot commented Nov 6, 2024 •

edited

Loading

matticbot commented Nov 6, 2024 •

edited

Loading