Merge remote-tracking branch 'origin' into fix_product_cat_list_display

.github/workflows/php-js-e2e-tests.yml

@@ -121,6 +121,13 @@ jobs:
                   npm run wp-env clean all
                   npm run test:e2e
 
+            - name: Upload artifacts on failure
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v2
+              with:
+                name: e2e-with-gutenberg-test-report
+                path: reports/e2e
+
     JSE2ETests:
         name: JavaScript E2E Tests (latest)
         needs: Setup
@@ -182,3 +189,10 @@ jobs:
                   npm run wp-env start
                   npm run wp-env clean all
                   npm run test:e2e
+                
+            - name: Upload artifacts on failure
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v2
+              with:
+                name: e2e-test-report
+                path: reports/e2e

.gitignore

@@ -38,6 +38,7 @@ tests/cli/vendor
 /tmp
 /tests/bin/tmp
 /tests/e2e-tests/config/local-*.json
+/reports
 
 # Logs
 /logs

assets/css/abstracts/_breakpoints.scss

@@ -10,9 +10,9 @@ $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
 
 // @todo refactor breakpoints so they use the mixins from Gutenberg
 // https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
-@mixin breakpoint( $sizes... ) {
+@mixin breakpoint($sizes...) {
 	@each $size in $sizes {
-		@if type-of( $size ) == string {
+		@if type-of($size) == string {
 			$approved-value: 0;
 			@each $breakpoint in $breakpoints {
 				$and-larger: ">" + $breakpoint;
@@ -49,15 +49,15 @@ $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
 				@each $breakpoint in $breakpoints {
 					$sizes: $sizes + " " + $breakpoint;
 				}
-				@warn "ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
+				@warn "ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
 			}
 		}
 		@else {
 			$sizes: "";
 			@each $breakpoint in $breakpoints {
 				$sizes: $sizes + " " + $breakpoint;
 			}
-			@error "ERROR in breakpoint( #{ $size } ) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
+			@error "ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
 		}
 	}
 }

assets/js/atomic/blocks/product-elements/category-list/attributes.js → assets/js/atomic/blocks/product-elements/category-list/attributes.ts

@@ -1,4 +1,4 @@
-export const blockAttributes = {
+export const blockAttributes: Record< string, Record< string, unknown > > = {
 	productId: {
 		type: 'number',
 		default: 0,

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

@@ -2,19 +2,22 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
 import { isEmpty } from 'lodash';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { HTMLAttributes } from 'react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import { Attributes } from './types';
+
+type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 
 /**
  * Product Category Block Component.
@@ -23,7 +26,7 @@ import './style.scss';
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( { className } ) => {
+const Block = ( { className }: Props ): JSX.Element | null => {
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
@@ -57,8 +60,4 @@ const Block = ( { className } ) => {
 	);
 };
 
-Block.propTypes = {
-	className: PropTypes.string,
-};
-
 export default withProductDataContext( Block );

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

@@ -4,12 +4,12 @@
 import { __ } from '@wordpress/i18n';
 import { folder, Icon } from '@woocommerce/icons';
 
-export const BLOCK_TITLE = __(
+export const BLOCK_TITLE: string = __(
 	'Product Category List',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ folder } />;
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_ICON: JSX.Element = <Icon srcElement={ folder } />;
+export const BLOCK_DESCRIPTION: string = __(
 	'Display a list of categories belonging to a product.',
 	'woo-gutenberg-products-block'
 );

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

@@ -11,8 +11,13 @@ import EditProductLink from '@woocommerce/editor-components/edit-product-link';
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import { Attributes } from './types';
 
-const Edit = ( { attributes } ) => {
+interface Props {
+	attributes: Attributes;
+}
+
+const Edit = ( { attributes }: Props ): JSX.Element => {
 	return (
 		<>
 			<EditProductLink />

assets/js/atomic/blocks/product-elements/category-list/index.js → assets/js/atomic/blocks/product-elements/category-list/index.ts

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { BlockConfiguration } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import sharedConfig from '../shared/config';
+import sharedConfig from './../shared/config';
 import attributes from './attributes';
 import edit from './edit';
 import {
@@ -15,7 +16,8 @@ import {
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
-const blockConfig = {
+const blockConfig: BlockConfiguration = {
+	...sharedConfig,
 	title,
 	description,
 	icon: {
@@ -26,7 +28,7 @@ const blockConfig = {
 	edit,
 };
 
-registerExperimentalBlockType( 'woocommerce/product-category-list', {
-	...sharedConfig,
-	...blockConfig,
-} );
+registerExperimentalBlockType(
+	'woocommerce/product-category-list',
+	blockConfig
+);

assets/js/atomic/blocks/product-elements/category-list/types.ts

@@ -0,0 +1,3 @@
+export interface Attributes {
+	productId: number;
+}

assets/js/atomic/blocks/product-elements/shared/config.js → assets/js/atomic/blocks/product-elements/shared/config.tsx

@@ -4,15 +4,17 @@
 import { __ } from '@wordpress/i18n';
 import { Icon, grid } from '@woocommerce/icons';
 import { isExperimentalBuild } from '@woocommerce/block-settings';
+import type { BlockConfiguration } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
 import save from '../save';
 
 /**
  * Holds default config for this collection of blocks.
+ * attributes and title are omitted here as these are added on an individual block level.
  */
-export default {
+const sharedConfig: Omit< BlockConfiguration, 'attributes' | 'title' > = {
 	category: 'woocommerce-product-elements',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	icon: {
@@ -23,12 +25,17 @@ export default {
 		html: false,
 	},
 	parent: isExperimentalBuild()
-		? null
+		? undefined
 		: [ '@woocommerce/all-products', '@woocommerce/single-product' ],
 	save,
 	deprecated: [
 		{
-			save() {},
+			attributes: {},
+			save(): null {
+				return null;
+			},
 		},
 	],
 };
+
+export default sharedConfig;

assets/js/base/components/cart-checkout/order-summary/style.scss

@@ -88,7 +88,7 @@
 	p,
 	.wc-block-components-product-metadata {
 		line-height: 1.375;
-		margin-top: #{ ( $gap-large - $gap ) * 0.5 };
+		margin-top: #{ ($gap-large - $gap) * 0.5 };
 	}
 }
 

assets/js/base/components/pagination/style.scss

@@ -15,7 +15,7 @@
 	padding: 0.3em 0.6em;
 	min-width: 2.2em;
 
-	@include breakpoint( "<782px" ) {
+	@include breakpoint("<782px") {
 		padding: 0.1em 0.2em;
 		min-width: 1.6em;
 	}
@@ -32,7 +32,7 @@
 .wc-block-components-pagination__ellipsis {
 	padding: 0.3em;
 
-	@include breakpoint( "<782px" ) {
+	@include breakpoint("<782px") {
 		padding: 0.1em;
 	}
 }

assets/js/base/components/product-list/style.scss

@@ -100,7 +100,7 @@
 	}
 }
 
-@include breakpoint( "<480px" ) {
+@include breakpoint("<480px") {
 	.wc-block-grid {
 		@for $i from 2 to 9 {
 			&.has-#{$i}-columns {
@@ -119,7 +119,7 @@
 	}
 }
 
-@include breakpoint( "480px-600px" ) {
+@include breakpoint("480px-600px") {
 	.wc-block-grid {
 		@for $i from 2 to 9 {
 			&.has-#{$i}-columns {

assets/js/base/components/radio-control/style.scss

@@ -49,7 +49,7 @@
 
 .wc-block-components-radio-control__description,
 .wc-block-components-radio-control__secondary-description {
-	@include font-size( small );
+	@include font-size(small);
 	line-height: 20px;
 }
 

assets/js/base/context/providers/store-snackbar-notices/components/style.scss

@@ -4,15 +4,15 @@
 	left: 16px;
 	width: auto;
 
-	@include breakpoint( "<782px" ) {
+	@include breakpoint("<782px") {
 		position: fixed;
 		top: 10px;
 		left: 0;
 		bottom: auto;
 	}
 
 	.components-snackbar-list__notice-container {
-		@include breakpoint( "<782px" ) {
+		@include breakpoint("<782px") {
 			margin-left: 10px;
 			margin-right: 10px;
 		}

assets/js/blocks/cart-checkout/cart-i2/checkout-button/style.scss

@@ -25,13 +25,13 @@
 	}
 }
 
-@include breakpoint( ">782px" ) {
+@include breakpoint(">782px") {
 	.wc-block-cart__submit-container--sticky {
 		display: none;
 	}
 }
 
-@include breakpoint( "<782px" ) {
+@include breakpoint("<782px") {
 	.wc-block-cart__submit-container--sticky {
 		background: $white;
 		bottom: 0;

assets/js/blocks/cart-checkout/cart/checkout-button/style.scss

@@ -25,13 +25,13 @@
 	}
 }
 
-@include breakpoint( ">782px" ) {
+@include breakpoint(">782px") {
 	.wc-block-cart__submit-container--sticky {
 		display: none;
 	}
 }
 
-@include breakpoint( "<782px" ) {
+@include breakpoint("<782px") {
 	.wc-block-cart__submit-container--sticky {
 		background: $white;
 		bottom: 0;

assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-shipping-methods-block/style.scss

@@ -1,6 +1,6 @@
 .wc-block-checkout__shipping-option {
 	.wc-block-components-radio-control__option {
-		@include with-translucent-border( 0 0 1px );
+		@include with-translucent-border(0 0 1px);
 		margin: 0;
 		padding: em($gap-small) 0 em($gap-small) em($gap-largest);
 	}

assets/js/blocks/cart-checkout/payment-methods/style.scss

@@ -31,7 +31,7 @@
 		// Notice the min width ems value is smaller than flex-basis. That's because
 		// by default we want it to have the same width as `expiry-element`, but
 		// if available space is scarce, `cvc-element` should get smaller faster.
-		min-width: unquote("min( 5em, calc(16% - #{$gap-small}))");
+		min-width: unquote("min(5em, calc(16% - #{$gap-small}))");
 	}
 
 	.wc-block-gateway-input {