Existing Blocks for WooCommerce

Overview

Knowing when you don’t need to use custom development techniques is possibly more important than knowing advanced development.

Each line of custom code creates at least a little “code debt” creates opportunities for problems in the future changes.

With that in mind, we’ll devote a section to understanding what’s already available Admittedly, a lightweight section, but a good breather after our esoteric Deep Dive to you in the WooCommerce/WordPress ecosystem, and how you can avoid writing code that’s already been written.

Woo Block Classifications

Type Blocks
Product Blocks Featured Product
Hand-picked Products
Best Selling Products
Newest Products
On Sale Products
Top Rated Products
All Products
Taxonomy Based Featured Category
Product Categories List
Products by Category
Products by Attribute
Products by Tag
Filter Based Product Search
Filter by Price
Filter by Attribute
Active Product Filters
Page/Shortcode replacements Checkout
Cart
Reviews All Reviews
Reviews by Product
Reviews by Category

In the Woo Directory

If you need to do an in depth review of what one of the built-in WooCommerce blocks accomplishes there are two place you should look:

  • First do a quick review of the JS and CSS source code in packages/woocommerce-blocks/assets/js/blocks
  • Next, because most of WooCommerce’s block area Server Side Rendering, you’ll need to look in packages/woocommerce-block/src/BlockTypes

Tip: you can zoom in/out on the file directories in this slide with CTRL+click

In the Gutenberg Editor

Gutenberg makes it pretty easy to find blocks.This magic occurs through the block.json file.

By typing free form text in the add a block tool, WordPress will return all matching blocks on your site.

If no matching blocks are found locally, it will search WordPress.org to check for plugins with matching blocks.

Third Party Sources

The Gutenberg block search will not always find all of blocks in the ecosystem. So you should definitely check the WordPress.org repo to see of there are any block plugins that will help with your project. Take a look at theses “heavy hitters” to get started

Conclusion

Keep in mind the the woocommerce-blocks package is very much a work in progress.

Blocks may exist tomorrow that don’t exist today. It is an exciting fast-paced time in the world of developing and designing online stores.

We all need to stay nimble.

The next sections will look at how to leverage existing blocks and develop completely new blocks.

Before moving on, let’s do a quick knowledge check to close out this topic.

Knowledge Check

References

×

Keyboard shortcuts

CTRL+Shift+F Search slideshow
F Fullscreen view
CTRL+Click Zoom in
Esc Topic overview
Right arrow,
Down arrow
Next slide
Left arrow,
Up arrow
Previous slide

Color codes

Tooltip
Hover over text more additional info
Link to an external resource
Link to an internal slide
If buttons aren't working, click in the screen to "focus" your browser
RSS
LinkedIn
Share