Improved My Site Header: Show site actions in menu #22151

momo-ozawa · 2023-12-05T12:20:22Z

Description

Updates the My Site header to show site actions in a menu
- pbArwn-6kb-p2#comment-7901
- p1701711667406509/1701702771.100599-slack-C04SFL0RP51
Updates "Open in Browser" menu option to "Visit site" for consistency
Note: I'm using SFSymbols for the menu icons because system images are adaptive. I tried to find the most relevant icon for the action - happy to switch it out for a different icon if needed @osullivanchris, @kean

Before	After

How to test

Go to My Site
Tap on the ellipsis button in the site header
Verify you see the following options
- Visit site
- Switch site
- Change site title
- Change site icon
- Personalize home
Verify each option works as expected

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-12-05.at.11.29.45.mp4

Regression Notes

Potential unintended areas of impact
switching sites
What I did to test those areas of impact (or what existing automated tests I relied on)
updated UI test
What automated tests I added (or what prevented me from doing so)
see above

PR submission checklist:

I have completed the Regression Notes.
I have considered adding unit tests for my changes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary. (Improved My Site header: Update release notes #22203)

momo-ozawa · 2023-12-05T12:24:46Z

WordPress/Classes/ViewRelated/Blog/Site Picker/SitePickerViewController+SiteActions.swift

+            return DDLogError("Failed to show dashboard personalization screen: siteID is missing")
+        }
+
+        // TODO: track event


Also need to track when the ellipsis button is tapped. I'll add these events in a separate PR

I needed this recently too and learned about UIControlEventMenuActionTriggered.

osullivanchris · 2023-12-05T12:53:43Z

Looks great so far! WDYT about adding 16px right padding to the right of the menu icon? It will be aligned more nicely with the chevrons in the list below.

osullivanchris · 2023-12-05T12:56:14Z

Actually just checked my mock and I had 8 left and 12 right

momo-ozawa · 2023-12-05T15:00:44Z

@osullivanchris Done!

kean · 2023-12-05T16:28:16Z

WordPress/Classes/ViewRelated/Blog/Site Picker/SitePickerViewController+SiteActions.swift

+    private func makePrimarySection() -> UIMenu {
+        UIMenu(options: .displayInline, children: [
+            MenuItem.visitSite(visitSiteTapped),
+            MenuItem.switchSite(siteSwitcherTapped)


Should it only be displayed if there is more than one site?

No, I think we should always show it - to add a new site you need to access the My Sites screen

Yes I agree. The action should always be there in the menu. but the 'tap icon to switch site' idea - would only be for multiple sites I think. If we do that.

Tapping "Switch Site" is not the most obvious way to add a new site. I'd suggest adding two new actions "Create Site" and "Share" to the new menu.

Fair point. I'll look into this after the header gradient.

kean · 2023-12-05T16:29:40Z

Tested – works great! The actions are much more discoverable now. I left one comment regarding "Switch Site". It was smart not to update the current iterations: tap on an icon, title etc, so that we could keep Quick Start as is for now.

osullivanchris

Looks great! thanks for the padding tweak.

wpmobilebot · 2023-12-05T17:11:13Z

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr22151-a453c37
	Version	23.8
	Bundle ID	org.wordpress.alpha
	Commit	`a453c37`
	App Center Build	WPiOS - One-Offs #8045

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

wpmobilebot · 2023-12-05T17:14:03Z

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr22151-a453c37
	Version	23.8
	Bundle ID	com.jetpack.alpha
	Commit	`a453c37`
	App Center Build	jetpack-installable-builds #7066

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

osullivanchris · 2023-12-05T17:43:16Z

Just installed the build and it feels massively better and more modern in hand compared to the live app 👏

momo-ozawa added [Type] Task My Site UI Modernization labels Dec 5, 2023

momo-ozawa added this to the 23.9 milestone Dec 5, 2023

momo-ozawa requested review from kean and osullivanchris December 5, 2023 12:20

momo-ozawa requested a review from a team as a code owner December 5, 2023 12:20

momo-ozawa commented Dec 5, 2023

View reviewed changes

Momo Ozawa added 7 commits December 5, 2023 15:21

rename site action button

3fe97bf

update site action button icon

668a5c0

add site actions extension file

968fc14

display site icon menu inline

c918b4d

fix ui test

267355a

make action title consistent

41118a0

adjust horizontal margin for site header

3023b84

momo-ozawa force-pushed the hack/site-header-context-menu branch from a7e71d2 to 3023b84 Compare December 5, 2023 15:21

fix CI build error

a453c37

kean reviewed Dec 5, 2023

View reviewed changes

osullivanchris approved these changes Dec 5, 2023

View reviewed changes

kean self-requested a review December 5, 2023 21:14

kean approved these changes Dec 5, 2023

View reviewed changes

momo-ozawa merged commit f5285e8 into trunk Dec 6, 2023

momo-ozawa deleted the hack/site-header-context-menu branch December 6, 2023 11:31

momo-ozawa mentioned this pull request Dec 11, 2023

Improved My Site header: Update release notes #22203

Merged

momo-ozawa mentioned this pull request Dec 18, 2023

Improved My Site header: Add site option #22249

Merged

4 tasks

Improved My Site Header: Show site actions in menu #22151

Improved My Site Header: Show site actions in menu #22151

Uh oh!

Conversation

momo-ozawa commented Dec 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to test

Regression Notes

Uh oh!

momo-ozawa Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

kean Dec 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

osullivanchris commented Dec 5, 2023

Uh oh!

osullivanchris commented Dec 5, 2023

Uh oh!

momo-ozawa commented Dec 5, 2023

Uh oh!

kean Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

momo-ozawa Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

osullivanchris Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

kean Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

momo-ozawa Dec 6, 2023

Choose a reason for hiding this comment

Uh oh!

kean commented Dec 5, 2023

Uh oh!

osullivanchris left a comment

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Dec 5, 2023

Uh oh!

wpmobilebot commented Dec 5, 2023

Uh oh!

osullivanchris commented Dec 5, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

momo-ozawa commented Dec 5, 2023 •

edited

Loading

kean Dec 5, 2023 •

edited

Loading