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
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
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
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.

9 Comments


  1. This is amazing! This was a major weak point of WC versus shopify. Great work team!

    Report


    1. Well said, this will be an even greater win for first-time users of WC because the navigation has been a frustration for a lot of our readers.

      Report


  2. This looks promising. It probably makes modifying the admin settings for WooCommerce more difficult, but I don’t recall ever needing to do that anyway.

    Report


    1. Hi Ryan! In what way do you think this will make modifying the settings more difficult? Are you thinking for end-users or for extension/plugin developers?

      Report


      1. I was thinking for extension/plugin developers. Interacting with a JS interface along with PHP is normally a lot more complicated than working with PHP only as there’s a lot more moving parts … IMHO.

        Report


  3. Nice to see how some of the big players are getting on the WP + Javascript bandwagon.

    Report


  4. What does this mean for Classic Editor users? Will this require adoption of Gutenberg for WooCommerce sites?

    Report


    1. Yeah, probably this will steer users away from WooCommerce, as well. Gutenberg shouldn’t be a requirement.

      Report


  5. This is great. I have a Woocommerce site and this feature would be extremely helpful.

    Report

Comments are closed.