ebe05700ab
* Add receiveCart thunk * Add mapCartResponseToCart helper * Add getItemsPendingQuantityUpdate selector * Update cart resolvers to be thunks * Remove RECEIVE_CART action and replace with SET_CART_DATA receiveCart will turn into a thunk. * Add notifyQuantityChanges functions * Remove receiveCart from action type definition, replace with setCartData * Move apiFetchWithHeaders out of controls This will just be a normal function since we'll be updating actions to thunks which will use this instead of a control. * Include thunks in actions file * Update receiveCart action to setCartData * Update applyCoupon action to a thunk * Update useStoreCartCoupons to get action from correct place * Update StoreCartCoupon types * Add types for Thunk and ThunkReturnType in mapped-types * Change applyCoupon to a thunk * Get applyCoupon, removeCoupon, receiveApplyingCoupon from useDispatch This is to separate the concerns of actions vs. selectors. Previously the actions were fetched during useSelect which is not a pattern we use anywhere else in the codebase. Since we updated the MapToDispatch type, we can now get correctly typed thunks from the data store. * Improve apiFetchWithHeaders typings * Convert removeCoupon from generator to thunk * Add applyCoupon and removeCoupon to CartAction type * Remove unused old-style type-def * Add receiveApplyingCoupon & receiveRemovingCoupon to StoreCartCoupon * Correct issues with StoreCartCoupon type These were not intended to reflect the actions in data store, rather the functions offered by the useStoreCartCoupons hook. * Update applyExtensionCartUpdate to a thunk * Update addItemToCart to thunk * Add ResolveSelectFromMap type that works with thunks * Add CartDispatchFromMap and CartResolveSelectFromMap types We can add this to all data stores to get them working with thunks properly. * Add docs and update generic name in ResolveSelectFromMap * Add correct types for thunk resolvers in cart data store * Update removeItemFromCart to thunk * Update apiFetchWithHeaders to use generic * Update selectShippingRate to thunk * Update resolver tests to test correct thunk functionality * Update updateCustomerData to thunk * Update reducer test to reflect new action name * Update comments on CartDispatchFromMap and CartResolveSelectFromMap * Add quantity_limits to preview cart * Make notices speak when shown * Remove copilot comment * Add isWithinQuantityLimits function This is because we shouldn't show a notice if the quantity limits change, but the item's quantity is still OK. * Add tests for notifyQuantityChanges * Show notice when multiple_of is updated * Update test to test for multiple_of changes * Remove empty export * Remove controls from cart data store Not needed anymore since the exported value from the shared-controls file was empty. * Export a control and async function for apiFetchWithHeaders This is required because async functions cannot be called from sync generators. * Use control version of apiFetchWithHeaders in the collections store * Improve comments and remove incorrect TypeScript * Update assets/js/data/cart/actions.ts Co-authored-by: Mike Jolley <mike.jolley@me.com> * Update ResolveSelectFromMap to include selectors too * Update TS in actions * Use finally to remove duplicate code * remove item pending delete/qty update after action runs in all cases This will also reset the state when the request to remove it/change quantity errors * Remove unnecessary type from param. Not needed because we have TS now. The description can stay though, it is useful. * Update snackbar wording to use active voice * Remove old WP version check * Set max quantity to high number instead of null This would only happen in a niche case, and would require several TS changes to fix, so it's better to set it as a number here. 9999 should be high enough, and is the default quantity limit set below in get_product_quantity_limit * Set code on woocommerce_rest_cart_invalid_key to 409 This is so the cart is returned in the response, so the client can update. * Fix typo in comment and add CartSelectFromMap * Remove unnecessary docblock * Add getItemsPendingDelete selector This is needed so we can show a notice for items that are unexpectedly removed from the cart. We need to know which ones are pending delete so we can skip showing the notice for them. * Add type for notifyQuantityChanges args and change args to object * Add notifyIfRemoved function This will check items that have been removed and show a notice for them. * Fix TS in receiveCart & pass itemsPendingDelete to notifyQuantiyChanges * Update wording on removal notice * Update types for notifyQuantityChanges args * Update tests to reflect new wording and args being an object * Check item is truth before running comparison of keys * Update tests for unexpectedly and expectedly removed items * Ignore print_r to satisfy phpcs * Update PHP tests to reflect correct response code when deleting items * Remove unnecessary controls and dispatch events directly from thunk Co-authored-by: Mike Jolley <mike.jolley@me.com> |
||
---|---|---|
.. | ||
.github | ||
.sources | ||
.vscode | ||
.wordpress-org | ||
assets | ||
bin | ||
docs | ||
images | ||
packages | ||
patches | ||
patterns | ||
src | ||
storybook | ||
templates | ||
tests | ||
.distignore | ||
.editorconfig | ||
.env | ||
.eslintignore | ||
.eslintrc.js | ||
.gitattributes | ||
.gitignore | ||
.markdownlint.json | ||
.markdownlintignore | ||
.nvmrc | ||
.prettierignore | ||
.prettierrc.js | ||
.stylelintrc.json | ||
.wp-env.json | ||
LICENSE | ||
README.md | ||
babel.config.js | ||
checkstyle.xml | ||
composer.json | ||
composer.lock | ||
docker-compose.yml | ||
global.d.ts | ||
package-lock.json | ||
package.json | ||
phpcs.xml | ||
phpunit.xml.dist | ||
postcss.config.js | ||
readme.txt | ||
tsconfig.base.json | ||
tsconfig.json | ||
webpack.config.js | ||
woocommerce-gutenberg-products-block.php |
README.md
WooCommerce Blocks
This is the feature plugin for WooCommerce + Gutenberg. This plugin serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the block editor.
Use this plugin if you want access to the bleeding edge of available blocks for WooCommerce. However, stable blocks are bundled into WooCommerce, and can be added from the "WooCommerce" section in the block inserter.
Table of Contents
- Documentation
- Installing the plugin version
- Installing the development version
- Getting started with block development
- Long-term vision
Documentation
To find out more about the blocks and how to use them, check out the documentation on WooCommerce.com.
If you want to see what we're working on for future versions, or want to help out, read on.
Code Documentation
- Blocks - Documentation for specific Blocks.
- Editor Components - Shared components used in WooCommerce blocks for the editor (Gutenberg) UI.
- WooCommerce Blocks Handbook - Documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
- WooCommerce Blocks Storybook - Contains a list and demo of components used in the plugin.
Installing the plugin version
We release a new version of WooCommerce Blocks onto WordPress.org every few weeks, which can be used as an easier way to preview the features.
Note: The plugin follows a policy of supporting the "L0" strategy for version support. What this means is that the plugin will require the most recent version of WordPress, and the most recent version of WooCommerce core at the time of a release. You can read more about this policy here.
- Make sure you have the latest available versions of WordPress and WooCommerce on your site.
- The plugin version is available on WordPress.org. Download the plugin version here.
- Activate the plugin.
Installing the development version
- Make sure you have the latest versions of WordPress and WooCommerce on your site.
- Get a copy of this plugin using the green "Clone or download" button on the right.
- Make sure you're using Node.js v16.
npm install
to install the dependencies.composer install
to install core dependencies.- To compile the code, run any of the following commands
npm run build
(production build).npm run dev
(development build).npm start
(development build + watching for changes).
- Activate the plugin.
The source code is in the assets/
folder and the compiled code is built into build/
.
Getting started with block development
Run through the "Writing Your First Block Type" tutorial for a quick course in block-building.
For deeper dive, try looking at the core blocks code, or see what components are available.
To begin contributing to the WooCommerce Blocks plugin, see our getting started guide and developer handbook.
Other useful docs to explore:
Long-term vision
WooCommerce Blocks are the easiest, most flexible way to build your store user interface and showcase your products.