With some of the recent updates in G2 components, it’s become clear that the library has become a phenomenal tool for rapid prototyping. With the fundamental systems in place (in particular styling and a healthy collection of primitive components), I’ve been able to experiment and create pretty feature-rich experiences. (Some of this was demonstrated in a recent Zoom session.)
For the purposes of prototyping and testing… If you’re interested in giving these G2 Components a try, I’ve prepared some resources for you!
Getting Started
We can start prototyping with G2 Components in 2 ways:
- CodeSandbox (Recommended)
- Create React App
I recorded a short video tutorial walking through each of the methods mentioned above.
CodeSandbox
To get started with the CodeSandbox template, click here.
Create React App
If you’d prefer a more Create React App like experience, run the following command in your Terminal:
npx create-react-app my-app --template @wp-g2/cra-template-protokit
Once it’s done installing, there should be some instructions at the end on how you can start developing things.
Example
As an example, I used the CodeSandbox starter and created a prototype of a potential “Daily Photo” Gutenberg block, allowing the user to adjust various filters before adding it into the content (seen above). It’s not completely functional, but there’s enough to give a really good sense of the final experience.
Link to prototype shown above via CodeSandbox
Feedback
Just giving you a heads up, since this project is still under early and heavy development, these starter kits may change overtime. There’s also no documentation at this time for the components or for the various systems. If you get stuck, the “simplest” (not really, but okay, haha) way to unstick yourself would be to check the source code or the stories for the various components.
If you have any thoughts or feedback in terms of aesthetics, design/development experience, component APIs, ideas, or anything else, please let me know by submitting an issue in the Github repo!
Good luck! Have Fun!
Thanks
A huge thanks to everyone who has provided feedback and supported this project! Also, a special thanks to Lynn for inspiring the prototyping ideas!
Edit: Added a prototype example!
G2 Components 