Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Format Markdown files using wp-scripts (https://github.com/woocommerce/woocommerce-blocks/pull/6462) 

* Format Markdown files using Prettier

* Format Markdown files using wp-scripts

* Adjust MD linting
This commit is contained in:
Niels Lange 2022-06-09 14:43:17 +02:00 committed by GitHub
parent 295184a734
commit a748f533a8
170 changed files with 2960 additions and 2484 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/woocommerce-blocks/.github/workflows/js-css-linting.yml → plugins/woocommerce-blocks/.github/workflows/js-css-md-linting.yml vendored
View File

@ -1,4 +1,4 @@
name: JavaScript and CSS Linting
name: JavaScript, CSS and Markdown Linting
on:
pull_request:
@ -93,3 +93,20 @@ jobs:
- name: Lint CSS
run: npm run lint:css
MDLintingCheck:
name: Lint MD
needs: Setup
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup node version and npm cache
uses: actions/setup-node@v3
with:
node-version-file: '.nvmrc'
cache: 'npm'
- name: Install Node dependencies
run: npm ci --no-optional
- name: Lint MD
run: npm run lint:md:docs

15
plugins/woocommerce-blocks/.markdownlint.json Normal file
View File

@ -0,0 +1,15 @@
{
"default": true,
"MD003": { "style": "atx" },
"MD007": { "indent": 4 },
"MD013": { "line_length": 9999 },
"MD024": false,
"MD025": false,
"MD029": false,
"MD033": false,
"MD046": {"style": "fenced"},
"no-hard-tabs": false,
"whitespace": false
}

4
plugins/woocommerce-blocks/.markdownlintignore Normal file
View File

@ -0,0 +1,4 @@
**/node_modules/**
**/vendor/**
docs/extensibility/actions.md
docs/extensibility/filters.md

31
plugins/woocommerce-blocks/README.md
View File

@ -10,17 +10,17 @@ This is the feature plugin for WooCommerce + Gutenberg. This plugin serves as a
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.
- [WCCOM product page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/)
- [User documentation](https://docs.woocommerce.com/document/woocommerce-blocks/)
- [WCCOM product page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/)
- [User documentation](https://docs.woocommerce.com/document/woocommerce-blocks/)
## Table of Contents <!-- omit in toc -->
- [Documentation](#documentation)
- [Code Documentation](#code-documentation)
- [Installing the plugin version](#installing-the-plugin-version)
- [Installing the development version](#installing-the-development-version)
- [Getting started with block development](#getting-started-with-block-development)
- [Long-term vision](#long-term-vision)
- [Documentation](#documentation)
- [Code Documentation](#code-documentation)
- [Installing the plugin version](#installing-the-plugin-version)
- [Installing the development version](#installing-the-development-version)
- [Getting started with block development](#getting-started-with-block-development)
- [Long-term vision](#long-term-vision)
## Documentation
@ -30,17 +30,16 @@ If you want to see what we're working on for future versions, or want to help ou
### Code Documentation
- [Blocks](./assets/js/blocks) - Documentation for specific Blocks.
- [Editor Components](assets/js/editor-components) - Shared components used in WooCommerce blocks for the editor (Gutenberg) UI.
- [WooCommerce Blocks Handbook](./docs) - Documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
- [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) - Contains a list and demo of components used in the plugin.
- [Blocks](./assets/js/blocks) - Documentation for specific Blocks.
- [Editor Components](assets/js/editor-components) - Shared components used in WooCommerce blocks for the editor (Gutenberg) UI.
- [WooCommerce Blocks Handbook](./docs) - Documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
- [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) - 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](https://developer.woocommerce.com/?p=9998).
>
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.](https://wordpress.org/plugins/woo-gutenberg-products-block/)
@ -54,9 +53,9 @@ We release a new version of WooCommerce Blocks onto WordPress.org every few week
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).
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/`.

4
plugins/woocommerce-blocks/assets/js/blocks/README.md
View File

@ -2,7 +2,7 @@
Our blocks are generally made up of up to 4 files:
```
```text
|- block.js
|- editor.scss
|- index.js
@ -13,7 +13,7 @@ The only required file is `index.js`, this sets up the block using [`registerBlo
The scss files are split so that things in `style` are added to the editor _and_ frontend, while styles in `editor` are only added to the editor. Most of our blocks should use core components that won't need CSS though.
### Editing
## Editing
A simple edit function can live in `index.js`, but most blocks are a little more complicated, so the edit function instead returns a Block component, which lives in `block.js`. By using a component, we can use React lifecycle methods to fetch data or save state.

6
plugins/woocommerce-blocks/assets/js/blocks/classic-template/README.md
View File

@ -12,9 +12,9 @@ This block does not have any customizable options available, so any style or cus
### Props
* `attributes`
* `template`: `single-product` | `archive-product` | `taxonomy-product_cat` | `taxonomy-product_tag`
* `align`: `wide` | `full`
- `attributes`
- `template`: `single-product` | `archive-product` | `taxonomy-product_cat` | `taxonomy-product_tag`
- `align`: `wide` | `full`
```html
<!-- wp:woocommerce/legacy-template {"template":"single-product"} /-->

14
plugins/woocommerce-blocks/assets/js/data/README.md
View File

@ -1,11 +1,13 @@
This folder contains all the data stores registered with `wp.data` for use by various blocks. Store keys are exported as constants on the `wc.wcBlocksData` export (external registered as `@woocommerce/block-data` and enqueued via handle `wc-blocks-data-store`). For any block using the store, make sure you import the store key rather than using the reference directly to ensure dependencies are automatically extracted correctly.
# Data Stores
This folder contains all the data stores registered with `wp.data` for use by various blocks. Store keys are exported as constants on the `wc.wcBlocksData` export (external registered as `@woocommerce/block-data` and enqueued via handle `wc-blocks-data-store`). For any block using the store, make sure you import the store key rather than using the reference directly to ensure dependencies are automatically extracted correctly.
It is assumed there is some familiarity already with interacting with the `wp.data` api. You can read more about that [here](https://github.com/WordPress/gutenberg/tree/master/packages/data).
The following stores are registered:
store | description | store key
------|----------|-------------
[schema](./schema/README.md) | Used for accessing routes. Has more internal usage. | SCHEMA_STORE_KEY
[collections](./collections//README.md) | Holds collections of data indexed by namespace, model name and query string | COLLECTIONS_STORE_KEY
[query-state](./query-state/README.md) | Holds arbitrary values indexed by context and key. Typically used for tracking state of query objects for a given context | QUERY_STATE_STORE_KEY
| Store | Description | Store key |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| [schema](./schema/README.md) | Used for accessing routes. Has more internal usage. | SCHEMA_STORE_KEY |
| [collections](./collections//README.md) | Holds collections of data indexed by namespace, model name and query string | COLLECTIONS_STORE_KEY |
| [query-state](./query-state/README.md) | Holds arbitrary values indexed by context and key. Typically used for tracking state of query objects for a given context | QUERY_STATE_STORE_KEY |

44
plugins/woocommerce-blocks/assets/js/data/collections/README.md
View File

@ -1,4 +1,4 @@
# Collections Store.
# Collections Store
To utilize this store you will import the COLLECTIONS_STORE_KEY in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
@ -14,14 +14,14 @@ This will return an action object for the given arguments used in dispatching th
> **Note**: You should rarely have to dispatch this action directly as it is used by the resolver for the `getCollection` selector.
| argument | type | description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `namespace` | string | The route namespace for the collection (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the collection (eg. `products/attributes`) |
| `queryString` | string | An additional query string to add to the request for the collection. Note, collections are cached by the query string. (eg. '?order=ASC') |
| `ids` | array | If the collection route has placeholders for ids, you provide them via this argument in the order of how the placeholders appear in the route |
| `response` | Object | An object containing a `items` property with the collection items from the response (array), and a `headers` property that is matches the `window.Headers` interface containing the headers from the response. |
| `replace` | boolean | Whether or not to replace any existing items in the store for the given indexes (namespace, resourceName, queryString) if there are already values in the store |
| argument | type | description |
| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `namespace` | string | The route namespace for the collection (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the collection (eg. `products/attributes`) |
| `queryString` | string | An additional query string to add to the request for the collection. Note, collections are cached by the query string. (eg. '?order=ASC') |
| `ids` | array | If the collection route has placeholders for ids, you provide them via this argument in the order of how the placeholders appear in the route |
| `response` | Object | An object containing a `items` property with the collection items from the response (array), and a `headers` property that is matches the `window.Headers` interface containing the headers from the response. |
| `replace` | boolean | Whether or not to replace any existing items in the store for the given indexes (namespace, resourceName, queryString) if there are already values in the store |
## Selectors
@ -29,12 +29,12 @@ This will return an action object for the given arguments used in dispatching th
This selector will return the collection for the given arguments. It has a sibling resolver, so if the selector has never been resolved, the resolver will make a request to the server for the collection and dispatch results to the store.
| argument | type | description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `namespace` | string | The route namespace for the collection (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the collection (eg. `products/attributes`) |
| `query` | Object | The query arguments for the collection. Eg. `{ order: 'ASC', sortBy: Price }` |
| `ids` | Array | If the collection route has placeholders for ids you provide the values for those placeholders in this array (in order). |
| argument | type | description |
| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
| `namespace` | string | The route namespace for the collection (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the collection (eg. `products/attributes`) |
| `query` | Object | The query arguments for the collection. Eg. `{ order: 'ASC', sortBy: Price }` |
| `ids` | Array | If the collection route has placeholders for ids you provide the values for those placeholders in this array (in order). |
### `getCollectionHeader( namespace, resourceName, header, query = null, ids = [])`
@ -44,10 +44,10 @@ If the collection has headers but not a matching header for the given `header` a
If the collection does not have any matching headers for the given arguments, then `null` is returned.
| argument | type | description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `namespace` | string | The route namespace for the collection (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the collection (eg. `products/attributes`) |
| `header` | string | The header key for the header. |
| `query` | Object | The query arguments for the collection. Eg. `{ order: 'ASC', sortBy: Price }` |
| `ids` | Array | If the collection route has placeholders for ids you provide the values for those placeholders in this array (in order). |
| argument | type | description |
| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
| `namespace` | string | The route namespace for the collection (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the collection (eg. `products/attributes`) |
| `header` | string | The header key for the header. |
| `query` | Object | The query arguments for the collection. Eg. `{ order: 'ASC', sortBy: Price }` |
| `ids` | Array | If the collection route has placeholders for ids you provide the values for those placeholders in this array (in order). |

2
plugins/woocommerce-blocks/assets/js/data/query-state/README.md
View File

@ -1,4 +1,4 @@
# Query State Store.
# Query State Store
To utilize this store you will import the `QUERY_STATE_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:

16
plugins/woocommerce-blocks/assets/js/data/schema/README.md
View File

@ -5,7 +5,8 @@ To utilize this store you will import the `SCHEMA_STORE_KEY` in any module refer
```js
import { SCHEMA_STORE_KEY } from '@woocommerce/block-data';
```
## Actions
## Actions
The following actions are used for dispatching data to this store state.
@ -26,17 +27,18 @@ This returns an action object used to update the store with the provided list of
This is used for retrieving a route for the given namespace, resource name and (if necessary) ids.
Example: If you are looking for a route for a single product on the `wc/blocks` namespace, then you'd have `[20]` as the ids.
Example: If you are looking for a route for a single product on the `wc/blocks` namespace, then you'd have `[20]` as the ids.
```js
// '/wc/blocks/products/20'
wp.data.select( SCHEMA_STORE_KEY ).getRoute( '/wc/blocks', 'products', [20] );
wp.data.select( SCHEMA_STORE_KEY ).getRoute( '/wc/blocks', 'products', [ 20 ] );
```
| Argument | Type | Description |
| ----------- | ------ | -------------------------------------------------------------- |
| `namespace` | string | Namespace for the route (eg. `/wc/blocks`) |
| Argument | Type | Description |
| -------------- | ------ | ----------------------------------------------------------------- |
| `namespace` | string | Namespace for the route (eg. `/wc/blocks`) |
| `resourceName` | string | The resource name for the route (eg. `products/attributes/terms`) |
| `ids` | array | Only needed if the route has placeholders for ids. |
| `ids` | array | Only needed if the route has placeholders for ids. |
### `getRoutes( namespace )`

87
plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/README.md
View File

@ -1,5 +1,4 @@
SearchListControl
===
# SearchListControl
Component to display a searchable, selectable list of items.
@ -10,49 +9,47 @@ Component to display a searchable, selectable list of items.
list={ list }
isLoading={ loading }
selected={ selected }
onChange={ items => setState( { selected: items } ) }
onChange={ ( items ) => setState( { selected: items } ) }
/>
```
### Props
Name | Type | Default | Description
--- | --- | --- | ---
`className` | String | `null` | Additional CSS classes
`isHierarchical` | Boolean | `null` | Whether the list of items is hierarchical or not. If true, each list item is expected to have a parent property
`isLoading` | Boolean | `null` | Whether the list of items is still loading
`isSingle` | Boolean | `null` | Restrict selections to one item
`list` | Array | `null` | A complete list of item objects, each with id, name properties. This is displayed as a clickable/keyboard-able list, and possibly filtered by the search term (searches name)
`messages` | Object | `null` | Messages displayed or read to the user. Configure these to reflect your object type. See `defaultMessages` above for examples
`onChange` | Function | `null` | (required) Callback fired when selected items change, whether added, cleared, or removed. Passed an array of item objects (as passed in via props.list)
`onSearch` | Function | `null` | Callback fired when the search field is used
`renderItem` | Function | `null` | Callback to render each item in the selection list, allows any custom object-type rendering
`selected` | Array | `null` | (required) The list of currently selected items
`search` | String | `null` |
`setState` | Function | `null` |
`debouncedSpeak` | Function | `null` |
`instanceId` | Number | `null` |
| Name | Type | Default | Description |
| ---------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | String | `null` | Additional CSS classes |
| `isHierarchical` | Boolean | `null` | Whether the list of items is hierarchical or not. If true, each list item is expected to have a parent property |
| `isLoading` | Boolean | `null` | Whether the list of items is still loading |
| `isSingle` | Boolean | `null` | Restrict selections to one item |
| `list` | Array | `null` | A complete list of item objects, each with id, name properties. This is displayed as a clickable/keyboard-able list, and possibly filtered by the search term (searches name) |
| `messages` | Object | `null` | Messages displayed or read to the user. Configure these to reflect your object type. See `defaultMessages` above for examples |
| `onChange` | Function | `null` | (required) Callback fired when selected items change, whether added, cleared, or removed. Passed an array of item objects (as passed in via props.list) |
| `onSearch` | Function | `null` | Callback fired when the search field is used |
| `renderItem` | Function | `null` | Callback to render each item in the selection list, allows any custom object-type rendering |
| `selected` | Array | `null` | (required) The list of currently selected items |
| `search` | String | `null` |
| `setState` | Function | `null` |
| `debouncedSpeak` | Function | `null` |
| `instanceId` | Number | `null` |
### `list` item structure:
### `list` item structure
- `id`: Number
- `name`: String
- `id`: Number
- `name`: String
### `messages` object structure:
### `messages` object structure
- `clear`: String - A more detailed label for the "Clear all" button, read to screen reader users.
- `list`: String - Label for the list of selectable items, only read to screen reader users.
- `noItems`: String - Message to display when the list is empty (implies nothing loaded from the server
or parent component).
- `noResults`: String - Message to display when no matching results are found. %s is the search term.
- `search`: String - Label for the search input
- `selected`: Function - Label for the selected items. This is actually a function, so that we can pass
through the count of currently selected items.
- `updated`: String - Label indicating that search results have changed, read to screen reader users.
- `clear`: String - A more detailed label for the "Clear all" button, read to screen reader users.
- `list`: String - Label for the list of selectable items, only read to screen reader users.
- `noItems`: String - Message to display when the list is empty (implies nothing loaded from the server
or parent component).
- `noResults`: String - Message to display when no matching results are found. %s is the search term.
- `search`: String - Label for the search input
- `selected`: Function - Label for the selected items. This is actually a function, so that we can pass
through the count of currently selected items.
- `updated`: String - Label indicating that search results have changed, read to screen reader users.
SearchListItem
===
# SearchListItem
## Usage
@ -60,13 +57,13 @@ Used implicitly by `SearchListControl` when the `renderItem` prop is omitted.
### Props
Name | Type | Default | Description
--- | --- | --- | ---
`className` | String | `null` | Additional CSS classes
`countLabel` | ReactNode | `null` | Label to display in the count bubble. Takes preference over `item.count`.
`depth` | Number | `0` | Depth, non-zero if the list is hierarchical
`item` | Object | `null` | Current item to display
`isSelected` | Boolean | `null` | Whether this item is selected
`isSingle` | Boolean | `null` | Whether this should only display a single item (controls radio vs checkbox icon)
`onSelect` | Function | `null` | Callback for selecting the item
`search` | String | `''` | Search string, used to highlight the substring in the item name
| Name | Type | Default | Description |
| ------------ | --------- | ------- | -------------------------------------------------------------------------------- |
| `className` | String | `null` | Additional CSS classes |
| `countLabel` | ReactNode | `null` | Label to display in the count bubble. Takes preference over `item.count`. |
| `depth` | Number | `0` | Depth, non-zero if the list is hierarchical |
| `item` | Object | `null` | Current item to display |
| `isSelected` | Boolean | `null` | Whether this item is selected |
| `isSingle` | Boolean | `null` | Whether this should only display a single item (controls radio vs checkbox icon) |
| `onSelect` | Function | `null` | Callback for selecting the item |
| `search` | String | `''` | Search string, used to highlight the substring in the item name |

19
plugins/woocommerce-blocks/assets/js/editor-components/tag/README.md
View File

@ -1,11 +1,8 @@
Tag
===
# Tag
This component can be used to show an item styled as a "tag", optionally with an `X` + "remove"
or with a popover that is shown on click.
## Usage
```jsx
@ -16,10 +13,10 @@ or with a popover that is shown on click.
### Props
Name | Type | Default | Description
--- | --- | --- | ---
`id` | One of type: number, string | `null` | The ID for this item, used in the remove function
`label` | String | `null` | (required) The name for this item, displayed as the tag's text
`popoverContents` | ReactNode | `null` | Contents to display on click in a popover
`remove` | Function | `null` | A function called when the remove X is clicked. If not used, no X icon will display
`screenReaderLabel` | String | `null` | A more descriptive label for screen reader users. Defaults to the `name` prop
| Name | Type | Default | Description |
| ------------------- | --------------------------- | ------- | ----------------------------------------------------------------------------------- |
| `id` | One of type: number, string | `null` | The ID for this item, used in the remove function |
| `label` | String | `null` | (required) The name for this item, displayed as the tag's text |
| `popoverContents` | ReactNode | `null` | Contents to display on click in a popover |
| `remove` | Function | `null` | A function called when the remove X is clicked. If not used, no X icon will display |
| `screenReaderLabel` | String | `null` | A more descriptive label for screen reader users. Defaults to the `name` prop |

18
plugins/woocommerce-blocks/assets/js/legacy/README.md
View File

@ -1,5 +1,6 @@
This folder is used to hold any components/code that will get exported to the
legacy build.
# Legacy Build
This folder is used to hold any components/code that will get exported to the legacy build.
> Currently, builds in this folder target WP < 5.3
@ -17,9 +18,8 @@ Note: you _must_ copy all files related to the entry point for that module accor
Legacy builds will be identical to the main builds except:
- files will have a `-legacy` suffix (so server can conditionally enqueue). It is expected that the server will load either the main or the legacy bundles, not both.
- any imports not in the legacy folder will fallback to the main file.
- files will have a `-legacy` suffix (so server can conditionally enqueue). It is expected that the server will load either the main or the legacy bundles, not both.
- any imports not in the legacy folder will fallback to the main file.
## How does the legacy system work?
@ -31,10 +31,10 @@ We use aliases for paths covering anything that might need a legacy version. The
Current aliases are:
- `@woocommerce/base-components` -> `assets/js/base/components/`
- `@woocommerce/base-hocs` -> `assets/js/base/hocs/`
- `@woocommerce/editor-components` -> `assets/js/editor-components`
- `@woocommerce/block-hocs` -> `assets/js/block-hocs`
- `@woocommerce/base-components` -> `assets/js/base/components/`
- `@woocommerce/base-hocs` -> `assets/js/base/hocs/`
- `@woocommerce/editor-components` -> `assets/js/editor-components`
- `@woocommerce/block-hocs` -> `assets/js/block-hocs`
When importing, if outside the module referenced by that path, import from the alias. That will ensure that at compile time the bundles can pull from the appropriate location.

2
plugins/woocommerce-blocks/bin/add-doc-footer.sh
View File

@ -1,11 +1,13 @@
#!/bin/bash
function update_footer {
export REPLACEWITH='
---
[We'\''re hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20'$1')
'
# Replace everything after <!-- FEEDBACK -->

58
plugins/woocommerce-blocks/bin/changelog/README.md
View File

@ -2,7 +2,7 @@
This folder contains the logic for a changelog script that can be used for generating changelog entries from either pull requests added to a Github milestone, or pull requests that are part of a Zenhub release.
## Usage:
## Usage
By default, changelog entries will use the title of pull requests. However, you can also customize the changelog entry by adding to the description of the pull custom text in the following format.
@ -16,9 +16,9 @@ You can implement the script in your `package.json` in the simplest form by addi
```json
{
"scripts": {
"changelog": "node ./bin/changelog",
}
"scripts": {
"changelog": "node ./bin/changelog"
}
}
```
@ -30,45 +30,47 @@ The following configuration options can be set for the changelog script. **Note:
The 'variable' in the following table can be used in `package.json` or as a cli arg.
| variable | description |
| ---- | ---- |
| labelPrefix | Any labels prefixed with this string will be used to derive the "type" of change (defaults to `type:`). |
| skipLabel | Any pull having this label will be skipped for the changelog (defaults to `no-changelog`). |
| defaultPrefix | When there is no label with the `labelPrefix` on a pull, this is the default type that will be used for the changelog entry (defaults to `dev`). |
| changelogSrcType | Either "MILESTONE" (default) or "ZENHUB_RELEASE". This determines what will serve as the source for the changelog entries.
| devNoteLabel | If a pull has this label then `[DN]` will be appended to the end of the changelog. It's a good way to indicate what entries have (or will have) dev notes.
| repo | This is the namespace for the github repository used as the source for pulls used in the changelog entries. Example: `'woocommerce/woocommerce-gutenberg-products-block'`
| ghApiToken | You can pass your github api token to the script. NOTE: Strongly recommend you use environment variable for this. |
| zhApiKey | You can pass your zenhub api key to the script using this config. NOTE: Strongly recommend you use environment variable for this. |
| variable | description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| labelPrefix | Any labels prefixed with this string will be used to derive the "type" of change (defaults to `type:`). |
| skipLabel | Any pull having this label will be skipped for the changelog (defaults to `no-changelog`). |
| defaultPrefix | When there is no label with the `labelPrefix` on a pull, this is the default type that will be used for the changelog entry (defaults to `dev`). |
| changelogSrcType | Either "MILESTONE" (default) or "ZENHUB_RELEASE". This determines what will serve as the source for the changelog entries. |
| devNoteLabel | If a pull has this label then `[DN]` will be appended to the end of the changelog. It's a good way to indicate what entries have (or will have) dev notes. |
| repo | This is the namespace for the github repository used as the source for pulls used in the changelog entries. Example: `'woocommerce/woocommerce-gutenberg-products-block'` |
| ghApiToken | You can pass your github api token to the script. NOTE: Strongly recommend you use environment variable for this. |
| zhApiKey | You can pass your zenhub api key to the script using this config. NOTE: Strongly recommend you use environment variable for this. |
The two environment variables you can use are:
| Environment Variable | Description |
| -------------------- | ---------- |
| GH_API_TOKEN | Github API token for authorizing on the github API. |
| ZH_API_TOKEN | Zenhub api token used for authorizing against the zenhub API. |
| Environment Variable | Description |
| -------------------- | ------------------------------------------------------------- |
| GH_API_TOKEN | Github API token for authorizing on the github API. |
| ZH_API_TOKEN | Zenhub api token used for authorizing against the zenhub API. |
### Examples:
### Examples
**package.json**:
#### package.json
```json
{
"changelog": {
"labelPrefix": "type:",
"skipLabel": "skip-changelog",
"defaultPrefix": "dev",
"repo": "woocommerce/woocommerce-gutenberg-products-block"
},
"changelog": {
"labelPrefix": "type:",
"skipLabel": "skip-changelog",
"defaultPrefix": "dev",
"repo": "woocommerce/woocommerce-gutenberg-products-block"
}
}
```
**Environment Variable**
#### Environment Variable
```bash
GH_API_TOKEN="1343ASDFQWER13241REASD" node ./bin/changelog
```
**Command Line**
#### Command Line
```bash
node ./bin/changelog --labelPrefix="type:" --skipLabel="skip-changelog" --defaultPrefix="dev" --repo="woocommerce/woocommerce-gutenberg-products-block" --ghApiToken="1343ASDFQWER13241REASD"
```

2
plugins/woocommerce-blocks/bin/hook-docs/data/actions.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://raw.githubusercontent.com/johnbillion/wp-hooks-generator/0.7.0/schema.json",
"$schema": "https://raw.githubusercontent.com/johnbillion/wp-hooks-generator/0.7.3/schema.json",
"hooks": [
{
"name": "woocommerce_add_to_cart",

4
plugins/woocommerce-blocks/bin/hook-docs/data/filters.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://raw.githubusercontent.com/johnbillion/wp-hooks-generator/0.7.0/schema.json",
"$schema": "https://raw.githubusercontent.com/johnbillion/wp-hooks-generator/0.7.3/schema.json",
"hooks": [
{
"name": "__experimental_woocommerce_blocks_add_data_attributes_to_block",
@ -880,7 +880,7 @@
"tags": [
{
"name": "param",
"content": "Quantity limit which defaults to 99 unless sold individually.",
"content": "Quantity limit which defaults to 9999 unless sold individually.",
"types": [
"integer"
],

6
plugins/woocommerce-blocks/docs/README.md
View File

@ -10,13 +10,15 @@ The WooCommerce Blocks Handbook provides documentation for designers and develop
| [Store API (REST API)](../src/StoreApi/README.md) | These documents cover the Store API used to get product data on the frontend. |
| [Extensibility](extensibility/README.md) | These documents cover extensibility of WooCommerce Blocks. |
| [Theming](theming/README.md) | These documents cover theming for blocks, styles, CSS classnames and other theming best practices. |
| [Templates](templates/README.md) | These documents provide a technical overview of WooCommerce block template (parts) functionality. |
| [Templates](templates/README.md) | These documents provide a technical overview of WooCommerce block template (parts) functionality. |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/readme.md)
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/README.md)
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/block-client-apis/README.md
View File

@ -13,10 +13,12 @@ For more details about extensibility points in the blocks, you can reference the
| [Notices](./notices.md) | Explains how the notices system works and which methods are available to add an remove them. |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/block-client-apis/README.md)
<!-- /FEEDBACK -->

16
plugins/woocommerce-blocks/docs/block-client-apis/checkout/checkout-api.md
View File

@ -47,13 +47,13 @@ The customer data context exposes the api interfaces for the following things vi
The shipping method data context exposes the api interfaces for the following things (typedef `ShippingMethodDataContext`) via the `useShippingMethodData` hook:
- `shippingErrorStatus`: The current error status for the context.
- `dispatchErrorStatus`: A function for dispatching a shipping error status. Used in combination with...
- `shippingErrorTypes`: An object with the various error statuses that can be dispatched (`NONE`, `INVALID_ADDRESS`, `UNKNOWN`)
- `onShippingRateSuccess`: This is a function for registering a callback to be invoked when shipping rates are retrieved successfully. Callbacks will receive the new rates as an argument.
- `onShippingRateFail`: This is a function for registering a callback to be invoked when shipping rates fail to be retrieved. Callbacks will receive the error status as an argument.
- `onShippingRateSelectSuccess`: This is a function for registering a callback to be invoked when shipping rate selection is successful.
- `onShippingRateSelectFail`: This is a function for registering a callback to be invoked when shipping rates selection is unsuccessful.
- `shippingErrorStatus`: The current error status for the context.
- `dispatchErrorStatus`: A function for dispatching a shipping error status. Used in combination with...
- `shippingErrorTypes`: An object with the various error statuses that can be dispatched (`NONE`, `INVALID_ADDRESS`, `UNKNOWN`)
- `onShippingRateSuccess`: This is a function for registering a callback to be invoked when shipping rates are retrieved successfully. Callbacks will receive the new rates as an argument.
- `onShippingRateFail`: This is a function for registering a callback to be invoked when shipping rates fail to be retrieved. Callbacks will receive the error status as an argument.
- `onShippingRateSelectSuccess`: This is a function for registering a callback to be invoked when shipping rate selection is successful.
- `onShippingRateSelectFail`: This is a function for registering a callback to be invoked when shipping rates selection is unsuccessful.
#### Payment Method Data Context
@ -116,10 +116,12 @@ _Why don't payment methods just implement this hook_?
The contract is established through props fed to the payment method components via props. This allows us to avoid having to expose the hook publicly and experiment with how the props are retrieved and exposed in the future.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/block-client-apis/checkout/checkout-api.md)
<!-- /FEEDBACK -->

68
plugins/woocommerce-blocks/docs/block-client-apis/notices.md
View File

@ -152,6 +152,71 @@ Object of the form:
Refer to the [Gutenberg docs](https://github.com/WordPress/gutenberg/blob/master/packages/notices/src/store/actions.js#L46) to know the available options.
## useStoreSnackbarNotices()
The `useStoreNotices()` hook allows reading and manipulating snackbar notices in the frontend.
The snackbar is a small toast-like notification that appears at the bottom of a user's screen.
![Applied coupon code](https://user-images.githubusercontent.com/5656702/124294673-dd803b80-db4f-11eb-81ec-02fb962d04ed.png)
### API
#### `addSnackbarNotice( text = '', noticeProps = {} )`
Create a new snackbar notice.
| Argument | Type | Description |
| ------------- | ------ | -------------------------------------------------- |
| `text` | string | Text to be displayed in the notice. |
| `noticeProps` | Object | Object with the [notice options](#notice-options). |
#### `notices`
An array of the notices in the current context.
#### `removeNotices( status = null )`
Remove all notices from the current context. If a `status` is provided, only the notices with that status are removed.
| Argument | Type | Description |
| -------- | ------ | ----------------------------------------------------------------------------------------------------- |
| `status` | string | Status that notices must match to be removed. If not provided, all notices of any status are removed. |
## StoreSnackbarNoticesProvider
The `StoreSnackbarNoticesProvider` allows managing snackbar notices in the frontend. Snackbar notices are displayed in the bottom left corner and disappear after a certain time.
Internally, it uses the `StoreNoticesContext` which relies on the [`notices` package](https://github.com/WordPress/gutenberg/tree/master/packages/notices) from Gutenberg.
### Actions
#### `createSnackbarNotice( content = '', options = {} )`
This action creates a new snackbar notice. If the context is not specified in the `options` object, the current context is used.
| Argument | Type | Description |
| --------- | ------ | -------------------------------------------------- |
| `content` | string | Text to be displayed in the notice. |
| `options` | Object | Object with the [notice options](#notice-options). |
#### `removeSnackbarNotice( id, ctx )`
This action removes an existing notice. If the context is not specified, the current context is used.
| Argument | Type | Description |
| -------- | ------ | ----------------------------------------------------------------------------------------------------------- |
| `id` | string | Id of the notice to remove. |
| `ctx` | string | Context where the notice to remove is stored. If the context is not specified, the current context is used. |
#### `setIsSuppressed( val )`
Whether notices are suppressed. If true, it will hide the notices from the frontend.
| Argument | Type | Description |
| -------- | ------- | --------------------------- |
| `val` | boolean | Id of the notice to remove. |
## Example usage
The following example shows a `CheckoutProcessor` component that displays an error notice when the payment process fails and it removes it every time the payment is started. When the payment is completed correctly, it shows a snackbar notice.
@ -178,10 +243,11 @@ const CheckoutProcessor = () => {
```
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/block-client-apis/notices.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/blocks/README.md
View File

@ -8,10 +8,12 @@ This folder contains documentation for specific Blocks and Blocks functionality.
| [Features Flags and Experimental interfaces](./feature-flags-and-experimental-interfaces.md) | This doc outlines all the current features that are gated behind a feature or experimental flag as well as any interfaces that are experimental |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/blocks/README.md)
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/blocks/feature-flags-and-experimental-interfaces.md
View File

@ -1,3 +1,5 @@
# Feature Gating System
We have feature gating system setup in our plugin that defines what is accessible to the public and what is not, it has three phases:
- **Core flag `WOOCOMMERCE_BLOCKS_PHASE=1`:** anything that is not hidden behind a flag, falls under this category, and it contains all of the code that runs on WooCommerce Core plugin.
@ -131,10 +133,11 @@ Current list of events:
- `experimental__woocommerce_blocks-checkout-set-phone-number` - Fired when a phone number is added during checkout.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/blocks/feature-flags-and-experimental-interfaces.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/blocks/stock-reservation.md
View File

@ -95,10 +95,12 @@ The point of which stock is reserved differs between the new Block based checkou
You can see that in both Checkouts, if stock cannot be reserved for all items in the order, either the order is rejected, or the user cannot proceed with checkout.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/blocks/stock-reservation.md)
<!-- /FEEDBACK -->

20
plugins/woocommerce-blocks/docs/contributors/README.md
View File

@ -2,21 +2,23 @@
This folder contains documentation for developers and contributors looking to get started with WooCommerce Block Development.
| Document | Description |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [Getting Started](getting-started.md) | This doc covers tooling and creating builds during development. |
| [Coding Guidelines](coding-guidelines.md) | This doc covers development best practices. |
| [JavaScript Testing](javascript-testing.md) | This doc explains how to run automated JavaScript tests. |
| [Developing Components (& Storybook)](components.md) | This doc outlines where our reusable components live, and how to test them in Storybook. |
| [Block Script Assets](block-assets.md) | This doc explains how Block Script Assets are loaded and used. |
| [JS build system](js-build-system.md) | This doc explains how JavaScript files are built. |
| [CSS build system](css-build-system.md) | This doc explains how CSS is built. |
| Document | Description |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| [Getting Started](getting-started.md) | This doc covers tooling and creating builds during development. |
| [Coding Guidelines](coding-guidelines.md) | This doc covers development best practices. |
| [JavaScript Testing](javascript-testing.md) | This doc explains how to run automated JavaScript tests. |
| [Developing Components (& Storybook)](components.md) | This doc outlines where our reusable components live, and how to test them in Storybook. |
| [Block Script Assets](block-assets.md) | This doc explains how Block Script Assets are loaded and used. |
| [JS build system](js-build-system.md) | This doc explains how JavaScript files are built. |
| [CSS build system](css-build-system.md) | This doc explains how CSS is built. |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/README.md)
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/contributors/block-assets.md
View File

@ -79,10 +79,12 @@ wc.wcSettings.getSetting( 'key' );
```
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/block-assets.md)
<!-- /FEEDBACK -->

51
plugins/woocommerce-blocks/docs/contributors/coding-guidelines.md
View File

@ -25,28 +25,29 @@ All class names assigned to an element must be prefixed. We use different prefix
As a rule of thumb, this is the relation between location in the source tree and class name used:
| Location in the tree | Class names used | Can be styled by themes? |
| --------------------------- | ----------------------------------------------------- | :----------------------: |
| assets/js/atomic/blocks | `.wc-block-components-` | ✓ |
| assets/js/base/components | `.wc-block-components-` | ✓ |
| assets/js/blocks | Frontend: `.wc-block-`<br>Editor: `.wc-block-editor-` | ✓<br>✘ |
| assets/js/editor-components | `.wc-block-editor-components-` | ✘ |
| Location in the tree | Class names used | Can be styled by themes? |
| --------------------------- | ------------------------------ | :----------------------: |
| assets/js/atomic/blocks | `.wc-block-components-` | ✓ |
| assets/js/base/components | `.wc-block-components-` | ✓ |
| assets/js/blocks | Frontend: `.wc-block-` | ✓ |
| assets/js/blocks | Editor: `.wc-block-editor-` | ✘ |
| assets/js/editor-components | `.wc-block-editor-components-` | ✘ |
After the prefix, class names are built using BEM:
A **root element** (or **Block** in BEM notation) is a standalone entity that is meaningful on its own. Whilst they can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
Example: `wc-block-directory-name`
Example: `wc-block-directory-name`
Any descendant of the component's root element must append a dash-delimited descriptor, separated from the base by two consecutive underscores `__`.
A **child element** (or **Element** in BEM notation) has no standalone meaning and is semantically tied to its block.
Example: `wc-block-directory-name__descriptor-foo-bar`
Example: `wc-block-directory-name__descriptor-foo-bar`
Finally, A **modifier** is a flag on an element which can be used to change appearance, behavior or state.
Example: `wc-block-directory-name__descriptor-foo-bar--state`
Example: `wc-block-directory-name__descriptor-foo-bar--state`
The **root element** is considered to be the highest ancestor element returned by the default export in the index.js. Notably, if your folder contains multiple files, each with their own default exported component, only the element rendered by that of index.js can be considered the root. All others should be treated as **descendants**.
@ -109,24 +110,27 @@ Imagine we are styling the radio control input but our styles are conflicting wi
Theme A:
```
input[type="radio"] { // specificity 0, 1, 1
```css
input[type='radio'] {
// specificity 0, 1, 1
background: red;
}
```
Theme B:
```
input[type="radio"]:checked { // specificity 0, 2, 1
```css
input[type='radio']:checked {
// specificity 0, 2, 1
background: blue;
}
```
And these are the styles of the block:
```
.wc-block-components-radio-control__input { // specificity 0, 1, 0
```css
.wc-block-components-radio-control__input {
// specificity 0, 1, 0
background: #fff;
}
```
@ -135,12 +139,12 @@ As you can see, the styles coming from the themes have higher specificity, so ou
1. Never use `!important` rules in CSS to engage in a specificity war with a theme.
2. Never use ID selectors.
3. Try wrapping the entire component/block CSS with the root class name of that component:
For example:
3. Try wrapping the entire component/block CSS with the root class name of that component, for example:
```
```css
.wc-block-components-radio-control {
.wc-block-components-radio-control__input { // specificity 0, 2, 0, we win theme A!
.wc-block-components-radio-control__input {
// specificity 0, 2, 0, we win theme A!
background: #fff;
}
}
@ -148,10 +152,12 @@ As you can see, the styles coming from the themes have higher specificity, so ou
4. Try adding an extra css class (or tag selector) to increase specificity. When doing so, add a comment explaining it.
```
```css
.wc-block-components-radio-control {
// Extra class for specificity.
.wc-block-components-radio-control__option .wc-block-components-radio-control__input { // specificity 0, 3, 0, we win theme B!
.wc-block-components-radio-control__option
.wc-block-components-radio-control__input {
// specificity 0, 3, 0, we win theme B!
background: #fff;
}
}
@ -162,10 +168,11 @@ As you can see, the styles coming from the themes have higher specificity, so ou
Notice in the worst case scenario we would have increased selector specificity by 2 classes (0, 2, 0). That shouldn't make it too difficult for other themes to write styles on top of ours.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/coding-guidelines.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

34
plugins/woocommerce-blocks/docs/contributors/components.md
View File

@ -4,48 +4,50 @@ This repo includes [Storybook](https://storybook.js.org) tooling so we can test
The storybook is automatically built and published to [GitHub pages](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) on every push to the main branch. See [travis.yml](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/.travis.yml) for details.
https://woocommerce.github.io/woocommerce-gutenberg-products-block/
<https://woocommerce.github.io/woocommerce-gutenberg-products-block/>
## Where are our components?
We have components in a few folders, for different contexts.
- [`assets/js/base/components`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/base/components)
- [`assets/js/editor-components`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/editor-components)
- [`assets/js/icons`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/icons)
- [`assets/js/base/components`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/base/components)
- [`assets/js/editor-components`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/editor-components)
- [`assets/js/icons`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/icons)
__`assets/js/base/components`__ are used in front-end code, as well as editor & admin.
**`assets/js/base/components`** are used in front-end code, as well as editor & admin.
These components help us build consistent interfaces across the front end (shopper) experience and elsewhere.
Because they can be used in the front end and editor, components in this folder should:
- Perform efficiently - i.e. not adversely affect page performance/experience.
- Have lean dependencies - i.e. not bloat the payload unnecessarily.
- Look consistent in common themes; ideally should allow themes to adjust appearance as necessary.
- Perform efficiently - i.e. not adversely affect page performance/experience.
- Have lean dependencies - i.e. not bloat the payload unnecessarily.
- Look consistent in common themes; ideally should allow themes to adjust appearance as necessary.
__`assets/js/editor-components`__ are used in the editor UI for our blocks.
**`assets/js/editor-components`** are used in the editor UI for our blocks.
They allow us to build a consistent and powerful UI for merchants for authoring content relating to Woo data - e.g. selecting products or product attributes. Because they are focused on the editor, they can rely on known editor dependencies and optimise styling for the editor only.
__`assets/js/icons`__ is a suite of icons and SVG images that we use in our interfaces.
**`assets/js/icons`** is a suite of icons and SVG images that we use in our interfaces.
For more info about individual components, refer to [Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) or individual readme files.
## How to run Storybook locally and test components
- `npm run storybook`
- Point your browser at port 6006, e.g. http://localhost:6006
- Play with components 🎛!
- `npm run storybook`
- Point your browser at port 6006, e.g. <http://localhost:6006>
- Play with components 🎛!
## How to add a story for a component
- Add a `stories` folder alongside the component.
- Add stories in `.js` files in this folder.
- Add a `stories` folder alongside the component.
- Add stories in `.js` files in this folder.
If you're stuck, copy source of an existing story to get started.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/components.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/contributors/css-build-system.md
View File

@ -31,10 +31,12 @@ Webpack config is split between several files, some relevant ones for the CSS bu
- [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/css-build-system.md)
<!-- /FEEDBACK -->

69
plugins/woocommerce-blocks/docs/contributors/documentation-guidelines.md
View File

@ -1,27 +1,27 @@
# Documentation Guidelines
- [Use active instead of passive voice](#use-active-instead-of-passive-voice)
- [Use the personal pronoun “you”](#use-the-personal-pronoun-you)
- [Don’t use gendered pronouns](#dont-use-gendered-pronouns)
- [Filename must resemble the title](#filename-must-resemble-the-title)
- [Use correct heading hierarchy](#use-correct-heading-hierarchy)
- [Use semantically correct markup](#use-semantically-correct-markup)
- [Use correct spelling](#use-correct-spelling)
- [Use images not wider than 50% width](#use-images-not-wider-than-50-width)
- [Use descriptive links](#use-descriptive-links)
- [Explain arguments](#explain-arguments)
- [Explicitly define language for code examples](#explicitly-define-language-for-code-examples)
- [Use table of contents for top-level readme](#use-table-of-contents-for-top-level-readme)
- [Use internal links](#use-internal-links)
- [Sort releases descending](#sort-releases-descending)
- [Structure “How to” instructions](#structure-how-to-instructions)
- [Link references](#link-references)
- [Use active instead of passive voice](#use-active-instead-of-passive-voice)
- [Use the personal pronoun “you”](#use-the-personal-pronoun-you)
- [Don’t use gendered pronouns](#dont-use-gendered-pronouns)
- [Filename must resemble the title](#filename-must-resemble-the-title)
- [Use correct heading hierarchy](#use-correct-heading-hierarchy)
- [Use semantically correct markup](#use-semantically-correct-markup)
- [Use correct spelling](#use-correct-spelling)
- [Use images not wider than 50% width](#use-images-not-wider-than-50-width)
- [Use descriptive links](#use-descriptive-links)
- [Explain arguments](#explain-arguments)
- [Explicitly define language for code examples](#explicitly-define-language-for-code-examples)
- [Use table of contents for top-level readme](#use-table-of-contents-for-top-level-readme)
- [Use internal links](#use-internal-links)
- [Sort releases descending](#sort-releases-descending)
- [Structure “How to” instructions](#structure-how-to-instructions)
- [Link references](#link-references)
## Use active instead of passive voice
Active voice should be preferred over passive voice. Passive voice can be used, when it fits better.
**Example**
### Example
- **Active voice:** You want to render your own components in specific places in the Cart and Checkout.
- **Passive voice:** Slots and Fills add the possibility to render your own HTML in pre-defined places in the Cart and Checkout.
@ -38,7 +38,7 @@ Gendered pronouns (she/her/hers and he/him/his) must not be used.
The filename of the document must match the title.
**Example**
### Example
- **Title:** Slots and Fills
- **Filename:** slots-and-fills.md
@ -47,7 +47,7 @@ The filename of the document must match the title.
Correct H1-H6 headings must be used. Each document can only have one H1 heading. An H3 heading can only be used within an H2 heading, an H4 heading can only be used within an H3 heading, etc. If possible, avoid using articles in headings.
**Example**
### Example
- **Incorrect:** The problem
- **Correct:** Problem
@ -60,7 +60,7 @@ The markup used must be semantically correct, e.g. list markup must only be used
Classes and tokens from the codebase must be written exactly as they appear in the codebase. Proper nouns must be written correctly.
**Example**
### Example
- **RestApi:** The `p` and the `i` of `RestApi` are written in lowercase
- **Composer:** The `C` of `Composer` is written in uppercase.
@ -74,7 +74,7 @@ Embedded images should not exceed a width of 50%.
When linking to another document, a descriptive link text must be used.
**Example**
### Example
- **Incorrect:** Check this document
- **Correct:** Check the Slot Fill documentation
@ -83,7 +83,7 @@ When linking to another document, a descriptive link text must be used.
When listing or describing arguments, a table must be used to describe them. Refer to them as either arguments or props, depending on if they’re being used on a component or in a function/method. In the table, the description column should begin with a capital letter and end in a full stop. When listing an argument that is an array/object, list the argument name, type: array/object and a high-level description of what the purpose of the argument is. Then below, you detail the individual keys of the array/object.
**Example**
### Example
| Argument | Type | Default value | Required | Description |
| -------- | ---- | ------------- | -------- | ----------- |
@ -93,28 +93,24 @@ When listing or describing arguments, a table must be used to describe them. Ref
When using code examples, the fence format and the language definition must be used.
**Example**
### Example
- **CSS code example:**
<pre>
#### CSS code example
```CSS
````text
```css
/* This will apply to prices in the checkout block */
.wc-block-checkout .wc-block-components-formatted-money-amount {
font-style: italic;
}
```
````
</pre>
- **JS code example:**
<pre>
#### JS code example
````text
```js
import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
```
</pre>
````
## Use table of contents for top-level readme
@ -128,7 +124,7 @@ When listing features and options, e.g. ExperimentalOrderMeta, a table of conten
Releases must be sorted starting with the most recent release.
**Example**
### Example
- 5.7.1
- 5.7.0
@ -150,10 +146,11 @@ When explaining functionality, the following structure should be used:
When referencing other documentations, the corresponding document should be linked.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/documentation-guidelines.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

371
plugins/woocommerce-blocks/docs/contributors/folder-structure.md
View File

@ -2,198 +2,199 @@
The following snippet explains how the WooCommerce Blocks repository is structured omitting irrelevant or obvious items with further explanations:
│
├── LICENSE
├── README.md
├── .github/CODEOWNERS
├── .github/CODE_OF_CONDUCT.md
├── .github/CONTRIBUTING.md
├── .github/SECURITY.md
│
├── .distignore
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .stylelintrc.json
├── phpcs.xml.dist
│ Dot files and config files used to configure the various linting tools
│ used in the repository (PHP, JS, styles...).
│
├── .nvmrc
│ Required Node version of the project.
│
├── babel.config.js
├── global.d.ts
├── tsconfig.base.json
├── tsconfig.json
├── webpack.config.js
│ Transpilation and bundling config files.
│
├── phpcs.xml
│ Config file for the PHP Coding Standards.
│
├── phpunit.xml.dist
│ Config file for PHPUnit.
│
├── postcss.config.js
│ Config file for PostCSS.
│
├── renovate.json
│ Config file for Renovate.
│
├── docker-compose.yml
│ Docker config files for the development and testing environment.
│
├── .env
├── .wp-env.json
│ Config files for the development and testing environment.
│ Includes WordPress, the WooCommerce plugin and the Storefront theme.
│
├── composer.lock
├── composer.json
│ Handling of PHP dependencies. Used for development tools and autoloading.
│
├── package-lock.json
├── package.json
│ Handling of JavaScript dependencies. Both for development tools and
│ production dependencies. The package.json also serves to define common
| tasks and scripts used for day to day development.
│
├── readme.txt
│ Readme of the WooCommerce Blocks plugin hosted on the WordPress
│ plugin repository.
│
├── woocommerce-gutenberg-products-block.php
│ Entry point of the WooCommerce Blocks plugin.
│
├── .github/*
│ Config of the different Github features (issues and PR templates, CI,
│ owners).
│
├── .sources/*
│ Sketch files of the WooCommerce Blocks plugin.
│
├── .wordpress-org/*
│ Assets of the WooCommerce Blocks plugin hosted on the WordPress plugin
│ repository.
│
├── assets/css/*
│ The SCSS files of the WooCommerce Blocks plugin.
│
├── assets/js/*
│ The React components of the WooCommerce Blocks plugin.
│
├── assets/js/atomic
│ The atomic components such as product title, product rating, product
│ image, etc. These atomic components are used by the product blocks.
│
├── assets/js/base
│ Base contains components specific to the frontend of the store.
│ Components placed here avoid loading larger Gutenberg dependencies to
│ keep client script sizes to a minimum.
│
├── assets/js/blocks-registry
│ Files that allows developers to connect their extensions to this plugin.
│
├── assets/js/blocks
│ The main blocks of the WooCommerce Blocks plugin such as the Active
│ Filters Block.
│
├── assets/js/data
│ Functionality to store data using Redux and wp.data.
│
├── assets/js/editor-components
│ Editor components such as the block-title component.
│
├── assets/js/extensions
│ TypeScript files to allow Google Analytics tracking of specific events
│ such as active payment method and removing cart items.
│
├── assets/js/filters
│ Filter such as excluding the checkout draft from Google Analytics.
│
├── assets/js/hocs
│ The Higher Order Components of the WooCommerce Blocks plugin.
│
├── assets/js/icons
│ The WooCommerce Blocks Icon library.
│
├── assets/js/legacy
│ The legacy code of the WooCommerce Blocks plugin.
│
├── assets/js/middleware
│ The middleware code to handle Store API calls.
│
├── assets/js/payment-method-extensions
│ Functionality for the payment options such as PayPal.
│
├── assets/js/previews
│ The previews of various components such the All Products Block.
│
├── assets/js/settings
│ Functionality to view the settings in the frontend.
│
├── assets/js/shared
│ Shared components of the WooCommerce Blocks plugin.
│
├── assets/js/types
│ TypeScript definitions of the WooCommerce Blocks plugin.
│
├── assets/js/utils
│ Shared utilities of the WooCommerce Blocks plugin.
│
├── bin/*
│ Set of scripts used to build the WordPress packages.
│
├── docs/*
│ Set of documentation pages of the WooCommerce Blocks plugin.
│
├── images
│ Images for the payment options and the previews.
│
├── packages
│ Things that are likely to be published as npm packages in the future. Packages can be:
│ - Production JavaScript scripts and styles loaded on WordPress
│ and the WooCommerce Blocks plugin or distributed as npm packages.
│ - Development tools available on npm.
│
├── patches
│ Patches for 3rd party scripts applied when installing dependencies.
│
├── src
│ The core PHP files of the WooCommerce Blocks plugin.
│
├── storybook
│ Config of the [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/).
│
├── templates/emails
│ Email templates of the WooCommerce Blocks plugin.
│
├── tests/e2e
│ Set of end-to-end tests.
│
├── tests/js
│ Configuration for Jest.
│
├── tests/php
│ Configuration for the PHP unit tests
│
├── tests/utils
│ Utilities for the test cases.
│
│
├── LICENSE
├── README.md
├── .github/CODEOWNERS
├── .github/CODE*OF_CONDUCT.md
├── .github/CONTRIBUTING.md
├── .github/SECURITY.md
│
├── .distignore
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .stylelintrc.json
├── phpcs.xml.dist
│ Dot files and config files used to configure the various linting tools
│ used in the repository (PHP, JS, styles...).
│
├── .nvmrc
│ Required Node version of the project.
│
├── babel.config.js
├── global.d.ts
├── tsconfig.base.json
├── tsconfig.json
├── webpack.config.js
│ Transpilation and bundling config files.
│
├── phpcs.xml
│ Config file for the PHP Coding Standards.
│
├── phpunit.xml.dist
│ Config file for PHPUnit.
│
├── postcss.config.js
│ Config file for PostCSS.
│
├── renovate.json
│ Config file for Renovate.
│
├── docker-compose.yml
│ Docker config files for the development and testing environment.
│
├── .env
├── .wp-env.json
│ Config files for the development and testing environment.
│ Includes WordPress, the WooCommerce plugin and the Storefront theme.
│
├── composer.lock
├── composer.json
│ Handling of PHP dependencies. Used for development tools and autoloading.
│
├── package-lock.json
├── package.json
│ Handling of JavaScript dependencies. Both for development tools and
│ production dependencies. The package.json also serves to define common
| tasks and scripts used for day to day development.
│
├── readme.txt
│ Readme of the WooCommerce Blocks plugin hosted on the WordPress
│ plugin repository.
│
├── woocommerce-gutenberg-products-block.php
│ Entry point of the WooCommerce Blocks plugin.
│
├── .github/*
│ Config of the different Github features (issues and PR templates, CI,
│ owners).
│
├── .sources/_
│ Sketch files of the WooCommerce Blocks plugin.
│
├── .wordpress-org/_
│ Assets of the WooCommerce Blocks plugin hosted on the WordPress plugin
│ repository.
│
├── assets/css/_
│ The SCSS files of the WooCommerce Blocks plugin.
│
├── assets/js/_
│ The React components of the WooCommerce Blocks plugin.
│
├── assets/js/atomic
│ The atomic components such as product title, product rating, product
│ image, etc. These atomic components are used by the product blocks.
│
├── assets/js/base
│ Base contains components specific to the frontend of the store.
│ Components placed here avoid loading larger Gutenberg dependencies to
│ keep client script sizes to a minimum.
│
├── assets/js/blocks-registry
│ Files that allows developers to connect their extensions to this plugin.
│
├── assets/js/blocks
│ The main blocks of the WooCommerce Blocks plugin such as the Active
│ Filters Block.
│
├── assets/js/data
│ Functionality to store data using Redux and wp.data.
│
├── assets/js/editor-components
│ Editor components such as the block-title component.
│
├── assets/js/extensions
│ TypeScript files to allow Google Analytics tracking of specific events
│ such as active payment method and removing cart items.
│
├── assets/js/filters
│ Filter such as excluding the checkout draft from Google Analytics.
│
├── assets/js/hocs
│ The Higher Order Components of the WooCommerce Blocks plugin.
│
├── assets/js/icons
│ The WooCommerce Blocks Icon library.
│
├── assets/js/legacy
│ The legacy code of the WooCommerce Blocks plugin.
│
├── assets/js/middleware
│ The middleware code to handle Store API calls.
│
├── assets/js/payment-method-extensions
│ Functionality for the payment options such as PayPal.
│
├── assets/js/previews
│ The previews of various components such the All Products Block.
│
├── assets/js/settings
│ Functionality to view the settings in the frontend.
│
├── assets/js/shared
│ Shared components of the WooCommerce Blocks plugin.
│
├── assets/js/types
│ TypeScript definitions of the WooCommerce Blocks plugin.
│
├── assets/js/utils
│ Shared utilities of the WooCommerce Blocks plugin.
│
├── bin/\_
│ Set of scripts used to build the WordPress packages.
│
├── docs/\*
│ Set of documentation pages of the WooCommerce Blocks plugin.
│
├── images
│ Images for the payment options and the previews.
│
├── packages
│ Things that are likely to be published as npm packages in the future. Packages can be:
│ - Production JavaScript scripts and styles loaded on WordPress
│ and the WooCommerce Blocks plugin or distributed as npm packages.
│ - Development tools available on npm.
│
├── patches
│ Patches for 3rd party scripts applied when installing dependencies.
│
├── src
│ The core PHP files of the WooCommerce Blocks plugin.
│
├── storybook
│ Config of the [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/).
│
├── templates/emails
│ Email templates of the WooCommerce Blocks plugin.
│
├── tests/e2e
│ Set of end-to-end tests.
│
├── tests/js
│ Configuration for Jest.
│
├── tests/php
│ Configuration for the PHP unit tests
│
├── tests/utils
│ Utilities for the test cases.
│
## Credits
## Credits
This file is inspired by the great work of @JustinyAhin and @gziolo in https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/folder-structure.md.
This file is inspired by the great work of @JustinyAhin and @gziolo in <https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/folder-structure.md>.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/folder-structure.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

14
plugins/woocommerce-blocks/docs/contributors/getting-started.md
View File

@ -8,8 +8,8 @@ Before you can start modifying files you'll want to clone this repository locall
To do so from the command line, ensure you have [`git`](https://git-scm.com) installed on your machine, and run the clone command:
```
$ git clone https://github.com/woocommerce/woocommerce-gutenberg-products-block.git
```sh
git clone https://github.com/woocommerce/woocommerce-gutenberg-products-block.git
```
## Configuring your WordPress site
@ -116,7 +116,7 @@ With the extension installed, ESLint will use the `.eslintrc.js` file in the roo
To use Prettier, you should install the [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension in Visual Studio Code. You can then configure it to be the default formatter and to automatically fix issues on save, by adding the following to your settings.
```
```js
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
@ -129,17 +129,17 @@ This will use the `.prettierrc.js` file in the root folder of the Blocks plugin
You’ll find a handful of scripts in `package.json` that performs the automated tests and linting. You can run the following commands to execute automated tests in your terminal:
- JS tests: `npm run test`
- Run `npm run wp-env` command to setup the development environment in Docker.
- JS tests: `npm run test`
- Run `npm run wp-env` command to setup the development environment in Docker.
To find out more about how to run automated JavaScript tests, check out the documentation on [JavaScript Testing](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/contributors/javascript-testing.md).
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/getting-started.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

7
plugins/woocommerce-blocks/docs/contributors/javascript-testing.md
View File

@ -19,8 +19,8 @@ Unit tests are implemented near the code they test, in `*.test.js` files.
Use the following command to run the unit tests:
```
$ npm run test
```sh
npm run test
```
The test scripts use [wp-scripts](https://github.com/WordPress/gutenberg/tree/master/packages/scripts) to run jest for component and unit testing.
@ -130,10 +130,11 @@ You also need to check any existing tests that checks the WP version.
In `./tests/e2e/specs`, verify for conditions like `if ( process.env.WP_VERSION < 5.4 )` and remove them if they're not relevant anymore.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/javascript-testing.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

10
plugins/woocommerce-blocks/docs/contributors/js-build-system.md
View File

@ -51,16 +51,18 @@ There were legacy builds of the `MainConfig`, `FrontendConfig` and `StylingConfi
Webpack config is split between several files:
- [`webpack.config.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/webpack.config.js): Top level webpack config. Includes support for legacy and main build.
- [`bin/webpack-configs.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-configs.js): Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
- [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
- [`bin/webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-helpers.js): Includes utils to load external code at run time, e.g. some dependencies from Woo and WordPress core.
- [`webpack.config.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/webpack.config.js): Top level webpack config. Includes support for legacy and main build.
- [`bin/webpack-configs.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-configs.js): Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
- [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
- [`bin/webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-helpers.js): Includes utils to load external code at run time, e.g. some dependencies from Woo and WordPress core.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/js-build-system.md)
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/examples/checkout-order-processed.md
View File

@ -1,3 +1,5 @@
# Checkout Order Processed
```php
// The action callback function.
function my_function_callback( $order ) {

2
plugins/woocommerce-blocks/docs/examples/payment-gateways-features-list.md
View File

@ -1,3 +1,5 @@
# Payment Gateway Featured List
```php
// The action callback function.
function my_function_callback( $features, $gateway ) {

2
plugins/woocommerce-blocks/docs/examples/validate-cart.md
View File

@ -1,3 +1,5 @@
# Validate Cart
```php
// The action callback function.
function my_function_callback( $errors, $cart ) {

2
plugins/woocommerce-blocks/docs/extensibility/README.md
View File

@ -46,10 +46,12 @@ In addition to the reference material below, [please see the `block-checkout` pa
| [DOM Events](./dom-events.md) | A list of DOM Events used by some blocks to communicate between them and with other parts of WooCommerce. |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/README.md)
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/extensibility/actions.md
View File

@ -735,10 +735,12 @@ do_action( 'woocommerce_store_api_validate_cart_item', \WC_Product $product, arr
---
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/actions.md)
<!-- /FEEDBACK -->

15
plugins/woocommerce-blocks/docs/extensibility/available-endpoints-to-extend.md
View File

@ -8,12 +8,12 @@ This is a list of available endpoints that you can extend. If you want to add a
The main cart endpoint is extensible via ExtendSchema. The data is available via the `extensions` key in the response.
### Passed Parameters:
### Passed Parameters
- `data_callback`: none.
- `schema_callback`: none.
### Key:
### Key
- `CartSchema::IDENTIFIER`
@ -21,12 +21,12 @@ The main cart endpoint is extensible via ExtendSchema. The data is available via
The items endpoint, which is also available on `wc/store/cart` inside the `items` key. The data would be available inside each item of the `items` array.
### Passed Parameters:
### Passed Parameters
- `data_callback`: `$cart_item`.
- `schema_callback` none.
### Key:
### Key
- `CartItemSchema::IDENTIFIER`
@ -34,20 +34,21 @@ The items endpoint, which is also available on `wc/store/cart` inside the `items
The main products endpoint is extensible via ExtendSchema. The data is available via the `extensions` key for each `product` in the response array.
### Passed Parameters:
### Passed Parameters
- `data_callback`: `$product`.
- `schema_callback` none.
### Key:
### Key
- `ProductSchema::IDENTIFIER`
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/available-endpoints-to-extend.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

60
plugins/woocommerce-blocks/docs/extensibility/available-filters.md
View File

@ -4,20 +4,20 @@ This document lists the filters that are currently available to extensions and o
Information on registering filters can be found on the [Checkout - Filter Registry](../../packages/checkout/filter-registry/README.md) page.
***
---
- [Cart Line Items](#cart-line-items)
- [Order Summary Items](#order-summary-items)
- [Totals footer item](#totals-footer-item-in-cart-and-checkout)
- [Coupons](#coupons)
- [Snackbar notices](#snackbar-notices)
- [Cart Line Items](#cart-line-items)
- [Order Summary Items](#order-summary-items)
- [Totals footer item](#totals-footer-item-in-cart-and-checkout)
- [Coupons](#coupons)
- [Snackbar notices](#snackbar-notices)
### Cart Line Items
## Cart Line Items
Line items refers to each item listed in the cart or checkout. For instance
the "Sunglasses" and "Beanie with logo" in this image are the line items.
<img src="https://user-images.githubusercontent.com/5656702/117027554-b7c3eb00-acf4-11eb-8af1-b8bedbe20e05.png" width=600 />
![Cart Line Items](https://user-images.githubusercontent.com/5656702/117027554-b7c3eb00-acf4-11eb-8af1-b8bedbe20e05.png)
The following filters are available for line items:
@ -25,31 +25,31 @@ The following filters are available for line items:
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `itemName` | Used to change the name of the item before it is rendered onto the page | `string` |
| `cartItemPrice` | This is the price of the item, multiplied by the number of items in the cart. | `string` and **must** contain the substring `<price/>` where the price should appear. |
| `cartItemClass` | This is the className of the item cell. | `string` |
| `cartItemClass` | This is the className of the item cell. | `string` |
| `subtotalPriceFormat` | This is the price of a single item. Irrespective of the number in the cart, this value will always be the current price of _one_ item. | `string` and **must** contain the substring `<price/>` where the price should appear. |
| `saleBadgePriceFormat` | This is amount of money saved when buying this item. It is the difference between the item's regular price and its sale price. | `string` and **must** contain the substring `<price/>` where the price should appear. |
Each of these filters has the following arguments passed to it: `{ context: 'cart', cartItem: CartItem }` ([CartItem](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L113))
### Order Summary Items
## Order Summary Items
In the Checkout block, there is a sidebar that contains a summary of what the customer is about to purchase.
There are some filters available to modify the way certain elements are displayed on each item.
The sale badges are not shown here, so those filters are not applied in the Order Summary.
<img src="https://user-images.githubusercontent.com/5656702/117026942-1b014d80-acf4-11eb-8515-b9b777d96a74.png" width=400 />
![Order Summary Items](https://user-images.githubusercontent.com/5656702/117026942-1b014d80-acf4-11eb-8515-b9b777d96a74.png)
| Filter name | Description | Return type |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `itemName` | Used to change the name of the item before it is rendered onto the page | `string` |
| `cartItemPrice` | This is the price of the item, multiplied by the number of items in the cart. | `string` and **must** contain the substring `<price/>` where the price should appear. |
| `cartItemClass` | This is the className of the item cell. | `string` |
| `cartItemClass` | This is the className of the item cell. | `string` |
| `subtotalPriceFormat` | This is the price of a single item. Irrespective of the number in the cart, this value will always be the current price of _one_ item. | `string` and **must** contain the substring `<price/>` where the price should appear. |
Each of these filters has the following additional arguments passed to it: `{ context: 'summary', cartItem: CartItem }` ([CartItem](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L113))
### Totals footer item (in Mini Cart, Cart and Checkout)
## Totals footer item (in Mini Cart, Cart and Checkout)
The word 'Total' that precedes the amount due, present in both the Cart _and_ Checkout blocks, is also passed through filters.
@ -59,7 +59,7 @@ The word 'Total' that precedes the amount due, present in both the Cart _and_ Ch
There are no additional arguments passed to this filter.
### Coupons
## Coupons
The current functionality is to display the coupon codes in the Cart and Checkout sidebars. This could be undesirable
if you dynamically generate a coupon code that is not user-friendly. It may, therefore, be desirable to change the way
@ -94,11 +94,11 @@ CartCoupon {
}
```
### Snackbar notices
## Snackbar notices
There is a snackbar at the bottom of the page used to display notices to the customer, it looks like this:
<img src="https://user-images.githubusercontent.com/5656702/120882329-d573c100-c5ce-11eb-901b-d7f206f74a66.png" width=300 />
![Snackbar notices](https://user-images.githubusercontent.com/5656702/120882329-d573c100-c5ce-11eb-901b-d7f206f74a66.png)
It may be desirable to hide this if there's a notice you don't want the shopper to see.
@ -145,9 +145,12 @@ __experimentalRegisterCheckoutFilters( 'my-hypothetical-deposit-plugin', {
} );
```
| Before | After |
| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://user-images.githubusercontent.com/5656702/117032889-cc56b200-acf9-11eb-9bf7-ae5f6a0b1538.png" width=300 /> | <img src="https://user-images.githubusercontent.com/5656702/117033039-ec867100-acf9-11eb-95d5-50c06bf2923c.png" width=300 /> |
| Before | After |
| ------ | ----- |
| ![Snackbar notices before](https://user-images.githubusercontent.com/5656702/117032889-cc56b200-acf9-11eb-9bf7-ae5f6a0b1538.png)
| ![Snackbar notices after](https://user-images.githubusercontent.com/5656702/117033039-ec867100-acf9-11eb-95d5-50c06bf2923c.png) |
### Changing the format of the item's single price
@ -180,9 +183,11 @@ __experimentalRegisterCheckoutFilters( 'my-hypothetical-price-plugin', {
} );
```
| Before | After |
| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://user-images.githubusercontent.com/5656702/117035086-d5488300-acfb-11eb-9954-feb326916168.png" width=400 /> | <img src="https://user-images.githubusercontent.com/5656702/117035616-70415d00-acfc-11eb-98d3-6c8096817e5b.png" width=400 /> |
| Before | After |
| ------ | ----- |
| ![Changing the format of the item's single price before](https://user-images.githubusercontent.com/5656702/117035086-d5488300-acfb-11eb-9954-feb326916168.png) | ![Changing the format of the item's single price after](https://user-images.githubusercontent.com/5656702/117035616-70415d00-acfc-11eb-98d3-6c8096817e5b.png) |
### Change the name of a coupon
@ -219,9 +224,9 @@ __experimentalRegisterCheckoutFilters( 'automatic-coupon-extension', {
} );
```
| Before | After |
| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| <img src="https://user-images.githubusercontent.com/5656702/123768988-bc55eb80-d8c0-11eb-9262-5d629837706d.png" /> | ![image](https://user-images.githubusercontent.com/5656702/124126048-2c57a380-da72-11eb-9b45-b2cae0cffc37.png) |
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/5656702/123768988-bc55eb80-d8c0-11eb-9262-5d629837706d.png) | ![image](https://user-images.githubusercontent.com/5656702/124126048-2c57a380-da72-11eb-9b45-b2cae0cffc37.png) |
### Hide a snackbar notice containing a certain string
@ -249,15 +254,16 @@ __experimentalRegisterCheckoutFilters( 'automatic-coupon-extension', {
If you are logged in to the store as an administrator, you should be shown an error like this if your filter is not
working correctly.
<img src="https://user-images.githubusercontent.com/5656702/117035848-b4ccf880-acfc-11eb-870a-31ae86dd6496.png" width=600 />
![Troubleshooting](https://user-images.githubusercontent.com/5656702/117035848-b4ccf880-acfc-11eb-870a-31ae86dd6496.png)
The error will also be shown in your console.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/available-filters.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

31
plugins/woocommerce-blocks/docs/extensibility/available-slot-fills.md
View File

@ -2,13 +2,13 @@
This document presents the list of available Slots that you can use for adding your custom content (Fill):
- [Available Slots](#available-slots)
- [ExperimentalOrderMeta](#experimentalordermeta)
- [Passed parameters](#passed-parameters)
- [ExperimentalOrderShippingPackages](#experimentalordershippingpackages)
- [Passed parameters](#passed-parameters-1)
- [ExperimentalDiscountsMeta](#experimentaldiscountsmeta)
- [Passed paramters](#passed-paramters)
- [Available Slots](#available-slots)
- [ExperimentalOrderMeta](#experimentalordermeta)
- [Passed parameters](#passed-parameters)
- [ExperimentalOrderShippingPackages](#experimentalordershippingpackages)
- [Passed parameters](#passed-parameters-1)
- [ExperimentalDiscountsMeta](#experimentaldiscountsmeta)
- [Passed paramters](#passed-paramters)
---
@ -23,11 +23,11 @@ This Slot renders below the Checkout summary section and above the "Proceed to C
Cart:
<img width="865" alt="Example of ExperimentalOrderMeta in the Cart block" src="https://user-images.githubusercontent.com/1628454/154517779-117bb4e4-568e-413c-904c-855fc3450dfa.png">
![Example of ExperimentalOrderMeta in the Cart block](https://user-images.githubusercontent.com/1628454/154517779-117bb4e4-568e-413c-904c-855fc3450dfa.png)
Checkout:
<img width="860" alt="Example of ExperimentalOrderMeta in the Checkout block" src="https://user-images.githubusercontent.com/1628454/154697224-de245182-6783-4914-81ba-1dbcf77292eb.png">
![Example of ExperimentalOrderMeta in the Checkout block](https://user-images.githubusercontent.com/1628454/154697224-de245182-6783-4914-81ba-1dbcf77292eb.png)
### Passed parameters
@ -41,11 +41,11 @@ This slot renders inside the shipping step of Checkout and inside the shipping o
Cart:
<img width="1151" alt="Example of ExperimentalOrderShippingPackages in the Cart block" src="https://user-images.githubusercontent.com/6165348/118399054-2b4dec80-b653-11eb-94a0-989e2e6e362a.png">
![Example of ExperimentalOrderShippingPackages in the Cart block](https://user-images.githubusercontent.com/6165348/118399054-2b4dec80-b653-11eb-94a0-989e2e6e362a.png)
Checkout:
<img width="1233" alt="Example of ExperimentalOrderShippingPackages in the Checkout block" src="https://user-images.githubusercontent.com/6165348/118399133-90094700-b653-11eb-8ff0-c917947c199f.png">
![Example of ExperimentalOrderShippingPackages in the Checkout block](https://user-images.githubusercontent.com/6165348/118399133-90094700-b653-11eb-8ff0-c917947c199f.png)
### Passed parameters
@ -64,10 +64,12 @@ Checkout:
This slot renders below the `CouponCode` input.
Cart:
<img alt="Cart showing ExperimentalDiscountsMeta location" src="https://user-images.githubusercontent.com/5656702/122774218-ea27a880-d2a0-11eb-9450-11f119567f26.png" />
![Cart showing ExperimentalDiscountsMeta location](https://user-images.githubusercontent.com/5656702/122774218-ea27a880-d2a0-11eb-9450-11f119567f26.png)
Checkout:
<img alt="Checkout showing ExperimentalDiscountsMeta location" src="https://user-images.githubusercontent.com/5656702/122779606-efd3bd00-d2a5-11eb-8c84-6525eca5d704.png" />
![Checkout showing ExperimentalDiscountsMeta location](https://user-images.githubusercontent.com/5656702/122779606-efd3bd00-d2a5-11eb-8c84-6525eca5d704.png)
### Passed paramters
@ -76,10 +78,11 @@ Checkout:
- `context`, equal to the name of the Block in which the fill is rendered: `woocommerce/cart` or `woocommerce/checkout`
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/available-slot-fills.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

41
plugins/woocommerce-blocks/docs/extensibility/checkout-flow-and-events.md
View File

@ -4,21 +4,21 @@ This document gives an overview of the flow for the checkout in the WooCommerce
## Table of Contents <!-- omit in toc -->
- [General Concepts](#general-concepts)
- [Tracking flow through status](#tracking-flow-through-status)
- [`CheckoutProvider` Exposed Statuses](#checkoutprovider-exposed-statuses)
- [Special States:](#special-states)
- [`ShippingProvider` Exposed Statuses](#shippingprovider-exposed-statuses)
- [`PaymentMethodDataProvider` Exposed Statuses](#paymentmethoddataprovider-exposed-statuses)
- [Emitting Events](#emitting-events)
- [`onCheckoutValidationBeforeProcessing`](#oncheckoutvalidationbeforeprocessing)
- [`onPaymentProcessing`](#onpaymentprocessing)
- [`onCheckoutAfterProcessingWithSuccess`](#oncheckoutafterprocessingwithsuccess)
- [`onCheckoutAfterProcessingWithError`](#oncheckoutafterprocessingwitherror)
- [`onShippingRateSuccess`](#onshippingratesuccess)
- [`onShippingRateFail`](#onshippingratefail)
- [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
- [`onShippingRateSelectFail`](#onshippingrateselectfail)
- [General Concepts](#general-concepts)
- [Tracking flow through status](#tracking-flow-through-status)
- [`CheckoutProvider` Exposed Statuses](#checkoutprovider-exposed-statuses)
- [Special States:](#special-states)
- [`ShippingProvider` Exposed Statuses](#shippingprovider-exposed-statuses)
- [`PaymentMethodDataProvider` Exposed Statuses](#paymentmethoddataprovider-exposed-statuses)
- [Emitting Events](#emitting-events)
- [`onCheckoutValidationBeforeProcessing`](#oncheckoutvalidationbeforeprocessing)
- [`onPaymentProcessing`](#onpaymentprocessing)
- [`onCheckoutAfterProcessingWithSuccess`](#oncheckoutafterprocessingwithsuccess)
- [`onCheckoutAfterProcessingWithError`](#oncheckoutafterprocessingwitherror)
- [`onShippingRateSuccess`](#onshippingratesuccess)
- [`onShippingRateFail`](#onshippingratefail)
- [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
- [`onShippingRateSelectFail`](#onshippingrateselectfail)
The architecture of the Checkout Block is derived from the following principles:
@ -74,7 +74,7 @@ The following boolean flags available related to status are:
**isComplete**: When the checkout status is `COMPLETE` this flag is true. Checkout will have this status after all observers on the events emitted during the `AFTER_PROCESSING` status are completed successfully. When checkout is at this status, the shopper's browser will be redirected to the value of `redirectUrl` at that point (usually the `order-received` route).
##### Special States:
##### Special States
The following are booleans exposed via the checkout provider that are independent from each other and checkout statuses but can be used in combination to react to various state in the checkout.
@ -252,7 +252,7 @@ This event emitter will execute through each registered observer (passing in not
When a payment method returns a non-truthy value, if it returns a valid response type the event emitter will update various internal statuses according to the response. Here's the possible response types that will get handled by the emitter:
**success**
#### Success
A response is considered a success response when it at a minimum is an object with this shape:
@ -268,7 +268,7 @@ When a success response is returned, the payment method context status will be c
If `billingData` or `shippingData` properties aren't in the response object, then the state for the data is left alone.
**fail**
#### Fail
A response is considered a fail response when it at a minimum is an object with this shape:
@ -283,7 +283,7 @@ When a fail response is returned by an observer, the payment method context stat
- `paymentMethodData`: (same as for success responses).
- `billingData`: (same as for success responses).
**error**
#### Error
A response is considered an error response when it at a minimum is an object with this shape:
@ -474,10 +474,11 @@ This event emitter is fired when a shipping rate selection is not being persiste
This event emitter doesn't care about any registered observer response and will simply execute all registered observers passing them the current error status in the context.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/checkout-flow-and-events.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

8
plugins/woocommerce-blocks/docs/extensibility/dom-events.md
View File

@ -20,10 +20,10 @@ This event is the equivalent to the jQuery event `added_to_cart` triggered by Wo
_Example usage in WC Blocks:_ Cart and Mini Cart blocks (via the `useStoreCart()` hook) listen to this event to know if they need to update their contents.
#### `detail` parameters:
#### `detail` parameters
| Parameter | Type | Default value | Description |
|--------------------|---------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ------------------ | ------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `preserveCartData` | boolean | `false` | Whether Cart data in the store should be preserved. By default, it's `false` so any `wc-blocks_added_to_cart` event will invalidate cart data and blocks listening to it will refetch cart data again. However, if the code triggering the event already updates the store (ie: All Products block), it can set `preserveCartData: true` to avoid the other blocks refetching the data again. |
### `wc-blocks_removed_from_cart`
@ -32,12 +32,12 @@ This event is the equivalent to the jQuery event `removed_from_cart` triggered b
_Example usage in WC Blocks:_ Cart and Mini Cart blocks (via the `useStoreCart()` hook) listen to this event to know if they need to update their contents.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/dom-events.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

25
plugins/woocommerce-blocks/docs/extensibility/extend-rest-api-add-data.md
View File

@ -1,15 +1,12 @@
# Exposing your data in the Store API.
# Exposing your data in the Store API
## The problem
You want to extend the Mini Cart, Cart and Checkout blocks, but you want to use some custom data not available on Store API or the context.
You don't want to create your own endpoints or Ajax actions. You want to piggyback on the existing StoreAPI calls.
You want to extend the Mini Cart, Cart and Checkout blocks, but you want to use some custom data not available on Store API or the context. You don't want to create your own endpoints or Ajax actions. You want to piggyback on the existing StoreAPI calls.
## Solution
ExtendSchema offers the possibility to add contextual custom data to Store API endpoints, like `wc/store/cart` and `wc/store/cart/items` endpoints.
That data is namespaced to your plugin and protected from other plugins causing it to malfunction.
The data is available on all frontend filters and slotFills for you to consume.
ExtendSchema offers the possibility to add contextual custom data to Store API endpoints, like `wc/store/cart` and `wc/store/cart/items` endpoints. That data is namespaced to your plugin and protected from other plugins causing it to malfunction. The data is available on all frontend filters and slotFills for you to consume.
## Basic usage
@ -72,8 +69,7 @@ $product = $cart_item['data'];
### ExtendSchema is a shared instance
The ExtendSchema is stored as a shared instance between the API and consumers (third-party developers). So you shouldn't initiate the class yourself with `new ExtendSchema` because it would not work.
Instead, you should always use the shared instance from the StoreApi dependency injection container like this.
The ExtendSchema is stored as a shared instance between the API and consumers (third-party developers). So you shouldn't initiate the class yourself with `new ExtendSchema` because it would not work. Instead, you should always use the shared instance from the StoreApi dependency injection container like this.
```php
$extend = StoreApi::container()->get( ExtendSchema::class );
@ -100,8 +96,7 @@ Or use the global helper functions:
### Errors and fatals are silence for non-admins
If your callback functions `data_callback` and `schema_callback` throw an exception or an error, or you passed the incorrect type of parameter to `register_endpoint_data`; that error would be caught and logged into WooCommerce error logs.
If the current user is a shop manager or an admin, and has WP_DEBUG enabled, the error would be surfaced to the frontend.
If your callback functions `data_callback` and `schema_callback` throw an exception or an error, or you passed the incorrect type of parameter to `register_endpoint_data`; that error would be caught and logged into WooCommerce error logs. If the current user is a shop manager or an admin, and has WP_DEBUG enabled, the error would be surfaced to the frontend.
### Callbacks should always return an array
@ -121,9 +116,7 @@ To reduce the chances of breaking your client code or passing the wrong type, an
## Putting it all together
This is a complete example that shows how you can register contextual WooCommerce Subscriptions data in each cart item (simplified).
This example uses [Formatters](./extend-rest-api-formatters.md), utility classes that allow you to format values so that they are compatible with the StoreAPI.
This is a complete example that shows how you can register contextual WooCommerce Subscriptions data in each cart item (simplified). This example uses [Formatters](./extend-rest-api-formatters.md), utility classes that allow you to format values so that they are compatible with the StoreAPI.
```php
<?php
@ -320,14 +313,14 @@ class WC_Subscriptions_Extend_Store_Endpoint {
## Formatting your data
You may wish to use our pre-existing Formatters to ensure your data is passed through the Store API in the
correct format. More information on the Formatters can be found in the [StoreApi Formatters documentation](./extend-rest-api-formatters.md).
You may wish to use our pre-existing Formatters to ensure your data is passed through the Store API in the correct format. More information on the Formatters can be found in the [StoreApi Formatters documentation](./extend-rest-api-formatters.md).
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/extend-rest-api-add-data.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

32
plugins/woocommerce-blocks/docs/extensibility/extend-rest-api-formatters.md
View File

@ -86,18 +86,18 @@ get_formatter( 'currency' )->format( [
returns
```
'price' => '1800'
'regular_price' => '1800'
'sale_price' => '1800'
'price_range' => null
'currency_code' => 'GBP'
'currency_symbol' => '£'
'currency_minor_unit' => 2
'currency_decimal_separator' => '.'
'currency_thousand_separator' => ','
'currency_prefix' => '£'
'currency_suffix' => ''
```text
'price' => '1800'
'regular_price' => '1800'
'sale_price' => '1800'
'price_range' => null
'currency_code' => 'GBP'
'currency_symbol' => '£'
'currency_minor_unit' => 2
'currency_decimal_separator' => '.'
'currency_thousand_separator' => ','
'currency_prefix' => '£'
'currency_suffix' => ''
```
## HtmlFormatter
@ -123,13 +123,17 @@ get_formatter( 'html' )->format(
```
returns
`alert('bad script!') This &#8220;coffee&#8221; is <strong>very strong</strong>.`
```text
alert('bad script!') This &#8220;coffee&#8221; is <strong>very strong</strong>.
```
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/extend-rest-api-formatters.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

9
plugins/woocommerce-blocks/docs/extensibility/extend-rest-api-new-endpoint.md
View File

@ -2,7 +2,7 @@
This document is intended for contrubtors to WooCommerce Blocks plugin, if you feel like a new endpoint should be added, feel free to open an issue or a PR detailing why.
## Extending `GET` endpoints in Store API.
## Extending `GET` endpoints in Store API
ExtendSchema needs to expose each endpoint individually. If you want to expose a new endpoint, you have to follow these steps:
@ -23,7 +23,7 @@ This is to prevent accidentally exposing new endpoints.
You can pass extra parameters to `get_extended_schema` and those would be passed to third party code.
```php
self::EXTENDING_KEY => $this->get_extended_schema( self::IDENTIFIER ),
self::EXTENDING_KEY => $this->get_extended_schema( self::IDENTIFIER ),
```
`EXTENDING_KEY` value is `extensions`, we use a constant to make sure we don't have a typo.
@ -33,7 +33,7 @@ self::EXTENDING_KEY => $this->get_extended_schema( self::IDENTIFIER ),
Make sure to only expose what's needed.
```php
self::EXTENDING_KEY => $this->get_extended_data( self::IDENTIFIER, $cart_item ),
self::EXTENDING_KEY => $this->get_extended_data( self::IDENTIFIER, $cart_item ),
```
That's it, your endpoint would now contain `extensions` in your endpoint, and you can consume it in the frontend.
@ -41,10 +41,11 @@ That's it, your endpoint would now contain `extensions` in your endpoint, and yo
Extending a new endpoint is usually half the work, you will need to receive this data in the frontend and pass it to any other extensibility point (Slot, Filter, Event).
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/extend-rest-api-new-endpoint.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

65
plugins/woocommerce-blocks/docs/extensibility/extend-rest-api-update-cart.md
View File

@ -2,24 +2,17 @@
## The problem
You're an extension developer, and your extension does some server-side processing as a result of some client-side
input, i.e. a shopper filling in an input field in the Cart sidebar, and then pressing a button.
You're an extension developer, and your extension does some server-side processing as a result of some client-side input, i.e. a shopper filling in an input field in the Cart sidebar, and then pressing a button.
This server-side processing causes the state of the cart to change, and you want to update the data displayed
in the client-side Cart or Checkout block.
This server-side processing causes the state of the cart to change, and you want to update the data displayed in the client-side Cart or Checkout block.
You can't simply update the client-side cart state yourself. This is restricted to prevent malfunctioning extensions
inadvertently updating it with malformed or invalid data which will cause the whole block to break.
You can't simply update the client-side cart state yourself. This is restricted to prevent malfunctioning extensions inadvertently updating it with malformed or invalid data which will cause the whole block to break.
## The solution
`ExtendSchema` offers the ability for extensions to register callback functions to be executed when
signalled to do so by the client-side Cart or Checkout.
`ExtendSchema` offers the ability for extensions to register callback functions to be executed when signalled to do so by the client-side Cart or Checkout.
WooCommerce Blocks also provides a front-end function called `extensionCartUpdate` which can be called by client-side
code, this will send data (specified by you when calling `extensionCartUpdate`) to the `cart/extensions` endpoint.
When this endpoint gets hit, any relevant (based on the namespace provided to `extensionCartUpdate`) callbacks get
executed, and the latest server-side cart data gets returned and the block is updated with this new data.
WooCommerce Blocks also provides a front-end function called `extensionCartUpdate` which can be called by client-side code, this will send data (specified by you when calling `extensionCartUpdate`) to the `cart/extensions` endpoint. When this endpoint gets hit, any relevant (based on the namespace provided to `extensionCartUpdate`) callbacks get executed, and the latest server-side cart data gets returned and the block is updated with this new data.
## Basic usage
@ -57,18 +50,11 @@ extensionCartUpdate( {
### Extensions cannot update the client-side cart state themselves
You may be wondering why it's not possible to just make a custom AJAX endpoint for your extension that will update the
cart. As mentioned, extensions are not permitted to update the client-side cart's state, because doing this incorrectly
would cause the entire block to break, preventing the user from continuing their checkout. Instead you _must_ do this
through the `extensionCartUpdate` function.
You may be wondering why it's not possible to just make a custom AJAX endpoint for your extension that will update the cart. As mentioned, extensions are not permitted to update the client-side cart's state, because doing this incorrectly would cause the entire block to break, preventing the user from continuing their checkout. Instead you _must_ do this through the `extensionCartUpdate` function.
### Only one callback for a given namespace may be registered
With this in mind, if your extension has several client-side interactions that result in different code paths being
executed on the server-side, you may wish to pass additional data through in `extensionsCartUpdate`. For example
if you have two actions the user can take, one to _add_ a discount, and the other to _remove_ it, you may wish to pass
a key called `action` along with the other data to `extensionsCartUpdate`. Then in your callback, you can check this
value to distinguish which code path you should execute.
With this in mind, if your extension has several client-side interactions that result in different code paths being executed on the server-side, you may wish to pass additional data through in `extensionsCartUpdate`. For example if you have two actions the user can take, one to _add_ a discount, and the other to _remove_ it, you may wish to pass a key called `action` along with the other data to `extensionsCartUpdate`. Then in your callback, you can check this value to distinguish which code path you should execute.
Example:
@ -104,8 +90,7 @@ If you try to register again, under the same namespace, the previously registere
### PHP
`ExtendSchema::register_update_callback`: Used to register a callback to be executed when the `cart/extensions`
endpoint gets hit with a given namespace. It takes an array of arguments
`ExtendSchema::register_update_callback`: Used to register a callback to be executed when the `cart/extensions` endpoint gets hit with a given namespace. It takes an array of arguments
| Attribute | Type | Required | Description |
| ----------- | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@ -123,9 +108,7 @@ endpoint gets hit with a given namespace. It takes an array of arguments
## Putting it all together
You are the author of an extension that lets the shopper redeem points that they earn on your website for a discount on
their order. There is a text field where the shopper can enter how many points they want to redeem, and a submit button
that will apply the redemption.
You are the author of an extension that lets the shopper redeem points that they earn on your website for a discount on their order. There is a text field where the shopper can enter how many points they want to redeem, and a submit button that will apply the redemption.
Your extension adds these UI elements to the sidebar in the Cart and Checkout blocks using the [`DiscountsMeta`](./available-slot-fills.md) Slot.
@ -133,19 +116,15 @@ More information on how to use Slots is available in our [Slots and Fills docume
Once implemented, the sidebar has a control added to it like this:
<img src="https://user-images.githubusercontent.com/5656702/125109827-bf7c8300-e0db-11eb-9e51-59921b38a0c2.png" width=400 />
![image](https://user-images.githubusercontent.com/5656702/125109827-bf7c8300-e0db-11eb-9e51-59921b38a0c2.png)
### The "Redeem" button
In your UI, you are tracking the value the shopper enters into the `Enter amount` box using a React `useState` variable.
The variable in this example shall be called `pointsInputValue`.
In your UI, you are tracking the value the shopper enters into the `Enter amount` box using a React `useState` variable. The variable in this example shall be called `pointsInputValue`.
When the `Redeem` button gets clicked, you want to tell the server how many points to apply to the shopper's basket,
based on what they entered into the box, apply the relevant discount, update the server-side cart, and then show the
updated price in the client-side sidebar.
When the `Redeem` button gets clicked, you want to tell the server how many points to apply to the shopper's basket, based on what they entered into the box, apply the relevant discount, update the server-side cart, and then show the updated price in the client-side sidebar.
To do this, you will need to use `extensionCartUpdate` to tell the server you want to execute your callback, and have
the new cart state loaded into the UI. The `onClick` handler of the button may look like this:
To do this, you will need to use `extensionCartUpdate` to tell the server you want to execute your callback, and have the new cart state loaded into the UI. The `onClick` handler of the button may look like this:
```javascript
import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
@ -162,16 +141,11 @@ const buttonClickHandler = () => {
### Registering a callback to run when the `cart/extensions` endpoint is hit
So far, we haven't registered a callback with WooCommerce Blocks yet, so when `extensionCartUpdate` causes the
`cart/extensions` endpoint to get hit, nothing will happen.
So far, we haven't registered a callback with WooCommerce Blocks yet, so when `extensionCartUpdate` causes the `cart/extensions` endpoint to get hit, nothing will happen.
Much like adding data to the Store API (described in more detail in
[Exposing your data in the Store API](./extend-rest-api-add-data.md).) we can add the callback
by invoking the `register_update_callback` method on the `ExtendSchema` class from WooCommerce Blocks.
Much like adding data to the Store API (described in more detail in [Exposing your data in the Store API](./extend-rest-api-add-data.md).) we can add the callback by invoking the `register_update_callback` method on the `ExtendSchema` class from WooCommerce Blocks.
We have written a function called `redeem_points` which applies a discount to the WooCommerce cart. This function does
not return anything. Note, the actual implementation of this function is not the focus of this document, so has been
omitted. All that is important to note is that it modifies the WooCommerce cart.
We have written a function called `redeem_points` which applies a discount to the WooCommerce cart. This function does not return anything. Note, the actual implementation of this function is not the focus of this document, so has been omitted. All that is important to note is that it modifies the WooCommerce cart.
```PHP
<?php
@ -191,15 +165,14 @@ add_action('woocommerce_blocks_loaded', function() {
} );
```
Now that this is registered, when the button is pressed, the `cart/extensions` endpoint is hit, with a `namespace` of
`super-coupons` our `redeem_points` function will be executed. After this has finished processing, the client-side cart
will be updated by WooCommerce Blocks.
Now that this is registered, when the button is pressed, the `cart/extensions` endpoint is hit, with a `namespace` of `super-coupons` our `redeem_points` function will be executed. After this has finished processing, the client-side cart will be updated by WooCommerce Blocks.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/extend-rest-api-update-cart.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

63
plugins/woocommerce-blocks/docs/extensibility/filtering-payment-methods.md
View File

@ -1,42 +1,44 @@
- [Filtering payment methods in the Checkout block](#filtering-payment-methods-in-the-checkout-block)
- [The problem](#the-problem)
- [The solution](#the-solution)
- [Importing](#importing)
- [Signature](#signature)
- [Extension namespace collision](#extension-namespace-collision)
- [Usage example](#usage-example)
- [Callbacks registered for payment methods](#callbacks-registered-for-payment-methods)
- [Filtering payment methods using requirements](#filtering-payment-methods-using-requirements)
- [The problem](#the-problem-1)
- [The solution](#the-solution-1)
- [Basic usage](#basic-usage)
- [Putting it all together](#putting-it-all-together)
# Filtering payment methods
# Filtering payment methods in the Checkout block
- [Filtering payment methods in the Checkout block](#filtering-payment-methods-in-the-checkout-block)
- [The problem](#the-problem)
- [The solution](#the-solution)
- [Importing](#importing)
- [Signature](#signature)
- [Extension namespace collision](#extension-namespace-collision)
- [Usage example](#usage-example)
- [Callbacks registered for payment methods](#callbacks-registered-for-payment-methods)
- [Filtering payment methods using requirements](#filtering-payment-methods-using-requirements)
- [The problem](#the-problem-1)
- [The solution](#the-solution-1)
- [Basic usage](#basic-usage)
- [Putting it all together](#putting-it-all-together)
## The problem
## Filtering payment methods in the Checkout block
### The problem
You're an extension developer, and your extension is conditionally hiding payment gateways on the checkout step. You need to be able to hide payment gateways on the Checkout block using a front-end extensibility point.
## The solution
### The solution
WooCommerce Blocks provides a function called `registerPaymentMethodExtensionCallbacks` which allows extensions to register callbacks for specific payment methods to determine if they can make payments.
## Importing
### Importing
_Aliased import_
#### Aliased import
```js
import { registerPaymentMethodExtensionCallbacks } from '@woocommerce/blocks-registry';
```
_wc global_
#### `wc global`
```js
const { registerPaymentMethodExtensionCallbacks } = wc.wcBlocksRegistry;
```
## Signature
### Signature
| Parameter | Description | Type |
| ----------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
@ -45,11 +47,11 @@ const { registerPaymentMethodExtensionCallbacks } = wc.wcBlocksRegistry;
Read more below about [callbacks](#callbacks-registered-for-payment-methods).
### Extension namespace collision
#### Extension namespace collision
When trying to register callbacks under an extension namespace already used with `registerPaymentMethodExtensionCallbacks`, the registration will be aborted and you will be notified that you are not using a unique namespace. This will be shown in the JavaScript console.
## Usage example
### Usage example
```js
registerPaymentMethodExtensionCallbacks( 'my-hypothetical-extension', {
@ -62,11 +64,11 @@ registerPaymentMethodExtensionCallbacks( 'my-hypothetical-extension', {
} );
```
## Callbacks registered for payment methods
### Callbacks registered for payment methods
Extensions can register only one callback per payment method:
```
```text
payment_method_name: ( arg ) => {...}
```
@ -96,9 +98,9 @@ interface CanMakePaymentArgument {
If you need data that is not available in the parameter received by the callback you can consider [exposing your data in the Store API](extend-rest-api-add-data.md).
# Filtering payment methods using requirements
## Filtering payment methods using requirements
## The problem
### The problem
Your extension has added functionality to your store in such a way that only specific payment gateways can process
orders that contain certain products.
@ -107,7 +109,7 @@ Using the example of `Bookings` if the shopper adds a `Bookable` product to thei
and you, the merchant, want to confirm all bookings before taking payment. You would still need to capture the customer's
checkout details but not their payment method at that point.
## The solution
### The solution
To allow the shopper to check out without entering payment details, but still require them to fill in the other
checkout details it is possible to create a new payment method which will handle carts containing a `Bookable` item.
@ -120,7 +122,7 @@ For more information on how to register a payment method with WooCommerce Blocks
[Payment method integration](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/extensibility/payment-method-integration.md)
documentation.
## Basic usage
### Basic usage
Following the documentation for registering payment methods linked above, you should register your payment method with a
unique `supports` feature, for example `booking_availability`. This will be used to isolate it and prevent other methods
@ -132,7 +134,7 @@ requirements of the cart are. Below is an example of doing this for our `Bookabl
Then you will need to use the `register_payment_requirements` on the `ExtendSchema` class to tell the Checkout block
to execute a callback to check for requirements.
## Putting it all together
### Putting it all together
This code example assumes there is some class called `Pseudo_Booking_Class` that has the `cart_contains_bookable_product`
method available. The implementation of this method is not relevant here.
@ -180,10 +182,11 @@ with a `Bookable` item in your cart, any method that does not `supports` the `bo
not display, while yours, the one that _does_ support this requirement _will_ display.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/filtering-payment-methods.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

450
plugins/woocommerce-blocks/docs/extensibility/filters.md
View File

@ -6,38 +6,36 @@
## Table of Contents
- [__experimental_woocommerce_blocks_add_data_attributes_to_block](#__experimental_woocommerce_blocks_add_data_attributes_to_block)
- [__experimental_woocommerce_blocks_add_data_attributes_to_namespace](#__experimental_woocommerce_blocks_add_data_attributes_to_namespace)
- [__experimental_woocommerce_blocks_payment_gateway_features_list](#__experimental_woocommerce_blocks_payment_gateway_features_list)
- [woocommerce_add_cart_item](#woocommerce_add_cart_item)
- [woocommerce_add_cart_item_data](#woocommerce_add_cart_item_data)
- [woocommerce_add_to_cart_sold_individually_quantity](#woocommerce_add_to_cart_sold_individually_quantity)
- [woocommerce_add_to_cart_validation](#-woocommerce_add_to_cart_validation)
- [woocommerce_adjust_non_base_location_prices](#woocommerce_adjust_non_base_location_prices)
- [woocommerce_admin_disabled](#woocommerce_admin_disabled)
- [woocommerce_apply_individual_use_coupon](#woocommerce_apply_individual_use_coupon)
- [woocommerce_apply_with_individual_use_coupon](#woocommerce_apply_with_individual_use_coupon)
- [woocommerce_blocks_product_grid_is_cacheable](#woocommerce_blocks_product_grid_is_cacheable)
- [woocommerce_blocks_product_grid_item_html](#woocommerce_blocks_product_grid_item_html)
- [woocommerce_blocks_register_script_dependencies](#woocommerce_blocks_register_script_dependencies)
- [woocommerce_cart_contents_changed](#woocommerce_cart_contents_changed)
- [woocommerce_ga_disable_tracking](#woocommerce_ga_disable_tracking)
- [woocommerce_get_item_data](#woocommerce_get_item_data)
- [woocommerce_new_customer_data](#woocommerce_new_customer_data)
- [woocommerce_registration_errors](#woocommerce_registration_errors)
- [woocommerce_shared_settings](#-woocommerce_shared_settings)
- [woocommerce_shipping_package_name](#woocommerce_shipping_package_name)
- [woocommerce_show_page_title](#woocommerce_show_page_title)
- [woocommerce_store_api_disable_nonce_check](#woocommerce_store_api_disable_nonce_check)
- [woocommerce_store_api_product_quantity_limit](#woocommerce_store_api_product_quantity_limit)
- [woocommerce_store_api_product_quantity_{$value_type}](#woocommerce_store_api_product_quantity_-value_type)
- [woocommerce_variation_option_name](#woocommerce_variation_option_name)
- [\_\_experimental_woocommerce_blocks_add_data_attributes_to_block](#__experimental_woocommerce_blocks_add_data_attributes_to_block)
- [\_\_experimental_woocommerce_blocks_add_data_attributes_to_namespace](#__experimental_woocommerce_blocks_add_data_attributes_to_namespace)
- [\_\_experimental_woocommerce_blocks_payment_gateway_features_list](#__experimental_woocommerce_blocks_payment_gateway_features_list)
- [woocommerce_add_cart_item](#woocommerce_add_cart_item)
- [woocommerce_add_cart_item_data](#woocommerce_add_cart_item_data)
- [woocommerce_add_to_cart_sold_individually_quantity](#woocommerce_add_to_cart_sold_individually_quantity)
- [woocommerce_add_to_cart_validation](#-woocommerce_add_to_cart_validation)
- [woocommerce_adjust_non_base_location_prices](#woocommerce_adjust_non_base_location_prices)
- [woocommerce_admin_disabled](#woocommerce_admin_disabled)
- [woocommerce_apply_individual_use_coupon](#woocommerce_apply_individual_use_coupon)
- [woocommerce_apply_with_individual_use_coupon](#woocommerce_apply_with_individual_use_coupon)
- [woocommerce_blocks_product_grid_is_cacheable](#woocommerce_blocks_product_grid_is_cacheable)
- [woocommerce_blocks_product_grid_item_html](#woocommerce_blocks_product_grid_item_html)
- [woocommerce_blocks_register_script_dependencies](#woocommerce_blocks_register_script_dependencies)
- [woocommerce_cart_contents_changed](#woocommerce_cart_contents_changed)
- [woocommerce_ga_disable_tracking](#woocommerce_ga_disable_tracking)
- [woocommerce_get_item_data](#woocommerce_get_item_data)
- [woocommerce_new_customer_data](#woocommerce_new_customer_data)
- [woocommerce_registration_errors](#woocommerce_registration_errors)
- [woocommerce_shared_settings](#-woocommerce_shared_settings)
- [woocommerce_shipping_package_name](#woocommerce_shipping_package_name)
- [woocommerce_show_page_title](#woocommerce_show_page_title)
- [woocommerce_store_api_disable_nonce_check](#woocommerce_store_api_disable_nonce_check)
- [woocommerce_store_api_product_quantity_limit](#woocommerce_store_api_product_quantity_limit)
- [woocommerce*store_api_product_quantity*{\$value_type}](#woocommerce_store_api_product_quantity_-value_type)
- [woocommerce_variation_option_name](#woocommerce_variation_option_name)
---
## __experimental_woocommerce_blocks_add_data_attributes_to_block
## \_\_experimental_woocommerce_blocks_add_data_attributes_to_block
Filters the list of allowed Block Names
@ -51,19 +49,17 @@ apply_filters( '__experimental_woocommerce_blocks_add_data_attributes_to_block',
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $allowed_namespaces | array | List of namespaces. |
| Argument | Type | Description |
| -------------------- | ----- | ------------------- |
| \$allowed_namespaces | array | List of namespaces. |
### Source
- [BlockTypesController.php](../../src/BlockTypesController.php)
- [BlockTypesController.php](../../src/BlockTypesController.php)
---
## __experimental_woocommerce_blocks_add_data_attributes_to_namespace
## \_\_experimental_woocommerce_blocks_add_data_attributes_to_namespace
Filters the list of allowed block namespaces.
@ -77,19 +73,17 @@ apply_filters( '__experimental_woocommerce_blocks_add_data_attributes_to_namespa
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $allowed_namespaces | array | List of namespaces. |
| Argument | Type | Description |
| -------------------- | ----- | ------------------- |
| \$allowed_namespaces | array | List of namespaces. |
### Source
- [BlockTypesController.php](../../src/BlockTypesController.php)
- [BlockTypesController.php](../../src/BlockTypesController.php)
---
## __experimental_woocommerce_blocks_payment_gateway_features_list
## \_\_experimental_woocommerce_blocks_payment_gateway_features_list
Filter to control what features are available for each payment gateway.
@ -99,14 +93,13 @@ apply_filters( '__experimental_woocommerce_blocks_payment_gateway_features_list'
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $features | array | List of supported features. |
| $name | string | Gateway name. |
| Argument | Type | Description |
| ---------- | ------ | --------------------------- |
| \$features | array | List of supported features. |
| \$name | string | Gateway name. |
### Returns
`array` Updated list of supported features.
### Example
@ -124,122 +117,106 @@ function my_function_callback( $features, $gateway ) {
add_filter( '__experimental_woocommerce_blocks_payment_gateway_features_list', 'my_function_callback', 10, 2 );
```
### Source
- [Payments/Integrations/PayPal.php](../../src/Payments/Integrations/PayPal.php)
- [Payments/Integrations/PayPal.php](../../src/Payments/Integrations/PayPal.php)
---
## woocommerce_add_cart_item
Filters the item being added to the cart.
```php
apply_filters( 'woocommerce_add_cart_item', array $cart_item_data, string $cart_id )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $cart_item_data | array | Array of cart item data being added to the cart. |
| $cart_id | string | Id of the item in the cart. |
| Argument | Type | Description |
| ---------------- | ------ | ------------------------------------------------ |
| \$cart_item_data | array | Array of cart item data being added to the cart. |
| \$cart_id | string | Id of the item in the cart. |
### Returns
`array` Updated cart item data.
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_add_cart_item_data
Filter cart item data for add to cart requests.
```php
apply_filters( 'woocommerce_add_cart_item_data', array $cart_item_data, integer $product_id, integer $variation_id, integer $quantity )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $cart_item_data | array | Array of other cart item data. |
| $product_id | integer | ID of the product added to the cart. |
| $variation_id | integer | Variation ID of the product added to the cart. |
| $quantity | integer | Quantity of the item added to the cart. |
| Argument | Type | Description |
| ---------------- | ------- | ---------------------------------------------- |
| \$cart_item_data | array | Array of other cart item data. |
| \$product_id | integer | ID of the product added to the cart. |
| \$variation_id | integer | Variation ID of the product added to the cart. |
| \$quantity | integer | Quantity of the item added to the cart. |
### Returns
`array`
`array`
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_add_to_cart_sold_individually_quantity
Filter sold individually quantity for add to cart requests.
```php
apply_filters( 'woocommerce_add_to_cart_sold_individually_quantity', integer $sold_individually_quantity, integer $quantity, integer $product_id, integer $variation_id, array $cart_item_data )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $sold_individually_quantity | integer | Defaults to 1. |
| $quantity | integer | Quantity of the item added to the cart. |
| $product_id | integer | ID of the product added to the cart. |
| $variation_id | integer | Variation ID of the product added to the cart. |
| $cart_item_data | array | Array of other cart item data. |
| Argument | Type | Description |
| ---------------------------- | ------- | ---------------------------------------------- |
| \$sold_individually_quantity | integer | Defaults to 1. |
| \$quantity | integer | Quantity of the item added to the cart. |
| \$product_id | integer | ID of the product added to the cart. |
| \$variation_id | integer | Variation ID of the product added to the cart. |
| \$cart_item_data | array | Array of other cart item data. |
### Returns
`integer`
`integer`
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## ~~woocommerce_add_to_cart_validation~~
Filters if an item being added to the cart passed validation checks.
```php
apply_filters( 'woocommerce_add_to_cart_validation', boolean $passed_validation, integer $product_id, integer $quantity, integer $variation_id, array $variation )
```
**Deprecated: This hook is deprecated and will be removed**
### Description
@ -248,36 +225,32 @@ apply_filters( 'woocommerce_add_to_cart_validation', boolean $passed_validation,
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $passed_validation | boolean | True if the item passed validation. |
| $product_id | integer | Product ID being validated. |
| $quantity | integer | Quantity added to the cart. |
| $variation_id | integer | Variation ID being added to the cart. |
| $variation | array | Variation data. |
| Argument | Type | Description |
| ------------------- | ------- | ------------------------------------- |
| \$passed_validation | boolean | True if the item passed validation. |
| \$product_id | integer | Product ID being validated. |
| \$quantity | integer | Quantity added to the cart. |
| \$variation_id | integer | Variation ID being added to the cart. |
| \$variation | array | Variation data. |
### Returns
`boolean`
`boolean`
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_adjust_non_base_location_prices
Filters if taxes should be removed from locations outside the store base location.
```php
apply_filters( 'woocommerce_adjust_non_base_location_prices', boolean $adjust_non_base_location_prices )
```
**Note: Matches filter name in WooCommerce core.**
### Description
@ -286,106 +259,91 @@ apply_filters( 'woocommerce_adjust_non_base_location_prices', boolean $adjust_no
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $adjust_non_base_location_prices | boolean | True by default. |
| Argument | Type | Description |
| --------------------------------- | ------- | ---------------- |
| \$adjust_non_base_location_prices | boolean | True by default. |
### Returns
`boolean`
`boolean`
### Source
- [StoreApi/Utilities/ProductQuery.php](../../src/StoreApi/Utilities/ProductQuery.php)
- [StoreApi/Utilities/ProductQuery.php](../../src/StoreApi/Utilities/ProductQuery.php)
---
## woocommerce_admin_disabled
```php
apply_filters( 'woocommerce_admin_disabled' )
```
### Source
- [InboxNotifications.php](../../src/InboxNotifications.php)
- [InboxNotifications.php](../../src/InboxNotifications.php)
---
## woocommerce_apply_individual_use_coupon
Filter coupons to remove when applying an individual use coupon.
```php
apply_filters( 'woocommerce_apply_individual_use_coupon', array $coupons, \WC_Coupon $coupon, array $applied_coupons )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $coupons | array | Array of coupons to remove from the cart. |
| $coupon | \WC_Coupon | Coupon object applied to the cart. |
| $applied_coupons | array | Array of applied coupons already applied to the cart. |
| Argument | Type | Description |
| ----------------- | ---------- | ----------------------------------------------------- |
| \$coupons | array | Array of coupons to remove from the cart. |
| \$coupon | \WC_Coupon | Coupon object applied to the cart. |
| \$applied_coupons | array | Array of applied coupons already applied to the cart. |
### Returns
`array`
`array`
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_apply_with_individual_use_coupon
Filters if a coupon can be applied alongside other individual use coupons.
```php
apply_filters( 'woocommerce_apply_with_individual_use_coupon', boolean $apply_with_individual_use_coupon, \WC_Coupon $coupon, \WC_Coupon $individual_use_coupon, array $applied_coupons )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $apply_with_individual_use_coupon | boolean | Defaults to false. |
| $coupon | \WC_Coupon | Coupon object applied to the cart. |
| $individual_use_coupon | \WC_Coupon | Individual use coupon already applied to the cart. |
| $applied_coupons | array | Array of applied coupons already applied to the cart. |
| Argument | Type | Description |
| ---------------------------------- | ---------- | ----------------------------------------------------- |
| \$apply_with_individual_use_coupon | boolean | Defaults to false. |
| \$coupon | \WC_Coupon | Coupon object applied to the cart. |
| \$individual_use_coupon | \WC_Coupon | Individual use coupon already applied to the cart. |
| \$applied_coupons | array | Array of applied coupons already applied to the cart. |
### Returns
`boolean`
`boolean`
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_blocks_product_grid_is_cacheable
Filters whether or not the product grid is cacheable.
```php
@ -394,26 +352,23 @@ apply_filters( 'woocommerce_blocks_product_grid_is_cacheable', boolean $is_cache
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $is_cacheable | boolean | The list of script dependencies. |
| $query_args | array | Query args for the products query passed to BlocksWpQuery. |
| Argument | Type | Description |
| -------------- | ------- | ---------------------------------------------------------- |
| \$is_cacheable | boolean | The list of script dependencies. |
| \$query_args | array | Query args for the products query passed to BlocksWpQuery. |
### Returns
`array` True to enable cache, false to disable cache.
### Source
- [BlockTypes/AbstractProductGrid.php](../../src/BlockTypes/AbstractProductGrid.php)
- [BlockTypes/AbstractProductGrid.php](../../src/BlockTypes/AbstractProductGrid.php)
---
## woocommerce_blocks_product_grid_item_html
Filters the HTML for products in the grid.
```php
@ -422,27 +377,24 @@ apply_filters( 'woocommerce_blocks_product_grid_item_html', string $html, array
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $html | string | Product grid item HTML. |
| $data | array | Product data passed to the template. |
| $product | \WC_Product | Product object. |
| Argument | Type | Description |
| --------- | ----------- | ------------------------------------ |
| \$html | string | Product grid item HTML. |
| \$data | array | Product data passed to the template. |
| \$product | \WC_Product | Product object. |
### Returns
`string` Updated product grid item HTML.
### Source
- [BlockTypes/AbstractProductGrid.php](../../src/BlockTypes/AbstractProductGrid.php)
- [BlockTypes/AbstractProductGrid.php](../../src/BlockTypes/AbstractProductGrid.php)
---
## woocommerce_blocks_register_script_dependencies
Filters the list of script dependencies.
```php
@ -451,88 +403,77 @@ apply_filters( 'woocommerce_blocks_register_script_dependencies', array $depende
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $dependencies | array | The list of script dependencies. |
| $handle | string | The script's handle. |
| Argument | Type | Description |
| -------------- | ------ | -------------------------------- |
| \$dependencies | array | The list of script dependencies. |
| \$handle | string | The script's handle. |
### Returns
`array`
`array`
### Source
- [Assets/Api.php](../../src/Assets/Api.php)
- [Assets/Api.php](../../src/Assets/Api.php)
---
## woocommerce_cart_contents_changed
Filters the entire cart contents when the cart changes.
```php
apply_filters( 'woocommerce_cart_contents_changed', array $cart_contents )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $cart_contents | array | Array of all cart items. |
| Argument | Type | Description |
| --------------- | ----- | ------------------------ |
| \$cart_contents | array | Array of all cart items. |
### Returns
`array` Updated array of all cart items.
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_ga_disable_tracking
Filter to disable Google Analytics tracking.
```php
apply_filters( 'woocommerce_ga_disable_tracking', boolean $disable_tracking )
```
**Note: Matches filter name in GA extension.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $disable_tracking | boolean | If true, tracking will be disabled. |
| Argument | Type | Description |
| ------------------ | ------- | ----------------------------------- |
| \$disable_tracking | boolean | If true, tracking will be disabled. |
### Source
- [Domain/Services/GoogleAnalytics.php](../../src/Domain/Services/GoogleAnalytics.php)
- [Domain/Services/GoogleAnalytics.php](../../src/Domain/Services/GoogleAnalytics.php)
---
## woocommerce_get_item_data
Filters cart item data.
```php
apply_filters( 'woocommerce_get_item_data', array $item_data, array $cart_item )
```
**Note: Matches filter name in WooCommerce core.**
### Description
@ -541,26 +482,23 @@ apply_filters( 'woocommerce_get_item_data', array $item_data, array $cart_item )
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $item_data | array | Cart item data. Empty by default. |
| $cart_item | array | Cart item array. |
| Argument | Type | Description |
| ----------- | ----- | --------------------------------- |
| \$item_data | array | Cart item data. Empty by default. |
| \$cart_item | array | Cart item array. |
### Returns
`array`
`array`
### Source
- [StoreApi/Schemas/V1/CartItemSchema.php](../../src/StoreApi/Schemas/V1/CartItemSchema.php)
- [StoreApi/Schemas/V1/CartItemSchema.php](../../src/StoreApi/Schemas/V1/CartItemSchema.php)
---
## woocommerce_new_customer_data
Filters customer data before a customer account is registered.
```php
@ -573,32 +511,28 @@ apply_filters( 'woocommerce_new_customer_data', array $customer_data )
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $customer_data | array | An array of customer (user) data. |
| Argument | Type | Description |
| --------------- | ----- | --------------------------------- |
| \$customer_data | array | An array of customer (user) data. |
### Returns
`array`
`array`
### Source
- [StoreApi/Routes/V1/Checkout.php](../../src/StoreApi/Routes/V1/Checkout.php)
- [StoreApi/Routes/V1/Checkout.php](../../src/StoreApi/Routes/V1/Checkout.php)
---
## woocommerce_registration_errors
Filters registration errors before a customer account is registered.
```php
apply_filters( 'woocommerce_registration_errors', \WP_Error $errors, string $username, string $user_email )
```
**Note: Matches filter name in WooCommerce core.**
### Description
@ -607,34 +541,30 @@ apply_filters( 'woocommerce_registration_errors', \WP_Error $errors, string $use
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $errors | \WP_Error | Error object. |
| $username | string | Customer username. |
| $user_email | string | Customer email address. |
| Argument | Type | Description |
| ------------ | --------- | ----------------------- |
| \$errors | \WP_Error | Error object. |
| \$username | string | Customer username. |
| \$user_email | string | Customer email address. |
### Returns
`\WP_Error`
`\WP_Error`
### Source
- [StoreApi/Routes/V1/Checkout.php](../../src/StoreApi/Routes/V1/Checkout.php)
- [StoreApi/Routes/V1/Checkout.php](../../src/StoreApi/Routes/V1/Checkout.php)
---
## ~~woocommerce_shared_settings~~
Filters the array of shared settings.
```php
apply_filters( 'woocommerce_shared_settings', array $data )
```
**Deprecated: This hook is deprecated and will be removed**
### Description
@ -643,57 +573,50 @@ apply_filters( 'woocommerce_shared_settings', array $data )
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $data | array | Settings data. |
| Argument | Type | Description |
| -------- | ----- | -------------- |
| \$data | array | Settings data. |
### Returns
`array`
`array`
### Source
- [Assets/AssetDataRegistry.php](../../src/Assets/AssetDataRegistry.php)
- [Assets/AssetDataRegistry.php](../../src/Assets/AssetDataRegistry.php)
---
## woocommerce_shipping_package_name
Filters the shipping package name.
```php
apply_filters( 'woocommerce_shipping_package_name', string $shipping_package_name, string $package_id, array $package )
```
**Note: Matches filter name in WooCommerce core.**
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $shipping_package_name | string | Shipping package name. |
| $package_id | string | Shipping package ID. |
| $package | array | Shipping package from WooCommerce. |
| Argument | Type | Description |
| ----------------------- | ------ | ---------------------------------- |
| \$shipping_package_name | string | Shipping package name. |
| \$package_id | string | Shipping package ID. |
| \$package | array | Shipping package from WooCommerce. |
### Returns
`string` Shipping package name.
### Source
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
- [StoreApi/Utilities/CartController.php](../../src/StoreApi/Utilities/CartController.php)
---
## woocommerce_show_page_title
We need to load the scripts here because when using block templates wp_head() gets run after the block template. As a result we are trying to enqueue required scripts before we have even registered them.
```php
@ -702,19 +625,16 @@ apply_filters( 'woocommerce_show_page_title' )
### See
- https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5328#issuecomment-989013447
- https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5328#issuecomment-989013447
### Source
- [BlockTypes/ClassicTemplate.php](../../src/BlockTypes/ClassicTemplate.php)
- [BlockTypes/ClassicTemplate.php](../../src/BlockTypes/ClassicTemplate.php)
---
## woocommerce_store_api_disable_nonce_check
Filters the Store API nonce check.
```php
@ -727,25 +647,22 @@ apply_filters( 'woocommerce_store_api_disable_nonce_check', boolean $disable_non
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $disable_nonce_check | boolean | If true, nonce checks will be disabled. |
| Argument | Type | Description |
| --------------------- | ------- | --------------------------------------- |
| \$disable_nonce_check | boolean | If true, nonce checks will be disabled. |
### Returns
`boolean`
`boolean`
### Source
- [StoreApi/Routes/V1/AbstractCartRoute.php](../../src/StoreApi/Routes/V1/AbstractCartRoute.php)
- [StoreApi/Routes/V1/AbstractCartRoute.php](../../src/StoreApi/Routes/V1/AbstractCartRoute.php)
---
## woocommerce_store_api_product_quantity_limit
Filters the quantity limit for a product being added to the cart via the Store API.
```php
@ -758,25 +675,22 @@ apply_filters( 'woocommerce_store_api_product_quantity_limit', integer $quantity
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $quantity_limit | integer | Quantity limit which defaults to 99 unless sold individually. |
| $product | \WC_Product | Product instance. |
| Argument | Type | Description |
| ---------------- | ----------- | --------------------------------------------------------------- |
| \$quantity_limit | integer | Quantity limit which defaults to 9999 unless sold individually. |
| \$product | \WC_Product | Product instance. |
### Returns
`integer`
`integer`
### Source
- [StoreApi/Utilities/QuantityLimits.php](../../src/StoreApi/Utilities/QuantityLimits.php)
- [StoreApi/Utilities/QuantityLimits.php](../../src/StoreApi/Utilities/QuantityLimits.php)
---
## woocommerce_store_api_product_quantity_{$value_type}
## woocommerce*store_api_product_quantity*{\$value_type}
Filters the quantity minimum for a cart item in Store API. This allows extensions to control the minimum qty of items already within the cart.
@ -790,34 +704,30 @@ apply_filters( 'woocommerce_store_api_product_quantity_{$value_type}', mixed $va
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $value | mixed | The value being filtered. |
| $product | \WC_Product | The product object. |
| $cart_item | array, null | The cart item if the product exists in the cart, or null. |
| Argument | Type | Description |
| ----------- | ----------- | --------------------------------------------------------- |
| \$value | mixed | The value being filtered. |
| \$product | \WC_Product | The product object. |
| \$cart_item | array, null | The cart item if the product exists in the cart, or null. |
### Returns
`mixed`
`mixed`
### Source
- [StoreApi/Utilities/QuantityLimits.php](../../src/StoreApi/Utilities/QuantityLimits.php)
- [StoreApi/Utilities/QuantityLimits.php](../../src/StoreApi/Utilities/QuantityLimits.php)
---
## woocommerce_variation_option_name
Filters the variation option name.
```php
apply_filters( 'woocommerce_variation_option_name', string $value, null $unused, string $taxonomy, \WC_Product $product )
```
**Note: Matches filter name in WooCommerce core.**
### Description
@ -826,29 +736,29 @@ apply_filters( 'woocommerce_variation_option_name', string $value, null $unused,
### Parameters
| Argument | Type | Description |
| -------- | ---- | ----------- |
| $value | string | The name to display. |
| $unused | null | Unused because this is not a variation taxonomy. |
| $taxonomy | string | Taxonomy or product attribute name. |
| $product | \WC_Product | Product data. |
| Argument | Type | Description |
| ---------- | ----------- | ------------------------------------------------ |
| \$value | string | The name to display. |
| \$unused | null | Unused because this is not a variation taxonomy. |
| \$taxonomy | string | Taxonomy or product attribute name. |
| \$product | \WC_Product | Product data. |
### Returns
`string`
`string`
### Source
- [StoreApi/Schemas/V1/CartItemSchema.php](../../src/StoreApi/Schemas/V1/CartItemSchema.php)
- [StoreApi/Schemas/V1/CartItemSchema.php](../../src/StoreApi/Schemas/V1/CartItemSchema.php)
---
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/filters.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

20
plugins/woocommerce-blocks/docs/extensibility/integration-interface.md
View File

@ -1,11 +1,13 @@
# `IntegrationRegistry` and `IntegrationInterface`
## The problem
You are an extension developer, and to allow users to interact with your extension on the client-side, you have written
some CSS and JavaScript that you would like to be included on the page. Your JavaScript also relies on some server-side
data, and you'd like this to be available to your scripts.
## The solution
You may use the `IntegrationRegistry` to register an `IntegrationInterface` this will be a class that will handle the
enqueuing of scripts, styles, and data. You may have a different `IntegrationInterface` for each block (Mini Cart, Cart
and Checkout), or you may use the same one, it is entirely dependent on your use case.
@ -16,34 +18,41 @@ You should use the hooks: `woocommerce_blocks_mini-cart_block_registration`. `wo
You may then use the `register` method on this object to register your `IntegrationInterface`.
## `IntegrationInterface` methods
To begin, we'll need to create our integration class, our `IntegrationInterface`. This will be a class that implements
WooCommerce Blocks' interface named [`IntegrationInterface`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/Integrations/IntegrationInterface.php).
In this section, we will step through the interface's members and discuss what they are used for.
### `get_name()`
This is the `IntegrationInterface`'s way of namespacing your integration. The name chosen here should be unique to your
This is the `IntegrationInterface`'s way of namespacing your integration. The name chosen here should be unique to your
extension. This method should return a string.
### `initialize()`
This is where any setup, or initialization for your integration should be placed. For example, you could register the
scripts and styles your extension needs here. This method should not return anything.
### `get_script_handles()`
This is where the handles of any scripts you want to be enqueued on the client-side in the frontend context should be
placed. This method should return an array of strings.
### `get_editor_script_handles()`
This is where the handles of any scripts you want to be enqueued on the client-side in the editor context should be
placed. This method should return an array of strings.
### `get_script_data()`
This is where you can set values you want to be available to your scripts on the frontend. This method should return an
associative array, the keys of which will be used to get the data using the JavaScript function `getSetting`.
The keys and values of this array should all be serializable.
## Usage example
Let's suppose we're the author of an extension: `WooCommerce Example Plugin`. We want to enqueue scripts, styles,
and data on the frontend when either the Mini Cart, Cart or Checkout blocks are being used.
@ -51,7 +60,7 @@ We also want some data from a server-side function to be available to our front-
You will notice that in the example below, we reference the `/build/index.asset.php` file. This is created by the [`DependencyExtractionWebpackPlugin`](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin)
which creates a PHP file mapping the dependencies of your client-side scripts, so that they can be added in the
`dependencies` array of `wp_register_script`.
`dependencies` array of `wp_register_script`.
Let's create our `IntegrationInterface`.
@ -155,7 +164,7 @@ class WooCommerce_Example_Plugin_Integration implements IntegrationInterface {
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG && file_exists( $file ) ) {
return filemtime( $file );
}
// As above, let's assume that WooCommerce_Example_Plugin_Assets::VERSION resolves to some versioning number our
// extension uses.
return \WooCommerce_Example_Plugin_Assets::VERSION;
@ -190,6 +199,7 @@ add_action(
Now, when we load a page containing either block, we should see the scripts we registered in `initialize` being loaded!
### Getting data added in `get_script_data`
We associated some data with the extension in the `get_script_data` method of our interface, we need to know how to get
this!
@ -198,13 +208,15 @@ string. The name of the setting containing the data added in `get_script_data` i
(i.e. the value returned by `get_name`) suffixed with `_data`. In our example it would be: `woocommerce-example-plugin_data`.
The value returned here is a plain old JavaScript object, keyed by the keys of the array returned by `get_script_data`,
the values will serialized.
the values will serialized.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/integration-interface.md)
<!-- /FEEDBACK -->

47
plugins/woocommerce-blocks/docs/extensibility/payment-method-integration.md
View File

@ -4,21 +4,21 @@ The checkout block has an API interface for payment methods to integrate that co
## Table of Contents <!-- omit in toc -->
- [Client Side integration](#client-side-integration)
- [Express payment methods - `registerExpressPaymentMethod( options )`](#express-payment-methods---registerexpresspaymentmethod-options-)
- [`name` (required)](#name-required)
- [`content` (required)](#content-required)
- [`edit` (required)](#edit-required)
- [`canMakePayment` (required):](#canmakepayment-required)
- [`paymentMethodId`](#paymentmethodid)
- [`supports:features`](#supportsfeatures)
- [Payment Methods - `registerPaymentMethod( options )`](#payment-methods---registerpaymentmethod-options-)
- [Props Fed to Payment Method Nodes](#props-fed-to-payment-method-nodes)
- [Server Side Integration](#server-side-integration)
- [Processing Payment](#processing-payment)
- [Registering Assets](#registering-assets)
- [Hooking into the Checkout processing by the Store API.](#hooking-into-the-checkout-processing-by-the-store-api)
- [Putting it all together](#putting-it-all-together)
- [Client Side integration](#client-side-integration)
- [Express payment methods - `registerExpressPaymentMethod( options )`](#express-payment-methods---registerexpresspaymentmethod-options-)
- [`name` (required)](#name-required)
- [`content` (required)](#content-required)
- [`edit` (required)](#edit-required)
- [`canMakePayment` (required):](#canmakepayment-required)
- [`paymentMethodId`](#paymentmethodid)
- [`supports:features`](#supportsfeatures)
- [Payment Methods - `registerPaymentMethod( options )`](#payment-methods---registerpaymentmethod-options-)
- [Props Fed to Payment Method Nodes](#props-fed-to-payment-method-nodes)
- [Server Side Integration](#server-side-integration)
- [Processing Payment](#processing-payment)
- [Registering Assets](#registering-assets)
- [Hooking into the Checkout processing by the Store API.](#hooking-into-the-checkout-processing-by-the-store-api)
- [Putting it all together](#putting-it-all-together)
## Client Side integration
@ -34,13 +34,13 @@ In both cases, the client side integration is done using registration methods ex
To register an express payment method, you use the `registerExpressPaymentMethod` function from the blocks registry. An example of importing this for use in your JavaScript file is:
_Aliased import_
#### Aliased import
```js
import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
```
_wc global_
#### `wc global`
```js
const { registerExpressPaymentMethod } = wc.wcBlocksRegistry;
@ -81,11 +81,11 @@ This should be a React node that will output in the express payment method area
This should be a React node that will be output in the express payment method area when the block is rendered in the editor. It will be cloned in the rendering process. When cloned, this React node will receive props from the payment method interface to checkout (but they will contain preview data).
#### `canMakePayment` (required):
#### `canMakePayment` (required)
A callback to determine whether the payment method should be available as an option for the shopper. The function will be passed an object containing data about the current order.
```
```ts
canMakePayment( {
cart: Cart,
cartTotals: CartTotals,
@ -120,13 +120,13 @@ This is an array of payment features supported by the gateway. It is used to cro
To register a payment method, you use the `registerPaymentMethod` function from the blocks registry. An example of importing this for use in your JavaScript file is:
_Aliased import_
#### Aliased import
```js
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
```
_wc global_
#### `wc global`
```js
const { registerPaymentMethod } = wc.wcBlocksRegistry;
@ -193,7 +193,7 @@ In your class:
- Define a `get_payment_method_script_handles_for_admin` function. Include this if your payment method has a script you _only_ want to load in the editor context for the checkout block. Include here any script from `get_payment_method_script_handles` that is also needed in the admin.
- Define a `get_payment_method_data` function. You can return from this function an associative array of data you want to be exposed for your payment method client side. This data will be available client side via `wc.wcSettings.getSetting`. So for instance if you assigned `stripe` as the value of the `name` property for this class, client side you can access any data via: `wc.wcSettings.getSetting( 'stripe_data' )`. That would return an object matching the shape of the associative array you returned from this function.
### Hooking into the Checkout processing by the Store API.
### Hooking into the Checkout processing by the Store API
There may be some cases where the fallback legacy processing of Checkout requests from the StoreAPI mentioned earlier doesn't work for your existing payment method integration. For these cases, there is also an [action hook you can implement to hook into the server side processing of the order](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/308e968c700028180cab391f2223eb0a43dd2d4d/src/RestApi/StoreApi/Routes/Checkout.php#L350-L361). **Note:** a good place to register your callback on this hook is in the `initialize` method of the payment method class you created from the above instructions.
@ -240,10 +240,11 @@ function my_extension_woocommerce_blocks_support() {
As an example, you can see how the Stripe extension adds it's integration in this [pull request](https://github.com/woocommerce/woocommerce-gateway-stripe/pull/1467/files).
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/payment-method-integration.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

2
plugins/woocommerce-blocks/docs/extensibility/slot-fills.md
View File

@ -56,10 +56,12 @@ You use `registerPlugin` to feed in your plugin namespace, your component `rende
For this to work, your script must be enqueued after Cart and Checkout. You can follow the [IntegrationInterface](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/50f9b3e8d012f425d318908cc13d9c601d97bd68/docs/extensibility/integration-interface.md) documentation for enqueueing your script.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/slot-fills.md)
<!-- /FEEDBACK -->

53
plugins/woocommerce-blocks/docs/templates/README.md vendored
View File

@ -4,27 +4,29 @@ This page includes documentation related to WooCommerce Block Templates.
## Table of Contents
* [Overview](#overview)
* [Requirements](#requirements)
* [Technical Overview](#technical-overview)
* [The Problem](#the-problem)
* [The Solution](#the-solution)
* [Some things to be aware of](#some-things-to-be-aware-of)
* [Related Files](#related-files)
- [WooCommerce Block Templates](#woocommerce-block-templates)
- [Table of Contents](#table-of-contents)
- [Overview](#overview)
- [Requirements](#requirements)
- [Technical Overview](#technical-overview)
- [The Problem](#the-problem)
- [The Solution](#the-solution)
- [Some things to be aware of](#some-things-to-be-aware-of)
- [Related files](#related-files)
## Overview
WooCommerce Block Templates are a collection of WooCommerce Core templates for the WordPress Full Site Editing experience introduced in WordPress 5.9. You can customize these templates in the Site Editor.
WooCommerce Block Templates are a collection of WooCommerce Core templates for the WordPress Full Site Editing experience introduced in WordPress 5.9. You can customize these templates in the Site Editor.
You can read more about the Full Site Editing (FSE) experience [here](https://developer.wordpress.org/block-editor/getting-started/full-site-editing/).
### Requirements
| Software | Minimum Version |
|-----------------|------------------|
| WordPress | 5.9 |
| WooCommerce | 6.0 |
| Theme | Any [block theme](https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/#what-is-a-block-theme) |
| Software | Minimum Version |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------- |
| WordPress | 5.9 |
| WooCommerce | 6.0 |
| Theme | Any [block theme](https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/#what-is-a-block-theme) |
## Technical Overview
@ -40,26 +42,27 @@ The BlockTemplateController class is primarily responsible for hooking into both
### Some things to be aware of
* Individual templates are represented by a placeholder block within the Site Editor until we can 'block-ify' these. This is the long-term goal. Until then users will be able to customize templates by adding blocks above and below the placeholder.
* At the beginning of the project, we unintentionally used the incorrect WooCommerce plugin slug. This has resulted in us maintaining both the incorrect and correct slugs. We reference these via `BlockTemplateUtils::DEPRECATED_PLUGIN_SLUG` and `BlockTemplateUtils::PLUGIN_SLUG`. More information on that [here](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5423).
* If a theme has a `archive-product.html` template file, but does not have any taxonomy related files. We will automatically duplicate their themes `archive-product.html` file in place of these taxonomy files within `BlockTemplateController->get_block_file_template()`.
* In `BlockTemplateController->get_block_templates()` we filter out templates in production that are behind a feature flag. These will be available in development, but will be absent in production unless the feature flag is removed.
- Individual templates are represented by a placeholder block within the Site Editor until we can 'block-ify' these. This is the long-term goal. Until then users will be able to customize templates by adding blocks above and below the placeholder.
- At the beginning of the project, we unintentionally used the incorrect WooCommerce plugin slug. This has resulted in us maintaining both the incorrect and correct slugs. We reference these via `BlockTemplateUtils::DEPRECATED_PLUGIN_SLUG` and `BlockTemplateUtils::PLUGIN_SLUG`. More information on that [here](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5423).
- If a theme has a `archive-product.html` template file, but does not have any taxonomy related files. We will automatically duplicate their themes `archive-product.html` file in place of these taxonomy files within `BlockTemplateController->get_block_file_template()`.
- In `BlockTemplateController->get_block_templates()` we filter out templates in production that are behind a feature flag. These will be available in development, but will be absent in production unless the feature flag is removed.
## Related files
| File | Description | Source | Docs |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| templates/templates/\* | Location in the filesystem where WooCommerce block template HTML files are stored. | [Source files](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/templates/templates) | |
| classic-template/\* | The JavaScript block rendered in the Site Editor. This is a server-side rendered component which is handled by ClassicTemplate.php | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/blocks/classic-template) | [README](../../assets/js/blocks/classic-template/README.md)|
| ClassicTemplate.php | Class used to setup the block on the server-side and render the correct template | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTypes/ClassicTemplate.php) | [README](./classic-template.md) |
| BlockTemplateController.php | Class which contains all the business logic which loads the templates into the Site Editor or on the front-end through various hooks available in WordPress & WooCommerce core. | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTemplatesController.php) | [README](./block-template-controller.md) |
| BlockTemplateUtils.php | Class containing a collection of useful utility methods. | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/Utils/BlockTemplateUtils.php) | |
| File | Description | Source | Docs |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| templates/templates/\* | Location in the filesystem where WooCommerce block template HTML files are stored. | [Source files](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/templates/templates) | |
| classic-template/\* | The JavaScript block rendered in the Site Editor. This is a server-side rendered component which is handled by ClassicTemplate.php | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/blocks/classic-template) | [README](../../assets/js/blocks/classic-template/README.md) |
| ClassicTemplate.php | Class used to setup the block on the server-side and render the correct template | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTypes/ClassicTemplate.php) | [README](./classic-template.md) |
| BlockTemplateController.php | Class which contains all the business logic which loads the templates into the Site Editor or on the front-end through various hooks available in WordPress & WooCommerce core. | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTemplatesController.php) | [README](./block-template-controller.md) |
| BlockTemplateUtils.php | Class containing a collection of useful utility methods. | [Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/Utils/BlockTemplateUtils.php) | |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/templates/README.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

64
plugins/woocommerce-blocks/docs/templates/block-template-controller.md vendored
View File

@ -1,48 +1,55 @@
# BlockTemplateController
[Source file](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTemplatesController.php)
The BlockTemplateController class contains all the business logic which loads the templates into the Site Editor or on the front-end through various hooks available in WordPress & WooCommerce core. Without documenting every method individually, I will look to provide some insight into key functionality.
The BlockTemplateController class contains all the business logic which loads the templates into the Site Editor or on the front-end through various hooks available in WordPress & WooCommerce core. Without documenting every method individually, I will look to provide some insight into key functionality.
## Table of Contents
* [Overview](#overview)
* [add_block_templates( $query_result, $query, $template_type )](#add_block_templates-query_result-query-template_type-)
* [get_block_file_template( $template, $id, $template_type )](#get_block_file_template-template-id-template_type-)
* [render_block_template()](#render_block_template)
- [BlockTemplateController](#blocktemplatecontroller)
- [Table of Contents](#table-of-contents)
- [Overview](#overview)
- [add_block_templates( $query_result, $query, \$template_type )](#add_block_templates-query_result-query-template_type-)
- [Return value](#return-value)
- [get_block_file_template( $template, $id, \$template_type )](#get_block_file_template-template-id-template_type-)
- [Return value](#return-value-1)
- [render_block_template()](#render_block_template)
- [Return value](#return-value-2)
## Overview
In the initialization of the class, we hook into the three hooks listed below. These provide us with all of the extensibility points necessary in order to load our own block templates alongside the themes.
Within each method section, I will explain in what scenarios they are executed.
Within each method section, I will explain in what scenarios they are executed.
* filter: `get_block_templates` with `add_block_templates`.
* filter: `pre_get_block_file_template` with `get_block_file_template`.
* action: `template_redirect` with `render_block_template`.
- filter: `get_block_templates` with `add_block_templates`.
- filter: `pre_get_block_file_template` with `get_block_file_template`.
- action: `template_redirect` with `render_block_template`.
## add_block_templates( $query_result, $query, $template_type )
## add_block_templates( $query_result, $query, \$template_type )
This method is applied to the filter `get_block_templates`, which is executed before returning a unified list of template objects based on a query.
**Typically executed when:**
* Loading the "All Templates" view in the Site Editor
* Loading one of the templates on the front-end where the query would build a list of relevant templates based on a hierarchy (for example, the product page hierarchy could be an array containing `single-product-[product-name].html`, `single-product.html`, `single.html`).
* Loading the "Edit Product" view.
- Loading the "All Templates" view in the Site Editor
- Loading one of the templates on the front-end where the query would build a list of relevant templates based on a hierarchy (for example, the product page hierarchy could be an array containing `single-product-[product-name].html`, `single-product.html`, `single.html`).
- Loading the "Edit Product" view.
**This method is responsible for:**
* Giving our templates a user-friendly title (e.g. turning "single-product" into "Product Page").
* It collects all the WooCommerce templates from both the filesystem and the database (customized templates are stored in the database as posts) and adds them to the returned list.
* In the event the theme has a `archive-product.html` template file, but not category/tag template files, it is eligible to use the `archive-product.html` file in their place. So we trick Gutenberg in thinking some templates (e.g. category/tag) have a theme file available if it is using the `archive-product.html` template, even though _technically_ the theme does not have a specific file for them.
* Ensuring we do not add irrelevant WooCommerce templates in the returned list. For example, if `$query['post_type']` has a value (e.g. `product`) this means the query is requesting templates related to that specific post type, so we filter out any irrelevant ones. This _could_ be used to show/hide templates from the template dropdown on the "Edit Product" screen in WP Admin.
- Giving our templates a user-friendly title (e.g. turning "single-product" into "Product Page").
- It collects all the WooCommerce templates from both the filesystem and the database (customized templates are stored in the database as posts) and adds them to the returned list.
- In the event the theme has a `archive-product.html` template file, but not category/tag template files, it is eligible to use the `archive-product.html` file in their place. So we trick Gutenberg in thinking some templates (e.g. category/tag) have a theme file available if it is using the `archive-product.html` template, even though _technically_ the theme does not have a specific file for them.
- Ensuring we do not add irrelevant WooCommerce templates in the returned list. For example, if `$query['post_type']` has a value (e.g. `product`) this means the query is requesting templates related to that specific post type, so we filter out any irrelevant ones. This _could_ be used to show/hide templates from the template dropdown on the "Edit Product" screen in WP Admin.
### Return value
This method will return an array of `WP_Block_Template` values
## get_block_file_template( $template, $id, $template_type )
## get_block_file_template( $template, $id, \$template_type )
This method is applied to the filter `pre_get_block_file_template` inside the WordPress core function `get_block_file_template` (not to be confused with this method from the `BlockTemplateController` class, which has the same name).
This method is applied to the filter `pre_get_block_file_template` inside the WordPress core function `get_block_file_template` (not to be confused with this method from the `BlockTemplateController` class, which has the same name).
The order of execution is as follows:
@ -52,10 +59,12 @@ The order of execution is as follows:
During step 2 it's important we hook into the `pre_get_block_file_template`. If we don't, the function will check if the first part of the template ID (e.g. `woocommerce/woocommerce`) is the same as the current themes ID (e.g. `twentytwentytwo`), which will resolve `false` and return `null` instead of the expected `WP_Block_Template` object.
**Typically executed when:**
* A user clears the customizations of a WooCommerce template.
- A user clears the customizations of a WooCommerce template.
**This method is responsible for:**
* Loading the template files from the filesystem, and building a `WP_Block_Template` version of it.
- Loading the template files from the filesystem, and building a `WP_Block_Template` version of it.
### Return value
@ -68,19 +77,24 @@ This method is applied to the filter `template_redirect` and executed before Wor
This allows us to hook into WooCommerce core through the filter `woocommerce_has_block_template` where we can determine if a specific block template exists and should be loaded.
**Typically executed when:**
* A user loads a page on the front-end.
- A user loads a page on the front-end.
**This method is responsible for:**
* Determining if the current page has an appropriate WooCommerce block template available to render.
* Checking if the currently loaded page is from WooCommerce. It then checks if the theme has an appropriate template to use: if it does not, then it finally checks if WooCommerce has a default block template available. If so, we override the value through `woocommerce_has_block_template` to resolve `true`.
- Determining if the current page has an appropriate WooCommerce block template available to render.
- Checking if the currently loaded page is from WooCommerce. It then checks if the theme has an appropriate template to use: if it does not, then it finally checks if WooCommerce has a default block template available. If so, we override the value through `woocommerce_has_block_template` to resolve `true`.
### Return value
Void. This method does not return a value but rather sets up hooks to render block templates on the front-end.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/templates/block-template-controller.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

3
plugins/woocommerce-blocks/docs/templates/classic-template.md vendored
View File

@ -11,11 +11,14 @@ From this file, we enqueue the front-end scripts necessary to enable dynamic fun
From the `render()` method we inspect the `$attributes` object for a `template` property which helps determine which core PHP templating code to execute (e.g. `single-product`) for the front-end views.
![Classic Block Template Attribute](./assets/classic-template-attributes.png)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/templates/classic-template.md)
<!-- /FEEDBACK -->

12
plugins/woocommerce-blocks/docs/testing/README.md
View File

@ -2,18 +2,20 @@
This folder contains documentation around manual testing of WooCommerce Blocks.
| Document | Description |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Document | Description |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [When to employ end to end testing](when-to-employ-e2e-testing.md) | This doc explains when End to End tests should be used and when unit tests will suffice. |
| [Smoke Testing](smoke-testing.md) | This doc explains how to smoke test key Blocks functionality. |
| [Cart and Checkout Testing](./cart-checkout/readme.md) | Various testing flows for Cart and Checkout Blocks |
| [Releases](./releases/README.md) | We document all testing flows for releases in this folder |
| [Smoke Testing](smoke-testing.md) | This doc explains how to smoke test key Blocks functionality. |
| [Cart and Checkout Testing](./cart-checkout/readme.md) | Various testing flows for Cart and Checkout Blocks |
| [Releases](./releases/README.md) | We document all testing flows for releases in this folder |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/README.md)
<!-- /FEEDBACK -->

51
plugins/woocommerce-blocks/docs/testing/cart-checkout/README.md
View File

@ -1,12 +1,12 @@
# Cart and Checkout testing plan <!-- omit in toc -->
- [Introduction](#introduction)
- [Known limitations](#known-limitations)
- [How to report issues](#how-to-report-issues)
- [What are we testing?](#what-are-we-testing)
- [Cart Block](#cart-block)
- [Checkout Block](#checkout-block)
- [Testing Checklist](#testing-checklist)
- [Introduction](#introduction)
- [Known limitations](#known-limitations)
- [How to report issues](#how-to-report-issues)
- [What are we testing?](#what-are-we-testing)
- [Cart Block](#cart-block)
- [Checkout Block](#checkout-block)
- [Testing Checklist](#testing-checklist)
## Introduction
@ -19,15 +19,16 @@ separate them.
### Known limitations
<!-- Debating on where to put this section -->
This is a list of all known limitation for Cart and Checkout blocks, it means
we're aware of them, and will probably not tackle them in this first release:
- Cart and Checkout blocks do not support third-party plugins that integrate with
regular Cart and Checkout shortcode, if you somehow see a third party plugin working
well, this is pure coincidence, the only exception is Stripe payment gateway.
- Cart and Checkout blocks do not support third-party plugins that integrate with
regular Cart and Checkout shortcode, if you somehow see a third party plugin working
well, this is pure coincidence, the only exception is Stripe payment gateway.
- The only payment gateway supported are Check and Stripe.
- Storefront and TwentyTwenty are expected to work fine, no guarantee is presented on other themes, but do report them if you feel like that's something we can fix on our end.
- The only payment gateway supported are Check and Stripe.
- Storefront and TwentyTwenty are expected to work fine, no guarantee is presented on other themes, but do report them if you feel like that's something we can fix on our end.
<!-- Currently this is unneeded so I'm omitting this section -->.
<!--
@ -63,29 +64,29 @@ the Cart and Checkout shortcodes.
### Cart Block
![](https://i.imgur.com/mcbXgqV.png)
![image](https://i.imgur.com/mcbXgqV.png)
### Checkout Block
![](https://i.imgur.com/9KhYK2L.png)
![image](https://i.imgur.com/9KhYK2L.png)
## Testing Checklist
- [General Flow](general-flow.md)
- [Editor](editor.md)
- [Shipping](shipping.md)
- [Payments](payment.md)
- [Items](items.md)
- [Taxes](taxes.md)
- [Coupons](coupons.md)
- [Cross Browser and platform](cross-browser.md)
- [General Flow](general-flow.md)
- [Editor](editor.md)
- [Shipping](shipping.md)
- [Payments](payment.md)
- [Items](items.md)
- [Taxes](taxes.md)
- [Coupons](coupons.md)
- [Cross Browser and platform](cross-browser.md)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/readme.md)
<!-- /FEEDBACK -->
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/README.md)
<!-- /FEEDBACK -->

47
plugins/woocommerce-blocks/docs/testing/cart-checkout/coupons.md
View File

@ -1,42 +1,45 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# Coupons
## Setup
You will need to setup some types of coupon in order to test this.
- A general purpose coupon `coupon`.
- An expired coupon `oldcoupon`.
- An email limited coupon `a12s` that is limited to `*@automattic.com` emails.
- A cart condition coupon that is limited to carts above x threshold (e.g $200) `above200`.
- An individually used coupon `alone`.
- A free shipping coupon `freeship`.
- A general purpose coupon `coupon`.
- An expired coupon `oldcoupon`.
- An email limited coupon `a12s` that is limited to `*@automattic.com` emails.
- A cart condition coupon that is limited to carts above x threshold (e.g \$200) `above200`.
- An individually used coupon `alone`.
- A free shipping coupon `freeship`.
## What to test
With coupons disabled: <!-- heading -->
- [ ] You should not see the add coupon section in your cart and checkout and in the editor.
- [ ] You should not see the add coupon section in your cart and checkout and in the editor.
With coupons enabled: <!-- heading -->
- [ ] You can apply coupons in both Cart and Checkout blocks.
- [ ] A valid coupon `coupon` should reduce your totals.
- [ ] An expired coupon `oldcoupon` should return an error.
- [ ] An invalid coupon should return an error.
- [ ] An email limited coupon should apply to your cart.
- [ ] If the email is correct, you should be able to checkout.
- [ ] If the email is incorrect, you should receive an error, and the coupon will be removed from your cart.
- [ ] A condition coupon should not be added until you meet the condition.
- [ ] Adding a condition coupon then removing the condition (reduce cart total or remove related item) should remove the coupon from your cart with an error.
- [ ] Adding a coupon then adding `alone` coupon should replace the first one.
- [ ] Adding `alone` then trying to another coupon should result in an error.
- [ ] Adding `freeship` should show the free shipping method you previously created.
- [ ] You can apply coupons in both Cart and Checkout blocks.
- [ ] A valid coupon `coupon` should reduce your totals.
- [ ] An expired coupon `oldcoupon` should return an error.
- [ ] An invalid coupon should return an error.
- [ ] An email limited coupon should apply to your cart.
- [ ] If the email is correct, you should be able to checkout.
- [ ] If the email is incorrect, you should receive an error, and the coupon will be removed from your cart.
- [ ] A condition coupon should not be added until you meet the condition.
- [ ] Adding a condition coupon then removing the condition (reduce cart total or remove related item) should remove the coupon from your cart with an error.
- [ ] Adding a coupon then adding `alone` coupon should replace the first one.
- [ ] Adding `alone` then trying to another coupon should result in an error.
- [ ] Adding `freeship` should show the free shipping method you previously created.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/coupons.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

11
plugins/woocommerce-blocks/docs/testing/cart-checkout/cross-browser.md
View File

@ -3,15 +3,18 @@
The main goal of this is to test in a variety of themes, browsers, platforms, and setups, this is a list of things you can test with, with sane expectations.
The baseline for testing is:
- WordPress 5.4 and up.
- WooCommerce 4.2 and up
- All Browsers supported by [those two versions](https://make.wordpress.org/core/handbook/best-practices/browser-support/) so this includes Internet Explorer 11, and latest two versions of each browser.
- Storefront, TwentyTwenty, and TwentyNineteen themes, we use storefront as a basis for development and push fixes to it regularly, so make sure you run the latest version.
- WordPress 5.4 and up.
- WooCommerce 4.2 and up
- All Browsers supported by [those two versions](https://make.wordpress.org/core/handbook/best-practices/browser-support/) so this includes Internet Explorer 11, and latest two versions of each browser.
- Storefront, TwentyTwenty, and TwentyNineteen themes, we use storefront as a basis for development and push fixes to it regularly, so make sure you run the latest version.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/cross-browser.md)
<!-- /FEEDBACK -->

20
plugins/woocommerce-blocks/docs/testing/cart-checkout/editor.md
View File

@ -1,18 +1,20 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# Editor experience
- [ ] You should be able to add one and only one Cart or Checkout block to a page.
- [ ] The preview in the inserter should show a skeleton of how the block structure should look like.
- [ ] When inserting any of the blocks, it should have some data already in it.
- [ ] You should not be able to interact directly with the block (except for some sections).
- [ ] You should be able to see block settings on the sidebar when it is focused.
- [ ] Proceed to Checkout and Back to cart block settings should present you with a list of your website pages.
- [ ] You should be able to add one and only one Cart or Checkout block to a page.
- [ ] The preview in the inserter should show a skeleton of how the block structure should look like.
- [ ] When inserting any of the blocks, it should have some data already in it.
- [ ] You should not be able to interact directly with the block (except for some sections).
- [ ] You should be able to see block settings on the sidebar when it is focused.
- [ ] Proceed to Checkout and Back to cart block settings should present you with a list of your website pages.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/editor.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

26
plugins/woocommerce-blocks/docs/testing/cart-checkout/general-flow.md
View File

@ -1,5 +1,3 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# General Flows
## Setup
@ -10,20 +8,24 @@ taxes (if you have any), shipping and so on.
## What to test
- [ ] Create pages with Cart and Checkout blocks.
- [ ] Set the continue to checkout link your Cart settings to the Checkout page you created.
- [ ] In Woocommerce -> Settings -> Advanced, set the new pages to your default Cart and Checkout.
- [ ] Add some products to your cart.
- [ ] Mix in a limited stock product or a coupon.
- [ ] Continue to checkout.
- [ ] You should be able to fix your info, if you have them saved, they will show up.
- [ ] Depending on what payment method you enabled (Credit Card, Check, Express payment), you can place the order.
- [ ] You should see an order received page.
- [ ] Create pages with Cart and Checkout blocks.
- [ ] Set the continue to checkout link your Cart settings to the Checkout page you created.
- [ ] In Woocommerce -> Settings -> Advanced, set the new pages to your default Cart and Checkout.
- [ ] Add some products to your cart.
- [ ] Mix in a limited stock product or a coupon.
- [ ] Continue to checkout.
- [ ] You should be able to fix your info, if you have them saved, they will show up.
- [ ] Depending on what payment method you enabled (Credit Card, Check, Express payment), you can place the order.
- [ ] You should see an order received page.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/general-flow.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

38
plugins/woocommerce-blocks/docs/testing/cart-checkout/items.md
View File

@ -1,34 +1,34 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# Cart Items
## Setup
- You will need an item that is [sold individually](https://docs.woocommerce.com/wp-content/uploads/2016/06/disable-stock-mgmt.png).
- You will need a low stock item with a [low threshold quantity](https://docs.woocommerce.com/wp-content/uploads/2016/06/simpleproduct-inventory.png) below the stock quantity.
- You will need a low stock item with a [low threshold quantity](https://docs.woocommerce.com/wp-content/uploads/2016/06/simpleproduct-inventory.png) above 0 and a stock quantity below the threshold.
- You will need an item that is [sold individually](https://docs.woocommerce.com/wp-content/uploads/2016/06/disable-stock-mgmt.png).
- You will need a low stock item with a [low threshold quantity](https://docs.woocommerce.com/wp-content/uploads/2016/06/simpleproduct-inventory.png) below the stock quantity.
- You will need a low stock item with a [low threshold quantity](https://docs.woocommerce.com/wp-content/uploads/2016/06/simpleproduct-inventory.png) above 0 and a stock quantity below the threshold.
## What to test
- [ ] You should be able to add items to your cart.
- [ ] You should be able to change item quantity in your Cart.
- [ ] You should not be able to change "sold individually" items quantity.
- [ ] Items that have quantity lower than the threshold should show "x Left in stock".
- [ ] You should not be able to increase that item quantity to above that is left in stock.
- [ ] If you try to increase an item quantity to above its stock quantity, you get an error. **Note:** This is not something that can be tested with a single browser instance. To test you need to do the following:
- [ ] Set a stock of 4 on an item.
- [ ] Open tabs in two different browsers (so you have two different sessions in play).
- [ ] In both browsers add 1 of that item into the cart.
- [ ] In both browsers, load the cart (block).
- [ ] In one browser, increase the quantity of that item to the maximum you can.
- [ ] In the other browser, try increasing the quantity. An error should appear.
- [ ] You should be able to remove an item.
- [ ] You should be able to add items to your cart.
- [ ] You should be able to change item quantity in your Cart.
- [ ] You should not be able to change "sold individually" items quantity.
- [ ] Items that have quantity lower than the threshold should show "x Left in stock". - [ ] You should not be able to increase that item quantity to above that is left in stock.
- [ ] If you try to increase an item quantity to above its stock quantity, you get an error. **Note:** This is not something that can be tested with a single browser instance. To test you need to do the following:
- [ ] Set a stock of 4 on an item.
- [ ] Open tabs in two different browsers (so you have two different sessions in play).
- [ ] In both browsers add 1 of that item into the cart.
- [ ] In both browsers, load the cart (block).
- [ ] In one browser, increase the quantity of that item to the maximum you can.
- [ ] In the other browser, try increasing the quantity. An error should appear.
- [ ] You should be able to remove an item.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/items.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

45
plugins/woocommerce-blocks/docs/testing/cart-checkout/payment.md
View File

@ -1,48 +1,51 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# Payments
## Setup
- The Checkout Block supports Three methods of payments:
- Check Payment, found in WooCommerce payment section.
- Stripe Credit Card payments, provided by [Stripe Gateway](https://woocommerce.com/products/stripe/).
- Express Payment methods, provided by [Stripe Gateway](https://woocommerce.com/products/stripe/).
- The Checkout Block supports Three methods of payments:
- Check Payment, found in WooCommerce payment section.
- Stripe Credit Card payments, provided by [Stripe Gateway](https://woocommerce.com/products/stripe/).
- Express Payment methods, provided by [Stripe Gateway](https://woocommerce.com/products/stripe/).
To test Stripe and Express payment methods, you will need API keys, you can get them by creating a testing account
in stripe.
Special Cases:
To test Express payment methods there are some special requirements like
- You need to be serving the website over https, try ephemeral websites.
- You need to be from a supported country.
- To test Apple Pay you will need to have an iOS or device.
- To test Google Pay you will need to have Chrome installed and a payment method setup.
- To test Microsoft Pay you will need to have Edge installed.
- You will also need to be on a supported country, to better verify your compatibility visit
[this page](https://stripe.com/docs/stripe-js/elements/payment-request-button#react-overview)
You should see if you're on a supported platform or not.
- You need to be serving the website over https, try ephemeral websites.
- You need to be from a supported country.
- To test Apple Pay you will need to have an iOS or device.
- To test Google Pay you will need to have Chrome installed and a payment method setup.
- To test Microsoft Pay you will need to have Edge installed.
- You will also need to be on a supported country, to better verify your compatibility visit
[this page](https://stripe.com/docs/stripe-js/elements/payment-request-button#react-overview)
You should see if you're on a supported platform or not.
Unsupported:
![](https://i.imgur.com/EpkFrat.png).
![image](https://i.imgur.com/EpkFrat.png).
## What to test
If no payment method is set up: <!-- heading -->
- [ ] An error will show up in the frontend, saying that no payment method is available.
- [ ] In the editor, you will be prompted to set up a payment method.
- [ ] An error will show up in the frontend, saying that no payment method is available.
- [ ] In the editor, you will be prompted to set up a payment method.
If you have a payment method available: <!-- heading -->
- [ ] You should be able to perform a successful checkout with Check payments.
- [ ] You should be able to perform a successful checkout credit card payment using this cart `4242424242424242`
- [ ] You should be able to perform a failed checkout credit card payment using this cart `4000000000000002`
- [ ] You should be able to perform a successful checkout with Check payments.
- [ ] You should be able to perform a successful checkout credit card payment using this cart `4242424242424242`
- [ ] You should be able to perform a failed checkout credit card payment using this cart `4000000000000002`
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/payment.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

47
plugins/woocommerce-blocks/docs/testing/cart-checkout/shipping.md
View File

@ -1,45 +1,46 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# Shipping
## Setup
- You will need to setup shipping zones for a couple of countries.
- You will need to have a free shipping method that is enabled with a coupon or a threshold.
- You will need to setup shipping zones for a couple of countries.
- You will need to have a free shipping method that is enabled with a coupon or a threshold.
## What to test
With shipping zones available: <!-- heading -->
- [ ] You should be able to see preview rates (that are not your actual rates) in the editor.
- [ ] You should be able to see your actual rates on the frontend.
- [ ] Selecting a shipping rate should update the totals.
- [ ] Changing the address in Cart block should update the rates.
- [ ] Try entering an address that does not have rates for, you should:
- [ ] See an error saying "No options were found".
- [ ] See the default shipping option if you have it setup.
- [ ] The countries in the shipping rates form should reflect the countries you have in WooCommerce -> Settings -> General -> Shipping location(s).
- [ ] If your cart has only digital products, the Cart and Checkout blocks should act like shipping is disabled.
- [ ] Your free shipping method should show up when you increase the cart quantity to above that limit.
- [ ] Once you decrease it, the shipping rate will disappear, the next rate will be selected.
- [ ] The rate you select in Cart should still be selected in Checkout.
- [ ] Updating your shipping address in Checkout should give you live updates about rates in your cart.
- [ ] You should be able to see preview rates (that are not your actual rates) in the editor.
- [ ] You should be able to see your actual rates on the frontend.
- [ ] Selecting a shipping rate should update the totals.
- [ ] Changing the address in Cart block should update the rates.
- [ ] Try entering an address that does not have rates for, you should:
- [ ] See an error saying "No options were found".
- [ ] See the default shipping option if you have it setup.
- [ ] The countries in the shipping rates form should reflect the countries you have in WooCommerce -> Settings -> General -> Shipping location(s).
- [ ] If your cart has only digital products, the Cart and Checkout blocks should act like shipping is disabled.
- [ ] Your free shipping method should show up when you increase the cart quantity to above that limit.
- [ ] Once you decrease it, the shipping rate will disappear, the next rate will be selected.
- [ ] The rate you select in Cart should still be selected in Checkout.
- [ ] Updating your shipping address in Checkout should give you live updates about rates in your cart.
If you don't have any shipping zones set up and/or shipping is disabled: <!-- heading -->
- [ ] You should only see the billing form in both editor and frontend for the Checkout Block.
- [ ] The shipping options step should not be visible.
- [ ] The shipping cost should not be visible in the sidebar.
- [ ] You should only see the billing form in both editor and frontend for the Checkout Block.
- [ ] The shipping options step should not be visible.
- [ ] The shipping cost should not be visible in the sidebar.
If you don't have any shipping zones set up but **shipping is enabled**: <!-- heading -->
- [ ] In the editor, Checkout Block will show you a placeholder promoting you to set up shipping zones.
- [ ] In the editor, Checkout Block will show you a placeholder promoting you to set up shipping zones.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/shipping.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

16
plugins/woocommerce-blocks/docs/testing/cart-checkout/taxes.md
View File

@ -1,26 +1,28 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
# Taxes
## Setup
- You will need to have taxes setup for a region.
- You will need to have taxes setup for a region.
## What to test
With taxes disabled: <!-- heading -->
- [ ] You should not see "Taxes" line in the cart or checkout.
- [ ] You should not see "Taxes" line in the cart or checkout.
With taxes enabled: <!-- heading -->
- [ ] You should see "Taxes" line in the cart or checkout.
- [ ] If the user address or store settings country doesn't have taxes in it, the value will be 0.
- [ ] You should see "Taxes" line in the cart or checkout.
- [ ] If the user address or store settings country doesn't have taxes in it, the value will be 0.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/cart-checkout/taxes.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

126
plugins/woocommerce-blocks/docs/testing/releases/260.md
View File

@ -1,63 +1,61 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
## Testing notes and ZIP for release 2.6.0
# Testing notes and ZIP for release 2.6.0
**Zip File for testing:**
[woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/archive/v2.6.0.zip)
### Cart and Checkout Blocks
## Cart and Checkout Blocks
[See testing notes here](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/docs/testing/cart-checkout)
### All Products
## All Products
- All of these tests should be done in Safari, Chrome, and Firefox (latest version).
- Also validate the behaviour of the block in mobile views vs desktop.
- All of these tests should be done in Safari, Chrome, and Firefox (latest version).
- Also validate the behaviour of the block in mobile views vs desktop.
* [ ] Verify the block can be added to a new page.
* [ ] Verify only one instance of the block can be added to a page/post.
* [ ] Verify the various settings and configuration for the block in the editor works as expected for the given UI.
* [ ] Verify the block functions as expected for the given configuration on the frontend of the site.
* [ ] For an instance of this block setup on a post in an earlier release, verify that upgrading to this release doesn't break the block functionality in the frontend or in the editor.
- [ ] Verify the block can be added to a new page.
- [ ] Verify only one instance of the block can be added to a page/post.
- [ ] Verify the various settings and configuration for the block in the editor works as expected for the given UI.
- [ ] Verify the block functions as expected for the given configuration on the frontend of the site.
- [ ] For an instance of this block setup on a post in an earlier release, verify that upgrading to this release doesn't break the block functionality in the frontend or in the editor.
#### Specific changes to test for in this release.
### Specific changes to test for in this release
* [ ] When editing the All Products block, verify that when you change the default sorting options in the inspector controls for the block that the corresponding filter dropdown in the block preview updates as expected (see highlighted areas below):
- [ ] When editing the All Products block, verify that when you change the default sorting options in the inspector controls for the block that the corresponding filter dropdown in the block preview updates as expected (see highlighted areas below):
![example affected areas](https://user-images.githubusercontent.com/2207451/71814247-15521400-307c-11ea-92da-8f4073492397.png)
* [ ] Verify that an error notice is shown in the All Products block if you try to add a product to the cart (using the Add to Cart button) if the product is out of stock or is sold individually and there is already an instance of that product in the cart.
- [ ] Verify that an error notice is shown in the All Products block if you try to add a product to the cart (using the Add to Cart button) if the product is out of stock or is sold individually and there is already an instance of that product in the cart.
### Filter blocks
## Filter blocks
These blocks are used in tandem with the All Products block to provide filtering options on the content rendered by the All Products block. They include:
- Filter Products By Attribute
- Filter Products By Price
- Active Product Filters
- Filter Products By Attribute
- Filter Products By Price
- Active Product Filters
These blocks can be tested by adding them to the same page as the All Products block as the selected values in these blocks affects the products displayed by the All Products block.
* [ ] General testing involves setting up the filter blocks and verifying the the various configurations for the blocks work as expected in the editor (for settings) and the frontend (according to how the block was configured). Validate that when various filters are applied the expected results are shown in the All Products block.
- [ ] General testing involves setting up the filter blocks and verifying the the various configurations for the blocks work as expected in the editor (for settings) and the frontend (according to how the block was configured). Validate that when various filters are applied the expected results are shown in the All Products block.
#### Specific changes to test for in this release.
### Specific changes to test for in this release
**Testing the price filter block with various settings around taxes and prices**
#### Testing the price filter block with various settings around taxes and prices
One fix in this release for this block is that when the price display setting (including or excluding tax) for WooCommerce differs from the price entered setting (prices input including or excluding tax), the displayed prices for filtered results from the entered Price Filter block might appear to be a mismatch (when it's querying based on the prices _saved to the database_). With this release, this is fixed so that no matter how WooCommerce is configured for displaying or saving prices respective to taxes, the displayed products will have prices matching the expected range set via the price filter block.
To test:
* [ ] In WooCommerce > Settings > Taxes, **choose to enter prices inclusive of tax, but display prices excluding tax.** Test that filters work as expected for the blocks.
* [ ] In WooCommerce > Settings > Taxes, **choose to enter prices exclusive of tax, but display prices including tax**. Test that filters work on products.
**And/Or labelling in Active Filters block**
- [ ] In WooCommerce > Settings > Taxes, **choose to enter prices inclusive of tax, but display prices excluding tax.** Test that filters work as expected for the blocks.
- [ ] In WooCommerce > Settings > Taxes, **choose to enter prices exclusive of tax, but display prices including tax**. Test that filters work on products.
* [ ] Setup various filter blocks so that some are set to `any` type filtering and others are set to `all` type filtering.
* [ ] Add the Active Filters block to the same post/page.
* [ ] Verify that when you apply filters on the frontend, the Active Filter block updates it's text to match the type of filtering being done.
#### And/Or labelling in Active Filters block
**Dropdown display style to Attribute Filter block**
- [ ] Setup various filter blocks so that some are set to `any` type filtering and others are set to `all` type filtering.
- [ ] Add the Active Filters block to the same post/page.
- [ ] Verify that when you apply filters on the frontend, the Active Filter block updates it's text to match the type of filtering being done.
#### Dropdown display style to Attribute Filter block
This release introduces a dropdown display style for the Filter Products by Attributes block (for both AND and OR type queries). Expected result:
@ -65,69 +63,71 @@ This release introduces a dropdown display style for the Filter Products by Attr
To test:
* [ ] Create a post with a Filter Products by Attribute block and select the Dropdown option in _Display style_ settings.
* [ ] Preview the post and interact with the filter (search terms, add them, remove them, repeat only using the keyboard, using a screen-reader etc).
* [ ] Verify everything works as expected for the ui/ux behaviour and for the returned results in the All Products block.
* [ ] This should work for either "and" or "or" filtering.
- [ ] Create a post with a Filter Products by Attribute block and select the Dropdown option in _Display style_ settings.
- [ ] Preview the post and interact with the filter (search terms, add them, remove them, repeat only using the keyboard, using a screen-reader etc).
- [ ] Verify everything works as expected for the ui/ux behaviour and for the returned results in the All Products block.
- [ ] This should work for either "and" or "or" filtering.
**Add option to display an "apply filter button" for the Filter Products by Attribute block**
#### Add option to display an "apply filter button" for the Filter Products by Attribute block
* [ ] Create a post with an Filter Products by Attribute block and All products block
* [ ] For the Filter Products by Attribute block, enable the _Filter Button_ option.
* [ ] Preview the post and verify selecting/unselecting options doesn't update the _All Products_ block until you press the _Go_ button.
- [ ] Create a post with an Filter Products by Attribute block and All products block
- [ ] For the Filter Products by Attribute block, enable the _Filter Button_ option.
- [ ] Preview the post and verify selecting/unselecting options doesn't update the _All Products_ block until you press the _Go_ button.
### All Product Grid based blocks
## All Product Grid based blocks
All of these blocks share a common ancestor for the PHP side registration, so it's good to test them together. These blocks include:
- Top Rated Products
- Best Selling Products
- On Sale Products
- Products By Attribute
- Hand-picked Products
- Products by Category
- Products by Tag
- Newest Products
- Top Rated Products
- Best Selling Products
- On Sale Products
- Products By Attribute
- Hand-picked Products
- Products by Category
- Products by Tag
- Newest Products
#### Specific changes to test for in these blocks for this release:
### Specific changes to test for in these blocks for this release
* [ ] Verify that if there are no products on sale, the On Sale Products block shows this placeholder in the editor:
- [ ] Verify that if there are no products on sale, the On Sale Products block shows this placeholder in the editor:
![On Sale Products placeholder](https://user-images.githubusercontent.com/90977/71984453-c2fe2800-3220-11ea-9b6e-fd3c9ca2ece2.png)
* [ ] For any of the product grid blocks, verify that when a fresh instance of the block is added to the editor, it defaults to 3 rows and 3 columns for the grid.
* [ ] Verify that changing any of the values for the grid "sticks" and persists across saves. Also verify it shows as expected and configured on the frontend.
* [ ] For any of the product grid blocks, for an instance of the block setup on a post in an earlier release with no changes to it's settings, verify that upgrading to this release doesn't break the block functionality in the frontend or in the editor (However note that the grid will change from the default of 1 in the earlier release to 3 in the recent release automatically).
* [ ] Same test as above, except in the earlier release, change the grid to something other than 1 row and save. When upgrading to the new release the setting for the grid should have persisted with the block.
- [ ] For any of the product grid blocks, verify that when a fresh instance of the block is added to the editor, it defaults to 3 rows and 3 columns for the grid.
- [ ] Verify that changing any of the values for the grid "sticks" and persists across saves. Also verify it shows as expected and configured on the frontend.
- [ ] For any of the product grid blocks, for an instance of the block setup on a post in an earlier release with no changes to it's settings, verify that upgrading to this release doesn't break the block functionality in the frontend or in the editor (However note that the grid will change from the default of 1 in the earlier release to 3 in the recent release automatically).
- [ ] Same test as above, except in the earlier release, change the grid to something other than 1 row and save. When upgrading to the new release the setting for the grid should have persisted with the block.
### Other blocks
## Other blocks
There are a number of other specific focuses for testing for changes in this release for other blocks:
#### Featured Product Block
### Featured Product Block
In this fix, when a product is changed for an existing featured product block, the link in the button updates to the page for the new product. Note, if there is a custom url applied when the product is changed, this will be replaced by the url to the product (that's expected).
To test:
* [ ] Verify any existing instance of this block in a previous release does not show any errors in the editor when updating to this release.
* [ ] Verify that if you edit the block and change the product it uses, the button url will update as well.
- [ ] Verify any existing instance of this block in a previous release does not show any errors in the editor when updating to this release.
- [ ] Verify that if you edit the block and change the product it uses, the button url will update as well.
#### Product Categories Block
### Product Categories Block
Support was added for showing category images in the Product Categories block. The following expectations:
- For the "List" display style the toggle option for showing category images is available (and is disabled by default).
- This option is not available for the "Dropdown" display style.
- When the option is toggled to "Show Category Image", images for categories are shown per category item in the list.
- For the "List" display style the toggle option for showing category images is available (and is disabled by default).
- This option is not available for the "Dropdown" display style.
- When the option is toggled to "Show Category Image", images for categories are shown per category item in the list.
- [ ] Verify the new option works as expected according to the above both in the editor and in the frontend.
* [ ] Verify the new option works as expected according to the above both in the editor and in the frontend.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/260.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

10
plugins/woocommerce-blocks/docs/testing/releases/261.md
View File

@ -1,9 +1,8 @@
Release build zip:
[woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/archive/v2.6.1.zip)
# Testing notes and ZIP for release 2.6.1
## Testing notes and ZIP for release 2.6.1
Release build zip: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/archive/v2.6.1.zip)
### To test:
## To test
1. View your stock table (`wc_reserved_stock`) in the database
2. Go to checkout with some items in the cart
@ -20,10 +19,11 @@ _Note: assuming you are using a development site where you are okay with losing
3. Verify the `wc_reserved_stock` table was re-created.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/261.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

111
plugins/woocommerce-blocks/docs/testing/releases/270.md
View File

@ -1,52 +1,49 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
## Testing notes and ZIP for release 2.7.0
# Testing notes and ZIP for release 2.7.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4747000/woocommerce-gutenberg-products-block.zip)
### Cart and Checkout styles
## Cart and Checkout styles
- Create pages with the Cart and Checkout blocks.
- Check the styles of both pages and verify:
- The Cart and Checkout headings match the styles inherited from the theme (#2597)
- In Checkout, step progress indicators match the heading style and they don't have a background circle (#2649).<br>
![Checkout heading styles](https://user-images.githubusercontent.com/3616980/84032118-1e327300-a997-11ea-8c06-363ac2bd78b3.png)
- In Checkout, the item quantity badges are visible with dark backgrounds (with Storefront, you can change the background color in Appearance > Customize > Background) (#2619).<br>
![Item quantity badges](https://user-images.githubusercontent.com/3616980/84031988-ed523e00-a996-11ea-8545-339111e31f5f.png)
- Try adding the code snippet from the [Cart and Checkout theming](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/theming/cart-and-checkout.md#item-quantity-badge) docs (you can do it via a child theme or directly in the browser devtools) and verify the item quantity badge styles update accordingly.
- In general, verify there were no regressions introduced after 2.6.0.
- The Cart block title should be `Your cart (X items)` (#2615).<br>
![Cart block title](https://user-images.githubusercontent.com/3616980/84032294-66ea2c00-a997-11ea-8d6d-929668cb702b.png)
- Introduce an invalid credit card number and verify there is enough padding around the validation errors (#2662).<br>
![Credit card validation errors](https://user-images.githubusercontent.com/3616980/84011799-f0d5cd00-a976-11ea-8cb2-a7e7ef38b0b0.png)
- In the editor, add the Cart block and verify the headings have the proper font size and there is margin between the `Proceed to Checkout` button and the credit card icons -- to get the icons, you need to install the Stripe payment gateway (#2486).
- Create pages with the Cart and Checkout blocks.
- Check the styles of both pages and verify:
- The Cart and Checkout headings match the styles inherited from the theme (#2597)
- In Checkout, step progress indicators match the heading style and they don't have a background circle (#2649).
![Checkout heading styles](https://user-images.githubusercontent.com/3616980/84032118-1e327300-a997-11ea-8c06-363ac2bd78b3.png)
- In Checkout, the item quantity badges are visible with dark backgrounds (with Storefront, you can change the background color in Appearance > Customize > Background) (#2619). \
![Item quantity badges](https://user-images.githubusercontent.com/3616980/84031988-ed523e00-a996-11ea-8545-339111e31f5f.png)
- Try adding the code snippet from the [Cart and Checkout theming](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/theming/cart-and-checkout.md#item-quantity-badge) docs (you can do it via a child theme or directly in the browser devtools) and verify the item quantity badge styles update accordingly.
- In general, verify there were no regressions introduced after 2.6.0.
- The Cart block title should be `Your cart (X items)` (#2615). \
![Cart block title](https://user-images.githubusercontent.com/3616980/84032294-66ea2c00-a997-11ea-8d6d-929668cb702b.png)
- Introduce an invalid credit card number and verify there is enough padding around the validation errors (#2662). \
![Credit card validation errors](https://user-images.githubusercontent.com/3616980/84011799-f0d5cd00-a976-11ea-8cb2-a7e7ef38b0b0.png)
- In the editor, add the Cart block and verify the headings have the proper font size and there is margin between the `Proceed to Checkout` button and the credit card icons -- to get the icons, you need to install the Stripe payment gateway (#2486).
| 2.6.0 | 2.7.0 |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ![Cart in editor in 2.6.0](https://user-images.githubusercontent.com/3616980/81926566-71a4e180-95e2-11ea-8c43-7a5064831e5b.png) | ![Cart in editor in 2.7.0](https://user-images.githubusercontent.com/3616980/81926959-24753f80-95e3-11ea-8cd4-6374ff3870ce.png) |
#### Specific themes
- [Hello theme](https://elementor.com/hello-theme/):
- Verify the text inside the selects is visible on hover (#2647).<br>
![Select in Hello theme](https://user-images.githubusercontent.com/3616980/84032650-f4c61700-a997-11ea-969d-6427d1e221bb.png)
- Twenty Twenty:
- Add the All Products block and the Hand-picked Products block in a page and verify (#2573):
- That with the All Products block you can add the On Sale badge and it's correctly aligned in the editor and the frontend (before, it was always shown on top of the image).<br>
![All Products in Twenty Twenty](https://user-images.githubusercontent.com/3616980/83013870-fef22800-a01d-11ea-8ea8-21229285d10a.png)
- The Hand-picked Products block discounted prices are not underlined.<br>
![Hand-picked Products in Twenty Twenty](https://user-images.githubusercontent.com/3616980/83013599-8e4b0b80-a01d-11ea-88ab-a1537110c4e2.png)
- Go to the Checkout block and verify font sizes look correct (they are inherited from the theme) (#2533).
### Specific themes
### Cart and Checkout error flow (#2655)
- [Hello theme](https://elementor.com/hello-theme/):
- Verify the text inside the selects is visible on hover (#2647). \
![Select in Hello theme](https://user-images.githubusercontent.com/3616980/84032650-f4c61700-a997-11ea-969d-6427d1e221bb.png)
- Twenty Twenty:
- Add the All Products block and the Hand-picked Products block in a page and verify (#2573): - That with the All Products block you can add the On Sale badge and it's correctly aligned in the editor and the frontend (before, it was always shown on top of the image). \
- ![All Products in Twenty Twenty](https://user-images.githubusercontent.com/3616980/83013870-fef22800-a01d-11ea-8ea8-21229285d10a.png)
- The Hand-picked Products block discounted prices are not underlined. \
![Hand-picked Products in Twenty Twenty](https://user-images.githubusercontent.com/3616980/83013599-8e4b0b80-a01d-11ea-88ab-a1537110c4e2.png) - Go to the Checkout block and verify font sizes look correct (they are inherited from the theme) (#2533).
#### Scenario One: initial report fixed
## Cart and Checkout error flow (#2655)
### Scenario One: initial report fixed
1. On Checkout introduce an invalid card number `4000 0000 0000 0002`.
2. Try to place the order and notice the error `The card was declined`.
3. Replace the credit card number with a valid one (`4242 4242 4242 4242`).
4. Try to place the order again and verify the process works.
#### Scenario Two: Trying to break via validation errors.
### Scenario Two: Trying to break via validation errors
You'll need to be logged in with a user that has saved payment methods.
@ -56,7 +53,7 @@ You'll need to be logged in with a user that has saved payment methods.
4. Fix the validation error
5. Submit again and checkout should complete using the selected saved payment method.
#### Scenario Three: Variation of trying to break via validation errors.
### Scenario Three: Variation of trying to break via validation errors
1. On checkout, select CC payment method.
2. Fill out cc number that will trigger declined card (`4000 0000 0000 0002`).
@ -66,44 +63,48 @@ You'll need to be logged in with a user that has saved payment methods.
6. Fix the field.
7. Submit the checkout and this should result in the purchase completing successfully.
#### Scenario Four: Payment with Cheque after failed CC.
### Scenario Four: Payment with Cheque after failed CC
1. On Checkout, select CC payment method.
2. Fill out cc number that will trigger declined card (`4000 0000 0000 0002`).
3. After server response (with error), select cheque payment method.
4. Submit the checkout and this should result in the purchase completing successfully for the cheque payment method.
### No shipping methods placeholder when they are all disabled (#2543)
_(Requires at least WooCommerce 4.3)_
## No shipping methods placeholder when they are all disabled (#2543)
> Requires at least WooCommerce 4.3
1. Disable all shipping methods from your store.
2. Edit a page with the _Checkout_ block and verify the 'no shipping methods' placeholder appears.
### Feature flags (#2591)
* Verify you can't add the Single Product block.
## Feature flags (#2591)
### Single Product page regression (#2648)
* Go to a product page.
* Verify you can see the product images as usual.<br>
![Single Product page](https://user-images.githubusercontent.com/3616980/84032892-4f5f7300-a998-11ea-9f2d-f2d0e57860c9.png)
- Verify you can't add the Single Product block.
#### Product grid inconsistencies (#2428)
- Update a product so it has a very small image (100px or less).
- Add the All Products block and a PHP-based product grids block (Hand-picked Products, for example) and verify:
- Both of them have the same styles for prices.
- Both of them scale up the small image.
_Hand-picked Products on top, All Products below:_<br>
![Product grid blocks by default](https://user-images.githubusercontent.com/3616980/83166453-3d1b4480-a10f-11ea-813f-2515b26dedac.png)
- Add the [code snippets](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/theming/product-grid-270.md#product-grid-blocks-style-update-in-270) from the theming docs to undo the changes and verify:
- Hand-picked Products block doesn't scale up the image anymore.
- All Products block shows discounted prices in two lines.
_Hand-picked Products on top, All Products below:_<br>
![Product grid blocks with the code snippets applied](https://user-images.githubusercontent.com/3616980/83164436-828a4280-a10c-11ea-81c1-b9a62cdf52b5.png)
## Single Product page regression (#2648)
- Go to a product page.
- Verify you can see the product images as usual. \
![Single Product page](https://user-images.githubusercontent.com/3616980/84032892-4f5f7300-a998-11ea-9f2d-f2d0e57860c9.png)
### Product grid inconsistencies (#2428)
- Update a product so it has a very small image (100px or less).
- Add the All Products block and a PHP-based product grids block (Hand-picked Products, for example) and verify: - Both of them have the same styles for prices. - Both of them scale up the small image.
_Hand-picked Products on top, All Products below:_ \
![Product grid blocks by default](https://user-images.githubusercontent.com/3616980/83166453-3d1b4480-a10f-11ea-813f-2515b26dedac.png)
- Add the [code snippets](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/theming/product-grid-270.md#product-grid-blocks-style-update-in-270) from the theming docs to undo the changes and verify: - Hand-picked Products block doesn't scale up the image anymore. - All Products block shows discounted prices in two lines.
_Hand-picked Products on top, All Products below:_ \
![Product grid blocks with the code snippets applied](https://user-images.githubusercontent.com/3616980/83164436-828a4280-a10c-11ea-81c1-b9a62cdf52b5.png)
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/270.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

13
plugins/woocommerce-blocks/docs/testing/releases/271.md
View File

@ -1,17 +1,15 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
## Testing notes and ZIP for release 2.7.1
# Testing notes and ZIP for release 2.7.1
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4785662/woocommerce-gutenberg-products-block.zip)
### All Products, Cart and Checkout in IE11
## All Products, Cart and Checkout in IE11
- With IE11, create a page with the All Products block.
- Verify you can add the block without problems in the editor.
- Visit the page in the frontend, and verify the block works as expected and no JS errors are shown in the devtools console.
- Repeat the process above with the Cart and Checkout blocks.
### PHP notices
## PHP notices
- Create a new product. For its type chose 'Variable Product', create one attribute and two variations. Leave both variations price to 0.
- Create a new page with the All Products, Filter by Price and Filter by Attributes blocks.
@ -19,11 +17,14 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
- Using the Filter by Attributes block, filter the products by a specific attribute, making sure the Variable Product you created gets visible at some point.
- Go to the PHP logs of your site and verify there isn't any PHP warning in the logs related to the steps described above.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/271.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

28
plugins/woocommerce-blocks/docs/testing/releases/272.md
View File

@ -1,6 +1,4 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
## Testing Notes and ZIP for testing
# Testing Notes and ZIP for testing
**Zip File for testing:**
[woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4932938/woocommerce-gutenberg-products-block.zip)
@ -11,38 +9,40 @@ This release impacts the logic around draft order cleanup.
Variations of tests:
## When distributed as a package in WooCommerce Core.
## When distributed as a package in WooCommerce Core
Expected behaviour here is:
* [ ] `woocommerce_cleanup_draft_orders` action should not appear in the scheduled tasks for Action Scheduler (Tools->Scheduled Actions).
- [ ] `woocommerce_cleanup_draft_orders` action should not appear in the scheduled tasks for Action Scheduler (Tools->Scheduled Actions).
These actions only appear when the feature flag is on for the install. If you are not testing the package inclusion in WooCommerce core, you can simulate this by adding a `blocks.ini` file to the same directory as where this plugin is activated and include in the file the following code:
```
```text
woocommerce_blocks_phase = 1
```
(remember to remove tha file after testing!)
## When distributed as the feature plugin.
## When distributed as the feature plugin
Expected behaviour is:
* [ ] `woocommerce_cleanup_draft_orders` action **should** appear in the scheduled tasks for Action Scheduler (Tools->Scheduled Actions).
* [ ] Create a draft order (on the frontend load the checkout block with products in the cart and do not complete the order).
* [ ] Trigger the scheduled action for `woocommerce_cleanup_draft_orders` and verify the just created draft order and none of the other orders on your test site have been deleted.
* [ ] Modify the draft order date so that it's greater than 24 hours in the past from now (you need to modify the `post_modifed_gmt` field)
* [ ] Trigger the scheduled action again, this time the draft order you modified (and only that draft order) should be deleted.
- [ ] `woocommerce_cleanup_draft_orders` action **should** appear in the scheduled tasks for Action Scheduler (Tools->Scheduled Actions).
- [ ] Create a draft order (on the frontend load the checkout block with products in the cart and do not complete the order).
- [ ] Trigger the scheduled action for `woocommerce_cleanup_draft_orders` and verify the just created draft order and none of the other orders on your test site have been deleted.
- [ ] Modify the draft order date so that it's greater than 24 hours in the past from now (you need to modify the `post_modifed_gmt` field)
- [ ] Trigger the scheduled action again, this time the draft order you modified (and only that draft order) should be deleted.
There are phpunit tests covering behaviour as well (including catching errors).
There are PHPUnit tests covering behaviour as well (including catching errors).
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/272.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

117
plugins/woocommerce-blocks/docs/testing/releases/280.md
View File

@ -1,92 +1,93 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
## Testing notes and ZIP for release 2.8.0
# Testing notes and ZIP for release 2.8.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4826924/woocommerce-gutenberg-products-block.zip)
### Cart & Checkout <!-- heading -->
## Cart & Checkout <!-- heading -->
#### Tax display in shipping methods <!-- heading -->
### Tax display in shipping methods <!-- heading -->
- [ ] Go to _WooCommerce_ > _Settings_ > _Tax_ > _Tax options_ and set _Display prices during cart and checkout_ to _Including tax_:
![imatge](https://user-images.githubusercontent.com/3616980/83771631-c5a36300-a682-11ea-9a42-dfa71a1e6641.png)
- [ ] Set a flat rate shipping method with cost 5:
![imatge](https://user-images.githubusercontent.com/3616980/83772266-7d387500-a683-11ea-8105-17e47ee68487.png)
- [ ] Set default tax rates to 10%:
![imatge](https://user-images.githubusercontent.com/3616980/83772343-90e3db80-a683-11ea-976e-e20b530e8707.png)
- [ ] Now, as a customer, add a product that needs shipping to your cart and visit the _Cart_ page (with the block).
- [ ] Go to the Checkout page and verify shipping method prices also appear with taxes [#2748](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2748).
- [ ] Go to _WooCommerce_ > _Settings_ > _Tax_ > _Tax options_ and set _Display prices during cart and checkout_ to _Including tax_:
![image](https://user-images.githubusercontent.com/3616980/83771631-c5a36300-a682-11ea-9a42-dfa71a1e6641.png)
- [ ] Set a flat rate shipping method with cost 5:
![image](https://user-images.githubusercontent.com/3616980/83772266-7d387500-a683-11ea-8105-17e47ee68487.png)
- [ ] Set default tax rates to 10%:
![image](https://user-images.githubusercontent.com/3616980/83772343-90e3db80-a683-11ea-976e-e20b530e8707.png)
- [ ] Now, as a customer, add a product that needs shipping to your cart and visit the _Cart_ page (with the block).
- [ ] Go to the Checkout page and verify shipping method prices also appear with taxes [#2748](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2748).
#### Accessibility <!-- heading -->
### Accessibility <!-- heading -->
- [ ] With a screen reader navigate the Cart block and verify when the Change address button is focused, it correctly announces whether it's expanded or not [#2603](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2603).
- [ ] With a screen reader navigate the Cart block and verify when the Change address button is focused, it correctly announces whether it's expanded or not [#2603](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2603).
#### Styling <!-- heading -->
### Styling <!-- heading -->
- [ ] Change to a theme with a background color different from white or in the customizer change Storefront's background color to another one.
- Visit the Checkout page and verify that <!-- heading -->
- [ ] The `Express checkout` title doesn't have a background color different from the rest of the page and has left and right padding (so it doesn't collide with the border).
- [ ] The `Express checkout` and `Order summary` titles are aligned.
- [ ] The `Express checkout` box border is 1px wide, like in the [new designs](https://user-images.githubusercontent.com/3616980/83534129-c0161380-a4f0-11ea-985f-851b40d2e92b.png).
- [ ] Change to a theme with a background color different from white or in the customizer change Storefront's background color to another one.
- Visit the Checkout page and verify that <!-- heading -->
- [ ] The `Express checkout` title doesn't have a background color different from the rest of the page and has left and right padding (so it doesn't collide with the border).
- [ ] The `Express checkout` and `Order summary` titles are aligned.
- [ ] The `Express checkout` box border is 1px wide, like in the [new designs](https://user-images.githubusercontent.com/3616980/83534129-c0161380-a4f0-11ea-985f-851b40d2e92b.png).
- [ ] Disable all shipping methods but one.
- [ ] Go to the Cart page and verify there is no double-border between the shipping method and the _Coupon Code_ panel (the border should be 1px instead of 2px as it was before).
- [ ] Disable all shipping methods but one.
- [ ] Go to the Cart page and verify there is no double-border between the shipping method and the _Coupon Code_ panel (the border should be 1px instead of 2px as it was before).
![imatge](https://user-images.githubusercontent.com/3616980/84389951-25f05280-abf7-11ea-90d5-27d182982e43.png)
![image](https://user-images.githubusercontent.com/3616980/84389951-25f05280-abf7-11ea-90d5-27d182982e43.png)
- [ ] Create a product with a long name.
- [ ] Go to the Checkout page and resize the window to trigger different sizes.
- [ ] Verify there is always spacing between the product name and the price in the _Order summary_ panel.
![imatge](https://user-images.githubusercontent.com/3616980/84388946-ad3cc680-abf5-11ea-94cf-2f4c30f5e40e.png)
- [ ] Create a product with a long name.
- [ ] Go to the Checkout page and resize the window to trigger different sizes.
- [ ] Verify there is always spacing between the product name and the price in the _Order summary_ panel.
![image](https://user-images.githubusercontent.com/3616980/84388946-ad3cc680-abf5-11ea-94cf-2f4c30f5e40e.png)
- [ ] Still in the Checkout page, verify the _Order summary_ panel doesn't have top and bottom borders.
- [ ] Still in the Checkout page, verify the _Order summary_ panel doesn't have top and bottom borders.
![imatge](https://user-images.githubusercontent.com/3616980/84389065-d2313980-abf5-11ea-9215-1356919d29ed.png)
![image](https://user-images.githubusercontent.com/3616980/84389065-d2313980-abf5-11ea-9215-1356919d29ed.png)
- [ ] Make sure you don't have any express payment method enabled.
- [ ] Go to the Checkout page.
- [ ] Verify the step 1 title and the sidebar title are aligned.
- [ ] Make sure you don't have any express payment method enabled.
- [ ] Go to the Checkout page.
- [ ] Verify the step 1 title and the sidebar title are aligned.
![imatge](https://user-images.githubusercontent.com/3616980/84397770-5dfb9380-abff-11ea-8ca4-12cd393cd8b1.png)
![image](https://user-images.githubusercontent.com/3616980/84397770-5dfb9380-abff-11ea-8ca4-12cd393cd8b1.png)
- [ ] Add the Checkout block to a page or post and, in the editor, verify there is no spacing between the product description and the product variations in the _Order summary_.
- [ ] Add the Checkout block to a page or post and, in the editor, verify there is no spacing between the product description and the product variations in the _Order summary_.
![imatge](https://user-images.githubusercontent.com/3616980/84389163-f2f98f00-abf5-11ea-9f77-63032fee21f6.png)
![image](https://user-images.githubusercontent.com/3616980/84389163-f2f98f00-abf5-11ea-9f77-63032fee21f6.png)
- [ ] Disable all shipping options from your store.
- [ ] Go to the Cart block.
- [ ] Verify there is margin below the 'no shipping options' notice.
- [ ] Disable all shipping options from your store.
- [ ] Go to the Cart block.
- [ ] Verify there is margin below the 'no shipping options' notice.
![imatge](https://user-images.githubusercontent.com/3616980/84391799-be87d200-abf9-11ea-9d50-dd6e8b11cf5b.png)
![image](https://user-images.githubusercontent.com/3616980/84391799-be87d200-abf9-11ea-9d50-dd6e8b11cf5b.png)
- [ ] With Storefront, go to Appearance > Customize and change the typography color.
- [ ] Verify the color is applied to the Cart and Checkout text and borders.
- [ ] Test other themes to verify there are no regressions.
- [ ] With Storefront, go to Appearance > Customize and change the typography color.
- [ ] Verify the color is applied to the Cart and Checkout text and borders.
- [ ] Test other themes to verify there are no regressions.
## Product Categories List <!-- heading -->
### Product Categories List <!-- heading -->
### Fix Product Categories List breaking when changing align attribute. <!-- heading -->
#### Fix Product Categories List breaking when changing align attribute. <!-- heading -->
- [ ] Add a Product Categories List block to a page.
- [ ] Switch to _Full Width_ align.
- [ ] Verify the block doesn't show an error.
- [ ] If you are using Storefront or another theme with sidebar, make sure the page has the _Full Width_ template.
- [ ] Open the page in the frontend and verify the Product Categories List block is aligned as a full width block.
- [ ] Add a Product Categories List block to a page.
- [ ] Switch to _Full Width_ align.
- [ ] Verify the block doesn't show an error.
- [ ] If you are using Storefront or another theme with sidebar, make sure the page has the _Full Width_ template.
- [ ] Open the page in the frontend and verify the Product Categories List block is aligned as a full width block.
## Miscellaneous <!-- heading -->
### Miscellaneous <!-- heading -->
- [ ] Go to Appearance > Customize > WooCommerce > Product images and change the cropping options.
- [ ] Test the Cart, Checkout and Review blocks (for Review blocks, you might need to change its attributes so it shows the product image instead of the customer image) and verify they show the cropped image.
- [ ] Edit an old All Products block and verify the block didn't invalidate.
- [ ] Edit it and select the Product image inner block. There, toggle the _Image sizing_ attribute.
- [ ] Verify when _Cropped_ is selected, the cropped image is displayed.
- [ ] Repeat the process with the Product block.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
- [ ] Go to Appearance > Customize > WooCommerce > Product images and change the cropping options.
- [ ] Test the Cart, Checkout and Review blocks (for Review blocks, you might need to change its attributes so it shows the product image instead of the customer image) and verify they show the cropped image.
- [ ] Edit an old All Products block and verify the block didn't invalidate.
- [ ] Edit it and select the Product image inner block. There, toggle the _Image sizing_ attribute.
- [ ] Verify when _Cropped_ is selected, the cropped image is displayed.
- [ ] Repeat the process with the Product block.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/280.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

12
plugins/woocommerce-blocks/docs/testing/releases/290.md
View File

@ -1,24 +1,26 @@
## Testing notes and ZIP for release 2.9.0
# Testing notes and ZIP for release 2.9.0
Zip file for testing: tbc
### Testing notes
## Testing notes
## Correctly sort translated state and country drop-down menus in Checkout block. #2779
In some languages, the `State` and `Country` drop-down menus in the checkout block were sorted incorrectly. They should now be alphabetically sorted in all circumstances.
1. Edit the `Checkout` page, remove the `[checkout]` shortcode, add the `Checkout` block, and save changes.
1. Edit the `Checkout` page, remove the `[checkout]` shortcode, add the `Checkout` block, and save changes.
1. Go to `Dashboard > Settings > General`, select `Català` from `Site Language`, click `Save Changes`.
1. Update language packs: `Dashboard > Updates > Download translation packs`.
1. View the front end of your site and add a product to the cart. Navigate to checkout page.
1. In checkout, select `Espanya` (Spain) from `País / Regió` (country) dropdown.
1. Click `Província` (state) dropdown and confirm that the menu items are alphabetically sorted.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/290.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

78
plugins/woocommerce-blocks/docs/testing/releases/300.md
View File

@ -1,21 +1,21 @@
## Testing notes and ZIP for release 3.0.0
# Testing notes and ZIP for release 3.0.0
Zip file: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4953535/woocommerce-gutenberg-products-block.zip)
**Note: the version showing up for the above file is 2.10.0-dev but it actually is the build for 3.0.0 (version bumps haven't happened yet).**
### Verify Single Product block is not available
## Verify Single Product block is not available
- Verify in this build that the Single Product block is not available
- Verify in this build that the Single Product block is not available
### When included as a package in Woo Core
## When included as a package in Woo Core
- Verify that the Cart and Checkout blocks are not available.
- Verify that the Single Product block is not available.
- Verify that the Cart and Checkout blocks are not available.
- Verify that the Single Product block is not available.
### Fix Credit Card Input font size in some themes.
## Fix Credit Card Input font size in some themes
#2668:
### #2668
1. Change your store theme to Twenty Twenty.
2. Go to the Checkout block and select the Credit Card payment method provided by Stripe.
@ -27,7 +27,6 @@ _Before:_
_After:_
![image](https://user-images.githubusercontent.com/3616980/87527780-e4871300-c68c-11ea-9549-92d59b1a544c.png)
1. Go to Stripe settings and check 'Inline Credit Card Form'.
2. Go back to the Checkout block and notice the card icon is not too small and the label doesn't overlap the card icon.
@ -37,8 +36,7 @@ _Before:_
_After:_
![image](https://user-images.githubusercontent.com/3616980/87528730-33817800-c68e-11ea-92ab-e82e9de58d0b.png)
#2867:
#2868:
### #2867 and #2868
1. Check the credit card inputs when in a wide viewport and verify 'Expiry Date' and 'CVV/CVC' input fields have the same width.
2. Make the viewport smaller and verify 'CVV/CVC' field gets smaller faster, since it will have fewer characters than 'Expiry Date'.
@ -52,18 +50,18 @@ _After:_
Bonus points for doing some testing with other themes, changing the default font size of your browser, etc.
### Cash on Delivery Payment method
## Cash on Delivery Payment method
1. Go to `WooCommerce > Settings > Payments` and configure `Cash on Delivery` payment gateway.
2. Set up cart & checkout pages with blocks.
3. Add stuff to cart, proceed to checkout.
4. Complete purchase with COD and confirm everything's working as expected.
2. COD has options so merchant can limit it to shippable products and / or specific shipping methods. Experiment with these settings and confirm that COD works correctly, and is only available when appropriate.
5. Confirm that all other payment gateways still work correctly.
5. COD has options so merchant can limit it to shippable products and / or specific shipping methods. Experiment with these settings and confirm that COD works correctly, and is only available when appropriate.
6. Confirm that all other payment gateways still work correctly.
Bonus points - set up more complicated shipping (multiple packages, different carriers) & orders and confirm that the correct payment methods are available dependent on selected shipping rate.
### Deregister core cart/checkout scripts and styles when rendering the blocks
## Deregister core cart/checkout scripts and styles when rendering the blocks
**Test Empty cart redirects to the Full cart when a product is added:**
@ -77,48 +75,49 @@ Note: It's not possible to test this flow with the All Products block because of
1. Do a purchase from start to end with the blocks and verify everything works and the confirmation page appears after payment.
1. Do a purchase with the shortcodes and verify there are no regressions: functionality should work as usual and styles should be loaded.
### Show products on backorder
## Show products on backorder
1. Edit a product and under Inventory set:
1.1 Manage stock? Checked.
1.2 Stock quantity: 0.
1.3 Allow backorders? Allow, but notify customer.
1.1 Manage stock? Checked.
1.2 Stock quantity: 0.
1.3 Allow backorders? Allow, but notify customer.
2. Update the product and go to the frontend of the store.
3. Add that product to the cart.
4. Go to the Cart page and verify the Cart block shows the product is on backorder.
5. Proceed to the Checkout page and verify the backorder notification appears in the sidebar.
6. Would be good to verify there are no style regressions with the 'low stock' and 'product sale' badges.
### Lazy Loading Atomic Components
## Lazy Loading Atomic Components
- Test the All Products block and verify that editing element blocks (the inner blocks that can be added/re-positioned for the rendered grid) on the backend and the behavior of those blocks on the frontend work as expected. The All Products block should work with existing filter blocks as well.
- Verify adding the All Products block to a new page works as expected with no errors.
- Verify loading a pre-existing page with the block from an earlier version of the blocks plugin works as expected.
- Test the All Products block and verify that editing element blocks (the inner blocks that can be added/re-positioned for the rendered grid) on the backend and the behavior of those blocks on the frontend work as expected. The All Products block should work with existing filter blocks as well.
- Verify adding the All Products block to a new page works as expected with no errors.
- Verify loading a pre-existing page with the block from an earlier version of the blocks plugin works as expected.
### Remove Dashicon classes
## Remove Dashicon classes
Testing means ensuring there are no visual regressions in the affected blocks:
1. Cart: verify coupon chip close icon looks as it did.
![image](https://user-images.githubusercontent.com/3616980/87140895-816b3a00-c2a2-11ea-95a8-4b2d13ff308e.png)
2. Attribute Filter: set Query Type: AND, Display Style: Dropdown. Then, select a value and check that the cross icon still shows up correct.
![image](https://user-images.githubusercontent.com/3616980/87140925-8cbe6580-c2a2-11ea-84da-24bd67923d0a.png)
### Unify Chip styles
1. Cart: verify coupon chip close icon looks as it did. \
![image](https://user-images.githubusercontent.com/3616980/87140895-816b3a00-c2a2-11ea-95a8-4b2d13ff308e.png)
2. Attribute Filter: set Query Type: AND, Display Style: Dropdown. Then, select a value and check that the cross icon still shows up correct. \
![image](https://user-images.githubusercontent.com/3616980/87140925-8cbe6580-c2a2-11ea-84da-24bd67923d0a.png)
## Unify Chip styles
0. Ideally, set your theme background to something different from white so you can verify inputs are still legible.
1. Create a page with the All Products block and the Filter Products by Attribute (set the attributes to Query Type: OR, Display Style: Dropdown) and Active Filters (Display Style: Chips).
2. Filter Products by Attribute:
2.1. Try adding new filters.
2.2. Verify chips have the correct styles.
2.3. Try removing them with the keyboard (backspace or <kbd>Del</kbd>).
2.4. Try removing them clicking on the chip name.
2.1. Try adding new filters.
2.2. Verify chips have the correct styles.
2.3. Try removing them with the keyboard (backspace or `Del`).
2.4. Try removing them clicking on the chip name.
3. Active Filters:
3.1 Verify chips have the correct styles.
3.1 Verify chips have the correct styles.
4. Catching regressions:
4.1. Verify there are no regression in the Filter Products by Attribute and the Active Filters blocks with other attribute combinations: verify everything is still working and there are no visual bugs.
4.2. Verify there are no regressions with the Chips in the Cart: try adding a coupon in the Cart or Checkout blocks and verify it still looks correct.
4.1. Verify there are no regression in the Filter Products by Attribute and the Active Filters blocks with other attribute combinations: verify everything is still working and there are no visual bugs.
4.2. Verify there are no regressions with the Chips in the Cart: try adding a coupon in the Cart or Checkout blocks and verify it still looks correct.
### Support bank transfer (BACS) payment method in checkout block
## Support bank transfer (BACS) payment method in checkout block
1. Visit `WooCommerce > Settings > Payments` and activate & configure bank transfer.
2. On front end, add stuff to cart and proceed to checkout.
@ -128,7 +127,7 @@ Confirm that bank details/instructions are displayed in appropriate places (chec
Confirm that other payment methods still work correctly.
### Don't load frontend scripts in the editor
## Don't load frontend scripts in the editor
1. Create a post with some JS-based blocks (_All Products_ block and filters blocks, for example).
2. Open your browser devtools and switch to the network tab. There, filter by files that contain the string `frontend` in their name.
@ -137,10 +136,11 @@ Confirm that other payment methods still work correctly.
5. With an WP version between 5.2.0 and 5.3.0 (ie: 5.2.5) and verify legacy scripts are still being enqueued.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/300.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

21
plugins/woocommerce-blocks/docs/testing/releases/310.md
View File

@ -1,10 +1,10 @@
## Testing notes and ZIP for release 3.1.0
# Testing notes and ZIP for release 3.1.0
Zip file: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4995326/woocommerce-gutenberg-products-block.zip)
### All Products
## All Products
#### Product summary inner block renders in the frontend
### Product summary inner block renders in the frontend
First, let's make sure at least one of the products has a summary:
@ -19,17 +19,17 @@ Now, let's make sure the bug is fixed:
1. Create a page and add the All Products block.
2. Click on the pencil icon on the block toolbar to edit it.
3. Below the image add an atomic block: the Product Summary.
4. Verify a text has appeared: <i>Fly your WordPress banner...</i>.
4. Verify a text has appeared: `Fly your WordPress banner...`.
5. Click on Done at the bottom of the block.
6. Click on Publish at the top right of the screen to publish the page.
7. Click on the View Post button to view the post in the frontend side of your store.
8. Verify the Product summary block is rendered for products which have it.
#### There are no regressions with other inner blocks
### There are no regressions with other inner blocks
There have been changes in the way All Products inner blocks are loaded, so it should be tested that other inner blocks, in addition to the Product summary block, work fine in the editor and the frontend.
### Styling regressions
## Styling regressions
This new release has a new system to generate the styles, so it would be great to test all blocks and verify there are no visual regressions or anything looking weird. The list of all blocks is:
@ -53,12 +53,12 @@ This new release has a new system to generate the styles, so it would be great t
- [ ] Filter Products by Attribute
- [ ] Active Product Filters
**Note: The below blocks only need tested for the feature plugin**
Note: The below blocks only need tested for the feature plugin
- [ ] Cart
- [ ] Checkout
### API regressions
## API regressions
We also made some changes to our API endpoints to make them work correctly with WordPress 5.5. We should make sure interacting with the following blocks doesn't show errors in the console or the PHP logs:
@ -70,16 +70,17 @@ We also made some changes to our API endpoints to make them work correctly with
- [ ] Filter Products by Attribute
- [ ] Active Product Filters
**Note: The below blocks only need tested for the feature plugin**
Note: The below blocks only need tested for the feature plugin
- [ ] Cart
- [ ] Checkout
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/310.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

157
plugins/woocommerce-blocks/docs/testing/releases/320.md
View File

@ -1,125 +1,124 @@
## Testing notes and ZIP for release 3.2.0
# Testing notes and ZIP for release 3.2.0
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
Zip file: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5090607/woocommerce-gutenberg-products-block.zip)
### Cart & Checkout <!-- heading -->
## Cart & Checkout <!-- heading -->
#### Order note <!-- heading -->
### Order note <!-- heading -->
- [ ] Go to the Checkout block and check the 'Add a note to your order' checkbox.
- [ ] Introduce some text in the text area that appeared.
- [ ] Place the order and go to the admin, WooCommerce > Orders and verify the order has the note under Customer provided note.
- [ ] Go to the Checkout block and check the 'Add a note to your order' checkbox.
- [ ] Introduce some text in the text area that appeared.
- [ ] Place the order and go to the admin, WooCommerce > Orders and verify the order has the note under Customer provided note.
#### Autocapitalize address form fields <!-- heading -->
### Autocapitalize address form fields <!-- heading -->
- [ ] Visit the Checkout page with a handheld device with Chrome for Android or iOS Safari.
- [ ] Navigate through the input fields in the address form.
- [ ] Verify when a field is focused, the keyboard shows capital letters by default according to the settings.
- [ ] Visit the Checkout page with a handheld device with Chrome for Android or iOS Safari.
- [ ] Navigate through the input fields in the address form.
- [ ] Verify when a field is focused, the keyboard shows capital letters by default according to the settings.
#### JS-Rendered blocks inside Empty Cart <!-- heading -->
### JS-Rendered blocks inside Empty Cart <!-- heading -->
- [ ] Add the Cart block and switch to the Empty Cart edit mode.
- [ ] Replace the Newest products block with the All Products block. Feel free to add other JS-rendered blocks like a filter or a Reviews block.
- [ ] View the page in the frontend.
- [ ] Verify all blocks render correctly when the cart is empty.
- [ ] Try adding a product to the cart (so it switches to the Full Cart view) and removing it (so it switches back to the Empty Cart view).
- [ ] Verify the blocks still render correctly.
- [ ] Add the Cart block and switch to the Empty Cart edit mode.
- [ ] Replace the Newest products block with the All Products block. Feel free to add other JS-rendered blocks like a filter or a Reviews block.
- [ ] View the page in the frontend.
- [ ] Verify all blocks render correctly when the cart is empty.
- [ ] Try adding a product to the cart (so it switches to the Full Cart view) and removing it (so it switches back to the Empty Cart view).
- [ ] Verify the blocks still render correctly.
#### Don't show sale badge if saving are negative <!-- heading -->
### Don't show sale badge if saving are negative <!-- heading -->
You will need Product Add-ons extension to test this. <!-- heading -->
You will need Product Add-ons extension to test this. <!-- heading -->
- [ ] Add a product with a priced add on.
- [ ] Add the product to your cart, with the add on enabled.
- [ ] See that the price is shown without a negative discount value.
- [ ] Add a product with a priced add on.
- [ ] Add the product to your cart, with the add on enabled.
- [ ] See that the price is shown without a negative discount value.
#### Respect payment gateways order set by merchant <!-- heading -->
### Respect payment gateways order set by merchant <!-- heading -->
- [ ] Set up a few different payment methods.
- [ ] Reorder your payment methods how you like in WooCommerce > Settings > Payments, then click Save changes to persist.
- [ ] On front end, add stuff to cart and proceed to checkout.
- [ ] Payment methods should display using the order you chose.
- [ ] Complete a few test purchases to confirm that payment methods are still working and there are no regressions in checkout.
- [ ] Also test payment methods that may be hidden based on checkout state, e.g. make COD only available with specific shipping methods.
- [ ] Set up a few different payment methods.
- [ ] Reorder your payment methods how you like in WooCommerce > Settings > Payments, then click Save changes to persist.
- [ ] On front end, add stuff to cart and proceed to checkout.
- [ ] Payment methods should display using the order you chose.
- [ ] Complete a few test purchases to confirm that payment methods are still working and there are no regressions in checkout.
- [ ] Also test payment methods that may be hidden based on checkout state, e.g. make COD only available with specific shipping methods.
#### Show Checkout block in Editor when 'guest checkout' is disabled <!-- heading -->
### Show Checkout block in Editor when 'guest checkout' is disabled <!-- heading -->
- [ ] Go to WooCommerce > Settings > Accounts & Privacy and uncheck Allow customers to place orders without an account.
- [ ] Edit a page with the Checkout block.
- [ ] Verify the whole Checkout block is rendered in the editor, instead of only showing the `You must be logged in to checkout. Click here to log in`. message.
- [ ] Go to WooCommerce > Settings > Accounts & Privacy and uncheck Allow customers to place orders without an account.
- [ ] Edit a page with the Checkout block.
- [ ] Verify the whole Checkout block is rendered in the editor, instead of only showing the `You must be logged in to checkout. Click here to log in`. message.
#### Remove generic payment methods icons <!-- heading -->
### Remove generic payment methods icons <!-- heading -->
- [ ] Set up Stripe CC (Stripe extension) and Cheque (core) payment methods.
- [ ] Set up a page with checkout block, add stuff to cart.
- [ ] View checkout and confirm payment method tabs render and function correctly without icons.
- [ ] Set up Stripe CC (Stripe extension) and Cheque (core) payment methods.
- [ ] Set up a page with checkout block, add stuff to cart.
- [ ] View checkout and confirm payment method tabs render and function correctly without icons.
#### Error focus styles for inputs and select <!-- heading -->
### Error focus styles for inputs and select <!-- heading -->
- [ ] Go to the Checkout block and press 'Place order` without filling any form detail.
- [ ] Tab through the input fields under 'Shipping address' and verify the outline that appears on focus is red in text inputs and selects.
- [ ] Repeat the steps above at least with Storefront and Twenty Twenty and with Firefox, Chrome and Safari.
- [ ] Go to the Checkout block and press 'Place order` without filling any form detail.
- [ ] Tab through the input fields under 'Shipping address' and verify the outline that appears on focus is red in text inputs and selects.
- [ ] Repeat the steps above at least with Storefront and Twenty Twenty and with Firefox, Chrome and Safari.
#### Hide saved payment methods if their gateway is disabled <!-- heading -->
### Hide saved payment methods if their gateway is disabled <!-- heading -->
- [ ] Set up checkout block, Stripe CC payment method, check Enable Payment via Saved Cards.
- [ ] Complete a purchase with Stripe test card and check the `Save payment information to my account for future purchases.` checkbox on checkout.
- [ ] Go to WooCommerce > Settings > Payments and disable Stripe CC payment method.
- [ ] Add new stuff to cart, proceed to checkout.
- [ ] Scroll down and verify saved card (e.g. Visa ending in 4242 (expires 02/22)) is not there.
- [ ] Set up checkout block, Stripe CC payment method, check Enable Payment via Saved Cards.
- [ ] Complete a purchase with Stripe test card and check the `Save payment information to my account for future purchases.` checkbox on checkout.
- [ ] Go to WooCommerce > Settings > Payments and disable Stripe CC payment method.
- [ ] Add new stuff to cart, proceed to checkout.
- [ ] Scroll down and verify saved card (e.g. Visa ending in 4242 (expires 02/22)) is not there.
#### Text overlap with errors and icons <!-- heading -->
### Text overlap with errors and icons <!-- heading -->
- [ ] activate and set up Stripe CC, disable Inline Credit Card Form option.
- [ ] Add stuff to cart and proceed to checkout.
- [ ] Select stripe credit card payment, don't enter any card details.
- [ ] Click Place Order.
- [ ] Error messages shouldn't overlap with credit card icons.
- [ ] activate and set up Stripe CC, disable Inline Credit Card Form option.
- [ ] Add stuff to cart and proceed to checkout.
- [ ] Select stripe credit card payment, don't enter any card details.
- [ ] Click Place Order.
- [ ] Error messages shouldn't overlap with credit card icons.
#### Dark mode support for fields and controls <!-- heading -->
### Dark mode support for fields and controls <!-- heading -->
- [ ] Test inputs, select, radio, checkbox, quantity selectors, and textarea of Cart and Checkout, they should have light colors and text should be readable.
- [ ] Switch the colors of your theme to a dark variation, you can do that in the customizer for storefront or dark mode for TwentyTwenty or TwentySeventeen.
- [ ] Switch the blocks to use dark colors in the blocks settings.
- [ ] Test inputs, select, radio, checkbox, quantity selectors, and textarea again, make sure nothing is broken and everything is visible.
- [ ] Test inputs, select, radio, checkbox, quantity selectors, and textarea of Cart and Checkout, they should have light colors and text should be readable.
- [ ] Switch the colors of your theme to a dark variation, you can do that in the customizer for storefront or dark mode for TwentyTwenty or TwentySeventeen.
- [ ] Switch the blocks to use dark colors in the blocks settings.
- [ ] Test inputs, select, radio, checkbox, quantity selectors, and textarea again, make sure nothing is broken and everything is visible.
#### Use real previews for Cart and Checkout <!-- heading -->
### Use real previews for Cart and Checkout <!-- heading -->
- [ ] Preview the cart and checkout blocks inside the block inserter.
- [ ] You should see the actual block, not a white placeholder.
- [ ] Make sure the block is not very long and overflowing.
- [ ] Make sure the changes didn't leak to the actual block or the editor block, the block should not be cut.
- [ ] Preview the cart and checkout blocks inside the block inserter.
- [ ] You should see the actual block, not a white placeholder.
- [ ] Make sure the block is not very long and overflowing.
- [ ] Make sure the changes didn't leak to the actual block or the editor block, the block should not be cut.
### All Products <!-- heading -->
## All Products <!-- heading -->
#### Broken link for "No Products" placeholder
### Broken link for "No Products" placeholder
- [ ] In a store with no products (move them to trash).
- [ ] Create a new page and add the All Products block.
- [ ] Click on the Add new product link and verify it works.
- [ ] In a store with no products (move them to trash).
- [ ] Create a new page and add the All Products block.
- [ ] Click on the Add new product link and verify it works.
#### PHP Error notices
### PHP Error notices
- [ ] Make sure you have WP_DEBUG set to true.
- [ ] Load a page that already contains a product data, so single product or All Products, either in the editor or frontend.
- [ ] Make sure no notices are printed to the page, you can check the source code or at the top of the page.
- [ ] Make sure you have WP_DEBUG set to true.
- [ ] Load a page that already contains a product data, so single product or All Products, either in the editor or frontend.
- [ ] Make sure no notices are printed to the page, you can check the source code or at the top of the page.
### Product Search <!-- heading -->
## Product Search <!-- heading -->
#### Updated styling in Editor
- [ ] In the editor, confirm that Product Search input has borders.
- [ ] the input should be functional.
### Updated styling in Editor
- [ ] In the editor, confirm that Product Search input has borders.
- [ ] the input should be functional.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/320.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

105
plugins/woocommerce-blocks/docs/testing/releases/330.md
View File

@ -1,80 +1,79 @@
## Testing notes and ZIP for release 3.3.0
# Testing notes and ZIP for release 3.3.0
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5159231/woocommerce-gutenberg-products-block.zip)
### Enhancements <!-- heading -->
## Enhancements <!-- heading -->
#### Cart block: Show express payment methods in the Cart block (for example: Apple Pay, Chrome Pay). <!-- heading -->
### Cart block: Show express payment methods in the Cart block (for example: Apple Pay, Chrome Pay). <!-- heading -->
- [ ] This feature requires the following:
- [WooCommerce Stripe extension](https://woocommerce.com/products/stripe) installed and active.
- One or more express payment methods supported and enabled on the store and client system (OS, browser). Note that Chrome Pay and Apple Pay are not supported in all regions. Please refer to documentation for Apple Pay and Chrome Pay for more information.
- [ ] Go to `Dashboard > WooCommerce > Settings > Payments` and activate `Stripe – Credit Card`.
- [ ] Click `Manage` button for `Stripe – Credit Card`.
- [ ] Ensure `Payment Request Buttons` checkbox is enabled, and click `Save changes`.
- [ ] Add the Cart block to a page and publish the page (for example, the main store `cart` page).
- [ ] In the editor, the Cart block should show a preview of express payment options (for example, Apple Pay button).
- [ ] View store front end in a browser with an express payment method enabled and configured. For example Chrome or Safari.
- [ ] Add some products to cart.
- [ ] View cart. If express payment is supported and available, you should see relevant express payment buttons above the cart `Proceed to checkout` button.
- Note: if you don't see any express payment options, confirm that they are working in the Checkout block, product page, or shortcode checkout page.
- The cart block should include the same express payment options as other store pages.
- [ ] This feature requires the following:
- [WooCommerce Stripe extension](https://woocommerce.com/products/stripe) installed and active.
- One or more express payment methods supported and enabled on the store and client system (OS, browser). Note that Chrome Pay and Apple Pay are not supported in all regions. Please refer to documentation for Apple Pay and Chrome Pay for more information.
- [ ] Go to `Dashboard > WooCommerce > Settings > Payments` and activate `Stripe – Credit Card`.
- [ ] Click `Manage` button for `Stripe – Credit Card`.
- [ ] Ensure `Payment Request Buttons` checkbox is enabled, and click `Save changes`.
- [ ] Add the Cart block to a page and publish the page (for example, the main store `cart` page).
- [ ] In the editor, the Cart block should show a preview of express payment options (for example, Apple Pay button).
- [ ] View store front end in a browser with an express payment method enabled and configured. For example Chrome or Safari.
- [ ] Add some products to cart.
- [ ] View cart. If express payment is supported and available, you should see relevant express payment buttons above the cart `Proceed to checkout` button.
- Note: if you don't see any express payment options, confirm that they are working in the Checkout block, product page, or shortcode checkout page.
- The cart block should include the same express payment options as other store pages.
### Enhancements (shipped in 3.1.0) <!-- heading -->
## Enhancements (shipped in 3.1.0) <!-- heading -->
The following enhancements shipped in WooCommerce Blocks 3.1.0 but were missed in the changelog. Including testing instructions here.
#### All Products block: Can now customize text size, color and alignment in Product Title child block. <!-- heading -->
### All Products block: Can now customize text size, color and alignment in Product Title child block. <!-- heading -->
- [ ] Add an all products block.
- [ ] Click the `Edit` (pencil icon) button to edit the layout of products within the grid.
- [ ] Select the product title block, or add it if needed.
- [ ] In the block toolbar, change the alignment option to center or right.
- [ ] In the block toolbar, select a different heading level.
- [ ] In the settings inspector, change the text size and colour options.
- [ ] Publish the page or update to save changes.
- [ ] Verify the product title shows as customized in editor and front end.
- [ ] Add an all products block.
- [ ] Click the `Edit` (pencil icon) button to edit the layout of products within the grid.
- [ ] Select the product title block, or add it if needed.
- [ ] In the block toolbar, change the alignment option to center or right.
- [ ] In the block toolbar, select a different heading level.
- [ ] In the settings inspector, change the text size and colour options.
- [ ] Publish the page or update to save changes.
- [ ] Verify the product title shows as customized in editor and front end.
#### All Products block: Can now customize text size, color and alignment in Product Price child block. <!-- heading -->
### All Products block: Can now customize text size, color and alignment in Product Price child block. <!-- heading -->
- [ ] Add an all products block.
- [ ] Click the `Edit` (pencil icon) button to edit the layout of products within the grid.
- [ ] Select the product price block, or add it if needed.
- [ ] In the block toolbar, change the alignment option to center or right.
- [ ] In the settings inspector, change the text size and colour options.
- [ ] Publish the page or update to save changes.
- [ ] Verify the product price shows as customized in editor and front end.
- [ ] Add an all products block.
- [ ] Click the `Edit` (pencil icon) button to edit the layout of products within the grid.
- [ ] Select the product price block, or add it if needed.
- [ ] In the block toolbar, change the alignment option to center or right.
- [ ] In the settings inspector, change the text size and colour options.
- [ ] Publish the page or update to save changes.
- [ ] Verify the product price shows as customized in editor and front end.
### Bug Fixes <!-- heading -->
## Bug Fixes <!-- heading -->
#### Cart block: Fix alignment of discounted prices. <!-- heading -->
### Cart block: Fix alignment of discounted prices. <!-- heading -->
- [ ] Add a product on sale to the Cart and visit the Cart block.
- [ ] Verify regular and discounted prices are both aligned to the right.
- [ ] Add a product on sale to the Cart and visit the Cart block.
- [ ] Verify regular and discounted prices are both aligned to the right.
#### Checkout block: Fix an issue with products sold individually (max of 1 per cart); the Checkout block now shows a notice if shopper attempts to add another instance of product via an add-to-cart link. <!-- heading -->
- Configure your store so the Checkout block is used on the checkout page.
- [ ] Set a `Sold individually` option on a product:
- Edit a product. Note down the product ID.
- Scroll down to `Product data` box, select `Inventory` tab.
- Enable `Sold individually` option, and click `Update` to save changes to the product.
- [ ] As a shopper on front end, add the product to your cart. You should have 1x of the product in your cart.
- [ ] Navigate to a url with add-to-cart URL param for the product ID, for example: `https://one.wordpress.test/checkout/?add-to-cart=19`. This will attempt to add a second item to the cart.
- Note: Replace `one.wordpress.test` with your test site URL and `19` with the ID of the product you modified.
- You can navigate to this URL directly - paste the url. OR you can add a button block linking to the url, simulating a "Buy" button on a landing page for the product.
- [ ] Proceed to checkout block and verify there is an error notice informing shopper why there is a single item in the cart.
- [ ] Ensure the checkout block works correctly and shopper can complete purchase.
### Checkout block: Fix an issue with products sold individually (max of 1 per cart); the Checkout block now shows a notice if shopper attempts to add another instance of product via an add-to-cart link. <!-- heading -->
- Configure your store so the Checkout block is used on the checkout page.
- [ ] Set a `Sold individually` option on a product:
- Edit a product. Note down the product ID.
- Scroll down to `Product data` box, select `Inventory` tab.
- Enable `Sold individually` option, and click `Update` to save changes to the product.
- [ ] As a shopper on front end, add the product to your cart. You should have 1x of the product in your cart.
- [ ] Navigate to a url with add-to-cart URL param for the product ID, for example: `https://one.wordpress.test/checkout/?add-to-cart=19`. This will attempt to add a second item to the cart.
- Note: Replace `one.wordpress.test` with your test site URL and `19` with the ID of the product you modified.
- You can navigate to this URL directly - paste the url. OR you can add a button block linking to the url, simulating a "Buy" button on a landing page for the product.
- [ ] Proceed to checkout block and verify there is an error notice informing shopper why there is a single item in the cart.
- [ ] Ensure the checkout block works correctly and shopper can complete purchase.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/330.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

51
plugins/woocommerce-blocks/docs/testing/releases/340.md
View File

@ -1,27 +1,27 @@
## Testing notes and ZIP for release 3.4.0
# Testing notes and ZIP for release 3.4.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5220435/woocommerce-gutenberg-products-block.zip)
## The following are changes that only impact Feature Plugin release.
## The following are changes that only impact Feature Plugin release
### Ensure shopper saved card is used as default payment method (default was being overwritten in some circumstances). ([3131](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3131))
- Set up checkout page using block.
- Enable BACS and Stripe payment methods (only, though may reproduce with other combinations). Note BACS needs to be earlier in the order than Stripe (drag handle in `WooCommerce > Settings > Payments`).
- Complete a purchase using a new payment method, Stripe CC, check `Save payment information to my account for future purchases`.
- Add something to cart, proceed to checkout.
- Leave the default selected payment method - i.e. the first saved payment method. Submit checkout.
- Set up checkout page using block.
- Enable BACS and Stripe payment methods (only, though may reproduce with other combinations). Note BACS needs to be earlier in the order than Stripe (drag handle in `WooCommerce > Settings > Payments`).
- Complete a purchase using a new payment method, Stripe CC, check `Save payment information to my account for future purchases`.
- Add something to cart, proceed to checkout.
- Leave the default selected payment method - i.e. the first saved payment method. Submit checkout.
Should always complete the purchase with the correct payment method - the one visibly selected when user clicks submit, i.e. the saved card.
Please also test a variety of other payment method scenarios and ordering - with / without saved cards (are there any other gateways that support saved payment methods?), with more/less gateways available, in different orders, and with dynamically-available gateways (COD can depend on shipping option). In all cases confirm the following:
- There is a payment method tab selected by default.
- Submitting checkout without touching payment section uses the correct payment method (i.e. saved card, payment method tab).
- Selecting a non-default saved card (from the default) works correctly, uses correct card/token (may need to check network requests to check token).
- Selecting a non-default payment method uses correct method.
- Saving a payment method (card) works and is available for use next checkout with that account.
- Payment tab order should match the configured order.
- There is a payment method tab selected by default.
- Submitting checkout without touching payment section uses the correct payment method (i.e. saved card, payment method tab).
- Selecting a non-default saved card (from the default) works correctly, uses correct card/token (may need to check network requests to check token).
- Selecting a non-default payment method uses correct method.
- Saving a payment method (card) works and is available for use next checkout with that account.
- Payment tab order should match the configured order.
### Fix Cart & Checkout sidebar layout broken in some themes. ([3111](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3111))
@ -34,14 +34,13 @@ _Before:_
_After:_
![image](https://user-images.githubusercontent.com/3616980/92132043-f2dcea00-ee06-11ea-895b-afda511e36f8.png)
### Use wp_login_url instead of hardcoding login path. ([3090](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3090))
1. In an incognito window and add some products and then go to Checkout.
2. See the login URL, it should take you to `wp-login.php?redirect_to=[CURRENT_URL]`
3. Enable checkout for users only from WooCommerce -> Settings -> Accounts -> uncheck `Allow customers to place orders without an account`.
4. Visit Checkout again, the link should do the same.
5. Install and activate https://wordpress.org/plugins/change-wp-admin-login/.
5. Install and activate <https://wordpress.org/plugins/change-wp-admin-login/>.
6. Visit Settings -> Permalinks and change the login URL to something else.
7. Do 1,2,3 and 4 again, confirm that your value is respected.
@ -56,7 +55,7 @@ _After:_
7. Delete what was selected to return the field to its initial state.
8. Visit checkout again, COD is still working.
- Fix JS console error when COD is enabled and no shipping method is available. ([3086](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3086))
- Fix JS console error when COD is enabled and no shipping method is available. ([3086](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3086))
1. Enable COD and limit it to a certain shipping method type.
2. Add that method to a certain address.
@ -66,32 +65,34 @@ _After:_
Smoke test the Checkout block:
* create a new page and add the Checkout block, change some attributes in the sidebar and verify changes take place
* verify the Checkout block works in the frontend: try changing your address, picking a different shipping and payment method, etc.
* verify you can make a purchase.
- create a new page and add the Checkout block, change some attributes in the sidebar and verify changes take place
- verify the Checkout block works in the frontend: try changing your address, picking a different shipping and payment method, etc.
- verify you can make a purchase.
## The following impacts testing for both feature plugin and when included in WooCommerce Core.
## The following impacts testing for both feature plugin and when included in WooCommerce Core
### Fix product reviews schema date fields to use new (WP 5.5) `date-time` format. ([3109](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3109))
- Add some reviews for products.
- Add an All Reviews block to post or page content.
- Verify the frontend rendering of the block shows the expected dates for the reviews.
- Add some reviews for products.
- Add an All Reviews block to post or page content.
- Verify the frontend rendering of the block shows the expected dates for the reviews.
### Merge ProductPrice atomic block and component. ([3065](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3065))
Testing this change basically means verifying there are no regressions:
1. (For feature plugin testing only) Load the Cart and Checkout blocks. **_Verify_** product prices (default prices and on sale prices) are still rendered correctly.<br><img src="https://user-images.githubusercontent.com/3616980/91466321-3d9eb500-e88f-11ea-9a69-554c149a4163.png" alt="" width="187" />
1. (For feature plugin testing only) Load the Cart and Checkout blocks. **_Verify_** product prices (default prices and on sale prices) are still rendered correctly. \
![image](https://user-images.githubusercontent.com/3616980/91466321-3d9eb500-e88f-11ea-9a69-554c149a4163.png)
2. Add the All Products block in a page. **_Verify_** there are no regressions with the Product Price block.
3. Repeat the verifications above using a small viewport browser.
4. Repeat the verifications above using with the [Seedlet theme](https://wordpress.org/themes/seedlet/).
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/340.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

90
plugins/woocommerce-blocks/docs/testing/releases/350.md
View File

@ -1,76 +1,76 @@
## Testing notes and ZIP for release 3.5.0
# Testing notes and ZIP for release 3.5.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5298708/woocommerce-gutenberg-products-block.zip)
## The following are changes that only impact Feature Plugin release.
## The following are changes that only impact Feature Plugin release
### Use light default background colour for country/state dropdowns in Cart and Checkout blocks
- Test light mode / default
- [ ] Add checkout block to a page. Disable Dark mode inputs option and publish.
- [ ] View checkout on front end and expand country or state input.
- [ ] Background/colours should be consistent - e.g. white background, black text.
- Test light mode / default
- [ ] Add checkout block to a page. Disable Dark mode inputs option and publish.
- [ ] View checkout on front end and expand country or state input.
- [ ] Background/colours should be consistent - e.g. white background, black text.
- Test dark mode
- [ ] Add checkout block to a page. Enable Dark mode inputs option and publish.
- [ ] View checkout on front end and expand country or state input.
- [ ] Background/colours should look reasonable; text should be white on black.
- Test dark mode
- [ ] Add checkout block to a page. Enable Dark mode inputs option and publish.
- [ ] View checkout on front end and expand country or state input.
- [ ] Background/colours should look reasonable; text should be white on black.
### Fix broken Express Payment Method use in the Checkout block for logged out or incognito users.
### Fix broken Express Payment Method use in the Checkout block for logged out or incognito users
- [ ] Make sure you are either logged out or using an incognito mode browser instance.
- [ ] Add a product to cart.
- [ ] Load the page with the checkout block.
- [ ] Click express payment (Chrome Pay if using Chrome, Apple Pay if using Safari).
- [ ] Choose account details in the express payment modal and submit. Verify that the checkout processes correctly.
- [ ] Make sure you are either logged out or using an incognito mode browser instance.
- [ ] Add a product to cart.
- [ ] Load the page with the checkout block.
- [ ] Click express payment (Chrome Pay if using Chrome, Apple Pay if using Safari).
- [ ] Choose account details in the express payment modal and submit. Verify that the checkout processes correctly.
### Use noticeContexts from useEmitResponse instead of hardcoded values
- [ ] Install & activate WooCommerce Stripe.
- [ ] Enable Stripe CC payment method - don't add an api key (or delete the option).
- [ ] Add checkout block to checkout page.
- [ ] On front end, add something to cart and proceed to checkout with an **admin user**.
- [ ] Verify an error appears in the express payment methods section and in the payment methods step.
- [ ] Install & activate WooCommerce Stripe.
- [ ] Enable Stripe CC payment method - don't add an api key (or delete the option).
- [ ] Add checkout block to checkout page.
- [ ] On front end, add something to cart and proceed to checkout with an **admin user**.
- [ ] Verify an error appears in the express payment methods section and in the payment methods step.
![checkout-errors](https://user-images.githubusercontent.com/3616980/93592030-b803b600-f9b1-11ea-976e-70c7b594f474.png)
### Fix State label for Spain
- [ ] Go to the Checkout block and change the country to Spain.
- [ ] Verify the field below the country changes its label to Province instead of State.
- [ ] Go to the Checkout block and change the country to Spain.
- [ ] Verify the field below the country changes its label to Province instead of State.
### Don't throw an error when registering a payment method fails
#### Confirm other payment methods are shown if Stripe is not configured.
- [ ] Install & activate WooCommerce Stripe.
- [ ] Enable Stripe CC payment method - don't add an api key (or delete the option).
- [ ] Enable BACS or other payment methods (e.g. cheque).
- [ ] Add checkout block to checkout page.
- [ ] On front end, add something to cart and proceed to checkout.
- [ ] Make sure you have an admin user with saved payment methods<sup>*</sup> and a user without saved payment methods (or a guest).
- [ ] With those two users, check the Checkout page in the frontend. Also open the Checkout page in the editor.
- [ ] Verify the statements below are true. 👇
#### Confirm other payment methods are shown if Stripe is not configured
| Scenario | With Stripe API key | Without Stripe API key |
| --- | --- | --- |
| Admin with saved payment methods / Editor | <ul><li>Saved payment methods are displayed.</li><li>Credit Card payment method is displayed (under use a new payment method).</li><li>There is no error notice.</li></ul> | <ul><li>Saved payment methods are not displayed.</li><li>There is an error notice about Stripe not being registered correctly.</li><li>Other payment methods are displayed as usual.</li></ul> |
| Guest user | <ul><li>Saved payment methods are not displayed.</li><li>Credit Card payment method is displayed.</li><li>There is no error notice.</li></ul> | <ul><li>Saved payment methods are not displayed.</li><li>Credit Card payment method is not displayed.</li><li>There is no error notice.</li><li>Other payment methods are displayed as usual.</li></ul> |
- [ ] Install & activate WooCommerce Stripe.
- [ ] Enable Stripe CC payment method - don't add an api key (or delete the option).
- [ ] Enable BACS or other payment methods (e.g. cheque).
- [ ] Add checkout block to checkout page.
- [ ] On front end, add something to cart and proceed to checkout.
- [ ] Make sure you have an admin user with saved payment methods and a user without saved payment methods (or a guest).
- [ ] With those two users, check the Checkout page in the frontend. Also open the Checkout page in the editor.
- [ ] Verify the statements below are true. 👇
<sup>*</sup> In order to save a payment method with a user. Enable the WooCommerce Stripe plugin, set the keys and make a purchase with a user selecting the `Save payment information to my account for future purchases.` option. Next time you visit the Checkout with that user, the saved payment method will show up.
| Scenario | With Stripe API key | Without Stripe API key |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Admin with saved payment methods / Editor | <ul><li>Saved payment methods are displayed.</li><li>Credit Card payment method is displayed (under use a new payment method).</li><li>There is no error notice.</li></ul> | <ul><li>Saved payment methods are not displayed.</li><li>There is an error notice about Stripe not being registered correctly.</li><li>Other payment methods are displayed as usual.</li></ul> |
| Guest user | <ul><li>Saved payment methods are not displayed.</li><li>Credit Card payment method is displayed.</li><li>There is no error notice.</li></ul> | <ul><li>Saved payment methods are not displayed.</li><li>Credit Card payment method is not displayed.</li><li>There is no error notice.</li><li>Other payment methods are displayed as usual.</li></ul> |
#### Stripe Saved credit cards are not available when the 'Enable Payment via Saved Cards' option is unchecked.
In order to save a payment method with a user. Enable the WooCommerce Stripe plugin, set the keys and make a purchase with a user selecting the `Save payment information to my account for future purchases.` option. Next time you visit the Checkout with that user, the saved payment method will show up.
- Assuming you already have a user with saved credit cards in Stripe from the steps above.
- [ ] Go to Stripe settings and uncheck `Enable Payment via Saved Cards`. Make sure you have added back the API keys that you might have removed in the steps above.
- [ ] Start a purchase with a user that has saved payment methods and go to the Checkout block.
- [ ] Verify saved credit cards are not shown in the Payment method options.
#### Stripe Saved credit cards are not available when the 'Enable Payment via Saved Cards' option is unchecked
- Assuming you already have a user with saved credit cards in Stripe from the steps above.
- [ ] Go to Stripe settings and uncheck `Enable Payment via Saved Cards`. Make sure you have added back the API keys that you might have removed in the steps above.
- [ ] Start a purchase with a user that has saved payment methods and go to the Checkout block.
- [ ] Verify saved credit cards are not shown in the Payment method options.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/350.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/testing/releases/360.md
View File

@ -4,7 +4,7 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
While testing the steps below, keep your browser devtools open (F12) and verify there no errors in the Console during the process ([3242](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3242)).
## The following are changes that only impact Feature Plugin release.
## The following are changes that only impact Feature Plugin release
### Don't load contents of payment method hidden tabs. ([3227](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3227)) / Refactor payment methods components ([3226](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3226))
@ -59,10 +59,11 @@ _After:_
![Screenshot with normal height select](https://user-images.githubusercontent.com/3616980/94667483-29772900-030f-11eb-8b82-1a792c693e2e.png)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/360.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

48
plugins/woocommerce-blocks/docs/testing/releases/370.md
View File

@ -1,8 +1,8 @@
## Testing notes and ZIP for release 3.7.0
# Testing notes and ZIP for release 3.7.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5220435/woocommerce-gutenberg-products-block.zip)
## The following changes affect the feature plugin only.
## The following changes affect the feature plugin only
### Allow shoppers to sign-up for an account from the Checkout block. ([3331](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3331))
@ -11,16 +11,16 @@ Merchants can now enable shoppers to sign up for a user account when completing
0. Ensure you can see emails from your test site (e.g. new customer account notification email).
1. Ensure your store is running WooCommerce 4.7 RC or newer.
1. Install and activate WooCommerce Blocks 3.7 or newer.
2. Ensure checkout page uses the checkout block – replace the checkout shortcode (if used). Ensure you have a valid payment method set up.
3. Log out of your store user account if necessary (or use an incognito window). Add something to cart and proceed to checkout block page.
3. Enter an email address and complete the form.
3. Check the `Create an account` checkbox.
2. Complete & submit checkout.
1. Ensure checkout page uses the checkout block – replace the checkout shortcode (if used). Ensure you have a valid payment method set up.
1. Log out of your store user account if necessary (or use an incognito window). Add something to cart and proceed to checkout block page.
1. Enter an email address and complete the form.
1. Check the `Create an account` checkbox.
1. Complete & submit checkout.
1. Find the `Your {store} account has been created!` email. Copy the `Click here to set your new password.` url.
- Link should look something like this: `http://localhost:8333/my-account/lost-password/?action=newaccount&key=6lye4PPX11pbjWPJozSR&login=bob`
4. In an incognito window, or after logging out, navigate to set password url.
6. Should see reset password form (2 password fields) with `Set password` title.
7. Reset the account password and confirm the customer account and password are all correct.
1. In an incognito window, or after logging out, navigate to set password url.
1. Should see reset password form (2 password fields) with `Set password` title.
1. Reset the account password and confirm the customer account and password are all correct.
See also [related testing instructions in WooCommerce Core](https://github.com/woocommerce/woocommerce/wiki/Release-Testing-Instructions-WooCommerce-4.7#improvements-to-my-account--lost-password-endpoint).
@ -33,26 +33,30 @@ See also [related testing instructions in WooCommerce Core](https://github.com/w
5. Verify only one error is displayed, inside the payment methods step.
6. Without modifying the payment number, click on `Place order` again and verify the authentication modal appears again and you can complete the order.
### Correctly process orders with $0 total (e.g. via coupon) in Checkout block. ([3298](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3298))
### Correctly process orders with \$0 total (e.g. via coupon) in Checkout block. ([3298](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3298))
1. Add a $0 product to your cart and checkout. Here are two ways to set up a $0 order:
- Configure a "100% off" coupon and use it.
- Set the price for product(s) to $0 (and only add those products to cart).
- Configure a "100% off" coupon and use it.
- Set the price for product(s) to \$0 (and only add those products to cart).
2. Complete payment and submit the order.
3. View order in back end.
3. In the same user/browser session as the first order, repeat another $0 order and submit.
3. View orders in back end and confirm both orders are present and correct.
4. In the same user/browser session as the first order, repeat another \$0 order and submit.
5. View orders in back end and confirm both orders are present and correct.
### Respect Enable Taxes setting for checkout block taxes display. ([3291](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3291))
1. Enable taxes and set up a tax rate.
2. Set these tax options:
- `Display prices in the shop: Excluding tax`
- `Display prices during cart and checkout: Including tax`
- `Display prices in the shop: Excluding tax`
- `Display prices during cart and checkout: Including tax`
3. Add items to the cart.
4. View the Checkout block. Tax component should be visible and show tax amount.
5. Disable taxes: `WooCommerce > Settings > General > Enable taxes: [unchecked]`.
6. View the Checkout block. Tax component should not be displayed, no taxes should be included in total. Note you may need to refresh the Checkout page if tax values are cached.
6. View the Checkout block. Tax component should not be displayed, no taxes should be included in total. Note you may need to refresh the Checkout page if tax values are cached.
### Improve layout of Cart block line item quantity selector & price on smaller screens. ([3299](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3299))
@ -61,12 +65,11 @@ See also [related testing instructions in WooCommerce Core](https://github.com/w
1. Reduce the viewport and check how the price behaves below 320px width.
1. View Cart block in various screen sizes and devices and ensure that line items look and function correctly.
## The following changes affect feature plugin and WooCommerce package.
## The following changes affect feature plugin and WooCommerce package
### Standardise & refactor colors scss to align with Gutenberg colors and WooCommerce brand. ([3300](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3300))
Test all blocks in editor/frontend and verify there are no evident issues with its display (layout completely broken or colors that are not correctly assigned). You can copy & paste [this gist](https://gist.github.com/Aljullu/d9c76ed510ae6973bd41dcc4184e8eb2) into the editor to automatically add all blocks. You might need to paste it with <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> so styles are removed and the editor can transform it into blocks.
Test all blocks in editor/frontend and verify there are no evident issues with its display (layout completely broken or colors that are not correctly assigned). You can copy & paste [this gist](https://gist.github.com/Aljullu/d9c76ed510ae6973bd41dcc4184e8eb2) into the editor to automatically add all blocks. You might need to paste it with `Ctrl + Shift + V` so styles are removed and the editor can transform it into blocks.
### Show current selected attributes when re-edit Products by Attribute block. ([3185](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3185))
@ -76,10 +79,11 @@ Test all blocks in editor/frontend and verify there are no evident issues with i
4. Confirm your existing attributes are selected by default.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/370.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

34
plugins/woocommerce-blocks/docs/testing/releases/371.md
View File

@ -1,6 +1,4 @@
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
## Testing notes and ZIP for release 3.7.1
# Testing notes and ZIP for release 3.7.1
> Note: These tests only apply to the feature plugin, nothing in this release impacts what is exposed in WooCommerce core via package.
@ -8,14 +6,15 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
All tests require:
- Checkout block published in woo checkout page.
- Items added to cart.
- Anon / incognito user session.
- Checkout block published in woo checkout page.
- Items added to cart.
- Anon / incognito user session.
## Test 1: Store API will only create an account if store options allow it
### Test 1: Store API will only create an account if store options allow it
1. Render checkout block with `Create an account?` checkbox. We're going to use a stale copy of the page to submit a checkout API request with `should_create_account=true`.
- Ensure `WooCommerce > Settings > Accounts & Privacy > Allow customers to create an account during checkout` is checked (temporarily enable).
- Edit checkout page, ensure `Allow shoppers to sign up for a user account during checkout` is enabled, publish.
- Ensure `WooCommerce > Settings > Accounts & Privacy > Allow customers to create an account during checkout` is checked (temporarily enable).
- Edit checkout page, ensure `Allow shoppers to sign up for a user account during checkout` is enabled, publish.
2. In another browser/window, view checkout page (with items in cart, as anon user/logged out). Should see `Create an account` checkbox.
3. Complete checkout form and check `Create an account`. **Do not submit** (yet).
4. As admin, disable `WooCommerce > Settings > Accounts & Privacy > Allow customers to create an account during checkout` and save settings.
@ -24,21 +23,26 @@ All tests require:
As an alternative to (1), could also hack the JS REST request to always send `should_create_account=true`, or use other approaches to call the API with that value set.
### Test 2: Checkout block will only offer to create an account if store options allow it
## Test 2: Checkout block will only offer to create an account if store options allow it
1. As admin, disable `WooCommerce > Settings > Accounts & Privacy > Allow customers to create an account during checkout` and save settings.
2. View checkout page and ensure there is no `Create an account` checkbox.
3. Repeat the above test with different block settings and ensure no checkbox is displayed unless store option is enabled. E.g. allow checkout signup in settings, enable block `Allow shoppers to sign up for a user account during checkout` setting, publish, change store setting and refresh page.
### Other possible tests
- Repeat similar tests with a custom plugin implementing `woocommerce_checkout_registration_enabled` hook to disable checkout signup.
- Test various combinations of store settings (e.g. guest checkout `Allow customers to place orders without an account`) and ensure that accounts are created when appropriate.
- Test with WooCommerce < v4.7 and ensure that checkout block sign-up feature is not available, and there is no way to sign up using checkout block.
## Other possible tests
- Repeat similar tests with a custom plugin implementing `woocommerce_checkout_registration_enabled` hook to disable checkout signup.
- Test various combinations of store settings (e.g. guest checkout `Allow customers to place orders without an account`) and ensure that accounts are created when appropriate.
- Test with WooCommerce < v4.7 and ensure that checkout block sign-up feature is not available, and there is no way to sign up using checkout block.
[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/371.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

9
plugins/woocommerce-blocks/docs/testing/releases/380.md
View File

@ -1,8 +1,8 @@
## Testing notes and ZIP for release 3.8.0
# Testing notes and ZIP for release 3.8.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5516903/woocommerce-gutenberg-products-block.zip)
## The following changes affect the feature plugin only.
## The following changes affect the feature plugin only
### Show the phone number field in the billing section when shipping is disabled in settings. ([3376](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3376))
@ -13,7 +13,7 @@ Moves the rendering of address fields to a single file so that PhoneNumber (new
2. With shipping disabled (you can delete all rates and zones to edit general settings), ensure phone number displays beneath the billing step.
3. In both scenarios the values should change and be saved correctly.
## The following changes affect feature plugin and WooCommerce package.
## The following changes affect feature plugin and WooCommerce package
### Change delimiter used for splitChunks from tilde to hyphens. ([3360](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3360))
@ -21,10 +21,11 @@ Moves the rendering of address fields to a single file so that PhoneNumber (new
1. Confirm -- usage in built files.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/380.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

159
plugins/woocommerce-blocks/docs/testing/releases/390.md
View File

@ -1,14 +1,14 @@
## Testing notes and ZIP for release 3.9.0
# Testing notes and ZIP for release 3.9.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5597018/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce core.
## Feature plugin and package inclusion in WooCommerce core
This release only has changes for Cart and Checkout blocks so there is nothing specific to test for other blocks.
## Feature plugin only
### Fix stuck "Proceed to Checkout" button in Safari.
### Fix stuck "Proceed to Checkout" button in Safari
Test in Safari to ensure issue is resolved, then test in another browser to ensure nothing else was broken with button behaviour.
@ -19,125 +19,126 @@ Test in Safari to ensure issue is resolved, then test in another browser to ensu
5. When on the checkout page, use the browser's back button to get back to the page with the cart block.
6. When back on the cart block page, ensure the "Proceed to checkout" link does not contain a spinner.
### Fix express payment methods processing not completed when Stripe payment method active.
### Fix express payment methods processing not completed when Stripe payment method active
Setup:
* Make sure your testing environment has Stripe setup for both CC and Express payment methods.
- Make sure your testing environment has Stripe setup for both CC and Express payment methods.
Testing:
* [ ] When checkout is loaded, make sure the Stripe CC payment method is the active payment method tab.
* [ ] Click express payment method button (Chrome Pay or Apple Pay) to initiate payment flow.
* [ ] Submit the express payment and ensure the checkout order is processed (resulting in a successful redirect to the Order complete page)
* [ ] Try setting up the scenario, and then instead of completing the express payment, try canceling the express payment and completing payment with CC.
* [ ] Try cancelling the express payment method and then triggering it again (after setting up the scenario again).
* [ ] Try all scenarios with a logged out and logged in user.
- [ ] When checkout is loaded, make sure the Stripe CC payment method is the active payment method tab.
- [ ] Click express payment method button (Chrome Pay or Apple Pay) to initiate payment flow.
- [ ] Submit the express payment and ensure the checkout order is processed (resulting in a successful redirect to the Order complete page)
- [ ] Try setting up the scenario, and then instead of completing the express payment, try canceling the express payment and completing payment with CC.
- [ ] Try cancelling the express payment method and then triggering it again (after setting up the scenario again).
- [ ] Try all scenarios with a logged out and logged in user.
### Refresh Express Payment methods after cancelling payment to prevent addresses remaining populated on repeat attempts.
### Refresh Express Payment methods after cancelling payment to prevent addresses remaining populated on repeat attempts
* [ ] Go to the cart page with items in your cart.
* [ ] Click on Pay Now (stripe Chrome pay). The PaymentRequest window is opened.
* [ ] In the PaymentRequest window, select a delivery address.
* [ ] Cancel the payment.
* [ ] Click the Pay Now button again.
* [ ] The delivery address area should not have an address selected. This is the fix.
- [ ] Go to the cart page with items in your cart.
- [ ] Click on Pay Now (stripe Chrome pay). The PaymentRequest window is opened.
- [ ] In the PaymentRequest window, select a delivery address.
- [ ] Cancel the payment.
- [ ] Click the Pay Now button again.
- [ ] The delivery address area should not have an address selected. This is the fix.
### Ensure "Add a note to your order" section is styled correctly when disabled.
### Ensure "Add a note to your order" section is styled correctly when disabled
* [ ] Add a product to your cart and go to a page with the checkout block
* [ ] Fill in the required form fields. Leave the "Add a note to your order" unticked.
* [ ] Submit the form
* [ ] Ensure the "Add a note to your order" section looks disabled
* [ ] Restart the checkout process and fill in all required form fields.
* [ ] Tick the box next to "Add a note to your order" and (optionally) fill in the textarea with something
* [ ] Submit the form again and ensure the entire "Add a note to your order" section is disabled (while the order is processing), including the textarea.
- [ ] Add a product to your cart and go to a page with the checkout block
- [ ] Fill in the required form fields. Leave the "Add a note to your order" unticked.
- [ ] Submit the form
- [ ] Ensure the "Add a note to your order" section looks disabled
- [ ] Restart the checkout process and fill in all required form fields.
- [ ] Tick the box next to "Add a note to your order" and (optionally) fill in the textarea with something
- [ ] Submit the form again and ensure the entire "Add a note to your order" section is disabled (while the order is processing), including the textarea.
### Prevent checkout step heading text overlapping actual heading on small viewports.
### Prevent checkout step heading text overlapping actual heading on small viewports
* [ ] Ensure the Allow customers to log into an existing account during checkout option is enabled in **WooCommerce -> Settings -> Accounts & Privacy**.
* [ ] Log out of the site and add a product to your cart.
* [ ] Go to a page with the checkout block on and reduce the viewport so far that the "Already have an account? Log in" text is about to overlap.
* [ ] Ensure the text drops to below the header and does not overlap with the section heading.
- [ ] Ensure the Allow customers to log into an existing account during checkout option is enabled in **WooCommerce -> Settings -> Accounts & Privacy**.
- [ ] Log out of the site and add a product to your cart.
- [ ] Go to a page with the checkout block on and reduce the viewport so far that the "Already have an account? Log in" text is about to overlap.
- [ ] Ensure the text drops to below the header and does not overlap with the section heading.
### Hide Stripe Express payment if transaction in cart is lower than .30
### Hide Stripe Express payment if transaction in cart is lower than 0.30
* [ ] Enable Stripe + Chrome Pay
* [ ] Add an item to the cart costing 0.10
* [ ] No express payment method is visible
* [ ] Increase quantity in cart to 3. Express payment method should then be shown.
* [ ] Reduce the quantity again. The payment method will disappear.
* [ ] Go to checkout with total in cart less than 0.30 and ensure Stripe express payment method does not show.
- [ ] Enable Stripe + Chrome Pay
- [ ] Add an item to the cart costing 0.10
- [ ] No express payment method is visible
- [ ] Increase quantity in cart to 3. Express payment method should then be shown.
- [ ] Reduce the quantity again. The payment method will disappear.
- [ ] Go to checkout with total in cart less than 0.30 and ensure Stripe express payment method does not show.
### Stop hidden products from being linked in cart and checkout blocks.
### Stop hidden products from being linked in cart and checkout blocks
* [ ] Create a page that contains the checkout and cart blocks.
* [ ] Find a product in the dashboard and set its catalogue visibility to hidden.
* [ ] Add that product to your cart (Note you will have to visit the url for the product directly in order to add it).
* [ ] Visit the page with the checkout and cart blocks and ensure the name of the hidden product does not link to the product page in the checkout sidebar and in the line items in the cart.
* [ ] Repeat steps 2-4 with the catalogue visibility set to "Search results only".
- [ ] Create a page that contains the checkout and cart blocks.
- [ ] Find a product in the dashboard and set its catalogue visibility to hidden.
- [ ] Add that product to your cart (Note you will have to visit the url for the product directly in order to add it).
- [ ] Visit the page with the checkout and cart blocks and ensure the name of the hidden product does not link to the product page in the checkout sidebar and in the line items in the cart.
- [ ] Repeat steps 2-4 with the catalogue visibility set to "Search results only".
### Fix orders not being placed when paying with an Express payment method from the Cart block.
### Fix orders not being placed when paying with an Express payment method from the Cart block
In a device compatible with express payment methods and a site with Stripe payment gateway enabled:
* [ ] Verify Apple Pay or Google Pay buttons appear in the Cart block and clicking on them triggers the payment process.
* [ ] Proceed with the payment and verify you are redirected to the success screen and the order appears in the admin (WooCommerce > Orders).
* [ ] Verify express payment methods from the Checkout block are not broken.
* [ ] Verify regular payment methods are not broken either.
- [ ] Verify Apple Pay or Google Pay buttons appear in the Cart block and clicking on them triggers the payment process.
- [ ] Proceed with the payment and verify you are redirected to the success screen and the order appears in the admin (WooCommerce > Orders).
- [ ] Verify express payment methods from the Checkout block are not broken.
- [ ] Verify regular payment methods are not broken either.
### Cart and checkout should respect the global "Hide shipping costs until an address is entered" setting.
### Cart and checkout should respect the global "Hide shipping costs until an address is entered" setting
* [ ] Before running this PR, in **Settings > Shipping > Shipping Options**, turn on the option to require an address
* [ ] Setup a single shipping rate
* [ ] The messaging in cart and checkout states that shipping will be shown after providing an address.
* [ ] After entering your address, rates are then displayed and the total cost is not 0
* [ ] The "Hide shipping costs until an address is entered" block level option is no longer displayed when editing the block.
- [ ] Before running this PR, in **Settings > Shipping > Shipping Options**, turn on the option to require an address
- [ ] Setup a single shipping rate
- [ ] The messaging in cart and checkout states that shipping will be shown after providing an address.
- [ ] After entering your address, rates are then displayed and the total cost is not 0
- [ ] The "Hide shipping costs until an address is entered" block level option is no longer displayed when editing the block.
### Exclude checkout-draft orders from WC Admin reports and My Account > Orders
* [ ] Make sure your store has at least one completed order and one draft order. You can achieve that adding some products to the cart and navigating to the Cart and Checkout blocks but without completing the order.
* [ ] Go to Analytics > Settings and verify there isn't a Custom statuses section or, if it exists, make sure none of the statuses is named Draft.
* [ ] Go to the bottom of the page and click on Delete Previously Imported Data.
* [ ] Wait until the process finishes and then import all data again.
* [ ] Go to Analytics > Orders.
* [ ] Verify the 'draft' order is not counted in the totals.
* [ ] In the frontend, go to My Account > Orders with the user that made the draft order.
* [ ] Verify the draft order is not listed there.
- [ ] Make sure your store has at least one completed order and one draft order. You can achieve that adding some products to the cart and navigating to the Cart and Checkout blocks but without completing the order.
- [ ] Go to Analytics > Settings and verify there isn't a Custom statuses section or, if it exists, make sure none of the statuses is named Draft.
- [ ] Go to the bottom of the page and click on Delete Previously Imported Data.
- [ ] Wait until the process finishes and then import all data again.
- [ ] Go to Analytics > Orders.
- [ ] Verify the 'draft' order is not counted in the totals.
- [ ] In the frontend, go to My Account > Orders with the user that made the draft order.
- [ ] Verify the draft order is not listed there.
### Sync shipping address with billing address when shipping address fields are disabled.
### Sync shipping address with billing address when shipping address fields are disabled
#### Case 1
* [ ] Create 2 tax rates; one for UK and one for US
* [ ] Delete all shipping methods and rates so shipping is disabled and no fields are shown during checkout
* [ ] Go to checkout. Enter a UK address. See the tax rate.
* [ ] Change country field. See the tax rates update after the API request completes.
* [ ] Place order. Check the order has the same shipping and billing address saved.
- [ ] Create 2 tax rates; one for UK and one for US
- [ ] Delete all shipping methods and rates so shipping is disabled and no fields are shown during checkout
- [ ] Go to checkout. Enter a UK address. See the tax rate.
- [ ] Change country field. See the tax rates update after the API request completes.
- [ ] Place order. Check the order has the same shipping and billing address saved.
#### Case 2
* [ ] In general settings, in the option for where you ship to, select 'disable shipping calculations'
* [ ] Go to checkout. Enter a UK address. See the tax rate.
* [ ] Change country field. See the tax rates update after the API request completes.
* [ ] Place order. Check the order has the same shipping and billing address saved.
- [ ] In general settings, in the option for where you ship to, select 'disable shipping calculations'
- [ ] Go to checkout. Enter a UK address. See the tax rate.
- [ ] Change country field. See the tax rates update after the API request completes.
- [ ] Place order. Check the order has the same shipping and billing address saved.
#### Case 3
* [ ] In tax settings, choose to base taxes on the billing address.
* [ ] Go to checkout. Enter a different billing and shipping address.
* [ ] Toggle the "ship to billing" checkbox and see if the rate changes after doing so reliably.
* [ ] In all cases you should see a network request to update-customer a short while after entering any billing or shipping data, or toggling the 'use shipping address' checkbox on checkout.
- [ ] In tax settings, choose to base taxes on the billing address.
- [ ] Go to checkout. Enter a different billing and shipping address.
- [ ] Toggle the "ship to billing" checkbox and see if the rate changes after doing so reliably.
- [ ] In all cases you should see a network request to update-customer a short while after entering any billing or shipping data, or toggling the 'use shipping address' checkbox on checkout.
### Move feature flag PHP logic to a service class
* [ ] Verify Product Element blocks (i.e. `Product Price`) are not available in the feature plugin from the block picker (it is expected that some product element blocks are available when editing the template view for the All Products block).
- [ ] Verify Product Element blocks (i.e. `Product Price`) are not available in the feature plugin from the block picker (it is expected that some product element blocks are available when editing the template view for the All Products block).
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/390.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

71
plugins/woocommerce-blocks/docs/testing/releases/400.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.0.0
# Testing notes and ZIP for release 4.0.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5654619/woocommerce-gutenberg-products-block.zip)
@ -8,14 +8,14 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
Setup:
* Create a Products Block, Filter by Price Block, and Checkout Block.
- Create a Products Block, Filter by Price Block, and Checkout Block.
Testing:
- [ ] With IE11, check that there are no visual regressions in the Filter products by price block.
- [ ] With IE11, check that there are no visual regressions in the checkboxes of the Checkout block.
- [ ] With IE11, check that there are no visual regressions in the Filter products by price block.
- [ ] With IE11, check that there are no visual regressions in the checkboxes of the Checkout block.
See screenshots in https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3473.
See screenshots in <https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3473>.
## Feature plugin only
@ -23,68 +23,68 @@ See screenshots in https://github.com/woocommerce/woocommerce-gutenberg-products
Setup:
* Install and activate Twenty Twenty One.
* Go to Customize > Colors & Dark mode and check the Dark mode support checkbox.
* In the frontend, make sure the dark mode is enabled and go to a page with the Checkout block.
- Install and activate Twenty Twenty One.
- Go to Customize > Colors & Dark mode and check the Dark mode support checkbox.
- In the frontend, make sure the dark mode is enabled and go to a page with the Checkout block.
Testing:
* [ ] Try submitting the form leaving one of the required inputs empty so the error notice appears.
* [ ] Verify the close button is visible.
- [ ] Try submitting the form leaving one of the required inputs empty so the error notice appears.
- [ ] Verify the close button is visible.
### Ensure correct alignment of checkout notice's dismiss button
Setup:
* Enable Storefront theme
* Add an item to the cart and go to the checkout block
- Enable Storefront theme
- Add an item to the cart and go to the checkout block
Testing:
* [ ] Leave a required field on the checkout form blank and attempt checkout
* [ ] Ensure the error notice's dismiss button is aligned to the right
- [ ] Leave a required field on the checkout form blank and attempt checkout
- [ ] Ensure the error notice's dismiss button is aligned to the right
See screenshot in https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3455.
See screenshot in <https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3455>.
### Fix notices in console on Checkout (Update @wordpress/components to v. 11.1.1 and @wordpress/base-styles to v. 3.2.0)
Setup:
* Add the checkout block to a page.
* Add an item to your cart, and go to checkout.
- Add the checkout block to a page.
- Add an item to your cart, and go to checkout.
Testing:
* [ ] Change the value of the Country/Region select.
* [ ] Verify no errors appear in the browser console.
- [ ] Change the value of the Country/Region select.
- [ ] Verify no errors appear in the browser console.
### Checkout block: Fixes around account creation and coupon validation
Setup:
* Create a coupon with a usage requirement of a specific email address.
* Enable registration during checkout.
* Add the checkout block to a page.
* Add an item to your cart, apply the coupon, and go to checkout.
- Create a coupon with a usage requirement of a specific email address.
- Enable registration during checkout.
- Add the checkout block to a page.
- Add an item to your cart, apply the coupon, and go to checkout.
Testing:
* [ ] Fill out the checkout form, and indicate that you would like to create an account. Use an email address different to the coupon restriction. Submit the form.
* [ ] Confirm a coupon error appears, and the create account signup box is hidden.
* [ ] Submit the form again. Order should go through without error.
- [ ] Fill out the checkout form, and indicate that you would like to create an account. Use an email address different to the coupon restriction. Submit the form.
- [ ] Confirm a coupon error appears, and the create account signup box is hidden.
- [ ] Submit the form again. Order should go through without error.
### Remove held stock for a draft order if an item is removed from the cart
Setup:
* Setup a stock managed item with 1 in stock
* Add that 1 item to the cart
* Go to checkout
* Go back to the cart and remove the item from your cart
- Setup a stock managed item with 1 in stock
- Add that 1 item to the cart
- Go to checkout
- Go back to the cart and remove the item from your cart
Testing:
* [ ] From another device or in another browser, add the same item to the cart. No stock errors should be shown.
- [ ] From another device or in another browser, add the same item to the cart. No stock errors should be shown.
### Make sure cart is initialized before the CartItems route is used in the Store API
@ -94,22 +94,23 @@ You need to use the StoreAPI. Add an item to your cart via the API (replacing th
POST `https://yourstore.test/wp-json/wc/store/cart/add-item`
```
```text
{
"id": 163,
"quantity":1
}
```
Testing:
Testing:
* [ ] GET the following endpoint: `https://yourstore.test/wp-json/wc/store/cart/items`. There should be a valid response with response code 200.
- [ ] GET the following endpoint: `https://yourstore.test/wp-json/wc/store/cart/items`. There should be a valid response with response code 200.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/400.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

164
plugins/woocommerce-blocks/docs/testing/releases/410.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.1.0
# Testing notes and ZIP for release 4.1.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5739460/woocommerce-gutenberg-products-block.zip)
@ -6,138 +6,143 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
### Update minimum required WP version to 5.4
- [ ] Open the inserter when creating/editing a post or page and verify All Products, Price Filter, Attribute Filter, Active Filters, Checkout and Cart blocks are available.
- [ ] Open the inserter when creating/editing a post or page and verify All Products, Price Filter, Attribute Filter, Active Filters, Checkout and Cart blocks are available.
### Update usage of legacy packages (inc. ServerSideRender)
- [ ] check that SSR blocks still function in the editor and frontend. And example of an SSR block is Products by Tag.
- [ ] check that SSR blocks still function in the editor and frontend. And example of an SSR block is Products by Tag.
### add fallback screen reader styles
- [ ] In your theme, remove the `.screen-reader-text` styles.
- [ ] Add checkout block to a page and stuff to cart.
- [ ] View checkout on front end - confirm .screen-reader-text is hidden by default and is helpful when using a screen reader.
- [ ] Revert the style changes to ensure these styles don't conflict or cause issues.
- [ ] In your theme, remove the `.screen-reader-text` styles.
- [ ] Add checkout block to a page and stuff to cart.
- [ ] View checkout on front end - confirm .screen-reader-text is hidden by default and is helpful when using a screen reader.
- [ ] Revert the style changes to ensure these styles don't conflict or cause issues.
### Hide elements that use 'hidden' attribute
- [ ] Install Artisan theme.
- [ ] Go to the Cart or Checkout blocks and verify you can expand/contract the Coupon Code panel.
- [ ] Install Artisan theme.
- [ ] Go to the Cart or Checkout blocks and verify you can expand/contract the Coupon Code panel.
## Compatibility with WordPress 5.6 (both feature plugin and what is included with package inclusion in core)
### Replace IconButton component with Button
- [ ] Add the Featured Product to a post or page.
- [ ] Choose a product and select the block.
- [ ] Verify the Edit media button looks good and ensure there isn't any JS message in the console with a deprecation message for the IconButton component.
image.
- [ ] Add the Featured Product to a post or page.
- [ ] Choose a product and select the block.
- [ ] Verify the Edit media button looks good and ensure there isn't any JS message in the console with a deprecation message for the IconButton component.
image.
![image](https://user-images.githubusercontent.com/3616980/102064675-e7cb2a00-3df7-11eb-82b9-af170671cb43.png)
- [ ] Repeat steps 1-3 with Featured Category block.
- [ ] Add the All Products block to a page.
- [ ] Click the edit button (pencil icon) and verify the Reset Layout button looks good and there aren't JS errors in the console.
- [ ] Add the All Products block to a page (or use the one you just added in the steps above).
- [ ] Click the edit button (pencil icon) and verify the layout looks like in the screenshot on the right.
| Before | After |
| --- | --- |
| ![image](https://user-images.githubusercontent.com/3616980/102066515-35489680-3dfa-11eb-972d-420d9eeeb3f0.png) | ![imatge](https://user-images.githubusercontent.com/3616980/102065872-5fe61f80-3df9-11eb-9958-94f16c901932.png) |
- [ ] Repeat steps 1-3 with Featured Category block.
- [ ] Add the All Products block to a page.
- [ ] Click the edit button (pencil icon) and verify the Reset Layout button looks good and there aren't JS errors in the console.
- [ ] Add the All Products block to a page (or use the one you just added in the steps above).
- [ ] Click the edit button (pencil icon) and verify the layout looks like in the screenshot on the right.
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/3616980/102066515-35489680-3dfa-11eb-972d-420d9eeeb3f0.png) | ![image](https://user-images.githubusercontent.com/3616980/102065872-5fe61f80-3df9-11eb-9958-94f16c901932.png) |
### Fix isDefault on Buttons and switch Toolbar with ToolbarGroup
Smoke test the following blocks
- [ ] any atomic block settings.
- [ ] attributes filter
- [ ] featured category
- [ ] featured product
- [ ] handpicked products
- [ ] product category
- [ ] product tag
- [ ] products by attribute
- [ ] all products
- [ ] all reviews
- [ ] single product
- [ ] any atomic block settings.
- [ ] attributes filter
- [ ] featured category
- [ ] featured product
- [ ] handpicked products
- [ ] product category
- [ ] product tag
- [ ] products by attribute
- [ ] all products
- [ ] all reviews
- [ ] single product
### Fix direct call to setAttribute in EditProductSearch body
- [ ] Insert Product Search, there should be no console errors.
- [ ] Save the page and reload, the block should render fine.
- [ ] Checkout the page code, the formId attribute should be set.
- [ ] Insert Product Search, there should be no console errors.
- [ ] Save the page and reload, the block should render fine.
- [ ] Checkout the page code, the formId attribute should be set.
### Fix product list images skewed in Widgets editor
- [ ] Install latest Gutenberg version and go to Apperance > Widgets.
- [ ] Add a Top Rated Products block into one of the widget areas and verify images have the correct aspect ratio.
- [ ] Install latest Gutenberg version and go to Apperance > Widgets.
- [ ] Add a Top Rated Products block into one of the widget areas and verify images have the correct aspect ratio.
### Fix select inputs when dark mode is enabled in Twenty Twenty-One
- [ ] Install and activate Twenty Twenty One.
- [ ] Go to Customize > Colors & Dark mode and check the Dark mode support checkbox.
- [ ] Add a checkout block to a page, ensure items are in your basket.
- [ ] Visit the page, enable dark mode (bottom right of screen), and open the country dropdown.
- [ ] Ensure text is readable.
- [ ] Change checkout block settings to enable dark mode inputs.
- [ ] Check again and ensure the colour of the text has changed to white on black and that it is is still readable.
- [ ] Install and activate Twenty Twenty One.
- [ ] Go to Customize > Colors & Dark mode and check the Dark mode support checkbox.
- [ ] Add a checkout block to a page, ensure items are in your basket.
- [ ] Visit the page, enable dark mode (bottom right of screen), and open the country dropdown.
- [ ] Ensure text is readable.
- [ ] Change checkout block settings to enable dark mode inputs.
- [ ] Check again and ensure the colour of the text has changed to white on black and that it is is still readable.
## Feature plugin only
### Fix Fees not visible in Cart & Checkout blocks when order doesn't need shipping
- [ ] Add this PHP code snippet to any PHP file (for example, woocommerce-gutenberg-products-block.php):
- [ ] Add this PHP code snippet to any PHP file (for example, woocommerce-gutenberg-products-block.php):
```php
add_action( 'woocommerce_cart_calculate_fees', 'add_fee', 10 );
function add_fee( $cart ) {
$cart->add_fee( __( 'Fee', 'woo-gutenberg-products-block' ), 100, true );
}
```
- [ ] Add a product that doesn't need shipping to your cart and go to the Cart and Checkout blocks.
- [ ] Verify 'Fees' is listed in the sidebar.
- [ ] Add a product that doesn't need shipping to your cart and go to the Cart and Checkout blocks.
- [ ] Verify 'Fees' is listed in the sidebar.
### Fix Address Validation in the Store API and client
White space:
For the white space issue, it's easier to test without this PR first to see what happened, and then test it worked.
- [ ] Add something to the cart.
- [ ] Go to checkout.
- [ ] Enter a space character in the postcode field.
- [ ] See if it validates or not. Before this PR it does not—it allows checkout submission.
- [ ] Add something to the cart.
- [ ] Go to checkout.
- [ ] Enter a space character in the postcode field.
- [ ] See if it validates or not. Before this PR it does not—it allows checkout submission.
Validation via API
For validation, best to post to the API.
First add something to the cart via the API:
```
```sh
POST https://one.wordpress.test/wp-json/wc/store/cart/add-item
```
Body:
```json
{
"id": 32,
"quantity":1
"quantity": 1
}
```
```
```sh
POST https://one.wordpress.test/wp-json/wc/store/checkout
```
Body:
```json
{
"payment_method": "bacs",
"billing_address": {
"first_name": "Mike",
"first_name": "Mike",
"last_name": "Jolley",
"address_1": "Test Address",
"city": "Test City",
"country":"US",
"state":"AL",
"postcode":"90210",
"country": "US",
"state": "AL",
"postcode": "90210",
"email": "test@test.com"
},
"shipping_address": {
@ -145,44 +150,45 @@ Body:
"last_name": "Jolley",
"address_1": "Test Address",
"city": "Test City",
"country":"US",
"state":"AL",
"postcode":"90210"
"country": "US",
"state": "AL",
"postcode": "90210"
}
}
```
- [ ] Leave out certain values to see validation errors. e.g. use an invalid email address, remove the state, enter an invalid state, use a non-existing country etc. Each will produce an error 400 and show a message.
- [ ] Leave out certain values to see validation errors. e.g. use an invalid email address, remove the state, enter an invalid state, use a non-existing country etc. Each will produce an error 400 and show a message.
Validation via Checkout
- [ ] Also confirm checkout works as usual and this validation does not block. One thing you can do is checkout using a US address and enter a non-numeric zip code, e.g. ABC. You'll see error notices as the address updates and also if you try to place an order.
- [ ] Also confirm checkout works as usual and this validation does not block. One thing you can do is checkout using a US address and enter a non-numeric zip code, e.g. ABC. You'll see error notices as the address updates and also if you try to place an order.
### Use em for coupon code button height
- [ ] Set your browser font size to something smaller than 16px.
- [ ] Open the Cart block and expand the Coupon Code panel.
- [ ] Verify the button has the same height as the input text on the left.
- [ ] Set your browser font size to something smaller than 16px.
- [ ] Open the Cart block and expand the Coupon Code panel.
- [ ] Verify the button has the same height as the input text on the left.
### use ReplaceMediaFlow in featured category and feature product
- [ ] Insert Featured Category and Featured Product
- [ ] Try updating the image via media library or directly uploading.
- [ ] There should be no console errors or warnings.
- [ ] Your upload should work fine.
- [ ] Insert Featured Category and Featured Product
- [ ] Try updating the image via media library or directly uploading.
- [ ] There should be no console errors or warnings.
- [ ] Your upload should work fine.
### Fix nonce issues when adding product to cart from All Products
- [ ] In a private window, go to All Products, try to add to cart, it should work
- [ ] Do it several times with several products.
- [ ] Paginate the block and try to add products again.
- [ ] If you have filters set up, try using filters and then adding to cart.
- [ ] In a private window, go to All Products, try to add to cart, it should work
- [ ] Do it several times with several products.
- [ ] Paginate the block and try to add products again.
- [ ] If you have filters set up, try using filters and then adding to cart.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/410.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/testing/releases/420.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.2.0
# Testing notes and ZIP for release 4.2.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5769544/woocommerce-gutenberg-products-block.zip)
@ -21,10 +21,11 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
5. Try to make a purchase and verify it completes successfully and no error is shown.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/420.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

23
plugins/woocommerce-blocks/docs/testing/releases/430.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.3.0
# Testing notes and ZIP for release 4.3.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5837152/woocommerce-gutenberg-products-block.zip)
@ -10,7 +10,6 @@ No changes.
### - Update input colors and alignment. ([3597](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3597))
1. Open a page with a Checkout Block and observer the checkboxes and radio buttons - they should be clearly visible.
2. Go to the page Customizer and change page background to a dark color.
3. Again check the checkboxes and radio buttons at the page with the Checkout Block - they should be clearly visible.
@ -28,20 +27,21 @@ No changes.
### - Show itemized fee rows in the cart/checkout blocks. [3678](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3678)
1. Use the following code snippet in woocommerce-gutenberg-products-block.php:
```PHP
add_action( 'woocommerce_cart_calculate_fees', 'add_fees', 10 );
function add_fees( $cart ) {
$cart->add_fee( __( 'Packaging 1', 'woo-gutenberg-products-block' ), 100, true );
$cart->add_fee( __( 'Packaging 2', 'woo-gutenberg-products-block' ), 50, true );
}
```
```PHP
add_action( 'woocommerce_cart_calculate_fees', 'add_fees', 10 );
function add_fees( $cart ) {
$cart->add_fee( __( 'Packaging 1', 'woo-gutenberg-products-block' ), 100, true );
$cart->add_fee( __( 'Packaging 2', 'woo-gutenberg-products-block' ), 50, true );
}
```
2. Go to the cart page and see fee rows.
3. Go to checkout page and see fee rows.
4. Test with and without prices including tax in WC Tax settings.
### - Extensibility: Show item data in Cart and Checkout blocks and update the variation data styles. ([3665](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3665))
Variations:
1. Add a variable product to your cart and go to the Cart and Checkout pages.
@ -61,10 +61,11 @@ WC Product Add-Ons:
3. Verify add-on data is displayed.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/430.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/testing/releases/440.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.4.0
# Testing notes and ZIP for release 4.4.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5918701/woocommerce-gutenberg-products-block.zip)
@ -97,10 +97,11 @@ This is a regression test due to the changes made for Subscriptions Integration.
3. Place an order. Confirm details persist.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/440.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

54
plugins/woocommerce-blocks/docs/testing/releases/450.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.5.0
# Testing notes and ZIP for release 4.5.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5988965/woocommerce-gutenberg-products-block.zip)
@ -35,21 +35,24 @@ No changes.
1. Create a coupon with no expiry date, minimum spend restriction, product restrictions, or usage limit.
2. Add a product to the cart, go to the checkout block, then apply the coupon.
3. Repeat these steps several times, with different coupons and new baskets each time.
- Modify the coupon's expiry date to be in the past.
- Modify the allowed products for the coupon, to ensure it is not applicable to the cart you're testing against.
- Create a coupon with a single use. Apply it to this test cart. Then use it on another, unrelated cart and complete the checkout.
- Add a minimum order value to the coupon, that is above the cart's value.
- Modify the coupon's expiry date to be in the past.
- Modify the allowed products for the coupon, to ensure it is not applicable to the cart you're testing against.
- Create a coupon with a single use. Apply it to this test cart. Then use it on another, unrelated cart and complete the checkout.
- Add a minimum order value to the coupon, that is above the cart's value.
4. Complete checkout
### Improve design of cart and checkout sidebars. ([3797](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3797))
Go to the Cart and Checkout block and verify designs look good. Some ideas of things to try:
* Test in a situation where there are +1 shipping rate options, only 1 or when there are no available options.
* Test when there is more than one shipping package and when there is only one.
* Test in several themes.
* Test with a different browser font size.
* Verify things look good in the editor as well.
* Test mobile too.
- Test in a situation where there are +1 shipping rate options, only 1 or when there are no available options.
- Test when there is more than one shipping package and when there is only one.
- Test in several themes.
- Test with a different browser font size.
- Verify things look good in the editor as well.
- Test mobile too.
### Improve error displayed to customers when an item's stock status changes during checkout. ([3703](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3703))
@ -65,22 +68,22 @@ Go to the Cart and Checkout block and verify designs look good. Some ideas of th
### Dev - Block Checkout will now respect custom address locales and custom country states via core filter hooks. ([3662](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3662))
1. Change the country on the checkout and check fields are updated/sorted. Japan is a good example because it re-orders all fields. US has states. UK has a text input for state.
2. Install https://wordpress.org/plugins/portugal-states-distritos-for-woocommerce/ Confirm states appear for portugal
2. Install <https://wordpress.org/plugins/portugal-states-distritos-for-woocommerce/> Confirm states appear for portugal
3. Complete checkout - no errors, correct address stored.
### Update checkout block payment methods UI. ([3439](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3439))
1. Add items to cart and go to the Checkout block. You will need to test with various combinations of the following payment methods
- No saved payment methods.
- One saved payment methods.
- Multiple saved payment methods.
- No saved payment methods.
- One saved payment methods.
- Multiple saved payment methods.
and
- No payment methods.
- One payment method.
- Multiple saved payment methods.
- No payment methods.
- One payment method.
- Multiple saved payment methods.
2. Ensure the payment methods UI and UX (switching, filling in details) works
3. Ensure you can still check out and pay.
@ -99,7 +102,9 @@ and
3. Optionally, test some other themes in addition to Storefront.
### Ensure special characters are displayed properly in the Cart sidebar. ([3721](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3721))
1. Add this code snippet to any PHP file (ie: `/woocommerce-gutenberg-products-block.php`):
```PHP
add_action( 'woocommerce_cart_calculate_fees', 'add_fees', 10 );
function add_fees( $cart ) {
@ -107,21 +112,25 @@ function add_fees( $cart ) {
$cart->add_fee( __( 'Fee - Number 2', 'woo-gutenberg-products-block' ), 100, true );
}
```
2. Add a product to your cart and visit the Cart or Checkout pages.
3. Verify the dash is rendered correctly.
### Show cart item total price including taxes when DISPLAY_CART_PRICES_INCLUDING_TAX is true ([3851](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3851))
In wp-admin:
1. Go to WooCommerce > Settings and check the option `Enable tax rates and calculations `.
1. Go to WooCommerce > Settings and check the option `Enable tax rates and calculations`.
2. Go to WooCommerce > Settings > Tax and set `Prices entered with tax` to `No, I will enter prices exclusive of tax` and `Display prices during cart and checkout` to `Including tax`.
3. Go to WooCommerce > Settings > Tax > Standard Rates and create a tax rate for a specific country.
In the frontend:
1. Add a product to your cart and go to the Cart or Checkout blocks.
2. Verify the product unitary price and the cart line total show the price including taxes:
| Before | After |
| --- | --- |
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/3616980/108037796-5ddb4f80-703a-11eb-9656-cac05a57b8c5.png) | ![image](https://user-images.githubusercontent.com/3616980/108038392-10abad80-703b-11eb-8c96-52e1c0f2341f.png) |
### Fix product price not displaying properly when product is on sale ([3853](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3853))
@ -130,10 +139,11 @@ In the frontend:
2. Go to the cart and checkout blocks and make sure you can see the struckthrough regular price, and the sale price is displayed normally.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/450.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

8
plugins/woocommerce-blocks/docs/testing/releases/452.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.5.2
# Testing notes and ZIP for release 4.5.2
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6028194/woocommerce-gutenberg-products-block.zip)
@ -15,18 +15,18 @@ No changes.
2. Add any product to your cart and go to the Cart and Checkout blocks.
3. Verify cart line prices are displayed correctly, instead of being `0`.
### Show total sale badge in medium carts & make it display below price [(3879)](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3879)
1. Set your currency settings to display without a decimal place, like this: ![image](https://user-images.githubusercontent.com/3616980/108694932-fae92d00-74ff-11eb-8ab5-d2038527ea98.png)
1. Add a product that is on sale to your cart, if you've got an up to date WooCommerce Subscriptions repo (on branch: `feature/checkout-block-simple-multiple-subscriptions`) then add a subscription product that's on sale, too.
2. View the Cart block and ensure the price and sale badge display well.
1. View the Cart block and ensure the price and sale badge display well.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/452.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

46
plugins/woocommerce-blocks/docs/testing/releases/460.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.6.0
# Testing notes and ZIP for release 4.6.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6069952/woocommerce-gutenberg-products-block.zip)
@ -8,13 +8,13 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
The following are related to various changes impacting some existing flows so just need validated there's nothing broken:
- Test that adding products to the cart via the add to cart button in the All Products block works as expected (product is added to cart and button updated accordingly).
- Test that adding products to the cart via the add to cart button in the All Products block works as expected (product is added to cart and button updated accordingly).
### Fix button styles in Twenty Nineteen Theme (#3862)
* Insert all products block in a page.
* View a product with a link (external product).
* Verify the text in the button for the link is white on blue background.
- Insert all products block in a page.
- View a product with a link (external product).
- Verify the text in the button for the link is white on blue background.
#### Screenshots
@ -40,24 +40,24 @@ After:
### Remove shadows from text buttons and gradient background from selects in some themes (#3846)
* Install and activate the [Bookshop](https://woocommerce.com/products/bookshop/) theme.
* Go to the cart block output on the frontend and verify the `Delete item` button doesn't have text shadow.
- Install and activate the [Bookshop](https://woocommerce.com/products/bookshop/) theme.
- Go to the cart block output on the frontend and verify the `Delete item` button doesn't have text shadow.
| Before | After |
| --- | --- |
| ![imatge](https://user-images.githubusercontent.com/3616980/107967337-4609ba00-6fad-11eb-9dd9-f4929f699bff.png) | ![imatge](https://user-images.githubusercontent.com/3616980/107967434-633e8880-6fad-11eb-9e7d-6dc21c8f3984.png) |
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/3616980/107967337-4609ba00-6fad-11eb-9dd9-f4929f699bff.png) | ![image](https://user-images.githubusercontent.com/3616980/107967434-633e8880-6fad-11eb-9e7d-6dc21c8f3984.png) |
* Go to the checkout block and verify Country and State selects don't have a gradient in the background.
- Go to the checkout block and verify Country and State selects don't have a gradient in the background.
| Before | After |
| --- | --- |
| ![imatge](https://user-images.githubusercontent.com/3616980/107967156-1195fe00-6fad-11eb-95ca-d9379e7ff794.png) | ![imatge](https://user-images.githubusercontent.com/3616980/107967052-ef03e500-6fac-11eb-8a76-e2ac0a73ce46.png) |
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/3616980/107967156-1195fe00-6fad-11eb-95ca-d9379e7ff794.png) | ![image](https://user-images.githubusercontent.com/3616980/107967052-ef03e500-6fac-11eb-8a76-e2ac0a73ce46.png) |
### Only use `SHOP_URL` if set (#3845)
* In WC > Settings > Products, unset the shop page and save.
* Insert a NEW cart block instance into a page.
* Confirm the empty cart template does not include a link to browse the shop.
- In WC > Settings > Products, unset the shop page and save.
- Insert a NEW cart block instance into a page.
- Confirm the empty cart template does not include a link to browse the shop.
### Show cart item subtotal instead of total in Cart and Checkout blocks (#3905)
@ -65,21 +65,21 @@ After:
2. Go to the Cart block and apply a coupon with a fixed cart discount.
3. Verify the cart item subtotal doesn't change when the coupon discount is applied.
### Smoke Testing
The following are related to various changes impacting some existing flows so just need validated there's nothing broken
- Cart and checkout coupons interaction works as expected.
- Cart and checkout changing quantities works as expected.
- Cart and checkout shipping interaction works as expected.
- Cart and checkout express payment method works as expected.
- Cart and checkout coupons interaction works as expected.
- Cart and checkout changing quantities works as expected.
- Cart and checkout shipping interaction works as expected.
- Cart and checkout express payment method works as expected.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/460.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

34
plugins/woocommerce-blocks/docs/testing/releases/470.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.7.0
# Testing notes and ZIP for release 4.7.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6149138/woocommerce-gutenberg-products-block.zip)
@ -8,10 +8,10 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
The following are related to various changes impacting some existing flows so just need validated there's nothing broken:
- Create a post or page and add some WC Blocks.
- Verify they look correct and styles loaded properly.
- Publish that post or page.
- In the frontend, verify blocks also look correct and styles loaded properly.
- Create a post or page and add some WC Blocks.
- Verify they look correct and styles loaded properly.
- Publish that post or page.
- In the frontend, verify blocks also look correct and styles loaded properly.
### Fix FSE not being visible when WC Blocks was enabled (#3898)
@ -27,6 +27,7 @@ The following are related to various changes impacting some existing flows so ju
3. Check that all the component elements are visible.
#### Screenshots
The cursor for _Filter Products by price_ is cut on top-bottom and is more visible on dark backgrounds
Before:
@ -36,8 +37,7 @@ after:
![image](https://user-images.githubusercontent.com/1628454/109490442-24fe9a00-7a80-11eb-9d23-a39e4dd5dd0f.png)
The button from _Product search_ and _Product Categories List_ is barely visible
The button from _Product search_ and _Product Categories List_ is barely visible
Before:
![image](https://user-images.githubusercontent.com/1628454/108357873-4e9d0300-71ee-11eb-88f4-708fc74efc75.png)
@ -46,7 +46,6 @@ after:
![image](https://user-images.githubusercontent.com/1628454/109490516-3e074b00-7a80-11eb-9177-b280eaadcabd.png)
![image](https://user-images.githubusercontent.com/1628454/109490656-7018ad00-7a80-11eb-8ae1-35f776a2763f.png)
The remove button from _Active Product filters_ is barely visible.
Before:
@ -61,7 +60,6 @@ after:
2. Confirm prices are displayed
3. Confirm prices still display in cart/checkout to verify no regressions
## Feature plugin only
### Ensure sale badges have a uniform height in the Cart block. (#3897)
@ -70,13 +68,13 @@ after:
2. Verify the sale badges are the same height.
#### Screenshots
Before:
![image](https://user-images.githubusercontent.com/5656702/109493773-e0293200-7a84-11eb-8153-fdc47125835f.png)
after:
![image](https://user-images.githubusercontent.com/5656702/109491715-dce07700-7a81-11eb-8dee-8258626b71ae.png)
### Remove extra padding from payment methods with no description #3952
1. Go to WooCommerce > Settings > Payments, edit one of the payment methods and remove any text in its description field.
@ -86,11 +84,11 @@ after:
#### Screenshots
Before:
![image](https://user-images.githubusercontent.com/3616980/110822161-150d6400-8291-11eb-91c9-a442b63d5f67.gif" alt="Screenshot efore" width="548)
![image](https://user-images.githubusercontent.com/3616980/110822161-150d6400-8291-11eb-91c9-a442b63d5f67.gif)
(notice the extra padding that appears when selecting check payments)
after:
![image](https://user-images.githubusercontent.com/3616980/110822189-19d21800-8291-11eb-8c51-bdca2bfdc087.gif" alt="Screenshot efore" width="548)
![image](https://user-images.githubusercontent.com/3616980/110822189-19d21800-8291-11eb-8c51-bdca2bfdc087.gif)
### Fix "save payment" checkbox not showing for payment methods (#3950)
@ -106,6 +104,7 @@ after:
3. See the preview of the block
#### Screenshots
Before:
![image](https://user-images.githubusercontent.com/1628454/110649430-7d851400-81b1-11eb-8eb0-b2a1cea80f63.png)
@ -121,16 +120,17 @@ after:
The following are related to various changes impacting some existing flows so just need validated there's nothing broken
- Cart and checkout coupons interaction works as expected.
- Cart and checkout changing quantities works as expected.
- Cart and checkout shipping interaction works as expected.
- Cart and checkout express payment method works as expected.
- Cart and checkout coupons interaction works as expected.
- Cart and checkout changing quantities works as expected.
- Cart and checkout shipping interaction works as expected.
- Cart and checkout express payment method works as expected.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/470.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/testing/releases/480.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.8.0
# Testing notes and ZIP for release 4.8.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6236544/woocommerce-gutenberg-products-block.zip)
@ -65,10 +65,11 @@ The following are related to various changes impacting some existing flows so ju
- Cart and checkout express payment method works as expected.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/480.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

81
plugins/woocommerce-blocks/docs/testing/releases/490.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 4.9.0
# Testing notes and ZIP for release 4.9.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6295807/woocommerce-gutenberg-products-block.zip)
@ -8,14 +8,14 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
Smoke test these blocks can be inserted and render correctly:
* Hand-picked Products Block
* Best Selling Products Block
* Top Rated Products Block
* Newest Products Block
* On Sale Products Block
* Products by Category Block
* Products by Tag Block
* Products by Attribute Block
- Hand-picked Products Block
- Best Selling Products Block
- Top Rated Products Block
- Newest Products Block
- On Sale Products Block
- Products by Category Block
- Products by Tag Block
- Products by Attribute Block
### Fix Featured Product and Featured Category button alignment (#4028)
@ -23,17 +23,17 @@ Smoke test these blocks can be inserted and render correctly:
2. Without making any change on them, preview them in the frontend and verify the button is centered.
3. Change the alignment of the button to the left, right, back to the center, etc. and verify it works.
| Before | After |
| --- | --- |
| ![imatge](https://user-images.githubusercontent.com/3616980/113333925-5985a000-9323-11eb-8c11-25796187bbcc.png) | ![imatge](https://user-images.githubusercontent.com/3616980/113333839-3e1a9500-9323-11eb-9e12-4bd783487638.png) |
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/3616980/113333925-5985a000-9323-11eb-8c11-25796187bbcc.png) | ![image](https://user-images.githubusercontent.com/3616980/113333839-3e1a9500-9323-11eb-9e12-4bd783487638.png) |
### Enable Google Analytics Integration (#4020)
- Install the [Google Analytics Integration Extension](https://github.com/woocommerce/woocommerce-google-analytics-integration)
- Setup the extension with a G-X type ID from your Google Analytics account. Google Analytics account is required to test this.
- Install [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en) browser extension. It needs to be installed, but do not click it (debug mode should be off).
- Go to the store and trigger some events using the All Products Block and Cart block (feature plugin only). See list of events in https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3953.
- Google Analytics Debugger should indicate that an event was fired.
- Install the [Google Analytics Integration Extension](https://github.com/woocommerce/woocommerce-google-analytics-integration)
- Setup the extension with a G-X type ID from your Google Analytics account. Google Analytics account is required to test this.
- Install [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en) browser extension. It needs to be installed, but do not click it (debug mode should be off).
- Go to the store and trigger some events using the All Products Block and Cart block (feature plugin only). See list of events in <https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3953>.
- Google Analytics Debugger should indicate that an event was fired.
To test SSR blocks:
@ -55,24 +55,24 @@ To test the checkout functionality (feature plugin only):
The following are related to various changes impacting some existing flows so just need validated there's nothing broken:
- Cart and Checkout blocks:
- Coupons interaction works as expected.
- Changing quantities works as expected.
- Shipping interaction works as expected.
- Orders can be placed using regular and express payment methods.
- Orders can be placed from the Checkout block starting from the Cart block and from the shortcode.
- Cart and Checkout blocks:
- Coupons interaction works as expected.
- Changing quantities works as expected.
- Shipping interaction works as expected.
- Orders can be placed using regular and express payment methods.
- Orders can be placed from the Checkout block starting from the Cart block and from the shortcode.
*Testing steps of these PRs are included in this section: Fix Circular Dependencies During Builds (#4025), Remove useCheckoutRedirectUrl() (#4032) and Update @automattic/data-stores and remove mapped-types.ts (#4024)*
_Testing steps of these PRs are included in this section: Fix Circular Dependencies During Builds (#4025), Remove useCheckoutRedirectUrl() (#4032) and Update @automattic/data-stores and remove mapped-types.ts (#4024)_
### Load translation file for JS files that has translatable strings (#4050))
- In WooCommerce > Settings check the option to Enable tax rates and calculations.
- In the Tax tab, set `Display prices during cart and checkout` to `Excluding tax` and `Display tax totals` to `As a single total`.
- In the Standard rates tab, make sure you have at least one tax rate created. If not, create it.
- In Settings > General, change site language to something other than English; Spanish is a good example of a 100% translated language.
- Go to Dashboard > Updates and scroll down to download the new translations immediately.
- Visit Cart or Checkout block.
- Strings like `Taxes` should be translated (in Spanish, it should be `Impuestos`).
- In WooCommerce > Settings check the option to Enable tax rates and calculations.
- In the Tax tab, set `Display prices during cart and checkout` to `Excluding tax` and `Display tax totals` to `As a single total`.
- In the Standard rates tab, make sure you have at least one tax rate created. If not, create it.
- In Settings > General, change site language to something other than English; Spanish is a good example of a 100% translated language.
- Go to Dashboard > Updates and scroll down to download the new translations immediately.
- Visit Cart or Checkout block.
- Strings like `Taxes` should be translated (in Spanish, it should be `Impuestos`).
### Fix Twenty(X) styling issues for cart/checkout form fields (#4046)
@ -93,26 +93,27 @@ The following are related to various changes impacting some existing flows so ju
3. Apply the changes and go to the Checkout page in the frontend.
4. Verify the payments methods of the Checkout block have a border with the same color as the text.
| Before | After |
| --- | --- |
| ![imatge](https://user-images.githubusercontent.com/3616980/114059318-8b06ea00-9894-11eb-9097-401c8125db5d.png) | ![imatge](https://user-images.githubusercontent.com/3616980/114059261-7e829180-9894-11eb-978d-420cbfc4cf41.png) |
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/3616980/114059318-8b06ea00-9894-11eb-9097-401c8125db5d.png) | ![image](https://user-images.githubusercontent.com/3616980/114059261-7e829180-9894-11eb-978d-420cbfc4cf41.png) |
### Cart: fix headline alignment in the empty state of the cart block (#4044)
1. Prerequisite: ensure you have an empty cart.
2. Create a new page and add the Cart block.
2. Check that the empty state looks as expected in the editor (see After state below).
3. Publish the page and check the empty state in the frontend.
3. Check that the empty state looks as expected in the editor (see After state below).
4. Publish the page and check the empty state in the frontend.
|Before|After|
|-|-|
|<img width="825" alt="Screenshot 2021-04-07 at 15 19 57" src="https://user-images.githubusercontent.com/1562646/113873096-c631ec00-97b4-11eb-9d04-e96f25dac34a.png">|<img width="821" alt="Screenshot 2021-04-07 at 15 18 52" src="https://user-images.githubusercontent.com/1562646/113873114-c9c57300-97b4-11eb-8857-4399a5786c11.png">|
| Before | After |
| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![image](https://user-images.githubusercontent.com/1562646/113873096-c631ec00-97b4-11eb-9d04-e96f25dac34a.png) | ![image](https://user-images.githubusercontent.com/1562646/113873114-c9c57300-97b4-11eb-8857-4399a5786c11.png) |
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/490.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

23
plugins/woocommerce-blocks/docs/testing/releases/491.md
View File

@ -1,24 +1,25 @@
## Testing notes and ZIP for release 4.9.1
# Testing notes and ZIP for release 4.9.1
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6304864/woocommerce-gutenberg-products-block.zip)
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6304864/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce core
## Feature plugin and package inclusion in WooCommerce core
### Breakage with Elementor ([4056](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4056))
### Breakage with Elementor ([4056](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4056))
- On a website with PHP 8, install Elementor.
- Enable any payment method.
- Create a new page, and select "Edit with Elementor", there should be no fatal errors.
- On a website with PHP 8, install Elementor.
- Enable any payment method.
- Create a new page, and select "Edit with Elementor", there should be no fatal errors.
### Smoke Testing
### Smoke Testing
- Cart and Checkout block should load fine on frontend.
- Cart and Checkout should be insertable.
- Cart and Checkout block should load fine on frontend.
- Cart and Checkout should be insertable.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/491.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/testing/releases/500.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 5.0.0
# Testing notes and ZIP for release 5.0.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6392862/woocommerce-gutenberg-products-block.zip)
@ -58,10 +58,11 @@ Optionally, because this is difficult to achieve, if you tab to an add to cart b
5. When placing an order, an account will be created for you.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/500.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

23
plugins/woocommerce-blocks/docs/testing/releases/510.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 5.1.0
# Testing notes and ZIP for release 5.1.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6452221/woocommerce-gutenberg-products-block.zip)
@ -8,25 +8,26 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
The following are related to various changes impacting existing flows, so smoke testing is needed to verify there are no regressions:
- Place orders via the Checkout block and ensure the following:
- All payment methods included with the blocks work as expected for completing the order.
- Intentionally triggering payment errors for various payment methods surface the errors as expected and another payment method can be tried.
- Express payment methods (via Stripe) work as expected in both the Cart context and Checkout context.
- Place orders via the Checkout block and ensure the following:
- All payment methods included with the blocks work as expected for completing the order.
- Intentionally triggering payment errors for various payment methods surface the errors as expected and another payment method can be tried.
- Express payment methods (via Stripe) work as expected in both the Cart context and Checkout context.
### Fixed bug with clearing email and phone fields when using separate billing address.
### Fixed bug with clearing email and phone fields when using separate billing address
Test both guest and logged in scenarios for the following:
- On checkout, fill out email address, shipping fields, and phone number.
- Uncheck "use shipping for billing" checkbox.
- Verify email and phone fields still have their values.
- Submit the order and make sure those values persist on the server with the order.
- On checkout, fill out email address, shipping fields, and phone number.
- Uncheck "use shipping for billing" checkbox.
- Verify email and phone fields still have their values.
- Submit the order and make sure those values persist on the server with the order.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/510.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

104
plugins/woocommerce-blocks/docs/testing/releases/520.md
View File

@ -1,51 +1,57 @@
## Testing notes and ZIP for release 5.2.0
# Testing notes and ZIP for release 5.2.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6547433/woocommerce-gutenberg-products-block.zip)
## Feature plugin only
#### Added a key prop to each `CartTotalItem` within `usePaymentMethodInterface `. ([4240](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4240))
### Added a key prop to each `CartTotalItem` within `usePaymentMethodInterface`. ([4240](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4240))
1. Smoke test cart and checkout. The key prop is added in `prepareTotalItems` but is not visible.
2. To _really_ test this you may `console.log` the result of `prepareTotalItems` and verify the key is there.
#### Sync customer data during checkout with draft orders. ([4197](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4197))
### Sync customer data during checkout with draft orders. ([4197](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4197))
1. Go to checkout
2. Fill out billing email
3. Go to admin, Orders > Drafts. See if the billing email is populated in the draft order.
#### Update the display of the sidebar/order summary in the Cart and Checkout blocks. ([4180](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4180))
### Update the display of the sidebar/order summary in the Cart and Checkout blocks. ([4180](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4180))
#### Setup steps
##### Setup steps
1. Ensure some items in your store are taxable, and add a few of them to your cart, for bonus points you can set up additional tax rates and add products from each rate to your cart.
2. Ensure you have a coupon available to use in your store.
3. Go to `WooCommerce -> Settings -> Tax` and set `Display tax totals` to `Itemized` and `Display prices during basket and checkout` to `Excluding Tax`.
2. Using the designs presented in #4093 - Figma link: eaQcoMs7E8Ys0YgxfkOKxR-fi-727%3A1243 do the following:
4. Using the designs presented in #4093 - Figma link: eaQcoMs7E8Ys0YgxfkOKxR-fi-727%3A1243 do the following:
##### Editor testing - do these in the block editor
#### Editor testing - do these in the block editor
**These instructions are for both the Cart and Checkout block!**
1. Add the block and ensure it matches the designs from the Figma file.
2. Ensure you have the option to `Show rate after tax name` in the editor sidebar.
2. Toggle this on and off and verify the rate percentage is shown in the Taxes section of the block preview.
3. Toggle this on and off and verify the rate percentage is shown in the Taxes section of the block preview.
4. Go to `WooCommerce -> Settings -> Tax` and set `Display tax totals` to `As a single total` and then ensure the option to `Show rate after tax name` is no longer available in the Cart and Checkout blocks.
5. Ensure the individual tax lines are not shown in the block preview.
6. Set it back to `Itemized`.
6. Go to `WooCommerce -> Settings -> Tax` and set `Display prices during basket and checkout` to `Including Tax`.
7. Ensure the Taxes section is not shown, but that the amount of tax is shown under the total.
8. Set it back to `Excluding Tax`.
8. While doing the next set of testing instructions, experiment with combinations of these settings ensuring they work correctly.
7. Go to `WooCommerce -> Settings -> Tax` and set `Display prices during basket and checkout` to `Including Tax`.
8. Ensure the Taxes section is not shown, but that the amount of tax is shown under the total.
9. Set it back to `Excluding Tax`.
10. While doing the next set of testing instructions, experiment with combinations of these settings ensuring they work correctly.
#### Front-end testing
##### Front-end testing
1. Go to the Cart/Checkout and ensure the rendered cart matches the Figma file. Ensure you have the correct Taxes section based on your configuration.
4. Go to `WooCommerce -> Settings -> Tax` and set `Display tax totals` to `As a single total` and then ensure the Taxes section of the sidebar does not include a further breakdown of rates.
5. Set it back to `Itemized` and ensure the rates are broken down correctly.
6. Toggle the `Show rate after tax name` option in the block and ensure the changes are reflected on the front-end.
6. Go to `WooCommerce -> Settings -> Tax` and set `Display prices during basket and checkout` to `Including Tax`.
7. Ensure the Taxes section is not shown, but that the amount of tax is shown under the total.
8. Select different shipping methods and ensure the `via X` updates in the Shipping section of the sidebar. Do this in both Cart and Checkout.
9. Add a coupon and ensure the discounts section shows the reduction amount.
2. Go to `WooCommerce -> Settings -> Tax` and set `Display tax totals` to `As a single total` and then ensure the Taxes section of the sidebar does not include a further breakdown of rates.
3. Set it back to `Itemized` and ensure the rates are broken down correctly.
4. Toggle the `Show rate after tax name` option in the block and ensure the changes are reflected on the front-end.
5. Go to `WooCommerce -> Settings -> Tax` and set `Display prices during basket and checkout` to `Including Tax`.
6. Ensure the Taxes section is not shown, but that the amount of tax is shown under the total.
7. Select different shipping methods and ensure the `via X` updates in the Shipping section of the sidebar. Do this in both Cart and Checkout.
8. Add a coupon and ensure the discounts section shows the reduction amount.
### Improved accessibility and styling of the controls of several of ours blocks. ([4100](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4100))
#### Improved accessibility and styling of the controls of several of ours blocks. ([4100](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4100))
The controls modified in this PR are used in many blocks, so the steps below should be repeated for all of them.
1. Add the block to a page and ensure you can select items in the controls.
@ -56,54 +62,63 @@ The controls modified in this PR are used in many blocks, so the steps below sho
5. Test adding several blocks in the same page, verify controls work independently of each other.
Affected blocks:
* Featured Product Block
* Featured Category Block
* Hand-picked Products Block
* Products by Category Block
* Products by Tag Block
* Products by Attribute Block
* Reviews by Product
* Reviews by Category
* Filter Products by Attribute
#### Hide tax breakdown if the total amount of tax to be paid is 0. ([4262](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4262))
- Featured Product Block
- Featured Category Block
- Hand-picked Products Block
- Products by Category Block
- Products by Tag Block
- Products by Attribute Block
- Reviews by Product
- Reviews by Category
- Filter Products by Attribute
### Hide tax breakdown if the total amount of tax to be paid is 0. ([4262](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4262))
1. Enable taxes and ensure "Display prices during cart and checkout" is set to "Including taxes"
2. Add an item to your cart with a zero-rate tax setting.
3. View the Cart and Checkout block and ensure it does not say "Including £0.00 in taxes".
#### Prevent Coupon code panel from appearing in stores were coupons are disabled. ([4202](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4202))
### Prevent Coupon code panel from appearing in stores were coupons are disabled. ([4202](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4202))
1. Go to WooCommerce > Settings > General and uncheck Enable the use of coupon codes.
2. Go to the Cart or Checkout blocks and verify there is no Coupon panel in the sidebar.
#### For payment methods, only use `canMakePayment` in the frontend (not the editor) context. ([4188](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4188))
### For payment methods, only use `canMakePayment` in the frontend (not the editor) context. ([4188](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4188))
1. Test this by enabling the Stripe plugin and ensuring the preview (apple pay) appeared correctly in the editor.
2. Also confirm that canMakePayment still works on the frontend, and that it isn't running in the editor context.
#### Fix duplicate react keys in ProductDetails component. ([4187](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4187))
### Fix duplicate react keys in ProductDetails component. ([4187](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4187))
1. Using WooCommerce Product Add-ons, create a product with checkbox addons.
2. View the product page, select two of the checkboxes and add the product to the cart.
3. View the cart block.
4. Ensure there is no error in the console.
#### Fix sending of confirmation emails for orders when no payment is needed. ([4186](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4186))
1. Add a VIRTUAL product costing $0 to the cart. The order total should be 0.
### Fix sending of confirmation emails for orders when no payment is needed. ([4186](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4186))
1. Add a VIRTUAL product costing \$0 to the cart. The order total should be 0.
2. Go to Block checkout and place the order.
3. Check mailhog (if using WP Local) and confirm the new order emails (x2) were received.
#### Stopped a warning being shown when using WooCommerce Force Sells and adding a product with a Synced Force Sell to the cart. ([4182](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4182))
1. Install WooCommerce Force Sells (https://woocommerce.com/products/force-sells/ or https://github.com/woocommerce/woocommerce-force-sells/)
### Stopped a warning being shown when using WooCommerce Force Sells and adding a product with a Synced Force Sell to the cart. ([4182](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4182))
1. Install WooCommerce Force Sells (<https://woocommerce.com/products/force-sells/> or <https://github.com/woocommerce/woocommerce-force-sells/>)
2. Edit a product to add a "Synced force sell"
![image](https://user-images.githubusercontent.com/5656702/117461956-0caa7000-af46-11eb-9638-40671d798570.png)
3. Add this product to your cart
4. Go to the Cart block and ensure no warnings are visible
5. Do the same for the Checkout block
#### Move Button and Label components to `@woocommerce/blocks-checkout` package. ([4222](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4222))
### Move Button and Label components to `@woocommerce/blocks-checkout` package. ([4222](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4222))
1. Smoke test of Blocks functionality.
2. Ensure critical flows work, such as adding items to cart from the All Products Block, continuing to Checkout from the Cart Block and placing an order in the Checkout Block.
3. Ensure labels are displaying correctly in blocks, compare to trunk and ensure nothing is different or missing.
#### Add couponName filter to allow extensions to modify how coupons are displayed in the Cart and Checkout summary. ([4166](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4166))
### Add couponName filter to allow extensions to modify how coupons are displayed in the Cart and Checkout summary. ([4166](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4166))
1. Check out 422-gh-woocommerce/woocommerce-points-and-rewards
2. Run npm run build in both repositories.
3. In the dashboard, go to WooCommerce > Points and rewards > Manage points and add some points to your user account.
@ -114,23 +129,26 @@ Affected blocks:
## Feature plugin and package inclusion in WooCommerce core
#### Hide legacy widgets with a feature-complete block equivalent from the widget area block inserter. ([4237](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4237))
### Hide legacy widgets with a feature-complete block equivalent from the widget area block inserter. ([4237](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4237))
Do the testing steps for the following widgets: Product Search, Product Categories, Products, Products by Rating, and Recent Product Reviews
1. Ensure the Gutenberg feature plugin is enabled. To enable block widgets in the Customizer, go to Gutenberg -> Experiments and check the checkbox next to Widgets. After you’ve saved the experimental settings, navigate to Appearance -> Customize -> Widgets. **Note:** Later versions of Gutenberg will have the block widget interface already enabled (and no longer experimental) - if the option to enable this is not on this page just go to the next step.
2. Go to Appearance -> Widgets and try to insert the above-mentioned widgets. You shouldn't be able to see them in the inspector.
3. Insert the "Legacy Widget" block in the Widget editor. You shouldn't be able to see the above-mentioned widgets in the Select widget dropdown.
#### Hide the All Products Block from the Customizer Widget Areas until full support is achieved. ([4225](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4225))
### Hide the All Products Block from the Customizer Widget Areas until full support is achieved. ([4225](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4225))
1. Ensure Gutenberg feature plugin is enabled. To enable block widgets in the Customizer, go to Gutenberg -> Experiments and check the checkbox next to Widgets. After you’ve saved the experimental settings, navigate to Appearance -> Customize -> Widgets. **Note:** Later versions of Gutenberg will have the block widget interface already enabled (and no longer experimental) - if the option to enable this is not on this page just go to the next step.
2. Go to Appearance -> Customize and then click Widgets. Try to insert "All Products", "Price Filter", "Attribute Filter", and "Active Filter" blocks into the Sidebar area. You shouldn't be able to see them in the inspector!
3. Edit a page and try to insert "All Products", "Price Filter", "Attribute Filter", and "Active Filter" blocks. It should work as expected.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/520.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

5
plugins/woocommerce-blocks/docs/testing/releases/530.md
View File

@ -1,4 +1,4 @@
## Testing notes and ZIP for release 5.3.0
# Testing notes and ZIP for release 5.3.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/6608747/woocommerce-gutenberg-products-block.zip)
@ -52,10 +52,11 @@ Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.
4. Verify you cannot see the spinner on the button and when redirected on the product page, the WooCommerce error message does not show.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/releases/530.md)
<!-- /FEEDBACK -->
<!-- /FEEDBACK -->

Some files were not shown because too many files have changed in this diff Show More