merge trunk

.distignore

@@ -1,10 +1,11 @@
 /.github
 /.git
 /.wordpress-org
-/node_modules
 /.sources
 /bin
 /docs
+/node_modules
+/patches
 /storybook
 /tests
 
@@ -25,7 +26,7 @@ blocks.ini
 composer.json
 composer.lock
 docker-compose.yml
-globals.d.ts
+global.d.ts
 package.json
 package-lock.json
 phpcs.xml

.editorconfig

@@ -18,7 +18,7 @@ trim_trailing_whitespace = true
 [*.txt]
 trim_trailing_whitespace = false
 
-[*.{md,json,yml}]
+[*.{json,yml}]
 trim_trailing_whitespace = false
 indent_style = space
 indent_size = 2

.github/CONTRIBUTING.md

@@ -4,7 +4,7 @@ Thanks for your interest in contributing to WooCommerce Blocks!
 
 If you wish to contribute code, to get started we recommend first reading our [Getting Started Guide](../docs/contributors/getting-started.md).
 
-All other documentation for contributors can be found [in the docs directory](../docs/readme.md).
+All other documentation for contributors can be found [in the docs directory](../docs/README.md).
 
 ## Guidelines
 

.github/patch-initial-checklist.md

@@ -18,8 +18,8 @@ The release pull request has been created! This checklist is a guide to follow f
 * [ ] Run `npm run package-plugin:deploy`. This will create a zip of the current branch build locally.
 * [ ] Create the testing notes for the release. 
   * [ ] For each pull request that belongs to the current release, grab the `User Facing Testing` notes from the PR's description. Be sure that the `Do not include in the Testing Notes is not flagged` checkbox is unchecked.
-  * [ ] Add the notes to `docs/testing/releases`
-  * [ ] Update the `docs/testing/releases/README.md` file index.
+  * [ ] Add the notes to `docs/internal-developers/testing/releases`
+  * [ ] Update the `docs/internal-developers/testing/releases/README.md` file index.
 * [ ] Copy a link to the release zip you created earlier into the testing notes. To generate the link you can upload the zip as an attachment in a GitHub comment and then just copy the path (without publishing the comment).
 * [ ] Commit and push the testing docs to the release branch.
 * [ ] Smoke test built release zip using the testing instructions you created:
@@ -76,7 +76,7 @@ This only needs done if the patch release needs to be included in WooCommerce Co
   - The content for the pull release can follow [this example](https://github.com/woocommerce/woocommerce/pull/27676). Essentially you link to all the important things that have already been prepared. Note, you need to make sure you link to all the related documents for the feature plugin releases since the last package version bump in Woo Core.
       - The PR's changelog should be aggregated from all the releases included in the package bump. This changelog will be used in the release notes for the WooCommerce release. That's why it should only list the PRs that have WooCoomerce Core in the WooCommerce Visibility section of their description. Don't include changes available in the feature plugin or development builds.
   - Run through the testing checklist to ensure everything works in that branch for that package bump. **Note:** Testing should include ensuring any features/new blocks that are supposed to be behind feature gating for the core merge of this package update are working as expected.
-  - Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
+  - Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/internal-developers/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
   - Verify and make any additional edits to the pull request description for things like: Changelog to be included with WooCommerce core, additional communication that might be needed elsewhere, additional marketing communication notes that may be needed etc.
   - After the checklist is complete and the testing is done, it will be up to the WooCommerce core team to approve and merge the pull request.
 * [ ] Make sure you join the `#woo-core-releases` Slack channel to represent Woo Blocks for the release of WooCommerce core this version is included in.

.github/release-initial-checklist.md

@@ -24,8 +24,8 @@ The release pull request has been created! This checklist is a guide to follow f
   *  Note: The zip file is functionally equivalent to what gets released except the version bump.
 * [ ] Create the testing notes for the release. 
   * [ ] For each pull request that belongs to the current release, grab the `User Facing Testing` notes from the PR's description. Be sure that the `Do not include in the Testing Notes is not flagged` checkbox is unchecked.
-  * [ ] Add the notes to `docs/testing/releases`
-  * [ ] Update the `docs/testing/releases/README.md` file index.
+  * [ ] Add the notes to `docs/internal-developers/testing/releases`
+  * [ ] Update the `docs/internal-developers/testing/releases/README.md` file index.
 * [ ] Copy a link to the release zip you created earlier into the testing notes. To generate the link you can upload the zip as an attachment in a GitHub comment and then just copy the path (without publishing the comment).
 * [ ] Commit and push the testing docs to the release branch.
 * [ ] Smoke test built release zip using the testing instructions you created:
@@ -109,7 +109,7 @@ This only needs to be done if this release is the last release of the feature pl
       Woo Blocks 7.3.0 & 7.4.0
       ```
   * Run through the testing checklist to ensure everything works in that branch for that package bump. **Note:** Testing should include ensuring any features/new blocks that are supposed to be behind feature gating for the core merge of this package update are working as expected.
-  * Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
+  * Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/internal-developers/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
   * Verify and make any additional edits to the pull request description for things like: Changelog to be included with WooCommerce core, additional communication that might be needed elsewhere, additional marketing communication notes that may be needed etc.
   * After the checklist is complete and the testing is done, it will be up to the WooCommerce core team to approve and merge the pull request.
 * [ ] Make sure you join the `#woo-core-releases` Slack channel to represent Woo Blocks for the release of WooCommerce core this version is included in.

.markdownlint.json

@@ -1,5 +1,3 @@
-
-
 {
 	"default": true,
 	"MD003": { "style": "atx" },
@@ -9,7 +7,7 @@
 	"MD025": false,
 	"MD029": false,
 	"MD033": false,
-	"MD046": {"style": "fenced"},
+	"MD046": { "style": "fenced" },
 	"no-hard-tabs": false,
 	"whitespace": false
 }

.markdownlintignore

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

.vscode/extensions.json

@@ -10,6 +10,7 @@
 		"neilbrayfield.php-docblocker",
 		"valeryanm.vscode-phpsab",
 		"editorconfig.editorconfig",
-		"stylelint.vscode-stylelint"
+		"stylelint.vscode-stylelint",
+		"DavidAnson.vscode-markdownlint"
 	]
 }

README.md

@@ -33,7 +33,7 @@ If you want to see what we're working on for future versions, or want to help ou
 -   [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.
+-   [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-blocks/) - Contains a list and demo of components used in the plugin.
 
 ## Installing the plugin version
 
@@ -66,7 +66,7 @@ Run through the ["Writing Your First Block Type" tutorial](https://wordpress.org
 
 For deeper dive, try looking at the [core blocks code,](https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src) or see what [components are available.](https://github.com/WordPress/gutenberg/tree/master/packages/components/src)
 
-To begin contributing to the WooCommerce Blocks plugin, see our [getting started guide](./docs/contributors/getting-started.md) and [developer handbook](./docs/readme.md).
+To begin contributing to the WooCommerce Blocks plugin, see our [getting started guide](./docs/contributors/getting-started.md) and [developer handbook](./docs/README.md).
 
 Other useful docs to explore:
 

assets/js/atomic/blocks/product-elements/add-to-cart/block.js

@@ -37,9 +37,8 @@ const Block = ( { className, showFormElements } ) => {
 		className,
 		'wc-block-components-product-add-to-cart',
 		{
-			'wc-block-components-product-add-to-cart--placeholder': isEmpty(
-				product
-			),
+			'wc-block-components-product-add-to-cart--placeholder':
+				isEmpty( product ),
 		}
 	);
 

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js

@@ -32,11 +32,8 @@ const AttributeSelectControl = ( {
 		'woo-gutenberg-products-block'
 	),
 } ) => {
-	const {
-		getValidationError,
-		setValidationErrors,
-		clearValidationError,
-	} = useValidationContext();
+	const { getValidationError, setValidationErrors, clearValidationError } =
+		useValidationContext();
 	const errorId = attributeName;
 	const error = getValidationError( errorId ) || {};
 
@@ -60,10 +57,10 @@ const AttributeSelectControl = ( {
 	] );
 
 	// Remove validation errors when unmounted.
-	useEffect( () => () => void clearValidationError( errorId ), [
-		errorId,
-		clearValidationError,
-	] );
+	useEffect(
+		() => () => void clearValidationError( errorId ),
+		[ errorId, clearValidationError ]
+	);
 
 	return (
 		<div className="wc-block-components-product-add-to-cart-attribute-picker__container">

assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js

@@ -45,10 +45,11 @@ const AddToCartButton = () => {
 			}
 			return true;
 		};
-		const unsubscribeProcessing = eventRegistration.onAddToCartAfterProcessingWithSuccess(
-			onSuccess,
-			0
-		);
+		const unsubscribeProcessing =
+			eventRegistration.onAddToCartAfterProcessingWithSuccess(
+				onSuccess,
+				0
+			);
 		return () => {
 			unsubscribeProcessing();
 		};

assets/js/atomic/blocks/product-elements/button/block.js

@@ -52,7 +52,8 @@ const Block = ( props ) => {
 				'wp-block-button',
 				'wc-block-components-product-button',
 				{
-					[ `${ parentClassName }__product-add-to-cart` ]: parentClassName,
+					[ `${ parentClassName }__product-add-to-cart` ]:
+						parentClassName,
 				}
 			) }
 		>

assets/js/atomic/blocks/product-elements/category-list/block.tsx

@@ -49,7 +49,8 @@ const Block = ( props: Props ): JSX.Element | null => {
 				'wc-block-components-product-category-list',
 				colorProps.className,
 				{
-					[ `${ parentClassName }__product-category-list` ]: parentClassName,
+					[ `${ parentClassName }__product-category-list` ]:
+						parentClassName,
 				}
 			) }
 			style={ { ...colorProps.style, ...typographyProps.style } }

assets/js/atomic/blocks/product-elements/image/block.js

@@ -60,7 +60,8 @@ export const Block = ( props ) => {
 					className,
 					'wc-block-components-product-image',
 					{
-						[ `${ parentClassName }__product-image` ]: parentClassName,
+						[ `${ parentClassName }__product-image` ]:
+							parentClassName,
 					},
 					borderProps.className
 				) }

assets/js/atomic/blocks/product-elements/image/edit.js

@@ -23,12 +23,8 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
 const Edit = ( { attributes, setAttributes } ) => {
-	const {
-		showProductLink,
-		imageSizing,
-		showSaleBadge,
-		saleBadgeAlign,
-	} = attributes;
+	const { showProductLink, imageSizing, showSaleBadge, saleBadgeAlign } =
+		attributes;
 
 	const blockProps = useBlockProps();
 

assets/js/atomic/blocks/product-elements/image/test/block.test.js

@@ -46,8 +46,7 @@ const productWithImages = {
 			id: 56,
 			src: 'logo-1.jpg',
 			thumbnail: 'logo-1-324x324.jpg',
-			srcset:
-				'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
+			srcset: 'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
 			sizes: '(max-width: 800px) 100vw, 800px',
 			name: 'logo-1.jpg',
 			alt: '',
@@ -56,8 +55,7 @@ const productWithImages = {
 			id: 55,
 			src: 'beanie-with-logo-1.jpg',
 			thumbnail: 'beanie-with-logo-1-324x324.jpg',
-			srcset:
-				'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
+			srcset: 'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
 			sizes: '(max-width: 800px) 100vw, 800px',
 			name: 'beanie-with-logo-1.jpg',
 			alt: '',

assets/js/atomic/blocks/product-elements/price/block.js

@@ -79,7 +79,8 @@ const Block = ( props ) => {
 			// This is the regular or original price when the `price` value is a sale price.
 			regularPrice={ prices.regular_price }
 			regularPriceClassName={ classnames( {
-				[ `${ parentClassName }__product-price__regular` ]: parentClassName,
+				[ `${ parentClassName }__product-price__regular` ]:
+					parentClassName,
 			} ) }
 		/>
 	);

assets/js/atomic/blocks/product-elements/stock-indicator/block.js

@@ -48,11 +48,16 @@ const Block = ( props ) => {
 				colorProps.className,
 				'wc-block-components-product-stock-indicator',
 				{
-					[ `${ parentClassName }__stock-indicator` ]: parentClassName,
-					'wc-block-components-product-stock-indicator--in-stock': inStock,
-					'wc-block-components-product-stock-indicator--out-of-stock': ! inStock,
-					'wc-block-components-product-stock-indicator--low-stock': !! lowStock,
-					'wc-block-components-product-stock-indicator--available-on-backorder': !! isBackordered,
+					[ `${ parentClassName }__stock-indicator` ]:
+						parentClassName,
+					'wc-block-components-product-stock-indicator--in-stock':
+						inStock,
+					'wc-block-components-product-stock-indicator--out-of-stock':
+						! inStock,
+					'wc-block-components-product-stock-indicator--low-stock':
+						!! lowStock,
+					'wc-block-components-product-stock-indicator--available-on-backorder':
+						!! isBackordered,
 				}
 			) }
 			style={ { ...colorProps.style, ...typographyProps.style } }

assets/js/atomic/blocks/product-elements/summary/block.js

@@ -43,7 +43,8 @@ const Block = ( props ) => {
 					className,
 					`wc-block-components-product-summary`,
 					{
-						[ `${ parentClassName }__product-summary` ]: parentClassName,
+						[ `${ parentClassName }__product-summary` ]:
+							parentClassName,
 					}
 				) }
 			/>
@@ -65,7 +66,8 @@ const Block = ( props ) => {
 				colorProps.className,
 				`wc-block-components-product-summary`,
 				{
-					[ `${ parentClassName }__product-summary` ]: parentClassName,
+					[ `${ parentClassName }__product-summary` ]:
+						parentClassName,
 				}
 			) }
 			source={ source }

assets/js/atomic/blocks/product-elements/tag-list/block.js

@@ -45,7 +45,8 @@ const Block = ( props ) => {
 				colorProps.className,
 				'wc-block-components-product-tag-list',
 				{
-					[ `${ parentClassName }__product-tag-list` ]: parentClassName,
+					[ `${ parentClassName }__product-tag-list` ]:
+						parentClassName,
 				}
 			) }
 			style={ { ...colorProps.style, ...typographyProps.style } }

assets/js/atomic/blocks/product-elements/title/block.tsx

@@ -33,7 +33,8 @@ interface TagNameProps extends HTMLAttributes< HTMLOrSVGElement > {
 const TagName = ( {
 	children,
 	headingLevel,
-	elementType: ElementType = `h${ headingLevel }` as keyof JSX.IntrinsicElements,
+	elementType:
+		ElementType = `h${ headingLevel }` as keyof JSX.IntrinsicElements,
 	...props
 }: TagNameProps ): JSX.Element => {
 	return <ElementType { ...props }>{ children }</ElementType>;
@@ -77,7 +78,8 @@ export const Block = ( props: Props ): JSX.Element => {
 					colorProps.className,
 					'wc-block-components-product-title',
 					{
-						[ `${ parentClassName }__product-title` ]: parentClassName,
+						[ `${ parentClassName }__product-title` ]:
+							parentClassName,
 						[ `wc-block-components-product-title--align-${ align }` ]:
 							align && isFeaturePluginBuild(),
 					}

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -78,20 +78,17 @@ interface AddressFormProps {
  */
 const AddressForm = ( {
 	id = '',
-	fields = ( Object.keys(
+	fields = Object.keys(
 		defaultAddressFields
-	) as unknown ) as ( keyof AddressFields )[],
+	) as unknown as ( keyof AddressFields )[],
 	fieldConfig = {} as Record< keyof AddressFields, Partial< AddressField > >,
 	instanceId,
 	onChange,
 	type = 'shipping',
 	values,
 }: AddressFormProps ): JSX.Element => {
-	const {
-		getValidationError,
-		setValidationErrors,
-		clearValidationError,
-	} = useValidationContext();
+	const { getValidationError, setValidationErrors, clearValidationError } =
+		useValidationContext();
 
 	const currentFields = useShallowEqual( fields );
 

assets/js/base/components/cart-checkout/address-form/test/index.js

@@ -81,11 +81,8 @@ const inputAddress = async ( {
 
 describe( 'AddressForm Component', () => {
 	const WrappedAddressForm = ( { type } ) => {
-		const {
-			defaultAddressFields,
-			setShippingAddress,
-			shippingAddress,
-		} = useCheckoutAddress();
+		const { defaultAddressFields, setShippingAddress, shippingAddress } =
+			useCheckoutAddress();
 
 		return (
 			<AddressForm

assets/js/base/components/cart-checkout/form-step/index.tsx

@@ -64,7 +64,8 @@ const FormStep = ( {
 				className,
 				'wc-block-components-checkout-step',
 				{
-					'wc-block-components-checkout-step--with-step-number': showStepNumber,
+					'wc-block-components-checkout-step--with-step-number':
+						showStepNumber,
 					'wc-block-components-checkout-step--disabled': disabled,
 				}
 			) }

assets/js/base/components/cart-checkout/shipping-calculator/address.tsx

@@ -25,10 +25,8 @@ const ShippingCalculatorAddress = ( {
 	addressFields,
 }: ShippingCalculatorAddressProps ): JSX.Element => {
 	const [ address, setAddress ] = useState( initialAddress );
-	const {
-		hasValidationErrors,
-		showAllValidationErrors,
-	} = useValidationContext();
+	const { hasValidationErrors, showAllValidationErrors } =
+		useValidationContext();
 
 	const validateSubmit = () => {
 		showAllValidationErrors();