Wizard: Container UI and options endpoint

[jwold]

Feature description

This is an issue to create the components needed for the wizard container.

---

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

Acceptance criteria

• Create the framework for the wizard steps.

• Includes building out the stepper UI

• Includes the UI framework for buttons, interface elements, etc.

Implementation brief

PHP updates

• A REST endpoint will be created to allow the retrieval and saving of plugin options relevant to the wizard screen.
• Will override the setup wizard admin screen by hooking into the admin_head-${screen} hook and generating the markup from the head down. This won't be complicated because the body will just be the empty div for React to render into.

JS/React

• This will include a main layout component for the setup wizard, with the main parts being the stepper component, the panel, and the navigation.
• A mobile layout will be included. We're keeping this simple, with a single breakpoint and most things just stacking (the stepper will collapse into a more compact version).
• Text in the UI will be translatable
• An alert similar to Gutenberg's UnsavedChangesWarning will prompt the user if they leave with options unsaved.
• A React context provider will be created to handle interactions with the options endpoint.

QA testing instructions

1. Inside your local copy of the repo, fetch the latest updates: git fetch
2. Check out this branch with git checkout feature/4700-setup-onboarding
3. Rebuild: composer install && npm install && npm run build
4. Start your environment: ./bin/local-env/start.sh
5. Navigate to the wizard page: http://localhost:8890/wp-admin/admin.php?page=amp-setup&amp-new-onboarding=1
6. Verify you can click to the last screen and back.
7. Verify everything matches the designs.

Demo

Changelog entry

[jwold]

This is related to #3728 (example)

[jwold]

Notes from meeting:

• You can go through wizard completely or bail and restart.
• If you go through wizard again after completely entirely it should show what they selected before
• If they abort wizard and come back it will have default values or what they selected before
• Add AC to the “container UI” issue to define the elements we’re building Joshua task

[johnwatkins0]

I've updated the implementation brief with a few details about what I'm working on for this. I'll fill in the QA steps when I create the PR.