Add the `components` package with PathMappingControl
Motivation for the change, related issues
Adds a PathMappingControl React component:
The short-term goal is to eventually replace the current mapping control based on text inputs:
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)
- Run
nx dev playground-components - Go to http://localhost:5173/
- Play with the widget and confirm it works intuitively
Follow-up work
- Replace the text input under
Absolute path in Playgroundwith a UI-based picker or path autocompletion. - Implement mapping validation to make sure there are no nested mappings, e.g.
/wordpress/wp-contentand/wordpress/wp-content/plugins. - Reuse the base TreeGrid as a file browser in the Playground block (need asynchronous loading)
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.
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.
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.
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.