Merge branch 'trunk' into 11166/schedule-action-on-update

assets/css/abstracts/_variables.scss

@@ -8,3 +8,6 @@ $gap:          2 * $grid-unit;		// 16px
 $gap-small:    1.5 * $grid-unit;	// 12px
 $gap-smaller:  1 * $grid-unit;		// 8px
 $gap-smallest: 0.5 * $grid-unit;	// 4px
+
+// Standard border radius for forms.
+$universal-border-radius: 4px;

assets/css/style.scss

@@ -146,7 +146,7 @@
 	display: inline-block;
 	width: auto;
 	border: 1px solid #43454b;
-	border-radius: 3px;
+	border-radius: $universal-border-radius;
 	color: #43454b;
 	background: #fff;
 	text-align: center;

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

@@ -25,7 +25,7 @@
 		padding: 0.618em;
 		background: $white;
 		border: 1px solid #ccc;
-		border-radius: 2px;
+		border-radius: $universal-border-radius;
 		color: #43454b;
 		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
 		text-align: center;

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

@@ -12,7 +12,7 @@
 			display: inline-block;
 			position: relative;
 			z-index: 0;
-			border-radius: 4px 4px 0 0;
+			border-radius: $universal-border-radius $universal-border-radius 0 0;
 			margin: 0;
 			padding: 0.5em 1em;
 

assets/js/atomic/blocks/product-elements/sale-badge/style.scss

@@ -9,7 +9,7 @@
 	display: inline-block;
 	width: fit-content;
 	border: 1px solid #43454b;
-	border-radius: 3px;
+	border-radius: $universal-border-radius;
 	box-sizing: border-box;
 	color: #43454b;
 	background: #fff;

assets/js/base/components/cart-checkout/product-badge/style.scss

@@ -1,6 +1,6 @@
 .wc-block-components-product-badge {
 	@include font-size(smaller);
-	border-radius: 2px;
+	border-radius: $universal-border-radius;
 	border: 1px solid;
 	display: inline-block;
 	font-weight: 600;

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

@@ -34,7 +34,7 @@
 			white-space: nowrap;
 			width: 100%;
 			opacity: initial;
-			border-radius: 4px;
+			border-radius: $universal-border-radius;
 
 			&[aria-expanded="true"],
 			&:focus {
@@ -73,6 +73,8 @@
 			min-width: 100%;
 			overflow: auto;
 			color: $input-text-active;
+			border-bottom-left-radius: $universal-border-radius;
+			border-bottom-right-radius: $universal-border-radius;
 
 			.has-dark-controls & {
 				background-color: $select-dropdown-dark;

assets/js/base/components/notice-banner/style.scss

@@ -6,7 +6,7 @@
 	padding: $gap !important;
 	gap: $gap-small;
 	margin: $gap 0;
-	border-radius: 4px;
+	border-radius: $universal-border-radius;
 	border-color: $gray-800;
 	font-weight: 400;
 	line-height: 1.5;

assets/js/base/components/quantity-selector/style.scss

@@ -12,7 +12,7 @@
 }
 
 .wc-block-components-quantity-selector {
-	border-radius: 4px;
+	border-radius: $universal-border-radius;
 	// needed so that buttons fill the container.
 	box-sizing: content-box;
 	display: flex;
@@ -21,7 +21,7 @@
 	width: 107px;
 
 	&::after {
-		border-radius: 4px;
+		border-radius: $universal-border-radius;
 		border: 1px solid currentColor;
 		bottom: 0;
 		content: "";
@@ -89,12 +89,12 @@
 	}
 
 	> .wc-block-components-quantity-selector__button--minus {
-		border-radius: 4px 0 0 4px;
+		border-radius: $universal-border-radius 0 0 $universal-border-radius;
 		order: 1;
 	}
 
 	> .wc-block-components-quantity-selector__button--plus {
-		border-radius: 0 4px 4px 0;
+		border-radius: 0 $universal-border-radius $universal-border-radius 0;
 		order: 3;
 	}
 }

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

@@ -73,6 +73,11 @@
 		margin: inherit;
 		cursor: pointer;
 
+		&:focus {
+			outline: 2px solid $input-border-gray;
+			outline-offset: 2px;
+		}
+
 		&:checked::before {
 			background: #000;
 			border-radius: 50%;

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

@@ -11,7 +11,7 @@
 	width: 100%;
 	position: relative;
 	background: $universal-border-light;
-	border-radius: 2px;
+	border-radius: $universal-border-radius;
 
 	&:last-child {
 		width: 80%;

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

@@ -2,7 +2,7 @@
 	@include font-size(regular);
 	background-color: #fff;
 	border: 1px solid $input-border-gray;
-	border-radius: 4px;
+	border-radius: $universal-border-radius;
 	color: $input-text-active;
 	font-family: inherit;
 	line-height: 1.375; // =22px when font-size is 16px.

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

@@ -1,5 +1,4 @@
 $border-width: 1px;
-$border-radius: 5px;
 
 .wc-block-components-express-payment {
 	margin: auto;
@@ -26,7 +25,7 @@ $border-radius: 5px;
 
 .wc-block-components-express-payment--checkout {
 	/* stylelint-disable-next-line function-calc-no-unspaced-operator */
-	margin-top: calc($border-radius * 3);
+	margin-top: calc($universal-border-radius * 3);
 
 	.wc-block-components-express-payment__event-buttons {
 		list-style: none;
@@ -45,17 +44,17 @@ $border-radius: 5px;
 		left: 0;
 		position: absolute;
 		right: 0;
-		top: -$border-radius;
+		top: -$universal-border-radius;
 		vertical-align: middle;
 
 		// Pseudo-elements used to show the border before and after the title.
 		&::before {
 			border-left: $border-width solid currentColor;
 			border-top: $border-width solid currentColor;
-			border-radius: $border-radius 0 0 0;
+			border-radius: $universal-border-radius 0 0 0;
 			content: "";
 			display: block;
-			height: $border-radius - $border-width;
+			height: $universal-border-radius - $border-width;
 			margin-right: $gap-small;
 			opacity: 0.3;
 			pointer-events: none;
@@ -65,10 +64,10 @@ $border-radius: 5px;
 		&::after {
 			border-right: $border-width solid currentColor;
 			border-top: $border-width solid currentColor;
-			border-radius: 0 $border-radius 0 0;
+			border-radius: 0 $universal-border-radius 0 0;
 			content: "";
 			display: block;
-			height: $border-radius - $border-width;
+			height: $universal-border-radius - $border-width;
 			margin-left: $gap-small;
 			opacity: 0.3;
 			pointer-events: none;
@@ -83,10 +82,10 @@ $border-radius: 5px;
 
 	.wc-block-components-express-payment__content {
 		@include with-translucent-border(0 $border-width $border-width);
-		padding: #{$gap-large - $border-radius} $gap-large $gap-large;
+		padding: #{$gap-large - $universal-border-radius} $gap-large $gap-large;
 
 		&::after {
-			border-radius: 0 0 $border-radius $border-radius;
+			border-radius: 0 0 $universal-border-radius $universal-border-radius;
 		}
 
 		> p {

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

@@ -39,7 +39,7 @@
 		line-height: 1.375; // =22px when font-size is 16px.
 		background-color: #fff;
 		padding: em($gap-small) 0 em($gap-small) $gap;
-		border-radius: 4px;
+		border-radius: $universal-border-radius;
 		border: 1px solid $input-border-gray;
 		width: 100%;
 		font-family: inherit;
@@ -201,6 +201,16 @@
 		@include with-translucent-border(1px 1px 0 1px);
 	}
 
+	.wc-block-components-radio-control-accordion-option:first-child::after {
+		border-top-left-radius: $universal-border-radius;
+		border-top-right-radius: $universal-border-radius;
+	}
+
+	.wc-block-components-radio-control-accordion-option:last-child::after {
+		border-bottom-left-radius: $universal-border-radius;
+		border-bottom-right-radius: $universal-border-radius;
+	}
+
 	.wc-block-components-radio-control__option:last-child::after,
 	.wc-block-components-radio-control-accordion-option:last-child::after {
 		border-width: 1px;

assets/js/blocks/checkout/address-card/style.scss

@@ -3,7 +3,7 @@
 	@include font-size(regular);
 	padding: $gap;
 	margin: 0;
-	border-radius: 4px;
+	border-radius: $universal-border-radius;
 	display: flex;
 	justify-content: flex-start;
 	align-items: flex-start;

assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss

@@ -15,6 +15,13 @@
 
 .wc-block-checkout__add-note .wc-block-components-textarea {
 	margin-top: $gap;
+
+	&:focus {
+		background-color: #fff;
+		color: $input-text-active;
+		outline: 0;
+		box-shadow: 0 0 0 1px $input-border-gray;
+	}
 }
 
 .wc-block-components-form .wc-block-checkout__order-notes.wc-block-components-checkout-step {

assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss

@@ -42,7 +42,7 @@
 		width: 100%;
 		box-sizing: border-box;
 		background-color: $gray-100;
-		border-radius: 4px;
+		border-radius: $universal-border-radius;
 		padding: 1px em($gap-small);
 		margin-top: em($gap-smaller);
 		@include font-size(regular);

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

@@ -22,7 +22,7 @@
 	border: none;
 	box-shadow: none !important;
 	outline: 1px solid currentColor;
-	border-radius: 0 !important;
+	border-radius: $universal-border-radius;
 	&.components-button:hover:not(:disabled),
 	&.components-button:focus:not(:disabled),
 	&:focus,

assets/js/blocks/classic-shortcode/editor.scss

@@ -21,7 +21,7 @@
 	border: 1px solid $gray-900;
 	background-color: #fff;
 	padding: $gap-large $gap-larger;
-	border-radius: 3px;
+	border-radius: $universal-border-radius;
 	display: flex;
 	flex-direction: column;
 	max-width: 900px;

assets/js/blocks/classic-template/editor.scss

@@ -21,7 +21,7 @@
 	border: 1px solid $gray-900;
 	background-color: #fff;
 	padding: $gap-large $gap-larger;
-	border-radius: 3px;
+	border-radius: $universal-border-radius;
 	display: flex;
 	flex-direction: column;
 	max-width: 900px;

assets/js/blocks/collection-filters/inner-blocks/price-filter/block.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"name": "woocommerce/collection-price-filter",
+	"version": "1.0.0",
+	"title": "Collection Price Filter",
+	"description": "Enable customers to filter the product collection by choosing a price range.",
+	"category": "woocommerce",
+	"keywords": [
+		"WooCommerce"
+	],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"viewScript": [
+		"wc-collection-price-filter-block-frontend"
+	],
+	"ancestor": [
+		"woocommerce/product-collection"
+	],
+	"supports": {
+		"interactivity": true
+	},
+	"attributes": {
+		"showInputFields": {
+			"type": "boolean",
+			"default": true
+		},
+		"inlineInput": {
+			"type": "boolean",
+			"default": false
+		}
+	}
+}

assets/js/blocks/collection-filters/inner-blocks/price-filter/edit.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { useCollectionData } from '@woocommerce/base-context/hooks';
+import { Disabled } from '@wordpress/components';
+import FilterResetButton from '@woocommerce/base-components/filter-reset-button';
+
+/**
+ * Internal dependencies
+ */
+import { getFormattedPrice } from './utils';
+import { EditProps } from './types';
+import { PriceSlider } from './price-slider';
+
+const Edit = ( props: EditProps ) => {
+	const blockProps = useBlockProps();
+	const { results } = useCollectionData( {
+		queryPrices: true,
+		isEditor: true,
+		queryState: {},
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Disabled>
+				<div className="controls">
+					<PriceSlider
+						{ ...props }
+						collectionData={ getFormattedPrice( results ) }
+					/>
+				</div>
+				<div className="actions">
+					<FilterResetButton onClick={ () => false } />
+				</div>
+			</Disabled>
+		</div>
+	);
+};
+
+export default Edit;