Merge branch 'trunk' into add/trigger-billing-event-on-shippin

.github/patch-initial-checklist.md

@@ -43,9 +43,8 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
     -   If some PRs are not testing as expected but they are not blockers: revert the relevant commits, remove the changes from testing steps and changelog, open an issue (or reopen the original one) and proceed with the release.
     -   If minor issues are discovered during the testing, each team is responsible for logging them in Github.
 
-## Update Pull Request description and get approvals
+## Push the button - Deploy
 
--   [ ] Go through the description of the release pull request and edit it to update all the sections and checklist instructions there.
 -   [ ] Execute `npm run deploy`
     -   **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.
 
@@ -111,3 +110,4 @@ You only need to post public release announcements and update relevant public fa
     -   Ensure the release notes are included in the post verbatim.
     -   Don't forget to use category `WooCommerce Blocks Release Notes` for the post.
 -   [ ] Announce the release internally (`#woo-announcements` slack).
+-   [ ] Go through the description of the release pull request and edit it to update all the sections and checklist instructions there.

.github/release-initial-checklist.md

@@ -49,10 +49,6 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
     -   If some PRs are not testing as expected but they are not blockers: revert the relevant commits, remove the changes from testing steps and changelog, open an issue (or reopen the original one) and proceed with the release.
     -   If minor issues are discovered during the testing, each team is responsible for logging them in Github.
 
-## Update Pull Request description and get approvals
-
--   [ ] Go through the description of the release pull request and edit it to update all the sections and checklist instructions there.
-
 ## Ensure hub is set up and you're authenticated
 
 -   [ ] Make sure you've got `hub` installed (`brew install hub`)
@@ -140,3 +136,4 @@ This only needs to be done if this release is the last release of the feature pl
 -   [ ] Update minimum supported versions (WordPress, WooCommerce Core) and other requirements where necessary, including:
     -   [WCCOM product page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/)
     -   [WooCommerce blocks main documentation page](https://docs.woocommerce.com/document/woocommerce-blocks/)
+-   [ ] Go through the description of the release pull request and edit it to update all the sections and checklist instructions there.

.nvmrc

@@ -1 +1 @@
-16.13.2
+16.15.0

assets/js/atomic/blocks/index.js

@@ -14,5 +14,6 @@ import './product-elements/add-to-cart';
 import './product-elements/add-to-cart-form';
 import './product-elements/product-image-gallery';
 import './product-elements/product-details';
+import './product-elements/product-reviews';
 import './product-elements/related-products';
 import './product-elements/product-meta';

assets/js/atomic/blocks/product-elements/button/attributes.ts

@@ -16,6 +16,9 @@ export const blockAttributes: BlockAttributes = {
 		type: 'string',
 		default: '',
 	},
+	width: {
+		type: 'number',
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/button/constants.tsx

@@ -15,3 +15,5 @@ export const BLOCK_DESCRIPTION: string = __(
 	'Display a call to action button which either adds the product to the cart, or links to the product page.',
 	'woo-gutenberg-products-block'
 );
+
+export const BLOCK_NAME = 'woocommerce/product-button';

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

@@ -1,11 +1,19 @@
 /**
  * External dependencies
  */
-import { Disabled } from '@wordpress/components';
+import classnames from 'classnames';
+import {
+	Disabled,
+	Button,
+	ButtonGroup,
+	PanelBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import {
 	AlignmentToolbar,
 	BlockControls,
 	useBlockProps,
+	InspectorControls,
 } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
@@ -17,6 +25,52 @@ import { ProductQueryContext as Context } from '@woocommerce/blocks/product-quer
 import Block from './block';
 import { BlockAttributes } from './types';
 
+function WidthPanel( {
+	selectedWidth,
+	setAttributes,
+}: {
+	selectedWidth: number | undefined;
+	setAttributes: ( attributes: BlockAttributes ) => void;
+} ) {
+	function handleChange( newWidth: number ) {
+		// Check if we are toggling the width off
+		const width = selectedWidth === newWidth ? undefined : newWidth;
+
+		// Update attributes.
+		setAttributes( { width } );
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Width settings', 'woo-gutenberg-products-block' ) }
+		>
+			<ButtonGroup
+				aria-label={ __(
+					'Button width',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+					return (
+						<Button
+							key={ widthValue }
+							isSmall
+							variant={
+								widthValue === selectedWidth
+									? 'primary'
+									: undefined
+							}
+							onClick={ () => handleChange( widthValue ) }
+						>
+							{ widthValue }%
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
+		</PanelBody>
+	);
+}
+
 const Edit = ( {
 	attributes,
 	setAttributes,
@@ -26,6 +80,7 @@ const Edit = ( {
 } ): JSX.Element => {
 	const blockProps = useBlockProps();
 	const isDescendentOfQueryLoop = Number.isFinite( context?.queryId );
+	const { width } = attributes;
 
 	useEffect(
 		() => setAttributes( { isDescendentOfQueryLoop } ),
@@ -43,9 +98,21 @@ const Edit = ( {
 					/>
 				) }
 			</BlockControls>
+			<InspectorControls>
+				<WidthPanel
+					selectedWidth={ width }
+					setAttributes={ setAttributes }
+				/>
+			</InspectorControls>
 			<div { ...blockProps }>
 				<Disabled>
-					<Block { ...{ ...attributes, ...context } } />
+					<Block
+						{ ...{ ...attributes, ...context } }
+						className={ classnames( attributes.className, {
+							[ `has-custom-width wp-block-button__width-${ width }` ]:
+								width,
+						} ) }
+					/>
 				</Disabled>
 			</div>
 		</>

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

@@ -3,6 +3,7 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 import type { BlockConfiguration } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,10 +12,12 @@ import { supports } from './supports';
 import attributes from './attributes';
 import sharedConfig from '../shared/config';
 import edit from './edit';
+import save from './save';
 import {
 	BLOCK_TITLE as title,
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
+	BLOCK_NAME,
 } from './constants';
 
 const blockConfig: BlockConfiguration = {
@@ -32,6 +35,18 @@ const blockConfig: BlockConfiguration = {
 	attributes,
 	supports,
 	edit,
+	save,
+	styles: [
+		{
+			name: 'fill',
+			label: __( 'Fill', 'woo-gutenberg-products-block' ),
+			isDefault: true,
+		},
+		{
+			name: 'outline',
+			label: __( 'Outline', 'woo-gutenberg-products-block' ),
+		},
+	],
 };
 
-registerBlockType( 'woocommerce/product-button', { ...blockConfig } );
+registerBlockType( BLOCK_NAME, { ...blockConfig } );

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { BlockAttributes } from './types';
+
+type Props = {
+	attributes: BlockAttributes;
+};
+
+const Save = ( { attributes }: Props ): JSX.Element | null => {
+	if ( attributes.isDescendentOfQueryLoop ) {
+		return null;
+	}
+
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className, {
+					[ `has-custom-width wp-block-button__width-${ attributes.width }` ]:
+						attributes.width,
+				} ),
+			} ) }
+		/>
+	);
+};
+
+export default Save;

assets/js/atomic/blocks/product-elements/button/style.scss

@@ -40,3 +40,35 @@
 	}
 }
 
+// Style: Fill & Outline
+.wp-block-button.is-style-outline {
+	.wp-block-button__link {
+		border: 2px solid currentColor;
+
+		&:not(.has-text-color) {
+			color: currentColor;
+		}
+
+		&:not(.has-background) {
+			background-color: transparent;
+			background-image: none;
+		}
+	}
+}
+
+// Width setting
+.wp-block-button {
+	&.has-custom-width {
+		.wp-block-button__link {
+			box-sizing: border-box;
+		}
+	}
+
+	@for $i from 1 through 4 {
+		&.wp-block-button__width-#{$i * 25} {
+			.wp-block-button__link {
+				width: $i * 25%; // 25%, 50%, 75%, 100%
+			}
+		}
+	}
+}

assets/js/atomic/blocks/product-elements/button/supports.ts

@@ -26,8 +26,16 @@ export const supports = {
 		} ),
 		typography: {
 			fontSize: true,
+			lineHeight: true,
 			__experimentalFontWeight: true,
-			__experimentalSkipSerialization: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
 		},
 		__experimentalSelector:
 			'.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button',

assets/js/atomic/blocks/product-elements/button/types.ts

@@ -10,6 +10,7 @@ export interface BlockAttributes {
 	className?: string | undefined;
 	textAlign?: string | undefined;
 	isDescendentOfQueryLoop?: boolean | undefined;
+	width?: number | undefined;
 }
 
 export interface AddToCartButtonPlaceholderAttributes {

assets/js/atomic/blocks/product-elements/image/supports.ts

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
+import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -20,9 +20,10 @@ export const supports = {
 			fontSize: true,
 			__experimentalSkipSerialization: true,
 		},
-		...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
+		...( typeof getSpacingClassesAndStyles === 'function' && {
 			spacing: {
 				margin: true,
+				padding: true,
 				__experimentalSkipSerialization: true,
 			},
 		} ),

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

@@ -9,7 +9,6 @@
 		"align": true,
 		"multiple": false
 	},
-	"attributes": {},
 	"keywords": [ "WooCommerce" ],
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"textdomain": "woo-gutenberg-products-block",

assets/js/atomic/blocks/product-elements/product-reviews/block.json

@@ -0,0 +1,15 @@
+{
+	"name": "woocommerce/product-reviews",
+	"version": "1.0.0",
+	"icon": "admin-comments",
+	"title": "Product Reviews",
+	"description": "A block that shows the reviews for a product.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {},
+	"attributes": {},
+	"usesContext": [ "postId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}