Task: Implement the Goals screen per design

[autumnfjeld]

Details

At the time of writing the Goals screen is still in design p9Jlb4-emx-p2.

When it is ready, implement new UI.

TBD: This will be behind a feature flag so we can test both the UI and persisting goals to the site option.

Checklist

• Implement per Figma design.
  • New goals
  • Mobile/desktop layout
  • Updated checkbox style
• Ensure intent works as it should to maintain existing flows:
  • Write flow (aka Publish a blog)
  • Sell flow (aka Sell services or digital goods and Sell physical goods)
  • DIFM flow
  • Import flow
  • Build flow (aka all the other flows)

Related

No response

[autumnfjeld]

FYI: checking that copy is good to go in this issue: #95694

[p-jackson]

I have a PR in progress: #95707

CleanShot.2024-10-25.at.17.47.44.mp4

Large Screen

Small Screen

Above the fold	Below the fold

[p-jackson]

@nuriapenya I've mostly completed a first pass at the implementation. Could I get some feedback on design?

Checkbox style

For some reason I thought I remember seeing this big-checkbox-control component somewhere in Core WordPress, but I don't see it in the Gutenberg storybook. I notice the figma uses a different style with tighter margins and grey background. Were you following a Core component we can reuse? Or was this just a refresh on the existing custom component?

Skip to dashboard button

I haven't labeled it Go to WordPress Admin like the mockup because we aren't (yet?) defaulting all new sites to the wp-admin experience. That'd be too big a change to cram into this task too. We can update this label when we make that change?

The skip button

I haven't added the Skip button beside the Next button. They'll both behave exactly the same way: advancing the user to the next step in the flow. Do we still want the Skip button if the user is already able to immediately skip using Next?

[p-jackson]

@Automattic/quake the goal screen changes are mostly implemented. I'm on GK rotation next week, so here's some things to consider should you keep working on it:

• Reading the PR one commit at a time might be easier. I'd like it to get not too much larger 🤞
  • Maybe the checkbox style changes could be implemented in a different PR?
• Once the discussion at pfYzsZ-xE-p2 has died down we should consider adding the String Freeze label to the PR. Untranslated text during signup wouldn't be a great first impression
• Choosing the DIFM or Import options at the bottom of the screen takes the user to the right flow (and sets the correct site intent), but it leaves the goals array empty. Should we save the goals that just happened to be selected when they clicked the link to the custom flow?
• Unrelated, but context worth considering, this doesn't break the /setup/newsletter flow which also relies on goals and intent. The custom flows should continue to work fine as we make all our serious changes to the main flow.
• No other signup flows use this step. That should give us confidence to change it without breaking other things 🤞
• I'm not sure the way I included the dashboard icon is best practice.
  • Please note that I made tweaks to make sure it lined up just so 👨‍🍳😘
• Read the question above about checkbox styles. Is there an existing component that uses standard styles?

[nuriapenya]

Cool, thanks @p-jackson! 🙏🏽

Or was this just a refresh on the existing custom component?

Exactly, it's a refresher of the existing one. As far as I know, we don't use any Gutenberg component for the onboarding/stepper. However, I'd like to see if we plan to change that and start bringing core components into onboarding. (I'll investigate)

I haven't labeled it Go to WordPress Admin like the mockup because we aren't (yet?) defaulting all new sites to the wp-admin experience. That'd be too big a change to cram into this task too. We can update this label when we make that change?

Yes, that makes sense. We can add it later on as part of Untangling Calypso work.

I haven't added the Skip button beside the Next button. They'll both behave exactly the same way: advancing the user to the next step in the flow. Do we still want the Skip button if the user is already able to immediately skip using Next?

On the last check-in (pfYzsZ-yD-p2), it was discussed moving the "Continue" CTA to the bottom of the list, like we have in the current implementation. I updated the designs based on this: W9xI27S6Swvw5Ku21EbZvn-fi-5824_24222

I left a comment here (p1730065270612889-slack-C07H21B2W59) to double-check the latest design changes.

[zaguiini]

Checkbox PR: #95773