Web app redesign

[bgrgicak]

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.

• Playground does not load in Safari with Browser storage enabled #1239
• Skip Blueprint execution in the browser when persistent storage is used #1484
• Site manager sidebar #1656
  • We add a button to the current header
  • The link opens the site manager
  • The button will later be reused in the new header
• Modals and use in the current Web app
  • Import from GitHub
    • Site settings component
  • PR Preview
  • Import zip
  • Export to GitHub
  • Restore from zip

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.

• Site manager editor
  • Settings
    • Site details and header without menu
    • Edit settings
    • Header menu
      • Delete site
    • WP admin
    • Edit blueprint
  • Logs
• Site manager preview
• Site view header

Phase 3: Improvements

In the end, let's tackle all non-blocking work and improvements that don't exist in the current design.

• Save temporary site
• Reload temporary site modal
• Offline features
• Share feedback
• E2E tests (ideally as we go)
• Analytics

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:

• Web app redesign #1655

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.

• Playground does not load in Safari with Browser storage enabled #1239
• Site list each site in OPFS has a metadata.json file
  • Site title
  • Site slug
  • Favicon (ideally base64 encoded)
  • Blueprint
  • Date created
  • Date last active (used to determine the current site)
  • Logs
  • Storage (browser | none | device)
• Add site with default settings
• Update site
• Delete site
• Reset site
• Get site

Site manager

The site manager consists of a sidebar, site editor, site preview, and notice sections.

Sidebar

• Search sites
• Site list
  • Select a current site
  • Site favicon
  • Site title
  • Temporary site indicator
• Add site
  • WP PR preview
  • Import from GH
  • Import ZIP
• Offline mode
  • Download all versions button
• Links

Add site

A site can be added using a site settings modal, or by importing from different sources.

• WP PR preview
  • PR URL or Number
  • Extra settings (uses Site settings)
• Import from GH
  • Connect to GitHub
  • Repo select
    • Repo URL
    • Extra settings (uses Site settings)
• Import ZIP
  • Select ZIP

Notice

• When offline show a notice at the top.

Site preview

• The preview can be resized by dragging a handle between the preview and the editor.
• On extra large screen only the preview keeps expanding. The editor size is fixed.
• Clicking on the preview will take you to the site.
• The preview is hidden on small screens.

Site editor

Notice

• If the current site is temporary, show a notice to save the site.

Header

• Site favicon
• Site title
• Date created
• Links
  • WP admin
    • Opens wp-admin and logs in the user.
  • Open site
• Menu
  • Duplicate
    • Opens an edit settings modal that creates a new site after saving
  • Reset
    • Resets both settings and data
    • Confirm modal
  • Delete
    • Confirm modal
  • Export to GitHub
  • Download as .zip
  • Restore from .zip
  • Share feedback

Export to GitHub

• Connect to GitHub
• Export form
  • PR action type
    • Create new
    • Create draft
    • Update existing
  • PR title (for new and draft)
  • Export (select export type)
    • Theme
      • Select theme
    • Plugin
      • Select plugin
    • wp-content
    • Specific paths
      • Is there a design for this?
    • Repository URL
    • Target repository path
    • Commit message (optional)

Download as .zip

• When clicked downloads the site zip.

Restore from .zip

• A ZIP upload form. When uploaded the site content is replaced with the ZIP content.

Share feedback

• A form for sharing feedback with the Playground team.

• 1-5 score

• How can we improve (optional)

• Email address (optional)

Settings

• Theme
  • Theme screenshot
  • Download theme link
  • Theme name
• Site details
  • Site name
  • Storage type
    • Local
    • Browser
    • temporary
      • Save button
  • WordPress version
  • PHP version
  • Local path
    • For local type only
  • Network access
• WP-admin (This might be removed)
  • Username
  • Password
  • Admin URL
• Edit settings
• Edit blueprint (opens the blueprint editor)

Site settings

• Site name (can be hidden)
• WP version
• PHP version
• Site language
• Storage
• Local path (for local storage only)
  • Path input
  • Directory picker
• Advanced
  • Advanced section can be collapsable or always visible
  • Build version (light/kitchen sink)
  • Networking toggle
• Delete site (when editing an existing site)

Logs

• No logs component
• Log search
• Copy all logs button
• Clear all logs button
• Filters
  • How do filets work?
• Log list
  • Log message
  • Copy message

Site view

• Temporary sites show a confirmation notice if attempting to refresh
• Header
  • Site editor link
  • Title bar

Title bar

• View mode
  • Site name
  • Current page name from the title tag
  • Temporary site indicator
  • Keyboard shortcut indicator
• Edit mode (when clicked)
  • Edit URL input
  • List of predefined pages
  • Edit site button (opens Site settings modal)

[bgrgicak]

The sidebar is now deployed and can be used with browser storage.

Screen.Recording.2024-08-08.at.12.11.21.mov

[sfougnier]

Could we please remove the branding (logo, large graphic) from the sidebar? It's not final.