The New Woo Adopts Gutenberg Components, User Interface Driven by React

WooSesh, the free virtual conference devoted to WooCommerce kicked off earlier today. Todd Wilkins, Head of eCommerce at Automattic, Kelly Hoffman, Head of Design for eCommerce at Automattic, and Aviva Pinchas, Product Lead of the WooCommerce Marketplace at Automattic got things started with the keynote presentation.

Wilkins highlighted what the team has accomplished since last year and outlined what users can expect in 2019. Pinchas shared a wealth of data from a survey that was sent to WooCommerce users and to end the presentation, Hoffman described how the team designed the new interfaces.

One of the major changes coming to WooCommerce is a redesigned backend. The project is being developed on GitHub as a feature plugin called WC-Admin.

New WooCommerce Dashboard

The dashboard is a landing page where store owners will be able to see at a glance how their store is doing. The new interface is powered by the React JavaScript framework, specifically the React components that are part of the Gutenberg project. It’s modular, allowing users to add, move, and remove blocks. Developers will be able to extend the dashboard and provide custom blocks.

In addition to the new interface, reports are being overhauled. Store owners will be able to filter data, compare date records, have easy access to important data points, and download reports in CSV format. The Activity Panel has been completely redesigned and will be accessible from any page in the WooCommerce backend.

WooCommerce Activity Panel

The activity panel will also house a Notifications area that acts as an email Inbox. Developers will be able to add notifications from their extensions using the WooCommerce REST API endpoints.

WooCommerce Notifications Panel

To see WC-Admin in action, you’ll need to download the feature plugin and run it in a test environment. The WooCommerce team does not recommend using it in a production environment.

Once it reaches beta, the plugin will be made available on WordPress.org to allow a larger audience to test it before being merged into WooCommerce core. The plugin is scheduled to hit beta in early 2019 with new features being merged in the first quarter of 2019.

Similar to Gutenberg development where progress updates were published to the Make Core Developer blog every week or every other week, the WooCommerce team plans to publish progress updates every two weeks on its developer blog. With these improvements, WooCommerce is another reason for developers to learn JavaScript deeply.