woocommerce/plugins/woocommerce-blocks
Thomas Roberts ebe05700ab Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938)
* 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>
2022-12-16 08:06:37 -08:00
..
.github Bump act10ns/slack from 1 to 2 (https://github.com/woocommerce/woocommerce-blocks/pull/7805) 2022-12-13 11:22:13 +00:00
.sources Update previews and editor styles for cart and checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2160) 2020-04-08 16:03:39 +01:00
.vscode Fix ESLint errors (https://github.com/woocommerce/woocommerce-blocks/pull/7556) 2022-11-02 17:46:14 +01:00
.wordpress-org Add WordPress.org assets folder and add latest assets. (https://github.com/woocommerce/woocommerce-blocks/pull/3377) 2020-11-09 08:07:15 -05:00
assets Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938) 2022-12-16 08:06:37 -08:00
bin Remove Legacy Webpack Configs along with FallbackModuleDirectoryWebpackPlugin (https://github.com/woocommerce/woocommerce-blocks/pull/7961) 2022-12-16 12:00:06 +01:00
docs Handle multiple packages coming from slots (https://github.com/woocommerce/woocommerce-blocks/pull/7829) 2022-12-15 15:17:22 +01:00
images Create Cross-Sells product list (https://github.com/woocommerce/woocommerce-blocks/pull/6645) 2022-09-21 13:04:15 +07:00
packages Handle multiple packages coming from slots (https://github.com/woocommerce/woocommerce-blocks/pull/7829) 2022-12-15 15:17:22 +01:00
patches Revert "Remove Combobox patch (https://github.com/woocommerce/woocommerce-blocks/pull/6465)" (https://github.com/woocommerce/woocommerce-blocks/pull/6531) 2022-06-07 14:09:50 +02:00
patterns Release: 9.1.1 (https://github.com/woocommerce/woocommerce-blocks/pull/7948) 2022-12-15 10:02:35 +01:00
src Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938) 2022-12-16 08:06:37 -08:00
storybook Fix ESLint errors (https://github.com/woocommerce/woocommerce-blocks/pull/7556) 2022-11-02 17:46:14 +01:00
templates Make `Products by category/tag/attribute` fallback to the `Product catalog` template (https://github.com/woocommerce/woocommerce-blocks/pull/7712) 2022-11-24 16:45:39 +01:00
tests Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938) 2022-12-16 08:06:37 -08:00
.distignore Add CI for monitoring TypeScript errors (https://github.com/woocommerce/woocommerce-blocks/pull/6106) 2022-11-02 11:41:10 +01:00
.editorconfig Store API - Cart JWT tokens/session handling (https://github.com/woocommerce/woocommerce-blocks/pull/5953) 2022-10-03 11:49:32 +01:00
.env Update relevant files due to L2->L0 policy change for minimum required versions. (https://github.com/woocommerce/woocommerce-blocks/pull/4484) 2021-07-29 10:52:34 -04:00
.eslintignore Enable ESLint for E2E folder woocommerce/woocommerce-blocks#6410 (https://github.com/woocommerce/woocommerce-blocks/pull/6413) 2022-05-23 14:05:30 +02:00
.eslintrc.js Bump @woocommerce/eslint-plugin from 2.0.0 to 2.2.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6837) 2022-11-12 02:14:18 +07:00
.gitattributes Revert "Remove .gitattributes file (https://github.com/woocommerce/woocommerce-blocks/pull/5242)" (https://github.com/woocommerce/woocommerce-blocks/pull/6049) 2022-03-14 12:42:34 +00:00
.gitignore Add Storybook documentation and remove deprecated knobs (https://github.com/woocommerce/woocommerce-blocks/pull/5407) 2021-12-21 18:08:57 +01:00
.markdownlint.json Upgrade wp-prettier to 2.6.2 and reformat the codebase (https://github.com/woocommerce/woocommerce-blocks/pull/6566) 2022-06-15 11:56:52 +02:00
.markdownlintignore Improve the structure of the WooCommerce Blocks Handbook (https://github.com/woocommerce/woocommerce-blocks/pull/6429) 2022-06-09 17:52:19 +02:00
.nvmrc Update Node.js to v16.13.2 (https://github.com/woocommerce/woocommerce-blocks/pull/5549) 2022-01-12 03:25:53 +00:00
.prettierignore Create 2e2 tests for Cross-Sells block (https://github.com/woocommerce/woocommerce-blocks/pull/6983) 2022-09-21 13:29:16 +07:00
.prettierrc.js Update @wordpress/scripts and eslint and stylint configurations (https://github.com/woocommerce/woocommerce-blocks/pull/3749) 2021-01-27 11:49:33 -05:00
.stylelintrc.json Upgrade @wordpress/scripts and /env packages (https://github.com/woocommerce/woocommerce-blocks/pull/6114) 2022-03-28 15:00:20 +02:00
.wp-env.json Add PHP8 Unit Testing (https://github.com/woocommerce/woocommerce-blocks/pull/7528) 2022-11-09 15:28:08 +00:00
LICENSE Create LICENSE (https://github.com/woocommerce/woocommerce-blocks/pull/4235) 2021-05-20 15:07:12 +01:00
README.md Correct broken *.md links (https://github.com/woocommerce/woocommerce-blocks/pull/7108) 2022-09-12 11:29:24 +07:00
babel.config.js Migrate Storybook to 6.4.0 and enable auto-detection of controls (https://github.com/woocommerce/woocommerce-blocks/pull/5249) (https://github.com/woocommerce/woocommerce-blocks/pull/5264) 2021-12-01 12:28:27 +01:00
checkstyle.xml Revert "Adds product query support for Category list block (https://github.com/woocommerce/woocommerce-blocks/pull/7675)" (https://github.com/woocommerce/woocommerce-blocks/pull/7819) 2022-12-02 17:11:44 +05:30
composer.json Add woocommerce_blocks_loaded hook information to actions doc (https://github.com/woocommerce/woocommerce-blocks/pull/7600) 2022-11-10 09:52:04 +01:00
composer.lock Bump yoast/phpunit-polyfills from 1.0.3 to 1.0.4 (https://github.com/woocommerce/woocommerce-blocks/pull/7766) 2022-12-12 16:30:39 +00:00
docker-compose.yml Fix broken phpunit tests (https://github.com/woocommerce/woocommerce-blocks/pull/4305) 2021-06-03 09:35:52 +02:00
global.d.ts Add camelcase rule to eslint config (https://github.com/woocommerce/woocommerce-blocks/pull/4382) 2021-07-09 17:53:45 +01:00
package-lock.json Merge branch 'release/9.1.0' of https://github.com/woocommerce/woocommerce-blocks into trunk 2022-12-15 10:09:40 +01:00
package.json Merge branch 'release/9.1.0' of https://github.com/woocommerce/woocommerce-blocks into trunk 2022-12-15 10:09:40 +01:00
phpcs.xml Release: 8.9.0 (https://github.com/woocommerce/woocommerce-blocks/pull/7596) 2022-11-08 13:30:03 +01:00
phpunit.xml.dist Deprecate the woocommerce_shared_settings hook (https://github.com/woocommerce/woocommerce-blocks/pull/4092) 2021-04-26 10:36:50 +01:00
postcss.config.js
readme.txt Merge branch 'release/9.1.0' of https://github.com/woocommerce/woocommerce-blocks into trunk 2022-12-15 10:09:40 +01:00
tsconfig.base.json Bump @woocommerce/eslint-plugin from 2.0.0 to 2.2.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6837) 2022-11-12 02:14:18 +07:00
tsconfig.json Update ValidatedTextInput TypeScript & move to `@woocommerce/blocks-checkout` (https://github.com/woocommerce/woocommerce-blocks/pull/7583) 2022-11-10 02:05:41 -08:00
webpack.config.js Remove Legacy Webpack Configs along with FallbackModuleDirectoryWebpackPlugin (https://github.com/woocommerce/woocommerce-blocks/pull/7961) 2022-12-16 12:00:06 +01:00
woocommerce-gutenberg-products-block.php Merge branch 'release/9.1.0' of https://github.com/woocommerce/woocommerce-blocks into trunk 2022-12-15 10:09:40 +01:00

README.md

WooCommerce Blocks

Latest Tag View JavaScript and CSS Linting PHP Coding Standards Automated tests

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

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.

  1. Make sure you have the latest available versions of WordPress and WooCommerce on your site.
  2. The plugin version is available on WordPress.org. Download the plugin version here.
  3. Activate the plugin.

Installing the development version

  1. Make sure you have the latest versions of WordPress and WooCommerce on your site.
  2. Get a copy of this plugin using the green "Clone or download" button on the right.
  3. Make sure you're using Node.js v16.
  4. npm install to install the dependencies.
  5. composer install to install core dependencies.
  6. To compile the code, run any of the following commands
    1. npm run build (production build).
    2. npm run dev (development build).
    3. npm start (development build + watching for changes).
  7. 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.