wordpress-playground icon indicating copy to clipboard operation
wordpress-playground copied to clipboard

Add the `components` package with PathMappingControl

Open adamziel opened this issue 1 year ago • 3 comments

Motivation for the change, related issues

Adds a PathMappingControl React component:

CleanShot 2024-07-12 at 15 11 01@2x

The short-term goal is to eventually replace the current mapping control based on text inputs:

CleanShot 2024-07-12 at 15 13 00@2x

The long-term goal is to create a library of dependency-free components (well, aside of React) to reuse between Playground webapp, WordPress plugins, WordPress blocks, and the Blueprints builder. This path mapping widget will make a good fit for all these places.

Implementation details

The PathMappingControl uses WordPress components under the hood. Most notably, TreeGrid and Button. I considered using web components for portability, but decided against it because they:

  • Wouldn't have the native WordPress look and feel
  • Couldn't easily mix with WordPress components
  • Had some issues around focus management

Testing Instructions (or ideally a Blueprint)

  1. Run nx dev playground-components
  2. Go to http://localhost:5173/
  3. Play with the widget and confirm it works intuitively

Follow-up work

  • Replace the text input under Absolute path in Playground with a UI-based picker or path autocompletion.
  • Implement mapping validation to make sure there are no nested mappings, e.g. /wordpress/wp-content and /wordpress/wp-content/plugins.
  • Reuse the base TreeGrid as a file browser in the Playground block (need asynchronous loading)

adamziel avatar Jul 12 '24 13:07 adamziel

I'll remove this from the board for now. We'll need it sooner than later but let's not occupy a space in a queue.

adamziel avatar Jul 16 '24 17:07 adamziel

UX idea: display select boxes for path selection, not inputs. Options:

  • Plugin
  • Theme
  • Mu-plugin
  • Uploads
  • Wp-content
  • WordPress root
  • Custom path -> this one shows an input

In v2 we could also add a magic "guess" button to infer the role of every path in the tree.

adamziel avatar Jul 17 '24 11:07 adamziel

UX idea: display select boxes for path selection, not inputs. Options:

Nice. This would reduce the opportunity for typos, and selection sounds less stressful to me than having to remember and type the correct path.

brandonpayton avatar Jul 18 '24 16:07 brandonpayton

There are improvements we could do here, but I'll go ahead and merge as it's not used anywhere and I'd like to play with it in a draft branch.

adamziel avatar Sep 14 '24 15:09 adamziel