At the end of 2017, WooCommerce published some of their “Wootenberg experiments”, one of the first previews of what e-commerce might look like in the Gutenberg era. Gutenberg’s handling of meta boxes has greatly evolved since that time and the WooCommerce Gutenberg Products Block feature plugin is now active on more than 20,000 sites. The plugin provides a basic custom products area for featuring products.

Pootlepress has expanded on this idea of offering a configurable product display and is currently previewing its upcoming Storefront Blocks plugin, created specifically for use with the WooCommerce Storefront theme. The plugin allows users to easily customize more advanced layouts for various product displays that can be used anywhere in their content.

[vimeo 282487233 w=627 h=353]

Storefront Blocks includes the following custom blocks:

  • Product Masonry Grid block
  • Category Masonry block
  • Square Product Grid block
  • Slider block
  • WooCommerce default product
  • Carousel block

Storefront Blocks lets store owners easily customize font, colors, label positioning and alignment, grid gap, product grid rows, and columns. The blocks can be expanded to be full-width. They can also be transformed and reused. One example shown in the video above demonstrates converting a product grid into a slider.

Screen-Shot-2018-09-05-at-4.04.37-PM Pootlepress Previews Upcoming Storefront Blocks Plugin for WooCommerce design tips

Check out the live frontend demo at storefrontblocks.com.

The team at Pootlepress was aiming to release the plugin in first week of September but have pushed it back to the week of the September 17th, due to issues caused by Gutenberg 3.7.

https://platform.twitter.com/widgets.js

Pootlepress founder Jamie Marsland said they plan to sell Storefront Blocks at several price points: $75 (single site license), $125 for 5 sites, $149 for 25 sites, and $199 for an unlimited license. The product is a natural extension of their current offerings, which include a page builder plugin used on more than 10,000 websites and a Storefront Pro plugin used on 5,000+ stores.

Marsland said he was previously a skeptic about Gutenberg but is convinced that a unified interface is going to be the chief benefit of Gutenberg in the long term.

“My skepticism was really based on how it was being rolled out to the WP community, rather than the technical approach of Gutenberg,” Marsland said. “I still feel that way actually. But from a end user point of view I’m convinced users are going to love it. 50% of our business is focused on running WordPress training courses for beginners, so we see first hand the issues that WordPress users have with the existing editor. The layout limitations of the current editor is the number complaint that users have with WordPress (from our experience of having trained thousands of end users over the past 7 years).”

Marsland’s team at Pootlepress has gone all-in on developing for Gutenberg. So far their greatest challenge in extending the new editor has been keeping pace with its rapid development.

“It feels a bit like developing for a moving target at times,” Marsland said. “The Gutenberg documentation is getting better but there are still gaps in it. The Slack channel has been really helpful though and the team have been great and responding to specific questions we have.”

Marsland doesn’t see Gutenberg impacting Pootlepress’ WooCommerce page builder product, at least not until Gutenberg evolves further on its journey into site customization capabilities.

“At the moment Gutenberg is quite limited in what’s possible from a layout and design perspective,” Marsland said. “For example, our WooCommerce page builder plugin lets users change the design and layout of individual WooCommerce products. This isn’t possible with Gutenberg and may not be for quite some time. It feels like Gutenberg will stay more of a content editor than become a true page builder, especially given the current feedback from the community. That said, the ease of adding blocks within a unified interface like Gutenberg is perfect for a block approach like we are building for Storefront Blocks.”

If you’ve been wondering what Gutenberg will look like in a WooCommerce context, Pootlepress’ upcoming Storefront Blocks plugin gives you an idea of the customization possibilities the new editor will bring. The plugin makes it easy for non-technical store owners to showcase their products in a compelling way and enables them to create and customize product layouts. Storefront Blocks is an impressive example of how Gutenberg-powered products can replace clunky shortcodes with a more user-friendly interface for building store pages.