Merge branch 'trunk' of github.com:woocommerce/woocommerce-gutenberg-…

…products-block into add/4965-featured-category

.github/automate-team-review-assignment-config.yml

@@ -9,9 +9,9 @@ when:
         - rubik-fp-squad
   - author:
       teamIs:
-        - rubik-fse-squad
+        - kirigami
       ignore:
         nameIs:
     assign:
       teams:
-        - rubik-fse-squad
+        - kirigami

.github/patch-initial-checklist.md

@@ -40,6 +40,7 @@ Additionally, make sure to differentiate between things in the testing notes tha
 * [ ] Execute `npm run deploy`
   * Note: the script automatically updates version numbers (commits on your behalf).
   * **ALERT**: This script will ask you if this release will be deployed to WordPress.org. You should only answer yes for this release **if it's the latest release and you want to deploy to WordPress.org**. Otherwise, answer no. If you answer yes, you will get asked additional verification by the `npm run deploy` script about deploying a patch release to WordPress.org.
+  * An email confirmation is required before the new version will be released, so check your email in order to confirm the release.
 
 ## If this release is deployed to WordPress.org...
 

.github/release-initial-checklist.md

@@ -56,6 +56,7 @@ Additionally, make sure to differentiate between things in the testing notes tha
   * Note: the script automatically updates version numbers on Github (commits on your behalf).
   * **ALERT**: This script will ask you if this release will be deployed to WordPress.org. You should answer yes for this release even if it is a pre-release.
   * A GitHub release will automatically be created and this will trigger a workflow that automatically deploys the plugin to WordPress.org.
+  * An email confirmation is required before the new version will be released, so check your email in order to confirm the release.
 * [ ] Edit the [GitHub release](https://github.com/woocommerce/woocommerce-gutenberg-products-block/releases) and copy changelog into the release notes. Ensure there is a release with the correct version, the one you entered above.
 * [ ] The `#team-rubik` slack instance will be notified about the progress with the WordPress.org deploy. Watch for that. If anything goes wrong, an error will be reported and you can followup via the GitHub actions tab and the log for that workflow.
 
@@ -98,9 +99,9 @@ Additionally, make sure to differentiate between things in the testing notes tha
 This only needs to be done if this release is the last release of the feature plugin before code freeze in the WooCommerce core cycle. If this condition doesn't exist you can skip this section.
 
 * [ ] Remind whoever is porter this week to audit our codebase to ensure this [experimental interface document](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/blocks/feature-flags-and-experimental-interfaces.md) is up to date. See Pca54o-rM-p2 for more details.
-* [ ] Create a pull request for updating the package in the [WooCommerce Core Repository](https://github.com/woocommerce/woocommerce/) that [bumps the package version](https://github.com/woocommerce/woocommerce/blob/master/composer.json) for the blocks package to the version being pulled in.
-  * 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.
-      * Please add a changelog to the content which is aggregated from all the releases included in the package bump. The changelog should only list things surfaced to users of the package in WooCommerce core (i.e. excluding things only available in the feature plugin or development builds). This changelog will be used in the release notes for the WooCommerce release. **Note: This currently is not shown in the linked example.**
+* [ ] Create a pull request for updating the package in the [WooCommerce Core Repository](https://github.com/woocommerce/woocommerce/) that [bumps the package version](https://github.com/woocommerce/woocommerce/blob/747cb6b7184ba9fdc875ab104da5839cfda8b4be/plugins/woocommerce/composer.json) for the Woo Blocks package to the version being pulled in.
+  * The content for the pull release can follow [this example](https://github.com/woocommerce/woocommerce/pull/31556). Update the `plugins/woocommerce/composer.json` file and then run `composer update`. In the PR description you will link to all the important things that have already been prepared since the version you replaced. Note, you need to make sure you link to all the related documents for the plugin releases since the last package version bump in Woo Core.
+      * Please add a changelog to the content which is aggregated from all the releases included in the package bump. The changelog should only list things surfaced to users of the package in WooCommerce core (i.e. excluding things only available in the feature plugin or development builds). This changelog will be used in the release notes for the WooCommerce release. 
   * 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.
   * 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.

.nvmrc

@@ -1 +1 @@
-16.13.1
+16.13.2

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

@@ -18,6 +18,7 @@ const Simple = () => {
 		quantity,
 		minQuantity,
 		maxQuantity,
+		multipleOf,
 		dispatchActions,
 		isDisabled,
 	} = useAddToCartFormContext();
@@ -43,6 +44,7 @@ const Simple = () => {
 				value={ quantity }
 				min={ minQuantity }
 				max={ maxQuantity }
+				step={ multipleOf }
 				disabled={ isDisabled }
 				onChange={ dispatchActions.setQuantity }
 			/>

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.js

@@ -23,6 +23,7 @@ const Variable = () => {
 		quantity,
 		minQuantity,
 		maxQuantity,
+		multipleOf,
 		dispatchActions,
 		isDisabled,
 	} = useAddToCartFormContext();
@@ -52,6 +53,7 @@ const Variable = () => {
 				value={ quantity }
 				min={ minQuantity }
 				max={ maxQuantity }
+				step={ multipleOf }
 				disabled={ isDisabled }
 				onChange={ dispatchActions.setQuantity }
 			/>

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

@@ -1,25 +1,71 @@
+/**
+ * External dependencies
+ */
+import { useDebouncedCallback } from 'use-debounce';
+
 /**
  * Quantity Input Component.
  *
  * @param {Object}         props          Incoming props for component
  * @param {boolean}        props.disabled Whether input is disabled or not.
  * @param {number}         props.min      Minimum value for input.
  * @param {number}         props.max      Maximum value for input.
+ * @param {number}         props.step Step attribute for input.
  * @param {number}         props.value    Value for input.
  * @param {function():any} props.onChange Function to call on input change event.
  */
-const QuantityInput = ( { disabled, min, max, value, onChange } ) => {
+const QuantityInput = ( { disabled, min, max, step = 1, value, onChange } ) => {
+	const hasMaximum = typeof max !== 'undefined';
+
+	/**
+	 * The goal of this function is to normalize what was inserted,
+	 * but after the customer has stopped typing.
+	 *
+	 * It's important to wait before normalizing or we end up with
+	 * a frustrating experience, for example, if the minimum is 2 and
+	 * the customer is trying to type "10", premature normalizing would
+	 * always kick in at "1" and turn that into 2.
+	 *
+	 * Copied from <QuantitySelector>
+	 */
+	const normalizeQuantity = useDebouncedCallback( ( initialValue ) => {
+		// We copy the starting value.
+		let newValue = initialValue;
+
+		// We check if we have a maximum value, and select the lowest between what was inserted and the maximum.
+		if ( hasMaximum ) {
+			newValue = Math.min(
+				newValue,
+				// the maximum possible value in step increments.
+				Math.floor( max / step ) * step
+			);
+		}
+
+		// Select the biggest between what's inserted, the the minimum value in steps.
+		newValue = Math.max( newValue, Math.ceil( min / step ) * step );
+
+		// We round off the value to our steps.
+		newValue = Math.floor( newValue / step ) * step;
+
+		// Only commit if the value has changed
+		if ( newValue !== initialValue ) {
+			onChange( newValue );
+		}
+	}, 300 );
+
 	return (
 		<input
 			className="wc-block-components-product-add-to-cart-quantity"
 			type="number"
 			value={ value }
 			min={ min }
 			max={ max }
+			step={ step }
 			hidden={ max === 1 }
 			disabled={ disabled }
 			onChange={ ( e ) => {
 				onChange( e.target.value );
+				normalizeQuantity( e.target.value );
 			} }
 		/>
 	);

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Summary from '@woocommerce/base-components/summary';
 import { blocksConfig } from '@woocommerce/block-settings';
+
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -15,6 +16,10 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Summary Block Component.
@@ -23,9 +28,13 @@ import './style.scss';
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( { className } ) => {
+const Block = ( props ) => {
+	const { className } = props;
+
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
 
 	if ( ! product ) {
 		return (
@@ -53,6 +62,7 @@ const Block = ( { className } ) => {
 		<Summary
 			className={ classnames(
 				className,
+				colorProps.className,
 				`wc-block-components-product-summary`,
 				{
 					[ `${ parentClassName }__product-summary` ]: parentClassName,
@@ -61,6 +71,10 @@ const Block = ( { className } ) => {
 			source={ source }
 			maxLength={ 150 }
 			countType={ blocksConfig.wordCountType || 'words' }
+			style={ {
+				...colorProps.style,
+				...typographyProps.style,
+			} }
 		/>
 	);
 };

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,7 +12,12 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
 const Edit = ( { attributes } ) => {
-	return <Block { ...attributes } />;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
 };
 
 export default withProductSelector( {

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

@@ -9,18 +9,23 @@ import { registerBlockType } from '@wordpress/blocks';
 import sharedConfig from '../shared/config';
 import attributes from './attributes';
 import edit from './edit';
+import { supports } from './supports';
 import {
 	BLOCK_TITLE as title,
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig = {
+	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },
 	attributes,
+	supports,
 	edit,
+	save: Save,
 };
 
 registerBlockType( 'woocommerce/product-summary', {

assets/js/atomic/blocks/product-elements/summary/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

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

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: false,
+			link: false,
+		},
+	} ),
+	typography: {
+		fontSize: true,
+	},
+};

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

@@ -20,6 +20,7 @@ import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import { Attributes } from './types';
+import './editor.scss';
 
 interface Props {
 	attributes: Attributes;

assets/js/atomic/blocks/product-elements/title/editor.scss

@@ -0,0 +1,3 @@
+.editor-styles-wrapper a.wc-block-components-product-name {
+	color: inherit;
+}

assets/js/atomic/blocks/product-elements/title/index.ts

@@ -28,6 +28,7 @@ const blockConfig: BlockConfiguration = {
 	edit,
 	save: Save,
 	supports: {
+		...sharedConfig.supports,
 		...( isFeaturePluginBuild() && {
 			typography: {
 				fontSize: true,
@@ -36,23 +37,20 @@ const blockConfig: BlockConfiguration = {
 				__experimentalTextTransform: true,
 				__experimentalFontFamily: true,
 			},
-		} ),
-		...( isFeaturePluginBuild() && {
 			color: {
 				text: true,
 				background: true,
 				link: false,
 				gradients: true,
 				__experimentalSkipSerialization: true,
 			},
-		} ),
-		...( isFeaturePluginBuild() &&
-			hasSpacingStyleSupport() && {
+			...( hasSpacingStyleSupport() && {
 				spacing: {
 					margin: true,
 					__experimentalSkipSerialization: true,
 				},
 			} ),
+		} ),
 	},
 };
 

assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -1,4 +1,5 @@
 .wc-block-components-shipping-rates-control__package {
+
 	.wc-block-components-panel__button {
 		margin-bottom: 0;
 		margin-top: 0;
@@ -41,3 +42,13 @@
 	content: ", ";
 	white-space: pre;
 }
+
+// Target the shipping selection in checkout only, the Cart block has enough spacing because of the buttons on the panel.
+.wc-block-checkout .wc-block-components-shipping-rates-control__package {
+	margin-bottom: em($gap-large);
+
+	&:last-of-type {
+		margin-bottom: 0;
+	}
+
+}