Add Publish banner on Overview tab for non-connected sites

[epeicher]

Related issues

• Fixes STU-911

Designs here with multiple options RToz6tIuQ7nlZrikBte4GU-fi-10114_136499 The implemented option is F in the designs with the button on the left as suggested here

These changes are based on the changes from PR #2002

Before	After with non-connected site	After with a site already connected

Video with demo of changes

CleanShot.2025-11-07.at.18.37.39.mp4

Proposed Changes

• Added a "Publish site" on the header that displays when a site has no connected WordPress.com sites
• Clicking the button navigates to the Sync tab and opens the push modal

Testing Instructions

1. Start Studio and create or open a local WordPress site

2. Enable the streamlineOnboarding feature flag by navigating to the menu: Electron > Feature Flag, and enabling Streamline Onboarding

3. Ensure the site has no connected WordPress.com sites (disconnect any if needed)

4. Verify a button with Publish site appears on the header

5. Click the "Publish site" button

6. Verify it navigates to the Sync tab and opens the push modal

7. Connect a WordPress.com site

8. Verify the button no longer appears

Regression testing

• Check the keyboard navigation on the tabs still works as expected, test steps in this PR Avoid focus loss on switching tabs #1859

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[github-actions]

📊 Performance Test Results

Comparing 7bbf443 vs trunk

site-editor

Metric	trunk	7bbf443	Diff	Change
load	10803.00 ms	12330.00 ms	+1527.00 ms	🔴 14.1%

site-startup

Metric	trunk	7bbf443	Diff	Change
siteCreation	27249.00 ms	25409.00 ms	-1840.00 ms	🟢 -6.8%
siteStartup	12097.00 ms	11057.00 ms	-1040.00 ms	🟢 -8.6%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[sejas]

Thanks for implementing the Option A! ✨
It's great we can test the banner in the app.

I found a small issue. When I run npm start (or click cmd+R) and directly click on Publish site the tab doesn't change and therefore the modal is not present. Once I change to the Sync tab the modal appears successfully and then the Publish button starts working as expected.

publish-site-in-overview.mp4

[katinthehatsite]

I found a small issue. When I run npm start (or click cmd+R) and directly click on Publish site the tab doesn't change and therefore the modal is not present. Once I change to the Sync tab the modal appears successfully and then the Publish button starts working as expected.

I saw this as well in my testing. I also noticed a different variation of this issue:

• Start the app with npm start
• Click on the Publish button from Overview and observe that it does nothing
• Switch to a different site that already has sites connected
• Observe the modal gets immediately triggered for that site

Once I change to the Sync tab the modal appears successfully and then the Publish button starts working as expected

I noticed that it happens when you switch to any tab e.g. Settings and the modal gets triggered as well.

[claude]

Claude Code is working…

I'll analyze this and get back to you.

View job run

[epeicher]

Thanks @katinthehatsite, @sejas, and @wojtekn for your reviews and suggestions! I have implemented option F as suggested. Could you please give another review if possible? 🙏

[katinthehatsite]

Thanks for making the changes @epeicher !

I don't mind the button itself as much as it seems now that we have two very similar buttons:

I think it is a bit of confusing UI if we present both of these buttons.

[epeicher]

Thanks for making the changes @epeicher !

I don't mind the button itself as much as it seems now that we have two very similar buttons:

I think it is a bit of confusing UI if we present both of these buttons.

That option was suggested in p58i-ofU-p2#comment-71383 and in #2025 (comment) but maybe this double button was not considered, @sejas, @wojtekn , what do you think about the above? Also, please note that there are new opinions about it p58i-ofU-p2#comment-71457

[wojtekn]

@epeicher, it doesn't look like a huge problem - other UI elements are also repeated, e.g., a button that allows starting the site. However, we can still improve it.

There is a proposal to remove the Sync tab completely in this case, see p58i-ofU-p2#comment-71436. What if we tried that approach? With that, we would simply:

• hide Sync tab if there are no connected sites
• show the tab if there is any connected site

[sejas]

The only downside of that approach is that if we remove the sync tab, it would be a bit harder to pull a site. Users will need to create a new Studio site using the new "Create site and pull remote flow".
Also, if a user pushes a few times and then disconnects, the tab should still be visible even if there are no connected sites.

[sejas]

don't mind the button itself as much as it seems now that we have two very similar buttons:

It's a good observation, but I think it's ok to have the "same" button twice in that case.
I think we should add the icon in each button inside the tab (⬆️, ⬇️), so it's consistent with the button in the top.

[katinthehatsite]

The feature flag works correctly and the button is hidden when it is not enabled 👍

I still dislike that button duplicate but I guess I will have to live with that design choice 😆

[nightnei]

LGTM and works as expected 👍

[sejas]

Thanks for implementing the button and adding it behind the feature flag.
I tested it on trunk and in general works great. I just noticed that it takes a while before switching to the Sync tab, maybe some conflicts with the upsell modal.