Prototyping: Try recreating a WordPress plugin

[ItsJonQ]

In chatting with @paaljoachim, we thought it may be interesting/useful to use G2 to prototype/recreate something from WP-Admin.

To make it easier, perhaps we could try prototyping an experience based off an existing plugin, for example: https://wordpress.org/plugins/wp-user-profiles/

This will give us a good sense of what the library does well, and where we can improve.

[ItsJonQ]

Here's my initial attempt to prototype a Profile screen:

https://d.pr/v/ZUnkSE

Some initial thoughts:

• Creating the overall UI (grid, sections, etc...) felt okay.
• Form label / input widths are bit strange (off balanced)
• Need to figure out an improved design for responsiveness/large screen (taking into consideration Container, form widths, etc...)
• Drag/Drop (using React Beautiful DND) works... but feels painful to setup. We really need those G2 Draggable components made.

For the first pass, I've omitted certain things, like a collapsable card, drag handles, drop visualization, and various other interactions (for now)

[ItsJonQ]

Here's the Storybook prototype: https://g2-components.xyz/iframe.html?id=examples-wip-userprofileplugin--default&viewMode=story

[paaljoachim]

This is very cool!! I really dig doing the hands-on with the prototype in Storybook! The UI feels modern and it is easy to interact with. Dragging the objects around makes me think of the WP Dashboard. Nicely done, Jon!

[jasmussen]

Thanks for doing this! Paal's instinct is really good here, there's nothing to make a component library battle-tested like using it to build something real.

I would nudge towards a PR to the block editor, though, as that would force us out of storybook and into the environment that is to hopefully adopt these wonderful widgets. It might be painful at first, but I believe it would also uncover issues that need addressing, both on the block editor side, and on the components side. Paal's ticket #41 is one real option, another is to tackle a redesign of the contents of the paragraph sidebar.

I have on my todo list (which keeps being unwieldy 😩) to mock up an improvement to what's in the sidebar of 3 complex blocks, such as Paragraph, Navigation Menu, Cover. I'm hoping it can serve as a bridge between the block editor, whose sidebar needs oceans of TLC, and these components, which are full of TLC (tender loving care). Outside of the solid foundation, what I would like most to see brought from here to there is the compactness of the UI, and the systematization.