Web app redesign #1655
Comments
**Warning** This PR contains a lot of TODOs because I didn't want it to get too large. We can decide if it's worth shipping as is or if we need to implement some of these missing features first. ## Motivation for the change, related issues Implements #1656 Browser storage in Playground supports having multiple sites by switching by adding a `site-slug` query string. This is a powerful feature that's hard to discover. As a first step in the [Web app redesign project,](#1655) this PR implements switching sites in browser storage. Other site management features like adding and deleting sites will be added in future PRs.   ## Implementation details The goal of this PR is to set the groundwork for the [Web app redesign](#1655) project by allowing users to switch between views. The feature is only available while using browser storage. The current view is now called `site-view` and the new management view is called `site-manager`. In this iteration, switching is done by redirecting to a URL with a `site-manager=true` query string. A future iteration will remove the need for reloads. When in the site manager a list of sites is loaded from OPFS, clicking on a site (or preview) will redirect to that site. This is a temporary implementation that will be removed[ once we add site storage.](#1659) ## Testing Instructions (or ideally a Blueprint) - Checkout this branch - [Open Playground with browser storage](http://127.0.0.1:5400/website-server/?storage=browser) - Confirm that a new site manager icon is available in the upper left corner - Click it and confirm that the site manager loads - [Open Playground with browser storage and a custom slug](http://127.0.0.1:5400/website-server/?storage=browser&site-slug=test) - Click on the site manager icon and confirm that the site manager loads - Confirm that both sites are visible --------- Co-authored-by: Brandon Payton <[email protected]>
## Motivation for the change, related issues The site manager button looks different in production from other buttons and they should all look the same. ## Implementation details Use the button component for the site manager toolbar button. For some reason buttons a development server look different from buttons in production. [The toolbar will soon be replaced](#1655), so there is no need to fix that now. ## Testing Instructions (or ideally a Blueprint) - Open a Playground preview locally - Switch to site storage - Confirm that all toolbar buttons have the same style.
|
The sidebar is now deployed and can be used with browser storage. Screen.Recording.2024-08-08.at.12.11.21.mov |
|
Could we please remove the branding (logo, large graphic) from the sidebar? It's not final. |
## Motivation for the change, related issues We are removing because branding is not finalized yet. Mentioned by @sfougnier [here](#1655 (comment)). ## Implementation details This PR hides the logo and background graphic from the site manager sidebar. ## Testing Instructions (or ideally a Blueprint) Run `npm run dev`, open the site listing, and observe the UI remains visible and functional.
|
@sfougnier, the branding was removed from the sidebar in #1700 and the update is deploying now. |
|
We'll need to introduce a routing system in v1 @bgrgicak @brandonpayton. We'll need:
Gutenberg's Navigator component doesn't seem that helpful for us. A custom redux-based routing system seems like the next best thing. |
This will be great for the website! We have query string fetching and props for this all over the place. Redux will make it much cleaner. It should also simplify change management and ensure component state matches the URL. |
|
Let's remove any custom JS API code from the "import from git" and "from WordPress/Gutenberg PRs" modals and only use them as a piece of UI that produces a Blueprint. The Blueprint itself should be expressive enough to import all the right files. This issue tracks support for the features we'll need to do that: #1787 |
Discussed in #1652
Originally posted by bgrgicak July 29, 2024
Figma design
@WordPress/playground-maintainers Let's discuss the Web app redesign.
We have a new design that I broke it down into rough tasks and created a timeline.
Timeline
The project is broken up into smaller pieces that can be delivered individually, so we can ship things immediately and avoid feature branches. If a feature requires more PRs like the site manager, we could hide it behind a feature flag (show only in development mode or if a query string exists) until it's ready.
Phase 1: Fundamentals
Let's start by creating the fundamentals like site storage and site switching.
Alongside this, we can start replacing existing modals with new components.
Phase 2: Redesign
Let's expand the fundamentals by adding the site manager editor and support for all existing features in the current view.
After we have feature support, we can update the site header.
Phase 3: Improvements
In the end, let's tackle all non-blocking work and improvements that don't exist in the current design.
Features
A detailed list of all the features that the design includes. It will help us break down the project into tasks once we answer all questions.
Other, related issues:
Expand the full list of features
Site Storage
We need a way to store a list of all sites the user has created. Let's make it flexible so that we can add more data in the future.
metadata.jsonfileSite manager
The site manager consists of a sidebar, site editor, site preview, and notice sections.
Sidebar
Add site
A site can be added using a site settings modal, or by importing from different sources.
Notice
Site preview
Site editor
Notice
Header
wp-adminand logs in the user.Export to GitHub
Download as .zip
Restore from .zip
Share feedback
A form for sharing feedback with the Playground team.
1-5 score
How can we improve (optional)
Email address (optional)
Settings
Site settings
Logs
Site view
Title bar
titletagThe text was updated successfully, but these errors were encountered: