This PR is a variant on PR #41732 where we added a preview to the mobile view of the Style step in Gutenboarding. In this variant, instead of listing all the buttons below the preview, we list a drop-down button above the preview.
Because we need to display correctly rendered font pairs in the drop-down, I couldn’t use the native select element or the pre-existing WordPress components for SelectControl or Panel/PanelBody. Instead, I’ve gone with a simple approach of a button that displays the selected fonts, and when you click it, we display the set of font buttons styled to look more like they’re in a drop down list (similar to the domain categories drop down). Selecting a font then closes the drop down.
Changes proposed in this Pull Request
- Add preview to style step.
- Add drop-down button on mobile to show/hide the font selection buttons, and style them to look like the drop-down used in domain categories.
- Add fixed footer bottom-bar-mobile component.
Screenshot
Testing instructions
- Go to /new and complete the steps until you get to the Style step.
- Test in a variety of viewport sizes
- Make sure the desktop viewport layout is unaffected by this PR
- Test on a real device, how does it feel to use?
Fixes #40900
Related to PR #41732
Unfortunately, no screenshots were provided by the developer.
