Reader Spaces: stepped create wizard + Feeds/Topics reorganization by gabrielcaires · Pull Request #112470 · Automattic/wp-calypso

gabrielcaires · 2026-07-09T12:37:44Z

Part of RSM-4651

Proposed Changes

Turn space creation into a guided multi-step wizard — Identity → Layout → Feeds → Topics — with clear Back / Next / Create navigation and a step indicator, so the options behind the former tabs aren't skipped. Editing a space keeps the tabbed layout for direct access to any section.
Reorganize the shared modal into four sections: Identity (name, icon, colors), Layout, Feeds (subscription picker), and Topics (tags + languages), each with a short description of how it's used.
Rename the user-facing "Sources" wording to "Feeds" across the modal (tab label, footer summary, edit subtitle) and the feed empty state ("Add feeds to get started"). Internal data/analytics identifiers are unchanged.
Add and update unit tests for the wizard flow, the section reorganization, and the renamed copy.

Why are these changes being made?

In the create-space modal the extra options behind the Layout and Feeds tabs were easy to overlook — users saw the tabs but skipped them, or expected Create to advance to the next tab. Walking through each section in sequence makes every option visible before the space is created, while editing keeps the faster tabbed access.

Testing Instructions

Scenario 1 - Create a space with the wizard:

Go to /reader and start the "Add a space" flow from the sidebar
Check you move through Identity → Layout → Feeds → Topics with Back / Next and a step indicator, and that the Create button appears only on the final Topics step

Scenario 2 - Name is required to advance:

Start the create wizard on the Identity step
Check that Next stays disabled until a valid space name is entered, and shows a "Name is required" error when cleared

Scenario 3 - Editing keeps the tabs:

Open an existing space and choose Customize
Check the modal shows tabs Identity / Layout / Feeds / Topics / Delete, with tags and languages together under Topics

Scenario 4 - Empty state wording:

Open a Reader Space that has no feeds at /reader/spaces/<id>
Check the empty state reads "Add feeds to get started" with an Add feeds button that opens the Customize modal on the Feeds tab

Pre-merge Checklist

matticbot · 2026-07-09T12:37:51Z

Calypso Live (direct link)

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

Jetpack Cloud Live (direct link)

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

Automattic for Agencies Live (direct link)

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

Dashboard Live (dotcom) (direct link)

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

Dashboard Live (A4A) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-187583&env=dashboard-a4a

matticbot · 2026-07-09T12:49:15Z

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

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

Details

name                                   parsed_size           gzip_size
async-load-calypso-reader-sidebar          +1870 B  (+0.8%)     +443 B  (+0.7%)
async-load-calypso-reader-spaces-view      +1866 B  (+3.6%)     +443 B  (+2.8%)

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.

github-actions · 2026-07-09T12:53:19Z

Looks like one of the E2E tests has failed.

You can fix them following these steps:

Check out this branch locally:
```
gh pr checkout 112470
```
Start Claude Code in the repo:
```
claude
```
Run the /fix-e2e-tests skill, passing this PR number:
```
/fix-e2e-tests 112470
```

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR updates Reader Spaces terminology from “Sources” to “Feeds” and expands the Customize/Create Space UI by introducing a dedicated “Topics” section (tags + languages), including a guided step-by-step wizard flow for space creation.

Changes:

Rename “Sources” UI copy/tests to “Feeds” across the Spaces feed empty states and modals.
Add a new Topics tab (tags + languages) to the Customize modal and cover it with unit tests.
Replace the tab-strip with a step-based wizard during space creation, including a step indicator and updated create-flow tests.

Reviewed changes

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

Show a summary per file

File	Description
client/reader/spaces/test/view.test.tsx	Updates test expectations to “Feeds” tab/CTA wording.
client/reader/spaces/feed/test/index.test.tsx	Updates feed empty-state copy and CTA labels from “sources” to “feeds”.
client/reader/spaces/feed/components/states.tsx	Renames user-facing empty-state strings to “Add feeds…”.
client/reader/spaces/customize-modal/topics-tab.tsx	Adds new Topics tab UI for tags + languages token fields.
client/reader/spaces/customize-modal/test/topics-tab.test.tsx	Adds tests covering Topics tab rendering and change callbacks.
client/reader/spaces/customize-modal/test/index.test.tsx	Updates Customize modal tab coverage to include Feeds + Topics.
client/reader/spaces/customize-modal/style.scss	Adds wizard step styling and removes old sources description style.
client/reader/spaces/customize-modal/sources-tab.tsx	Updates helper text and switches to shared help class.
client/reader/spaces/customize-modal/index.tsx	Adds Topics tab and implements create-mode step wizard + footer controls.
client/reader/spaces/customize-modal/identity-tab.tsx	Removes tags/languages controls (moved to Topics tab).
client/reader/spaces/create-modal/test/index.test.tsx	Updates create-flow tests for the new wizard navigation and Topics step.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

gabrielcaires · 2026-07-09T13:35:27Z

+				<div className="customize-space-modal__step">
+					<h2 className="customize-space-modal__step-heading">{ currentStep.title }</h2>
+					<div className="customize-space-modal__panel">{ renderTab( currentStep.name ) }</div>
+				</div>


Checked this against the current code: ModalTab declares name: CustomizeTab, and baseTabs is typed as ModalTab[], so currentStep.name is already a CustomizeTab. No cast or type change is needed here.

gabrielcaires · 2026-07-09T13:35:28Z

+function setup( overrides: Partial< React.ComponentProps< typeof TopicsTab > > = {} ) {
+	const props: React.ComponentProps< typeof TopicsTab > = {


Fixed in ad4a7db245b by importing ComponentProps from react explicitly and using that instead of the React.ComponentProps namespace.

gabrielcaires · 2026-07-09T13:35:29Z

 			{ onAddSources && (
 				<Button variant="primary" onClick={ onAddSources }>
-					{ translate( 'Add sources' ) }
+					{ translate( 'Add feeds' ) }
 				</Button>


Keeping this internal prop as onAddSources intentionally. The Reader Spaces data model still uses sources internally (ReadSpace.sources, wire follows mapped to sources), while the user-facing UI copy now says “Feeds”. The local AGENTS.md now documents that split so future changes preserve the distinction.

Turn space creation into a guided multi-step wizard (Identity → Layout → Feeds → Topics) with Back/Next/Create navigation and a step indicator, so the options behind the former tabs aren't missed. Editing keeps the tabbed layout. Reorganize the shared modal into Identity, Layout, Feeds, and Topics (tags + languages) sections, add per-section descriptions, and rename the user-facing "Sources" wording to "Feeds" across the modal and the feed empty state. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

a8ci18n · 2026-07-09T18:23:29Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/34257290

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Hi @gabrielcaires, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

Pick the subscriptions whose posts make up this space’s main feed.
Besides posts from the feeds you follow, this space can show posts that match these tags, in the languages you choose.
Add feeds to get started
Add feeds

Thank you in advance!

gabrielcaires requested a review from Copilot July 9, 2026 12:38

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

Copilot AI reviewed Jul 9, 2026

View reviewed changes

gabrielcaires and others added 2 commits July 9, 2026 14:17

Reader Spaces: address review feedback

2df9e0c

gabrielcaires force-pushed the update/reader-RSM-4651 branch from e02618d to 2df9e0c Compare July 9, 2026 13:18

Reader Spaces: clarify topics tab test props type

ad4a7db

gabrielcaires marked this pull request as ready for review July 9, 2026 13:40

gabrielcaires requested a review from a team as a code owner July 9, 2026 13:40

gabrielcaires enabled auto-merge July 9, 2026 13:40

gabrielcaires added 4 commits July 9, 2026 15:32

Merge branch 'trunk' into update/reader-RSM-4651

7b687df

Merge branch 'trunk' into update/reader-RSM-4651

2f77526

Reader Spaces: wait for create wizard final step

ee5c40d

Reader Spaces: update sidebar create flow test

e28426d

gabrielcaires added this pull request to the merge queue Jul 9, 2026

Merged via the queue into trunk with commit 2794fcd Jul 9, 2026
10 checks passed

gabrielcaires deleted the update/reader-RSM-4651 branch July 9, 2026 17:17

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 Jul 9, 2026

Navigation Menu

Uh oh!

Reader Spaces: stepped create wizard + Feeds/Topics reorganization - #112470

Reader Spaces: stepped create wizard + Feeds/Topics reorganization#112470
gabrielcaires merged 7 commits into
trunkfrom
update/reader-RSM-4651

gabrielcaires commented Jul 9, 2026

Uh oh!

matticbot commented Jul 9, 2026 •

edited

Loading

Uh oh!

matticbot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

gabrielcaires Jul 9, 2026

Uh oh!

gabrielcaires Jul 9, 2026

Uh oh!

gabrielcaires Jul 9, 2026

Uh oh!

Uh oh!

a8ci18n commented Jul 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		function setup( overrides: Partial< React.ComponentProps< typeof TopicsTab > > = {} ) {
		const props: React.ComponentProps< typeof TopicsTab > = {

Uh oh!

Conversation

gabrielcaires commented Jul 9, 2026

Proposed Changes

Why are these changes being made?

Testing Instructions

Scenario 1 - Create a space with the wizard:

Scenario 2 - Name is required to advance:

Scenario 3 - Editing keeps the tabs:

Scenario 4 - Empty state wording:

Pre-merge Checklist

Uh oh!

matticbot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

gabrielcaires Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

gabrielcaires Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

gabrielcaires Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

a8ci18n commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

matticbot commented Jul 9, 2026 •

edited

Loading

matticbot commented Jul 9, 2026 •

edited

Loading

a8ci18n commented Jul 9, 2026 •

edited

Loading