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.
| 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 |
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
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.
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
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.
Keyboard shortcuts
Down arrow Next slide
Up arrow Previous slide
Color codes
Hover over text more additional info