G2
An experimental reimagining of WordPress components
Overview
G2 is an innovative component system designed from the ground up to enhance the WordPress Gutenberg experience. Tailored to meet the evolving needs of editors and developers, it offers a first-class workflow for creating exceptional user interfaces. By reimagining the existing @wordpress/components, G2 strives to deliver a cohesive and aesthetically pleasing solution that integrates seamlessly within the WordPress ecosystem and beyond.
The project focuses on empowering both developers and designers by ensuring accessibility, ease of use, and customizability. Whether used for core development or third-party plugins, G2 components aim to simplify integration while maintaining a native-like feel across various applications.
Features
-
Accessibility First: G2 is built with inherent a11y considerations, ensuring that accessibility features are seamlessly integrated rather than added as an afterthought.
-
Seamless Integration: The components work effortlessly within existing systems like Gutenberg and WP-Admin, minimizing the need for complex integration processes.
-
Enhanced Developer Experience (DX): Prioritizing the needs of developers and contributors, G2 focuses on a superior DX that encourages collaboration and facilitates easier modifications.
-
Customizable Components: G2's UI components are designed to be easily customizable, allowing developers to adapt them for various applications, including third-party plugins.
-
Comprehensive Documentation: The project offers clear guidelines and resources for getting started, making it accessible for both new and experienced developers.
-
Open Feedback Channels: G2 encourages community input, welcoming feedback to continually enhance its offerings and address user needs.
-
Prototyping Support: With tools such as CodeSandbox and templates for popular frameworks like Create React App and Gatsby, developers can prototype quickly and efficiently.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.
- Zustand
Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.