Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Release: 8.3.1 (https://github.com/woocommerce/woocommerce-blocks/pull/6910) 

* Add global styles to Product Categories List block in WC core (https://github.com/woocommerce/woocommerce-blocks/pull/6906)

* add side effect to package (https://github.com/woocommerce/woocommerce-blocks/pull/6904)

* Add _blank to terms link (https://github.com/woocommerce/woocommerce-blocks/pull/6908)

* Only show items if there are multiple packages in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/6899)

* Price Filter Block Design update (https://github.com/woocommerce/woocommerce-blocks/pull/6877)

* make toggle control full width

* add inlineInput attribute

* add inlineInput sidebar setting

* add inlineInput help text

* style the filter button

* style price input

* wip: reset button

* clicking on reset button will reset the price query

* support inline input fields

* price text styling update

* fix reset button font size

* add loading placeholder to all elements

* fix filter button style

* update range slider thumb and track style

* fix loading placeholder for non empty query

* move reset button into FilterSubmitButton component

* try: render placeholder serverside

* update filter button label

* Revert "try: render placeholder serverside"

This reverts commit 98f08efdb8048b8f78c7476b774d1128c1d31295.

* remove LoadingPlaceholder component

* remove Price: prefix from the current displayed price range

* update labels

* extract reset button as a dedicated component

* update price text section

* update reset button behavior

* avoid breaking filter submit button style for other filter blocks

* rename block to Filter by Price

* fix e2e test

* remove border support

* adjust padding for elments

* rename panel title

* Make the inline option enabled by default and fix frontend rendering

* Make the `Price Range Selector` uppercase

* Show `Reset` button only when a selection has been made

* Revert the `save` change to avoid the 'Block Recovery Prompt'

Co-authored-by: Alba Rincón <alba.rincon@automattic.com>

* Release: 8.3.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6897)

* Empty commit for release pull request

* Bump version numbers and add changelog

* Add testing notes

* Add global styles to Product Categories List block in WC core

* add side effect to package

* Update testing instructions

* Empty commit

* Fix linting

* Update zip file with latest changes

* Fix linting

* Update changelog entries

* Bumping version strings to new version.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Update version to 8.4.0-dev

* Empty commit for release pull request

* Add change log

* Add testing instructions

* Fix the version number in testing instructions

* Bumping version strings to new version.

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
This commit is contained in:
github-actions[bot] 2022-08-17 17:32:49 +05:30 committed by GitHub
parent c89bf80181
commit d827e8176e
29 changed files with 364 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
View File

@ -65,9 +65,7 @@ const Packages = ( {
packageData={ packageData }
collapsible={ !! collapsible }
collapse={ !! collapse }
showItems={
showItems || packageData?.shipping_rates?.length > 1
}
showItems={ showItems || packages.length > 1 }
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
/>

40
plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/index.tsx Normal file
View File

@ -0,0 +1,40 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import Label from '@woocommerce/base-components/label';
/**
* Internal dependencies
*/
import './style.scss';
interface FilterResetButtonProps {
className?: string;
label?: string;
onClick: () => void;
screenReaderLabel?: string;
}
const FilterResetButton = ( {
className,
/* translators: Reset button text for filters. */
label = __( 'Reset', 'woo-gutenberg-products-block' ),
onClick,
screenReaderLabel = __( 'Reset filter', 'woo-gutenberg-products-block' ),
}: FilterResetButtonProps ): JSX.Element => {
return (
<button
className={ classNames(
'wc-block-components-filter-reset-button',
className
) }
onClick={ onClick }
>
<Label label={ label } screenReaderLabel={ screenReaderLabel } />
</button>
);
};
export default FilterResetButton;

14
plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss Normal file
View File

@ -0,0 +1,14 @@
.wc-block-components-filter-reset-button {
background: transparent;
border: none;
cursor: pointer;
font-size: inherit;
&:not([disabled]):hover {
text-decoration: underline;
}
&[disabled] {
cursor: not-allowed;
}
}

3
plugins/woocommerce-blocks/assets/js/base/components/filter-submit-button/index.tsx
View File

@ -22,7 +22,7 @@ const FilterSubmitButton = ( {
className,
disabled,
/* translators: Submit button text for filters. */
label = __( 'Go', 'woo-gutenberg-products-block' ),
label = __( 'Apply', 'woo-gutenberg-products-block' ),
onClick,
screenReaderLabel = __( 'Apply filter', 'woo-gutenberg-products-block' ),
}: FilterSubmitButtonProps ): JSX.Element => {
@ -30,6 +30,7 @@ const FilterSubmitButton = ( {
<button
type="submit"
className={ classNames(
'wp-block-button__link',
'wc-block-filter-submit-button',
'wc-block-components-filter-submit-button',
className

1
plugins/woocommerce-blocks/assets/js/base/components/filter-submit-button/style.scss
View File

@ -1,4 +1,5 @@
.wc-block-components-filter-submit-button {
border: none;
display: block;
margin-left: auto;
white-space: nowrap;

263
plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.tsx
View File

@ -12,6 +12,7 @@ import {
import classnames from 'classnames';
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
import { Currency, isObject } from '@woocommerce/types';
import { useDebouncedCallback } from 'use-debounce';
/**
* Internal dependencies
@ -20,6 +21,7 @@ import './style.scss';
import { constrainRangeSliderValues } from './constrain-range-slider-values';
import FilterSubmitButton from '../filter-submit-button';
import { isValidMaxValue, isValidMinValue } from './utils';
import FilterResetButton from '../filter-reset-button';
export interface PriceSliderProps {
/**
@ -62,6 +64,10 @@ export interface PriceSliderProps {
* Whether to show input fields for the values or not.
*/
showInputFields?: boolean;
/**
* Whether to show input fields inline with the slider or not.
*/
inlineInput?: boolean;
/**
* What step values the slider uses.
*/
@ -78,6 +84,7 @@ const PriceSlider = ( {
currency,
showInputFields = true,
showFilterButton = false,
inlineInput = true,
isLoading = false,
onSubmit = () => void 0,
}: PriceSliderProps ): JSX.Element => {
@ -274,6 +281,8 @@ const PriceSlider = ( {
[ onChange, stepValue, minPriceInput, maxPriceInput ]
);
const debouncedUpdateQuery = useDebouncedCallback( onSubmit, 600 );
const classes = classnames(
'wc-block-price-filter',
'wc-block-components-price-slider',
@ -301,133 +310,149 @@ const PriceSlider = ( {
maxPriceInput / 10 ** currency.minorUnit
);
const slider = (
<div
className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
onMouseMove={ findClosestRange }
onFocus={ findClosestRange }
>
{ hasValidConstraints && (
<div aria-hidden={ showInputFields }>
<div
className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
style={ progressStyles as React.CSSProperties }
/>
<input
type="range"
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
aria-label={ __(
'Filter products by minimum price',
'woo-gutenberg-products-block'
) }
aria-valuetext={ ariaReadableMinPrice }
value={
Number.isFinite( minPrice )
? minPrice
: minConstraint
}
onChange={ rangeInputOnChange }
step={ minRangeStep }
min={ minConstraint }
max={ maxConstraint }
ref={ minRange }
disabled={ isLoading && ! hasValidConstraints }
tabIndex={ showInputFields ? -1 : 0 }
/>
<input
type="range"
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
aria-label={ __(
'Filter products by maximum price',
'woo-gutenberg-products-block'
) }
aria-valuetext={ ariaReadableMaxPrice }
value={
Number.isFinite( maxPrice )
? maxPrice
: maxConstraint
}
onChange={ rangeInputOnChange }
step={ maxRangeStep }
min={ minConstraint }
max={ maxConstraint }
ref={ maxRange }
disabled={ isLoading }
tabIndex={ showInputFields ? -1 : 0 }
/>
</div>
) }
</div>
);
return (
<div className={ classes }>
<div
className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
onMouseMove={ findClosestRange }
onFocus={ findClosestRange }
>
{ hasValidConstraints && (
<div aria-hidden={ showInputFields }>
<div
className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
style={ progressStyles as React.CSSProperties }
/>
<input
type="range"
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
aria-label={ __(
'Filter products by minimum price',
'woo-gutenberg-products-block'
) }
aria-valuetext={ ariaReadableMinPrice }
value={
Number.isFinite( minPrice )
? minPrice
: minConstraint
{ ( ! inlineInput || ! showInputFields ) && slider }
{ showInputFields && (
<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
<FormattedMonetaryAmount
currency={ currency }
displayType="input"
className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
aria-label={ __(
'Filter products by minimum price',
'woo-gutenberg-products-block'
) }
allowNegative={ false }
isAllowed={ isValidMinValue( {
minConstraint,
minorUnit: currency.minorUnit,
currentMaxValue: maxPriceInput,
} ) }
onValueChange={ ( value ) => {
if ( value === minPriceInput ) {
return;
}
onChange={ rangeInputOnChange }
step={ minRangeStep }
min={ minConstraint }
max={ maxConstraint }
ref={ minRange }
disabled={ isLoading }
tabIndex={ showInputFields ? -1 : 0 }
/>
<input
type="range"
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
aria-label={ __(
'Filter products by maximum price',
'woo-gutenberg-products-block'
) }
aria-valuetext={ ariaReadableMaxPrice }
value={
Number.isFinite( maxPrice )
? maxPrice
: maxConstraint
setMinPriceInput( value );
} }
onBlur={ priceInputOnBlur }
disabled={ isLoading || ! hasValidConstraints }
value={ minPriceInput }
/>
{ inlineInput && slider }
<FormattedMonetaryAmount
currency={ currency }
displayType="input"
className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
aria-label={ __(
'Filter products by maximum price',
'woo-gutenberg-products-block'
) }
isAllowed={ isValidMaxValue( {
maxConstraint,
minorUnit: currency.minorUnit,
} ) }
onValueChange={ ( value ) => {
if ( value === maxPriceInput ) {
return;
}
onChange={ rangeInputOnChange }
step={ maxRangeStep }
min={ minConstraint }
max={ maxConstraint }
ref={ maxRange }
disabled={ isLoading }
tabIndex={ showInputFields ? -1 : 0 }
setMaxPriceInput( value );
} }
onBlur={ priceInputOnBlur }
disabled={ isLoading || ! hasValidConstraints }
value={ maxPriceInput }
/>
</div>
) }
{ ! showInputFields &&
! isLoading &&
Number.isFinite( minPrice ) &&
Number.isFinite( maxPrice ) && (
<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
<FormattedMonetaryAmount
currency={ currency }
value={ minPrice }
/>
<FormattedMonetaryAmount
currency={ currency }
value={ maxPrice }
/>
</div>
) }
</div>
<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
{ showInputFields && (
<>
<FormattedMonetaryAmount
currency={ currency }
displayType="input"
className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
aria-label={ __(
'Filter products by minimum price',
'woo-gutenberg-products-block'
) }
allowNegative={ false }
isAllowed={ isValidMinValue( {
minConstraint,
minorUnit: currency.minorUnit,
currentMaxValue: maxPriceInput,
} ) }
onValueChange={ ( value ) => {
if ( value === minPriceInput ) {
return;
}
setMinPriceInput( value );
} }
onBlur={ priceInputOnBlur }
disabled={ isLoading || ! hasValidConstraints }
value={ minPriceInput }
/>
<FormattedMonetaryAmount
currency={ currency }
displayType="input"
className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
aria-label={ __(
'Filter products by maximum price',
'woo-gutenberg-products-block'
) }
isAllowed={ isValidMaxValue( {
maxConstraint,
minorUnit: currency.minorUnit,
} ) }
onValueChange={ ( value ) => {
if ( value === maxPriceInput ) {
return;
}
setMaxPriceInput( value );
} }
onBlur={ priceInputOnBlur }
disabled={ isLoading || ! hasValidConstraints }
value={ maxPriceInput }
/>
</>
<div className="wc-block-components-price-slider__actions">
{ ( minPrice !== minConstraint ||
maxPrice !== maxConstraint ) && (
<FilterResetButton
onClick={ () => {
onChange( [ minConstraint, maxConstraint ] );
debouncedUpdateQuery();
} }
screenReaderLabel={ __(
'Reset price filter',
'woo-gutenberg-products-block'
) }
/>
) }
{ ! showInputFields &&
! isLoading &&
Number.isFinite( minPrice ) &&
Number.isFinite( maxPrice ) && (
<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
{ __( 'Price', 'woo-gutenberg-products-block' ) }
: &nbsp;
<FormattedMonetaryAmount
currency={ currency }
value={ minPrice }
/>
&nbsp;&ndash;&nbsp;
<FormattedMonetaryAmount
currency={ currency }
value={ maxPrice }
/>
</div>
) }
{ showFilterButton && (
<FilterSubmitButton
className="wc-block-price-filter__button wc-block-components-price-slider__button"

88
plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
View File

@ -2,17 +2,18 @@
@mixin thumb {
background-color: transparent;
background-position: 0 0;
width: 28px;
height: 23px;
border: 0;
box-sizing: content-box;
width: 12px;
height: 12px;
border: 2px solid $gray-900;
border-radius: 100%;
padding: 0;
margin: 0;
vertical-align: top;
cursor: pointer;
z-index: 20;
pointer-events: auto;
background-image: url("data:image/svg+xml,%3Csvg width='56' height='46' viewBox='0 0 56 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M25.3176 9.9423L16.9013 3.7991C15.1953 2.5706 13.2618 1.9003 11.2146 2.0121H11.1009C6.21029 2.3471 2.11589 6.3681 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.9423V9.9423Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 9.94227L16.9013 3.79907C15.1953 2.57057 13.2618 1.90027 11.2146 2.01207H11.1009C6.21029 2.34707 2.11589 6.36807 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M13 30V39M10 30V39V30Z' stroke='%23757575'/%3E%3Cpath d='M30.6824 9.94227L39.0987 3.79907C40.8047 2.57057 42.7382 1.90027 44.7854 2.01207H44.8991C49.7897 2.34707 53.8841 6.36807 53.9978 11.2827C54.1115 16.644 49.7898 21 44.3304 21H44.2167C42.397 21 40.5772 20.3298 39.0987 19.213L30.6824 12.958C29.7725 12.0645 29.7725 10.7242 30.6824 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M43 6.99997V16M46 6.99997V16V6.99997Z' stroke='%23B8B8B8'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M43 30V39M46 30V39V30Z' stroke='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='56' height='46' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background: $white;
transition: transform .2s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
@ -23,8 +24,7 @@
}
}
@mixin thumbFocus {
background-position-y: -23px;
transform: scale(1.1);
background: $gray-900;
}
/* stylelint-enable */
@mixin track {
@ -52,24 +52,17 @@
.wc-block-components-price-slider {
margin-bottom: $gap-large;
&.wc-block-components-price-slider--has-filter-button {
.wc-block-components-price-slider__controls {
justify-content: flex-end;
.wc-block-components-price-slider__amount.wc-block-components-price-slider__amount--max {
margin-left: 0;
margin-right: 10px;
}
}
}
&.is-loading.is-disabled {
.wc-block-components-price-slider__range-input-wrapper,
.wc-block-components-price-slider__amount,
.wc-block-components-price-slider__button {
.wc-block-components-filter-reset-button,
.wc-block-components-filter-submit-button {
@include placeholder();
box-shadow: none;
}
.wc-block-components-price-slider__amount {
display: none;
}
}
&.is-disabled:not(.is-loading) {
@ -83,44 +76,63 @@
.wc-block-components-price-slider__range-input-wrapper {
@include reset;
height: 9px;
background: $gray-300;
border-radius: 4px;
clear: both;
position: relative;
box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
background: #e1e1e1;
flex-grow: 1;
height: 4px;
margin: 15px 0;
position: relative;
}
.wc-block-components-price-slider__range-input-progress {
height: 9px;
width: 100%;
position: absolute;
height: 4px;
left: 0;
position: absolute;
top: 0;
width: 100%;
--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
--range-color: #{$studio-woocommerce-purple-30};
--range-color: #{$gray-900};
/*rtl:ignore*/
background: var(--track-background);
}
.wc-block-components-price-slider__controls {
align-items: center;
display: flex;
gap: $gap-smaller;
justify-content: space-between;
margin: $gap-large 0;
.wc-block-components-price-slider__amount {
margin: 0;
border-radius: 4px;
border-width: 1px;
width: auto;
max-width: 100px;
min-width: 0;
&.wc-block-components-price-slider__amount--min {
margin-right: 10px;
}
&.wc-block-components-price-slider__amount--max {
margin-left: auto;
}
padding: $gap-smaller;
}
}
.wc-block-components-price-slider__range-text {
align-items: center;
display: flex;
justify-content: space-between;
margin: $gap-large 0;
}
.wc-block-components-price-slider__actions {
align-items: center;
display: flex;
gap: $gap;
justify-content: flex-end;
.wc-block-components-filter-submit-button {
margin-left: 0;
}
}
.wc-block-components-price-slider__range-input {
@include reset;
width: 100%;
@ -138,7 +150,7 @@
}
&::-webkit-slider-thumb {
@include thumb;
margin: -6px 0 0 0;
margin: -5px 0 0 0;
}
&::-webkit-slider-progress {
@include reset;
@ -182,7 +194,7 @@
}
&::-moz-range-thumb {
background-position-x: left;
transform: translate(-2px, 4px);
transform: translate(-2px, 2px);
}
&::-ms-thumb {
background-position-x: left;
@ -198,7 +210,7 @@
}
&::-moz-range-thumb {
background-position-x: right;
transform: translate(2px, 4px);
transform: translate(2px, 2px);
}
&::-ms-thumb {
background-position-x: right;

4
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/constants.js
View File

@ -5,14 +5,14 @@ import { __, sprintf } from '@wordpress/i18n';
import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
const termsPageLink = TERMS_URL
? `<a href="${ TERMS_URL }">${ __(
? `<a href="${ TERMS_URL }" target="_blank">${ __(
'Terms and Conditions',
'woo-gutenberg-products-block'
) }</a>`
: __( 'Terms and Conditions', 'woo-gutenberg-products-block' );
const privacyPageLink = PRIVACY_URL
? `<a href="${ PRIVACY_URL }">${ __(
? `<a href="${ PRIVACY_URL }" target="_blank">${ __(
'Privacy Policy',
'woo-gutenberg-products-block'
) }</a>`

8
plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.json
View File

@ -1,8 +1,8 @@
{
"name": "woocommerce/price-filter",
"version": "1.0.0",
"title": "Filter Products by Price",
"description": "Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.",
"title": "Filter by Price",
"description": "Allow customers to filter products by price range.",
"category": "woocommerce",
"keywords": [ "WooCommerce" ],
"supports": {
@ -27,6 +27,10 @@
"type": "boolean",
"default": true
},
"inlineInput": {
"type": "boolean",
"default": true
},
"showFilterButton": {
"type": "boolean",
"default": false

1
plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.tsx
View File

@ -318,6 +318,7 @@ const PriceFilterBlock = ( {
maxPrice={ maxPrice }
currency={ currency }
showInputFields={ attributes.showInputFields }
inlineInput={ attributes.inlineInput }
showFilterButton={ attributes.showFilterButton }
onChange={ onChange }
onSubmit={ () => onSubmit( minPrice, maxPrice ) }

42
plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.tsx
View File

@ -32,8 +32,13 @@ export default function ( {
attributes,
setAttributes,
}: BlockEditProps< Attributes > ) {
const { heading, headingLevel, showInputFields, showFilterButton } =
attributes;
const {
heading,
headingLevel,
showInputFields,
inlineInput,
showFilterButton,
} = attributes;
const blockProps = useBlockProps();
@ -41,14 +46,11 @@ export default function ( {
return (
<InspectorControls key="inspector">
<PanelBody
title={ __(
'Block Settings',
'woo-gutenberg-products-block'
) }
title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
>
<ToggleGroupControl
label={ __(
'Price Range',
'Price Range Selector',
'woo-gutenberg-products-block'
) }
value={ showInputFields ? 'editable' : 'text' }
@ -57,6 +59,7 @@ export default function ( {
showInputFields: value === 'editable',
} )
}
className="wc-block-price-filter__price-range-toggle"
>
<ToggleGroupControlOption
value="editable"
@ -73,9 +76,27 @@ export default function ( {
) }
/>
</ToggleGroupControl>
{ showInputFields && (
<ToggleControl
label={ __(
'Inline input fields',
'woo-gutenberg-products-block'
) }
checked={ inlineInput }
onChange={ () =>
setAttributes( {
inlineInput: ! inlineInput,
} )
}
help={ __(
'Show input fields inline with the slider.',
'woo-gutenberg-products-block'
) }
/>
) }
<ToggleControl
label={ __(
'Filter button',
"Show 'Apply filters' button",
'woo-gutenberg-products-block'
) }
help={
@ -120,10 +141,7 @@ export default function ( {
<Placeholder
className="wc-block-price-slider"
icon={ <Icon icon={ currencyDollar } /> }
label={ __(
'Filter Products by Price',
'woo-gutenberg-products-block'
) }
label={ __( 'Filter by Price', 'woo-gutenberg-products-block' ) }
instructions={ __(
'Display a slider to filter products in your store by price.',
'woo-gutenberg-products-block'

13
plugins/woocommerce-blocks/assets/js/blocks/price-filter/editor.scss
View File

@ -15,6 +15,19 @@
}
}
.wc-block-price-filter__price-range-toggle {
width: 100%;
> div {
flex-grow: 1;
}
}
.components-base-control__label {
text-transform: uppercase;
@include font-size(small);
}
.wc-block-price-slider {
.components-placeholder__instructions {
border-bottom: 1px solid #e0e2e6;

1
plugins/woocommerce-blocks/assets/js/blocks/price-filter/frontend.ts
View File

@ -14,6 +14,7 @@ const getProps = ( el: HTMLElement ) => {
return {
attributes: {
showInputFields: el.dataset.showinputfields === 'true',
inlineInput: el.dataset.inlineInput !== 'false',
showFilterButton: el.dataset.showfilterbutton === 'true',
heading: el.dataset.heading || blockAttributes.heading.default,
headingLevel: el.dataset.headingLevel

16
plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.tsx
View File

@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
import { createBlock, registerBlockType } from '@wordpress/blocks';
import classNames from 'classnames';
import { Icon, currencyDollar } from '@wordpress/icons';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import { useBlockProps } from '@wordpress/block-editor';
/**
@ -16,9 +15,9 @@ import metadata from './block.json';
import { blockAttributes } from './attributes';
registerBlockType( metadata, {
title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
title: __( 'Filter by Price', 'woo-gutenberg-products-block' ),
description: __(
'Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.',
'Allow customers to filter products by price range.',
'woo-gutenberg-products-block'
),
icon: {
@ -29,16 +28,6 @@ registerBlockType( metadata, {
/>
),
},
supports: {
...metadata.supports,
...( isFeaturePluginBuild() && {
__experimentalBorder: {
radius: true,
color: true,
width: false,
},
} ),
},
attributes: {
...metadata.attributes,
...blockAttributes,
@ -62,6 +51,7 @@ registerBlockType( metadata, {
'woo-gutenberg-products-block'
),
headingLevel: 3,
inlineInput: true,
} ),
},
],

3
plugins/woocommerce-blocks/assets/js/blocks/price-filter/style.scss
View File

@ -1,4 +1,6 @@
.wp-block-woocommerce-price-filter {
border-color: $gray-700;
border-radius: 4px;
border-style: none !important;
}
@ -17,6 +19,7 @@
border-radius: inherit;
border-color: inherit;
// Force inherting style is required for global style.
input {
border-radius: inherit !important;
border-color: inherit !important;

1
plugins/woocommerce-blocks/assets/js/blocks/price-filter/types.ts
View File

@ -1,6 +1,7 @@
export interface Attributes {
showFilterButton: boolean;
showInputFields: boolean;
inlineInput: boolean;
heading: string;
headingLevel: number;
className?: string;

4
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
View File

@ -95,13 +95,13 @@ exports[`Testing stock filter renders the stock filter block with the filter but
</li>
</ul>
<button
class="wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
class="wp-block-button__link wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
type="submit"
>
<span
aria-hidden="true"
>
Go
Apply
</span>
<span
class="screen-reader-text"

2
plugins/woocommerce-blocks/docs/designers/theming/all-products-and-filters.md
View File

@ -2,7 +2,7 @@
## Price slider accent color
The Filter Products by Price block includes a price slider which uses an accent color to show the selected range.
The Filter by Price block includes a price slider which uses an accent color to show the selected range.
![Price filter screenshot](https://user-images.githubusercontent.com/3616980/96570001-2053f900-12ca-11eb-8a75-8a54f243bda3.png)

27
plugins/woocommerce-blocks/docs/internal-developers/testing/releases/831.md Normal file
View File

@ -0,0 +1,27 @@
# Testing notes and ZIP for release 8.3.1
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9358719/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce
### Prevent unnecessarily showing the item names in a shipping package if it's the only package. ([6899](https://github.com/woocommerce/woocommerce-blocks/pull/6899))
1. Set up shipping zones so you have multiple methods for your country (flat rate and free is fine) and a single method for a different country.
2. Install the ["Multiple Packages for WooCommerce" plugin](https://wordpress.org/plugins/multiple-packages-for-woocommerce/)
3. Navigate to WooCommerce -> Settings -> Multiple Packages
4. Adjust the settings to work based on "Per Product"
5. Add two items that require shipping to your cart.
6. Go to the Cart block. Ensure you see the item name listed under each package.
7. Remove one of the items, ensure the list of shipping options updates and does not include the item name.
8. Change your address to one that only has a single shipping method. Repeat steps 5-7.
9. Repeat 5-7 on the Checkout block too.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/internal-developers/testing/releases/810.md)
<!-- /FEEDBACK -->

1
plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md
View File

@ -86,6 +86,7 @@ Every release includes specific testing instructions for new features and bug fi
- [8.2.0](./820.md)
- [8.2.1](./821.md)
- [8.3.0](./830.md)
- [8.3.1](./831.md)
<!-- FEEDBACK -->

2
plugins/woocommerce-blocks/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@woocommerce/block-library",
"version": "8.3.0-dev",
"version": "8.4.0-dev",
"lockfileVersion": 2,
"requires": true,
"packages": {

2
plugins/woocommerce-blocks/package.json
View File

@ -2,7 +2,7 @@
"name": "@woocommerce/block-library",
"title": "WooCommerce Blocks",
"author": "Automattic",
"version": "8.3.0",
"version": "8.3.1",
"description": "WooCommerce blocks for the Gutenberg editor.",
"homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/",
"keywords": [

10
plugins/woocommerce-blocks/readme.txt
View File

@ -4,7 +4,7 @@ Tags: gutenberg, woocommerce, woo commerce, products, blocks, woocommerce blocks
Requires at least: 6.0
Tested up to: 6.0
Requires PHP: 7.0
Stable tag: 8.3.0
Stable tag: 8.3.1
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
@ -34,7 +34,7 @@ Use this plugin if you want access to the bleeding edge of available blocks for
- **All Reviews**
- **Product Search**
- **All Products**
- **Filter Products by Price**
- **Filter by Price**
- **Filter Products by Attribute**
- **Filter Products by Stock**
- **Active Product Filters**
@ -86,6 +86,12 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/
== Changelog ==
= 8.3.1 - 2022-08-17 =
#### Bug Fixes
- Prevent unnecessarily showing the item names in a shipping package if it's the only package. ([6899](https://github.com/woocommerce/woocommerce-blocks/pull/6899))
= 8.3.0 - 2022-08-15 =
#### Enhancements

2
plugins/woocommerce-blocks/src/Package.php
View File

@ -113,7 +113,7 @@ class Package {
NewPackage::class,
function ( $container ) {
// leave for automated version bumping.
$version = '8.3.0';
$version = '8.3.1';
return new NewPackage(
$version,
dirname( __DIR__ ),

2
plugins/woocommerce-blocks/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
View File

@ -1 +1 @@
{"title":"Filter Products by Price Block","pageContent":"<!-- wp:woocommerce/price-filter -->\n<div class=\"wp-block-woocommerce-price-filter is-loading\" data-showinputfields=\"true\" data-showfilterbutton=\"false\" data-heading=\"Filter by price\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-categories__placeholder\"></span></div>\n<!-- /wp:woocommerce/price-filter -->"}
{"title":"Filter by Price Block","pageContent":"<!-- wp:woocommerce/price-filter -->\n<div class=\"wp-block-woocommerce-price-filter is-loading\" data-showinputfields=\"true\" data-showfilterbutton=\"false\" data-heading=\"Filter by price\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-categories__placeholder\"></span></div>\n<!-- /wp:woocommerce/price-filter -->"}

8
plugins/woocommerce-blocks/tests/e2e/specs/backend/price-filter.test.js
View File

@ -17,7 +17,7 @@ import {
import { insertBlockDontWaitForInsertClose } from '../../utils.js';
const block = {
name: 'Filter Products by Price',
name: 'Filter by Price',
slug: 'woocommerce/price-filter',
class: '.wp-block-woocommerce-price-filter',
};
@ -91,15 +91,15 @@ describe( `${ block.name } Block`, () => {
);
} );
it( 'allows you to toggle go button', async () => {
it( 'allows you to toggle filter button', async () => {
await expect( page ).toClick( 'label', {
text: 'Filter button',
text: "Show 'Apply filters' button",
} );
await expect( page ).toMatchElement(
'button.wc-block-filter-submit-button.wc-block-price-filter__button'
);
await expect( page ).toClick( 'label', {
text: 'Filter button',
text: "Show 'Apply filters' button",
} );
} );
} );

2
plugins/woocommerce-blocks/tests/e2e/specs/shopper/active-filters.test.ts
View File

@ -59,7 +59,7 @@ const FILTER_CAPACITY_PROPERTY = '128gb';
const { selectors } = block;
const insertBlocks = async () => {
await insertBlock( 'Filter Products by Price' );
await insertBlock( 'Filter by Price' );
await insertBlock( 'Filter Products by Stock' );
await insertBlock( 'Filter Products by Attribute' );
await insertBlock( block.name );

5
plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-price.test.ts
View File

@ -24,12 +24,13 @@ import {
import { clickLink } from '../../../utils';
const block = {
name: 'Filter Products by Price',
name: 'Filter by Price',
slug: 'woocommerce/price-filter',
class: '.wc-block-price-filter',
selectors: {
editor: {
filterButtonToggle: "//label[text()='Filter button']",
filterButtonToggle:
'//label[text()="Show \'Apply filters\' button"]',
},
frontend: {
priceMaxAmount: '.wc-block-price-filter__amount--max',

2
plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php
View File

@ -3,7 +3,7 @@
* Plugin Name: WooCommerce Blocks
* Plugin URI: https://github.com/woocommerce/woocommerce-gutenberg-products-block
* Description: WooCommerce blocks for the Gutenberg editor.
* Version: 8.3.0
* Version: 8.3.1
* Author: Automattic
* Author URI: https://woocommerce.com
* Text Domain: woo-gutenberg-products-block