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

`Filter by Attribute` block settings design update (https://github.com/woocommerce/woocommerce-blocks/pull/6912) 

* Updata block title and description

* Update block settings to match designs

* Update block title in tests

* Update copy in test
This commit is contained in:
Alba Rincón 2022-08-19 08:55:34 +02:00 committed by GitHub
parent 0bea874c8d
commit 8167f0afb4
8 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.json
View File

@ -1,8 +1,8 @@
{
"name": "woocommerce/attribute-filter",
"version": "1.0.0",
"title": "Filter Products by Attribute",
"description": "Allow customers to filter the grid by product attribute, such as color. Works in combination with the All Products block.",
"title": "Filter by Attribute",
"description": "Allow customers to filter the grid by product attribute, such as color.",
"category": "woocommerce",
"keywords": [ "WooCommerce" ],
"supports": {

39
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.tsx
View File

@ -166,17 +166,20 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
return (
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
title={ __(
'Display Settings',
'woo-gutenberg-products-block'
) }
>
<ToggleControl
label={ __(
'Product count',
'Include product count',
'woo-gutenberg-products-block'
) }
help={
showCounts
? __(
'Product count is visible.',
'Show the product count with results.',
'woo-gutenberg-products-block'
)
: __(
@ -206,13 +209,6 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
setAttributes( { headingLevel: newLevel } )
}
/>
</PanelBody>
<PanelBody
title={ __(
'Block Settings',
'woo-gutenberg-products-block'
) }
>
<ToggleGroupControl
label={ __(
'Allow selecting multiple options?',
@ -224,6 +220,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
selectType: value,
} )
}
className="wc-block-attribute-filter__multiple-toggle"
>
<ToggleGroupControlOption
value="multiple"
@ -243,17 +240,17 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
{ selectType === 'multiple' && (
<ToggleGroupControl
label={ __(
'Query Type',
'Filter Conditions',
'woo-gutenberg-products-block'
) }
help={
queryType === 'and'
? __(
'Products that have all of the selected attributes will be shown.',
'Choose to return filter results for all of the attributes selected.',
'woo-gutenberg-products-block'
)
: __(
'Products that have any of the selected attributes will be shown.',
'Choose to return filter results for any of the attributes selected.',
'woo-gutenberg-products-block'
)
}
@ -263,18 +260,19 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
queryType: value,
} )
}
className="wc-block-attribute-filter__conditions-toggle"
>
<ToggleGroupControlOption
value="and"
label={ __(
'And',
'All',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="or"
label={ __(
'Or',
'Any',
'woo-gutenberg-products-block'
) }
/>
@ -291,6 +289,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
displayStyle: value,
} )
}
className="wc-block-attribute-filter__display-toggle"
>
<ToggleGroupControlOption
value="list"
@ -309,7 +308,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
</ToggleGroupControl>
<ToggleControl
label={ __(
'Filter button',
"Show 'Apply filters' button",
'woo-gutenberg-products-block'
) }
help={
@ -333,7 +332,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
</PanelBody>
<PanelBody
title={ __(
'Filter Products by Attribute',
'Content Settings',
'woo-gutenberg-products-block'
) }
initialOpen={ false }
@ -349,7 +348,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
className="wc-block-attribute-filter"
icon={ <Icon icon={ category } /> }
label={ __(
'Filter Products by Attribute',
'Filter by Attribute',
'woo-gutenberg-products-block'
) }
instructions={ __(
@ -388,7 +387,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
setIsEditing( false );
debouncedSpeak(
__(
'Showing Filter Products by Attribute block preview.',
'Showing Filter by Attribute block preview.',
'woo-gutenberg-products-block'
)
);
@ -400,7 +399,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
className="wc-block-attribute-filter"
icon={ <Icon icon={ category } /> }
label={ __(
'Filter Products by Attribute',
'Filter by Attribute',
'woo-gutenberg-products-block'
) }
instructions={ __(

4
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx
View File

@ -17,9 +17,9 @@ import { blockAttributes } from './attributes';
import metadata from './block.json';
registerBlockType( metadata, {
title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ),
title: __( 'Filter by Attribute', 'woo-gutenberg-products-block' ),
description: __(
'Allow customers to filter the grid by product attribute, such as color. Works in combination with the All Products block.',
'Allow customers to filter the grid by product attribute, such as color.',
'woo-gutenberg-products-block'
),
icon: {

16
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss
View File

@ -51,3 +51,19 @@
}
}
.wc-block-attribute-filter__multiple-toggle,
.wc-block-attribute-filter__conditions-toggle,
.wc-block-attribute-filter__display-toggle {
width: 100%;
}
.woocommerce-product-attributes {
.woocommerce-search-list__search {
.components-base-control__label {
@include reset-typography();
@include font-size(regular);
color: $gray-700;
}
}
}

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

@ -1 +1 @@
{"title":"Filter Products by Attribute Block","pageContent":"<!-- wp:woocommerce/attribute-filter -->\n<div class=\"wp-block-woocommerce-attribute-filter is-loading\" data-attribute-id=\"0\" data-show-counts=\"true\" data-query-type=\"or\" data-heading=\"Filter by attribute\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-attribute-filter__placeholder\"></span></div>\n<!-- /wp:woocommerce/attribute-filter --><!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<div class=\"wp-block-woocommerce-all-products wc-block-all-products\" data-attributes=\"{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}\"></div>\n<!-- /wp:woocommerce/all-products -->"}
{"title":"Filter by Attribute Block","pageContent":"<!-- wp:woocommerce/attribute-filter -->\n<div class=\"wp-block-woocommerce-attribute-filter is-loading\" data-attribute-id=\"0\" data-show-counts=\"true\" data-query-type=\"or\" data-heading=\"Filter by attribute\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-attribute-filter__placeholder\"></span></div>\n<!-- /wp:woocommerce/attribute-filter --><!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<div class=\"wp-block-woocommerce-all-products wc-block-all-products\" data-attributes=\"{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}\"></div>\n<!-- /wp:woocommerce/all-products -->"}

20
plugins/woocommerce-blocks/tests/e2e/specs/backend/attribute-filter.test.js
View File

@ -13,7 +13,7 @@ import {
} from '@woocommerce/blocks-test-utils';
const block = {
name: 'Filter Products by Attribute',
name: 'Filter by Attribute',
slug: 'woocommerce/attribute-filter',
class: '.wc-block-attribute-filter',
};
@ -79,29 +79,37 @@ describe( `${ block.name } Block`, () => {
await expect( page ).toMatchElement(
'.wc-filter-element-label-list-count'
);
await expect( page ).toClick( 'label', { text: 'Product count' } );
await expect( page ).toClick( 'label', {
text: 'Include product count',
} );
await expect( page ).not.toMatchElement(
'.wc-filter-element-label-list-count'
);
// reset
await expect( page ).toClick( 'label', { text: 'Product count' } );
await expect( page ).toClick( 'label', {
text: 'Include product count',
} );
} );
it( 'can toggle go button', async () => {
await expect( page ).not.toMatchElement(
'.wc-block-filter-submit-button'
);
await expect( page ).toClick( 'label', { text: 'Filter button' } );
await expect( page ).toClick( 'label', {
text: "Show 'Apply filters' button",
} );
await expect( page ).toMatchElement(
'.wc-block-filter-submit-button'
);
// reset
await expect( page ).toClick( 'label', { text: 'Filter button' } );
await expect( page ).toClick( 'label', {
text: "Show 'Apply filters' button",
} );
} );
it( 'can switch attribute', async () => {
await expect( page ).toClick( 'button', {
text: 'Filter Products by Attribute',
text: 'Content Settings',
} );
await expect( page ).toClick(

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

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

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

@ -24,14 +24,15 @@ import {
} from '../../utils';
const block = {
name: 'Filter Products by Attribute',
name: 'Filter by Attribute',
slug: 'woocommerce/attribute-filter',
class: '.wc-block-attribute-filter',
selectors: {
editor: {
firstAttributeInTheList:
'.woocommerce-search-list__list > li > label > input.woocommerce-search-list__item-input',
filterButtonToggle: "//label[text()='Filter button']",
filterButtonToggle:
'//label[text()="Show \'Apply filters\' button"]',
doneButton: '.wc-block-attribute-filter__selection > button',
},
frontend: {