site-kit-wp icon indicating copy to clipboard operation
site-kit-wp copied to clipboard
verified publisher icon google

Update the help menu’s list of items.

Open techanvil opened this issue 1 month ago • 5 comments

Feature Description

Update the help menu’s list of items.

See the Figma design, and the help menu section in the Design Doc.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • The help menu is updated to contain the following items, and is updated to match the Figma design.
    • Browse documentation
      • This item links opens the URL https://sitekit.withgoogle.com/documentation/ in a new tab.
    • Get free support
      • Opens the URL https://wordpress.org/support/plugin/google-site-kit/ in a new tab.
    • Start guided tour
      • Inactive for now, this will trigger the dashboard tour (see #11820).
    • Send feedback
      • Opens the URL https://wordpress.org/support/plugin/google-site-kit/reviews/ in a new tab.
  • The change is gated behind the setupFlowRefresh feature flag.

Implementation Brief

See the implementation guide in the Design Doc for guidelines on how to implement this issue.

  • [ ] Download all the 4 icons from Figma in the assets/svg/icons/ folder
  • [ ] In assets/js/components/help/HelpMenuLink.js
    • [ ] Accept an onClick callback in the props
    • [ ] Rename the existing onClick callback to something else and call onClick prop inside, before the GA tracking
    • [ ] Make the href prop optional
    • [ ] Accept an icon prop
    • [ ] Pass the icon prop to the Link component's leadingIcon prop
  • [ ] In assets/js/components/help/HelpMenu.js, check if setupFlowRefresh is enabled. If so, add the googlesitekit-help-menu class to the Menu component to override some of its styles
  • [ ] Extract the existing menu items to an array.
    • Each object in the array should have:
      • gaEventLabel
      • href
      • children
    • The Adsense help item should remain conditional to adSenseModuleActive being true
  • [ ] Create a similar array for the SFR menu items, which have slightly different copy and the addition of icons in the new icon prop. The icons need to have their width and height props set to 24px
  • [ ] Render the menu items array inside Menu depending on whether setupFlowRefresh is enabled
  • [ ] Rename the assets/sass/components/global/_googlesitekit-help-menu-link.scss file to _googlesitekit-help-menu.scss as we'll style the container as well. Update the import in assets/sass/admin.scss as well.
  • [ ] In assets/sass/components/global/_googlesitekit-help-menu.scss, wrap all new styles in .googlesitekit-help-menu
    • [ ] Update the menu's shadow according to the Figma design
    • [ ] Update the vertical padding of the inner list (.mdc-list) to 12px
    • [ ] Update the height of the menu items by targetting .mdc-list-item and setting height to 44px
      • This combination of changing the menu's vertical padding and making the items shorter gets us as close as possible to the spacings on Figma
    • [ ] Update the link's text typography (letter-spacing and line-height) according to the Figma design by targeting .googlesitekit-cta-link
    • [ ] Override the existing fill: currentColor style that's being applied to the icons inside the menu links by targeting .googlesitekit-cta-link svg and setting fill: none
    • [ ] Add more space between link's icon and text by targeting .googlesitekit-cta-link .googlesitekit-icon-wrapper and setting margin-right to 16px !important
      • !important is necessary here because the existing margin is set inline in assets/js/components/IconWrapper.js
    • [ ] Update the horizontal spacing by targeting .googlesitekit-help-menu-link .googlesitekit-cta-link and setting padding to 0 24px

Test Coverage

  • Update failing snapshots/VRTs if any.

QA Brief

  • Set up Site Kit with setupFlowRefresh enabled
  • Ensure the help menu matches the Figma design
  • Ensure the items in the menu work correctly (the tour is not implemented yet)

Changelog entry

  • Update the help menu's list of items and add icons.

techanvil avatar Nov 22 '25 15:11 techanvil

@techanvil I noticed that the help menu as an Adense specific item ("Get help with AdSense") that only appears when Adsense is active, but the Figma design does not have it. Are we going to omit it in SFR or was it just missed? If we're going to keep it, then we'll need an icon for it to stay consistent.

abdelmalekkkkk avatar Dec 01 '25 16:12 abdelmalekkkkk

Thanks @abdelmalekkkkk, great spot - that has simply been missed. I've asked @sigal-teller about it on Figma. We can proceed with this issue as defined, and open a new one to add the SFR version of the AdSense menu item if we are indeed keeping it.

As to the IB - this is generally looking good. A few points:

  • Re. the use of the .googlesitekit-help-menu--setupFlowRefresh - I have been trying to avoid referencing SFR in our SCSS like this, preferring an approach where we don't need to rename anything when we strip out the feature flag, although I can see we do already have a similar class name for the Analytics setup module. In this case, I'd suggest simply using .googlesitekit-help-menu for the class name - when we strip out the feature flag it will be unconditionally applied, and will look fine without needing to rename it.
  • Having to use !important is unfortunate, but I think it's acceptable here - it would be good to remove the style prop from IconWrapper in a future issue though, and remove this use of !important along with it. I've made a note to add an issue.
  • Please can you complete the Test Coverage section :)

techanvil avatar Dec 02 '25 11:12 techanvil

Thanks for the review @techanvil.

I updated the IB to remove the SFR specific class and completed the Test Coverage section.

abdelmalekkkkk avatar Dec 02 '25 12:12 abdelmalekkkkk

Thanks @abdelmalekkkkk! That LGTM.

IB ✅

techanvil avatar Dec 02 '25 12:12 techanvil

QA Update ✅

  • Tested on dev environment.
  • Tested when setupFlowRefresh enabled
  • Verified that updated help menu appears when setupFlowRefresh is enabled.
  • Verified that help menu changes are behind setupFlowRefresh feature flag.
  • Verified that the help menu matches the Figma design.
  • Verified that all links are navigating as per AC.
  • Tested on desktop, mobile and tablet viewports.
  • Note : The tour is not implemented yet.
Image Image Image

mohitwp avatar Dec 17 '25 08:12 mohitwp