wordpress-playground icon indicating copy to clipboard operation
wordpress-playground copied to clipboard
verified publisher icon WordPress

Web app redesign

Open bgrgicak opened this issue 1 year ago • 9 comments

Discussed in https://github.com/WordPress/wordpress-playground/discussions/1652

Originally posted by bgrgicak July 29, 2024 Figma design

Content(2)

@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.

  • [x] https://github.com/WordPress/wordpress-playground/issues/1239
  • [x] https://github.com/WordPress/wordpress-playground/pull/1484
  • [x] #1656
    • [x] We add a button to the current header
    • [x] The link opens the site manager
    • [x] 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
    • [x] Settings
      • [x] Site details and header without menu
      • [x] Edit settings
      • [x] Header menu
        • [x] Delete site
      • [x] WP admin
      • [x] Edit blueprint
    • [ ] Logs
  • [x] Site manager preview
  • [x] 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.

  • [x] Save temporary site
  • [x] Reload temporary site modal
  • [ ] Offline features
  • [ ] Share feedback
  • [x] 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:

  • https://github.com/WordPress/wordpress-playground/issues/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.

  • [ ] https://github.com/WordPress/wordpress-playground/issues/1239
  • [ ] Site list each site in OPFS has a metadata.json file
    • [x] Site title
    • [x] Site slug
    • [ ] Favicon (ideally base64 encoded)
    • [ ] Blueprint
    • [ ] Date created
    • [ ] Date last active (used to determine the current site)
    • [ ] Logs
    • [x] 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
  • [x] Site list
    • [x] Select a current site
    • [x] Site favicon
    • [x] Site title
    • [x] Temporary site indicator
  • [ ] Add site
    • [ ] WP PR preview
    • [ ] Import from GH
    • [ ] Import ZIP
  • [ ] Offline mode
    • [ ] Download all versions button
  • [x] 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.
  • [x] Clicking on the preview will take you to the site.
  • [x] 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 avatar Jul 31 '24 06:07 bgrgicak

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

https://github.com/user-attachments/assets/3f55cd9c-1a93-4ac4-bf92-ab7427b78166

bgrgicak avatar Aug 08 '24 10:08 bgrgicak

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

sfougnier avatar Aug 09 '24 15:08 sfougnier

@sfougnier, the branding was removed from the sidebar in #1700 and the update is deploying now.

brandonpayton avatar Aug 22 '24 18:08 brandonpayton

We'll need to introduce a routing system in v1 @bgrgicak @brandonpayton. We'll need:

  • Access to the current query args/blueprint via redux
  • A single source of truth without switching between query args, react props, redux state
  • Support for both path-based routing and access to query args
  • A single function to call when switching sites that will take care of the redux state and browser history change. This is mostly for Query API. The actual UI changes, like opening site details, may for now happen based on an internal state and without any URL changes.

Gutenberg's Navigator component doesn't seem that helpful for us. A custom redux-based routing system seems like the next best thing.

adamziel avatar Aug 29 '24 22:08 adamziel

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.

bgrgicak avatar Sep 09 '24 08:09 bgrgicak

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: https://github.com/WordPress/wordpress-playground/issues/1787

adamziel avatar Sep 24 '24 16:09 adamziel

The web app redesign is completed.

@adamziel should we close this issue or should we keep it around until we address the remaining features?

If we want to address the remaining features, is there a list of tasks we would still like to work on?

bgrgicak avatar Oct 30 '24 07:10 bgrgicak

@bgrgicak there's still a few remaining tasks listed in this issue's description, e.g. the modals @ajotka is working on: https://github.com/WordPress/wordpress-playground/pull/1908

adamziel avatar Oct 30 '24 09:10 adamziel

Add Warning or new site on Blueprint Preview button and Allow renaming of stored sites are connected to the redesign we did and both seem like something we should address.

bgrgicak avatar Oct 31 '24 05:10 bgrgicak

@bgrgicak could you please review the remaining unticked checkboxes? Thanks! We can then probably close this issue.

akirk avatar Jun 18 '25 09:06 akirk

We are missing a few features from the original list, but I suggest that we work on them only if the community starts asking about these features.

Restore from zip doesn't exist. You can import a zip into a new Playground, but can't restore an existing Playground from a zip.

We don't have a Share feedback form. There's a form for reporting errors and a link to GitHub, which both enable you to get in touch with us.

I'm going to close this issue now, if any of the missing features seem important, we can open a separate issue.

bgrgicak avatar Jun 19 '25 06:06 bgrgicak