From 0580f8123de84a7a026c8ffdb10a2fddd9aeccda Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 25 Aug 2022 10:06:07 +0700 Subject: [PATCH 01/62] register filter wrapper block --- assets/js/blocks/filter-wrapper/block.json | 18 +++++++++++++ assets/js/blocks/filter-wrapper/edit.tsx | 19 +++++++++++++ assets/js/blocks/filter-wrapper/index.tsx | 31 ++++++++++++++++++++++ bin/webpack-entries.js | 1 + src/BlockTypes/FilterWrapper.php | 14 ++++++++++ src/BlockTypesController.php | 1 + 6 files changed, 84 insertions(+) create mode 100644 assets/js/blocks/filter-wrapper/block.json create mode 100644 assets/js/blocks/filter-wrapper/edit.tsx create mode 100644 assets/js/blocks/filter-wrapper/index.tsx create mode 100644 src/BlockTypes/FilterWrapper.php diff --git a/assets/js/blocks/filter-wrapper/block.json b/assets/js/blocks/filter-wrapper/block.json new file mode 100644 index 00000000000..551ac8310b9 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/block.json @@ -0,0 +1,18 @@ +{ + "name": "woocommerce/filter-wrapper", + "version": "1.0.0", + "title": "Filter Wrapper", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "attributes": { + "filterType": { + "type": "string" + }, + "heading": { + "type": "string" + } + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/assets/js/blocks/filter-wrapper/edit.tsx b/assets/js/blocks/filter-wrapper/edit.tsx new file mode 100644 index 00000000000..b569d368212 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/edit.tsx @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ + +const Edit = () => { + const blockProps = useBlockProps(); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + allowedBlocks: [ 'core/heading' ], + } ); + + return
; +}; + +export default Edit; diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx new file mode 100644 index 00000000000..8c3016297a4 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { toggle } from '@woocommerce/icons'; +import { Icon } from '@wordpress/icons'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import metadata from './block.json'; + +registerBlockType( metadata, { + icon: { + src: ( + + ), + }, + edit, + save() { + const innerBlocksProps = useInnerBlocksProps.save( + useBlockProps.save() + ); + return
; + }, +} ); diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index 4e717d948e0..5a1ad60ba36 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -60,6 +60,7 @@ const blocks = { 'product-query': { isExperimental: true, }, + 'filter-wrapper': {}, }; // Returns the entries for each block given a relative path (ie: `index.js`, diff --git a/src/BlockTypes/FilterWrapper.php b/src/BlockTypes/FilterWrapper.php new file mode 100644 index 00000000000..58d027234bd --- /dev/null +++ b/src/BlockTypes/FilterWrapper.php @@ -0,0 +1,14 @@ + Date: Thu, 25 Aug 2022 10:28:22 +0700 Subject: [PATCH 02/62] register block variation --- assets/js/blocks/filter-wrapper/block.json | 8 +++--- assets/js/blocks/filter-wrapper/edit.tsx | 15 +++++++---- assets/js/blocks/filter-wrapper/index.tsx | 30 ++++++++++++++++++++++ 3 files changed, 43 insertions(+), 10 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/block.json b/assets/js/blocks/filter-wrapper/block.json index 551ac8310b9..b97753a9a00 100644 --- a/assets/js/blocks/filter-wrapper/block.json +++ b/assets/js/blocks/filter-wrapper/block.json @@ -1,15 +1,13 @@ { "name": "woocommerce/filter-wrapper", "version": "1.0.0", - "title": "Filter Wrapper", + "title": "Active Filter Wrapper", "category": "woocommerce", "keywords": [ "WooCommerce" ], "attributes": { "filterType": { - "type": "string" - }, - "heading": { - "type": "string" + "type": "string", + "default": "active-filters" } }, "textdomain": "woo-gutenberg-products-block", diff --git a/assets/js/blocks/filter-wrapper/edit.tsx b/assets/js/blocks/filter-wrapper/edit.tsx index b569d368212..74a92a14768 100644 --- a/assets/js/blocks/filter-wrapper/edit.tsx +++ b/assets/js/blocks/filter-wrapper/edit.tsx @@ -3,14 +3,19 @@ */ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ - -const Edit = () => { +const Edit = ( { attributes } ) => { const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: [ 'core/heading' ], + template: [ + [ 'core/heading', { level: 3, content: attributes.heading || '' } ], + [ + `woocommerce/${ attributes.filterType }`, + { + heading: '', + }, + ], + ], } ); return
; diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 8c3016297a4..63ba078cdd9 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -1,6 +1,7 @@ /** * External dependencies */ +import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { toggle } from '@woocommerce/icons'; import { Icon } from '@wordpress/icons'; @@ -21,6 +22,16 @@ registerBlockType( metadata, { /> ), }, + attributes: { + ...metadata.attributes, + heading: { + type: 'string', + default: __( + 'Active Filter Wrappers', + 'woo-gutenberg-products-block' + ), + }, + }, edit, save() { const innerBlocksProps = useInnerBlocksProps.save( @@ -28,4 +39,23 @@ registerBlockType( metadata, { ); return
; }, + variations: [ + { + name: 'price-filter', + title: __( + 'Filter by Price Wrapper', + 'woo-gutenberg-products-block' + ), + scope: [ 'inserter' ], + isActive: ( attributes ) => + attributes.filterType === 'price-filter', + attributes: { + filterType: 'price-filter', + heading: __( + 'Filter by Price', + 'woo-gutenberg-products-block' + ), + }, + }, + ], } ); From a81be07b69c32b31e7f1158fddee950c0bc2cfe8 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 25 Aug 2022 11:14:16 +0700 Subject: [PATCH 03/62] rename the active filters wrapper --- assets/js/blocks/filter-wrapper/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 63ba078cdd9..45920e19de8 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -27,7 +27,7 @@ registerBlockType( metadata, { heading: { type: 'string', default: __( - 'Active Filter Wrappers', + 'Active Filters Wrapper', 'woo-gutenberg-products-block' ), }, From 8b6cb7c6658b2a5a99b890b67f1dce8c1c51cdbf Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 25 Aug 2022 12:41:53 +0700 Subject: [PATCH 04/62] prevent 404 error --- src/BlockTypes/FilterWrapper.php | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/BlockTypes/FilterWrapper.php b/src/BlockTypes/FilterWrapper.php index 58d027234bd..ff5dc5d279a 100644 --- a/src/BlockTypes/FilterWrapper.php +++ b/src/BlockTypes/FilterWrapper.php @@ -11,4 +11,11 @@ class FilterWrapper extends AbstractBlock { * @var string */ protected $block_name = 'filter-wrapper'; + + /** + * Register script and style assets for the block type before it is registered. + * + * This registers the scripts; it does not enqueue them. + */ + protected function register_block_type_assets() {} } From 5a52b4707edb53489488fc2deedb9c7b2d192a57 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 25 Aug 2022 17:11:29 +0700 Subject: [PATCH 05/62] Revert "prevent 404 error" This reverts commit 8b6cb7c6658b2a5a99b890b67f1dce8c1c51cdbf. --- src/BlockTypes/FilterWrapper.php | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/BlockTypes/FilterWrapper.php b/src/BlockTypes/FilterWrapper.php index ff5dc5d279a..58d027234bd 100644 --- a/src/BlockTypes/FilterWrapper.php +++ b/src/BlockTypes/FilterWrapper.php @@ -11,11 +11,4 @@ class FilterWrapper extends AbstractBlock { * @var string */ protected $block_name = 'filter-wrapper'; - - /** - * Register script and style assets for the block type before it is registered. - * - * This registers the scripts; it does not enqueue them. - */ - protected function register_block_type_assets() {} } From 6593c13f6a84d79a884757604bc0f434d3001403 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 1 Sep 2022 10:32:00 +0700 Subject: [PATCH 06/62] render parent wrapper block --- assets/js/blocks/active-filters/block.tsx | 13 +++++++++ assets/js/blocks/filter-wrapper/block.tsx | 27 +++++++++++++++++ assets/js/blocks/filter-wrapper/context.ts | 29 +++++++++++++++++++ assets/js/blocks/filter-wrapper/frontend.ts | 17 +++++++++++ .../filter-wrapper/register-components.ts | 10 +++++++ assets/js/blocks/filter-wrapper/style.scss | 7 +++++ 6 files changed, 103 insertions(+) create mode 100644 assets/js/blocks/filter-wrapper/block.tsx create mode 100644 assets/js/blocks/filter-wrapper/context.ts create mode 100644 assets/js/blocks/filter-wrapper/frontend.ts create mode 100644 assets/js/blocks/filter-wrapper/register-components.ts create mode 100644 assets/js/blocks/filter-wrapper/style.scss diff --git a/assets/js/blocks/active-filters/block.tsx b/assets/js/blocks/active-filters/block.tsx index 12b38f87d8a..e380bfd88a6 100644 --- a/assets/js/blocks/active-filters/block.tsx +++ b/assets/js/blocks/active-filters/block.tsx @@ -30,6 +30,8 @@ import { } from './utils'; import ActiveAttributeFilters from './active-attribute-filters'; import { Attributes } from './types'; +import metadata from './block.json'; +import { useSetWraperVisibility } from '../filter-wrapper/context'; /** * Component displaying active filters. @@ -45,6 +47,13 @@ const ActiveFiltersBlock = ( { attributes: Attributes; isEditor?: boolean; } ) => { + blockAttributes = { + ...blockAttributes, + displayStyle: + blockAttributes?.displayStyle || + metadata.attributes.displayStyle.default, + }; + const setWrapperVisibility = useSetWraperVisibility(); const filteringForPhpTemplate = getSettingWithCoercion( 'is_rendering_php_template', false, @@ -223,6 +232,7 @@ const ActiveFiltersBlock = ( { }; if ( ! hasFilters() && ! isEditor ) { + setWrapperVisibility( false ); return null; } @@ -235,9 +245,12 @@ const ActiveFiltersBlock = ( { ); if ( ! hasFilterableProducts ) { + setWrapperVisibility( false ); return null; } + setWrapperVisibility( true ); + const listClasses = classnames( 'wc-block-active-filters__list', { 'wc-block-active-filters__list--chips': blockAttributes.displayStyle === 'chips', diff --git a/assets/js/blocks/filter-wrapper/block.tsx b/assets/js/blocks/filter-wrapper/block.tsx new file mode 100644 index 00000000000..83ee73bf9ac --- /dev/null +++ b/assets/js/blocks/filter-wrapper/block.tsx @@ -0,0 +1,27 @@ +/** + * External dependencies + */ +import { useRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import './register-components'; +import { FilterBlockContext } from './context'; + +type Props = { + children: JSX.Element[]; +}; + +const Block = ( { children }: Props ): JSX.Element => { + const wrapper = useRef( null ); + return ( +
+ + { children } + +
+ ); +}; + +export default Block; diff --git a/assets/js/blocks/filter-wrapper/context.ts b/assets/js/blocks/filter-wrapper/context.ts new file mode 100644 index 00000000000..a05c4a5d7b9 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/context.ts @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +/** + * Context consumed by inner blocks. + */ +export type FilterContextProps = { + wrapper?: React.RefObject< HTMLDivElement >; +}; + +export const FilterBlockContext = createContext< FilterContextProps >( {} ); + +export const useFilterBlockContext = (): FilterContextProps => { + return useContext( FilterBlockContext ); +}; + +export const useSetWraperVisibility = () => { + const { wrapper } = useFilterBlockContext(); + return ( isVisible: boolean ) => { + if ( ! wrapper ) { + return; + } + if ( wrapper.current ) { + wrapper.current.style.display = isVisible ? 'block' : 'none'; + } + }; +}; diff --git a/assets/js/blocks/filter-wrapper/frontend.ts b/assets/js/blocks/filter-wrapper/frontend.ts new file mode 100644 index 00000000000..981b6e64798 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/frontend.ts @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { renderParentBlock } from '@woocommerce/atomic-utils'; +import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry'; + +/** + * Internal dependencies + */ +import Block from './block'; + +renderParentBlock( { + blockName: 'woocommerce/filter-wrapper', + selector: '.wp-block-woocommerce-filter-wrapper', + Block, + blockMap: getRegisteredBlockComponents( 'woocommerce/filter-wrapper' ), +} ); diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts new file mode 100644 index 00000000000..b575b8bd5e2 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -0,0 +1,10 @@ +/** + * External dependencies + */ +import { registerBlockComponent } from '@woocommerce/blocks-registry'; +import { lazy } from '@wordpress/element'; + +registerBlockComponent( { + blockName: 'woocommerce/active-filters', + component: lazy( () => import( '../active-filters/block' ) ), +} ); diff --git a/assets/js/blocks/filter-wrapper/style.scss b/assets/js/blocks/filter-wrapper/style.scss new file mode 100644 index 00000000000..7d12f63667e --- /dev/null +++ b/assets/js/blocks/filter-wrapper/style.scss @@ -0,0 +1,7 @@ +// .wc-blocks-filter-inner-wrappers { +// display: none; + +// &.is-visible { +// display: block; +// } +// } From b95a15714c29231d479ff2bef5068aa5c4c28322 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 1 Sep 2022 10:40:47 +0700 Subject: [PATCH 07/62] support price filter block --- .../js/blocks/filter-wrapper/register-components.ts | 5 +++++ assets/js/blocks/price-filter/block.tsx | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index b575b8bd5e2..9dbe49b69eb 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -8,3 +8,8 @@ registerBlockComponent( { blockName: 'woocommerce/active-filters', component: lazy( () => import( '../active-filters/block' ) ), } ); + +registerBlockComponent( { + blockName: 'woocommerce/price-filter', + component: lazy( () => import( '../price-filter/block' ) ), +} ); diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx index 87c5df5cb2d..dadd9c0bc50 100644 --- a/assets/js/blocks/price-filter/block.tsx +++ b/assets/js/blocks/price-filter/block.tsx @@ -28,6 +28,8 @@ import { import usePriceConstraints from './use-price-constraints'; import './style.scss'; import { Attributes } from './types'; +import metadata from './block.json'; +import { useSetWraperVisibility } from '../filter-wrapper/context'; /** * Formats filter values into a string for the URL parameters needed for filtering PHP templates. @@ -84,6 +86,13 @@ const PriceFilterBlock = ( { attributes: Attributes; isEditor: boolean; } ) => { + attributes = { + ...attributes, + showFilterButton: + attributes?.showFilterButton || + metadata.attributes.showFilterButton.default, + }; + const setWrapperVisibility = useSetWraperVisibility(); const hasFilterableProducts = getSettingWithCoercion( 'has_filterable_products', false, @@ -288,6 +297,7 @@ const PriceFilterBlock = ( { ] ); if ( ! hasFilterableProducts ) { + setWrapperVisibility( false ); return null; } @@ -297,12 +307,15 @@ const PriceFilterBlock = ( { maxConstraint === null || minConstraint === maxConstraint ) ) { + setWrapperVisibility( false ); return null; } const TagName = `h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements; + setWrapperVisibility( true ); + return ( <> { ! isEditor && attributes.heading && ( From a88647f54f482d7326ecbcaacd8c4acf1ef25b9f Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 1 Sep 2022 10:47:40 +0700 Subject: [PATCH 08/62] hide the active filter block from inserter --- assets/js/blocks/active-filters/block.json | 1 + assets/js/blocks/active-filters/edit.tsx | 18 ++++++++++-------- assets/js/blocks/filter-wrapper/block.json | 2 +- assets/js/blocks/filter-wrapper/index.tsx | 5 +---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index 83b791c35eb..6eecfcbd4fc 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -8,6 +8,7 @@ "supports": { "html": false, "multiple": false, + "inserter": false, "color": { "text": true, "background": false diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index c001bd714f6..c5a8ad4e379 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -91,14 +91,16 @@ const Edit = ( { return (
{ getInspectorControls() } - - setAttributes( { heading: value } ) - } - /> + { heading && ( + + setAttributes( { heading: value } ) + } + /> + ) } diff --git a/assets/js/blocks/filter-wrapper/block.json b/assets/js/blocks/filter-wrapper/block.json index b97753a9a00..2531217203b 100644 --- a/assets/js/blocks/filter-wrapper/block.json +++ b/assets/js/blocks/filter-wrapper/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/filter-wrapper", "version": "1.0.0", - "title": "Active Filter Wrapper", + "title": "Active Product Filters Wrapper", "category": "woocommerce", "keywords": [ "WooCommerce" ], "attributes": { diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 45920e19de8..ecbd354a759 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -26,10 +26,7 @@ registerBlockType( metadata, { ...metadata.attributes, heading: { type: 'string', - default: __( - 'Active Filters Wrapper', - 'woo-gutenberg-products-block' - ), + default: __( 'Active Filters', 'woo-gutenberg-products-block' ), }, }, edit, From 4c6f1f09dc25691e21625d681b911d32e4ab9c40 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 1 Sep 2022 10:56:31 +0700 Subject: [PATCH 09/62] swap the title of wrapper and inner filter block for active filters --- assets/js/blocks/active-filters/block.json | 4 ++-- assets/js/blocks/active-filters/index.tsx | 5 ----- assets/js/blocks/filter-wrapper/block.json | 2 +- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index 6eecfcbd4fc..41473d28a06 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -1,8 +1,8 @@ { "name": "woocommerce/active-filters", "version": "1.0.0", - "title": "Active Product Filters", - "description": "Show the currently active product filters. Works in combination with the All Products and filters blocks.", + "title": "Active Product Filters Inner", + "description": "Show the currently active product filters. Works in combination with other filters blocks.", "category": "woocommerce", "keywords": [ "WooCommerce" ], "supports": { diff --git a/assets/js/blocks/active-filters/index.tsx b/assets/js/blocks/active-filters/index.tsx index b1cb933b8c0..e63c31f5eb3 100644 --- a/assets/js/blocks/active-filters/index.tsx +++ b/assets/js/blocks/active-filters/index.tsx @@ -17,11 +17,6 @@ import { blockAttributes } from './attributes'; import { Attributes } from './types'; registerBlockType( metadata, { - title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ), - description: __( - 'Show the currently active product filters. Works in combination with the All Products and filters blocks.', - 'woo-gutenberg-products-block' - ), icon: { src: ( Date: Thu, 1 Sep 2022 10:58:41 +0700 Subject: [PATCH 10/62] hide the legacy heading for the price filter --- assets/js/blocks/price-filter/edit.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index 4e2fbbb7187..d6c32c569e0 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -179,14 +179,16 @@ export default function ( { ) : ( <> { getInspectorControls() } - - setAttributes( { heading: value } ) - } - /> + { heading && ( + + setAttributes( { heading: value } ) + } + /> + ) } From 37e78a8b7700f66da2fe68c9f424e7b21887b1cb Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 09:29:56 +0700 Subject: [PATCH 11/62] update block title and description for active filters and price filter --- assets/js/blocks/filter-wrapper/block.json | 1 + assets/js/blocks/filter-wrapper/index.tsx | 5 +++-- assets/js/blocks/price-filter/block.json | 2 +- assets/js/blocks/price-filter/index.tsx | 5 ----- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/block.json b/assets/js/blocks/filter-wrapper/block.json index fe08036f316..6af0e807dd1 100644 --- a/assets/js/blocks/filter-wrapper/block.json +++ b/assets/js/blocks/filter-wrapper/block.json @@ -2,6 +2,7 @@ "name": "woocommerce/filter-wrapper", "version": "1.0.0", "title": "Active Product Filters", + "description": "Show the currently active product filters. Works in combination with other filters blocks.", "category": "woocommerce", "keywords": [ "WooCommerce" ], "attributes": { diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index ecbd354a759..c271ded1746 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -39,8 +39,9 @@ registerBlockType( metadata, { variations: [ { name: 'price-filter', - title: __( - 'Filter by Price Wrapper', + title: __( 'Filter by Price', 'woo-gutenberg-products-block' ), + description: __( + 'Allow customers to filter products by price range.', 'woo-gutenberg-products-block' ), scope: [ 'inserter' ], diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json index 2bfd91e8580..a4f8a7b7241 100644 --- a/assets/js/blocks/price-filter/block.json +++ b/assets/js/blocks/price-filter/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/price-filter", "version": "1.0.0", - "title": "Filter by Price", + "title": "Filter by Price Inner", "description": "Allow customers to filter products by price range.", "category": "woocommerce", "keywords": [ "WooCommerce" ], diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx index 744d6f68875..0896ce20d3a 100644 --- a/assets/js/blocks/price-filter/index.tsx +++ b/assets/js/blocks/price-filter/index.tsx @@ -15,11 +15,6 @@ import metadata from './block.json'; import { blockAttributes } from './attributes'; registerBlockType( metadata, { - title: __( 'Filter by Price', 'woo-gutenberg-products-block' ), - description: __( - 'Allow customers to filter products by price range.', - 'woo-gutenberg-products-block' - ), icon: { src: ( Date: Fri, 2 Sep 2022 09:50:55 +0700 Subject: [PATCH 12/62] remove heading control for price filter --- assets/js/blocks/price-filter/edit.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index d6c32c569e0..7ff85542983 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { getAdminLink } from '@woocommerce/settings'; import { blocksConfig } from '@woocommerce/block-settings'; -import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar'; import BlockTitle from '@woocommerce/editor-components/block-title'; import { Icon, currencyDollar, external } from '@wordpress/icons'; import type { BlockEditProps } from '@wordpress/blocks'; @@ -117,21 +116,6 @@ export default function ( { } ) } /> -

- { __( - 'Heading Level', - 'woo-gutenberg-products-block' - ) } -

- - setAttributes( { headingLevel: newLevel } ) - } - /> ); From b2754c70278f44b7eba40e804ba3e364b9b3722f Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 10:25:20 +0700 Subject: [PATCH 13/62] remove heading control for active filters --- assets/js/blocks/active-filters/edit.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index 18d32310745..365199c7b1b 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -3,7 +3,6 @@ */ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; -import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar'; import BlockTitle from '@woocommerce/editor-components/block-title'; import type { BlockEditProps } from '@wordpress/blocks'; import { @@ -70,21 +69,6 @@ const Edit = ( { ) } /> -

- { __( - 'Heading Level', - 'woo-gutenberg-products-block' - ) } -

- - setAttributes( { headingLevel: newLevel } ) - } - /> ); From 82889ff41bb6290c996e11ac52fc0fe9cf6e2353 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 10:36:27 +0700 Subject: [PATCH 14/62] update pattern --- patterns/filters.php | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/patterns/filters.php b/patterns/filters.php index 66d6c44162e..ef5cb154795 100644 --- a/patterns/filters.php +++ b/patterns/filters.php @@ -7,13 +7,29 @@ */ ?> - -
+ +
+ +

Active Filters

+ + + +
+
+ + + +
+ +

Filter by Price

+ - -
+ +
+
+
From 3ba7237ea898250340f69976811a750bf2036114 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 11:30:35 +0700 Subject: [PATCH 15/62] try: upgrade button --- assets/js/blocks/active-filters/edit.tsx | 112 ++++++++++++++++------- 1 file changed, 79 insertions(+), 33 deletions(-) diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index 365199c7b1b..b76479e2b69 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -2,13 +2,20 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { + InspectorControls, + useBlockProps, + BlockControls, +} from '@wordpress/block-editor'; +import { BlockEditProps, createBlock } from '@wordpress/blocks'; +import { useDispatch } from '@wordpress/data'; import BlockTitle from '@woocommerce/editor-components/block-title'; -import type { BlockEditProps } from '@wordpress/blocks'; import { Disabled, PanelBody, withSpokenMessages, + ToolbarGroup, + ToolbarButton, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis @@ -25,6 +32,7 @@ import './editor.scss'; const Edit = ( { attributes, setAttributes, + clientId, }: BlockEditProps< Attributes > ) => { const { className, displayStyle, heading, headingLevel } = attributes; @@ -32,45 +40,83 @@ const Edit = ( { className, } ); + const { replaceBlock } = useDispatch( 'core/block-editor' ); + const getInspectorControls = () => { return ( - - - + + - setAttributes( { - displayStyle: value, - } ) - } - className="wc-block-active-filter__style-toggle" > - - - - - + value={ displayStyle } + onChange={ ( + value: Attributes[ 'displayStyle' ] + ) => + setAttributes( { + displayStyle: value, + } ) + } + className="wc-block-active-filter__style-toggle" + > + + + + + + { heading && ( + + + { + replaceBlock( + clientId, + createBlock( + 'woocommerce/filter-wrapper', + { + heading, + filterType: 'active-filters', + } + ) + ); + setAttributes( { + heading: '', + } ); + } } + /> + + + ) } + ); }; From 3d0276622d7eb6d6da9fab21afb63d30f444cee9 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 12:34:06 +0700 Subject: [PATCH 16/62] limit the number of inner block to 2 --- assets/js/blocks/filter-wrapper/edit.tsx | 55 ++++++++++++++++++------ assets/js/blocks/filter-wrapper/types.ts | 4 ++ 2 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 assets/js/blocks/filter-wrapper/types.ts diff --git a/assets/js/blocks/filter-wrapper/edit.tsx b/assets/js/blocks/filter-wrapper/edit.tsx index 74a92a14768..6fda8ba61bf 100644 --- a/assets/js/blocks/filter-wrapper/edit.tsx +++ b/assets/js/blocks/filter-wrapper/edit.tsx @@ -1,24 +1,51 @@ /** * External dependencies */ -import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; +import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import type { BlockEditProps } from '@wordpress/blocks'; -const Edit = ( { attributes } ) => { +/** + * Internal dependencies + */ +import { Attributes } from './types'; + +const Edit = ( { attributes, clientId }: BlockEditProps< Attributes > ) => { const blockProps = useBlockProps(); - const innerBlocksProps = useInnerBlocksProps( blockProps, { - allowedBlocks: [ 'core/heading' ], - template: [ - [ 'core/heading', { level: 3, content: attributes.heading || '' } ], - [ - `woocommerce/${ attributes.filterType }`, - { - heading: '', - }, - ], - ], + + const innerBlockCount = useSelect( ( select ) => { + const currentBlock = select( 'core/block-editor' ).getBlock( clientId ); + if ( ! currentBlock ) { + return 0; + } + return currentBlock.innerBlocks.length; } ); - return
; + return ( +
+ { + if ( innerBlockCount < 2 ) { + return ; + } + return null; + } } + /> +
+ ); }; export default Edit; diff --git a/assets/js/blocks/filter-wrapper/types.ts b/assets/js/blocks/filter-wrapper/types.ts new file mode 100644 index 00000000000..8ad726da3d7 --- /dev/null +++ b/assets/js/blocks/filter-wrapper/types.ts @@ -0,0 +1,4 @@ +export interface Attributes { + heading: string; + filterType: string; +} From 83b7feed78a7a7f50fd5799d1706faa9f2fc9050 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 12:34:57 +0700 Subject: [PATCH 17/62] prevent removing the inner filter block --- assets/js/blocks/active-filters/block.json | 10 +++++++++- assets/js/blocks/price-filter/block.json | 10 +++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index 41473d28a06..8da81932688 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -12,7 +12,8 @@ "color": { "text": true, "background": false - } + }, + "lock": false }, "attributes": { "displayStyle": { @@ -22,6 +23,13 @@ "headingLevel": { "type": "number", "default": 3 + }, + "lock": { + "type": "object", + "default": { + "remove": true, + "move": false + } } }, "textdomain": "woo-gutenberg-products-block", diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json index a4f8a7b7241..4b928ff0205 100644 --- a/assets/js/blocks/price-filter/block.json +++ b/assets/js/blocks/price-filter/block.json @@ -11,7 +11,8 @@ "color": { "text": true, "background": false - } + }, + "lock": false }, "example": { "attributes": { @@ -38,6 +39,13 @@ "headingLevel": { "type": "number", "default": 3 + }, + "lock": { + "type": "object", + "default": { + "remove": true, + "move": false + } } }, "textdomain": "woo-gutenberg-products-block", From 00e94f10e07f0afd27edc98695b6c576b94725fb Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 13:01:24 +0700 Subject: [PATCH 18/62] Revert "prevent removing the inner filter block" This reverts commit 83b7feed78a7a7f50fd5799d1706faa9f2fc9050. --- assets/js/blocks/active-filters/block.json | 10 +--------- assets/js/blocks/price-filter/block.json | 10 +--------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index 8da81932688..41473d28a06 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -12,8 +12,7 @@ "color": { "text": true, "background": false - }, - "lock": false + } }, "attributes": { "displayStyle": { @@ -23,13 +22,6 @@ "headingLevel": { "type": "number", "default": 3 - }, - "lock": { - "type": "object", - "default": { - "remove": true, - "move": false - } } }, "textdomain": "woo-gutenberg-products-block", diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json index 4b928ff0205..a4f8a7b7241 100644 --- a/assets/js/blocks/price-filter/block.json +++ b/assets/js/blocks/price-filter/block.json @@ -11,8 +11,7 @@ "color": { "text": true, "background": false - }, - "lock": false + } }, "example": { "attributes": { @@ -39,13 +38,6 @@ "headingLevel": { "type": "number", "default": 3 - }, - "lock": { - "type": "object", - "default": { - "remove": true, - "move": false - } } }, "textdomain": "woo-gutenberg-products-block", From e4233408f3a41a16ae15d6f2398c300e09c08ce9 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 13:13:07 +0700 Subject: [PATCH 19/62] convert stock filter to inner block --- assets/js/blocks/filter-wrapper/index.tsx | 18 ++++++++++ .../filter-wrapper/register-components.ts | 5 +++ assets/js/blocks/stock-filter/block.json | 5 +-- assets/js/blocks/stock-filter/block.tsx | 11 +++++++ assets/js/blocks/stock-filter/edit.tsx | 33 ++++++------------- assets/js/blocks/stock-filter/index.tsx | 6 ---- 6 files changed, 47 insertions(+), 31 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index c271ded1746..908609a7121 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -55,5 +55,23 @@ registerBlockType( metadata, { ), }, }, + { + name: 'stock-filter', + title: __( 'Filter by Stock', 'woo-gutenberg-products-block' ), + description: __( + 'Allow customers to filter the grid by products stock status.', + 'woo-gutenberg-products-block' + ), + scope: [ 'inserter' ], + isActive: ( attributes ) => + attributes.filterType === 'stock-filter', + attributes: { + filterType: 'stock-filter', + heading: __( + 'Filter by Stock status', + 'woo-gutenberg-products-block' + ), + }, + }, ], } ); diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index 9dbe49b69eb..917160ea37e 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -13,3 +13,8 @@ registerBlockComponent( { blockName: 'woocommerce/price-filter', component: lazy( () => import( '../price-filter/block' ) ), } ); + +registerBlockComponent( { + blockName: 'woocommerce/stock-filter', + component: lazy( () => import( '../stock-filter/block' ) ), +} ); diff --git a/assets/js/blocks/stock-filter/block.json b/assets/js/blocks/stock-filter/block.json index 7b70971d80a..c3e49ddc703 100644 --- a/assets/js/blocks/stock-filter/block.json +++ b/assets/js/blocks/stock-filter/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/stock-filter", "version": "1.0.0", - "title": "Filter by Stock", + "title": "Filter by Stock Inner", "description": "Allow customers to filter the grid by products stock status.", "category": "woocommerce", "keywords": [ "WooCommerce" ], @@ -13,7 +13,8 @@ "__experimentalDefaultControls": { "text": true } - } + }, + "inserter": false }, "example": { "attributes": { diff --git a/assets/js/blocks/stock-filter/block.tsx b/assets/js/blocks/stock-filter/block.tsx index ddfa2fb7ef8..450fd1e40ab 100644 --- a/assets/js/blocks/stock-filter/block.tsx +++ b/assets/js/blocks/stock-filter/block.tsx @@ -36,6 +36,7 @@ import { previewOptions } from './preview'; import './style.scss'; import { getActiveFilters } from './utils'; import { Attributes, DisplayOption } from './types'; +import { useSetWraperVisibility } from '../filter-wrapper/context'; export const QUERY_PARAM_KEY = PREFIX_QUERY_ARG_FILTER_TYPE + 'stock_status'; @@ -53,6 +54,12 @@ const StockStatusFilterBlock = ( { attributes: Attributes; isEditor?: boolean; } ) => { + blockAttributes = { + ...blockAttributes, + isPreview: blockAttributes?.isPreview || false, + }; + const setWrapperVisibility = useSetWraperVisibility(); + const filteringForPhpTemplate = getSettingWithCoercion( 'is_rendering_php_template', false, @@ -342,6 +349,7 @@ const StockStatusFilterBlock = ( { ); if ( ! filteredCountsLoading && displayedOptions.length === 0 ) { + setWrapperVisibility( false ); return null; } @@ -359,6 +367,7 @@ const StockStatusFilterBlock = ( { ); if ( ! hasFilterableProducts ) { + setWrapperVisibility( false ); return null; } @@ -374,6 +383,8 @@ const StockStatusFilterBlock = ( { heading ); + setWrapperVisibility( true ); + return ( <> { ! isEditor && blockAttributes.heading && filterHeading } diff --git a/assets/js/blocks/stock-filter/edit.tsx b/assets/js/blocks/stock-filter/edit.tsx index d3f079471b1..2df8aae0c56 100644 --- a/assets/js/blocks/stock-filter/edit.tsx +++ b/assets/js/blocks/stock-filter/edit.tsx @@ -10,7 +10,6 @@ import { ToggleControl, withSpokenMessages, } from '@wordpress/components'; -import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar'; import BlockTitle from '@woocommerce/editor-components/block-title'; import type { BlockEditProps } from '@wordpress/blocks'; @@ -89,20 +88,6 @@ const Edit = ( { } /> - -

{ __( 'Size', 'woo-gutenberg-products-block' ) }

- - setAttributes( { headingLevel: newLevel } ) - } - /> - ); }; @@ -112,14 +97,16 @@ const Edit = ( { { getInspectorControls() } {
- - setAttributes( { heading: value } ) - } - /> + { heading && ( + + setAttributes( { heading: value } ) + } + /> + ) } diff --git a/assets/js/blocks/stock-filter/index.tsx b/assets/js/blocks/stock-filter/index.tsx index 9bb0b96af94..999bb034439 100644 --- a/assets/js/blocks/stock-filter/index.tsx +++ b/assets/js/blocks/stock-filter/index.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { Icon, box } from '@wordpress/icons'; import classNames from 'classnames'; @@ -16,11 +15,6 @@ import { blockAttributes } from './attributes'; import type { Attributes } from './types'; registerBlockType( metadata, { - title: __( 'Filter Products by Stock', 'woo-gutenberg-products-block' ), - description: __( - 'Allow customers to filter the grid by products stock status. Works in combination with the All Products block.', - 'woo-gutenberg-products-block' - ), icon: { src: ( Date: Fri, 2 Sep 2022 14:29:37 +0700 Subject: [PATCH 20/62] refactor block upgrade button to share between filter blocks --- assets/js/blocks/active-filters/edit.tsx | 117 +++++++------------- assets/js/blocks/filter-wrapper/upgrade.tsx | 58 ++++++++++ 2 files changed, 97 insertions(+), 78 deletions(-) create mode 100644 assets/js/blocks/filter-wrapper/upgrade.tsx diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index b76479e2b69..2bf3ec7f89b 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -2,20 +2,13 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { - InspectorControls, - useBlockProps, - BlockControls, -} from '@wordpress/block-editor'; -import { BlockEditProps, createBlock } from '@wordpress/blocks'; -import { useDispatch } from '@wordpress/data'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { BlockEditProps } from '@wordpress/blocks'; import BlockTitle from '@woocommerce/editor-components/block-title'; import { Disabled, PanelBody, withSpokenMessages, - ToolbarGroup, - ToolbarButton, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis @@ -28,6 +21,7 @@ import { import Block from './block'; import type { Attributes } from './types'; import './editor.scss'; +import { UpgradeToolbarButton } from '../filter-wrapper/upgrade'; const Edit = ( { attributes, @@ -40,89 +34,56 @@ const Edit = ( { className, } ); - const { replaceBlock } = useDispatch( 'core/block-editor' ); - const getInspectorControls = () => { return ( - <> - - + + + setAttributes( { + displayStyle: value, + } ) + } + className="wc-block-active-filter__style-toggle" > - + - setAttributes( { - displayStyle: value, - } ) - } - className="wc-block-active-filter__style-toggle" - > - - - - - - { heading && ( - - - { - replaceBlock( - clientId, - createBlock( - 'woocommerce/filter-wrapper', - { - heading, - filterType: 'active-filters', - } - ) - ); - setAttributes( { - heading: '', - } ); - } } - /> - - - ) } - + /> + + + ); }; return (
{ getInspectorControls() } + { heading && ( ) => void; +} + +export const UpgradeToolbarButton = ( { + heading, + clientId, + setAttributes, +}: UpgradeToolbarButtonProps ) => { + const { replaceBlock } = useDispatch( 'core/block-editor' ); + + const upgradeFilterBlockHandler = () => { + replaceBlock( + clientId, + createBlock( 'woocommerce/filter-wrapper', { + heading, + filterType: 'active-filters', + } ) + ); + setAttributes( { + heading: '', + } ); + }; + + if ( ! heading ) { + return null; + } + + return ( + + + + + + ); +}; From e14fe848c04a6cc0e5ba6234b2ad6611c5417fde Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 15:07:40 +0700 Subject: [PATCH 21/62] update default heading --- assets/js/blocks/filter-wrapper/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 908609a7121..00889f5b128 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -26,7 +26,7 @@ registerBlockType( metadata, { ...metadata.attributes, heading: { type: 'string', - default: __( 'Active Filters', 'woo-gutenberg-products-block' ), + default: __( 'Active filters', 'woo-gutenberg-products-block' ), }, }, edit, @@ -50,7 +50,7 @@ registerBlockType( metadata, { attributes: { filterType: 'price-filter', heading: __( - 'Filter by Price', + 'Filter by price', 'woo-gutenberg-products-block' ), }, @@ -68,7 +68,7 @@ registerBlockType( metadata, { attributes: { filterType: 'stock-filter', heading: __( - 'Filter by Stock status', + 'Filter by stock status', 'woo-gutenberg-products-block' ), }, From bb6973ab3b0c6e97d4341f3f1c1e9abd4e56a5a5 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 15:07:50 +0700 Subject: [PATCH 22/62] update pattern --- patterns/filters.php | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/patterns/filters.php b/patterns/filters.php index ef5cb154795..bdbb9ea2c7c 100644 --- a/patterns/filters.php +++ b/patterns/filters.php @@ -35,6 +35,14 @@
- -
+ +
+ +

Filter by Stock

+ + + +
+
+ From 42ac2b40fc109eef8b3d9baf3c590e81b24c5cd6 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 2 Sep 2022 19:32:48 +0700 Subject: [PATCH 23/62] update icon and title --- assets/js/blocks/active-filters/block.json | 2 +- assets/js/blocks/filter-wrapper/index.tsx | 18 +++++++++++++++++- assets/js/blocks/price-filter/block.json | 5 +++-- assets/js/blocks/stock-filter/block.json | 2 +- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index 41473d28a06..3ebc028c200 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/active-filters", "version": "1.0.0", - "title": "Active Product Filters Inner", + "title": "Active Product Filters Controls", "description": "Show the currently active product filters. Works in combination with other filters blocks.", "category": "woocommerce", "keywords": [ "WooCommerce" ], diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 00889f5b128..379d1983adc 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { toggle } from '@woocommerce/icons'; -import { Icon } from '@wordpress/icons'; +import { Icon, currencyDollar, box } from '@wordpress/icons'; import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; /** @@ -54,6 +54,14 @@ registerBlockType( metadata, { 'woo-gutenberg-products-block' ), }, + icon: { + src: ( + + ), + }, }, { name: 'stock-filter', @@ -72,6 +80,14 @@ registerBlockType( metadata, { 'woo-gutenberg-products-block' ), }, + icon: { + src: ( + + ), + }, }, ], } ); diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json index a4f8a7b7241..1946e9f52a8 100644 --- a/assets/js/blocks/price-filter/block.json +++ b/assets/js/blocks/price-filter/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/price-filter", "version": "1.0.0", - "title": "Filter by Price Inner", + "title": "Filter by Price Controls", "description": "Allow customers to filter products by price range.", "category": "woocommerce", "keywords": [ "WooCommerce" ], @@ -11,7 +11,8 @@ "color": { "text": true, "background": false - } + }, + "inserter": false }, "example": { "attributes": { diff --git a/assets/js/blocks/stock-filter/block.json b/assets/js/blocks/stock-filter/block.json index c3e49ddc703..4fdba8a9eea 100644 --- a/assets/js/blocks/stock-filter/block.json +++ b/assets/js/blocks/stock-filter/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/stock-filter", "version": "1.0.0", - "title": "Filter by Stock Inner", + "title": "Filter by Stock Controls", "description": "Allow customers to filter the grid by products stock status.", "category": "woocommerce", "keywords": [ "WooCommerce" ], From 0eb484cb33a9b4c96016ea2014b41fd0eaa9ef03 Mon Sep 17 00:00:00 2001 From: tjcafferkey Date: Fri, 16 Sep 2022 13:27:28 +0100 Subject: [PATCH 24/62] Fix stock filter error by importing translations package --- assets/js/blocks/stock-filter/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/js/blocks/stock-filter/index.tsx b/assets/js/blocks/stock-filter/index.tsx index c185e4102a7..209946f2b34 100644 --- a/assets/js/blocks/stock-filter/index.tsx +++ b/assets/js/blocks/stock-filter/index.tsx @@ -5,6 +5,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { Icon, box } from '@wordpress/icons'; import classNames from 'classnames'; import { useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies From deedc4aefa8489537be42f1ff0551829b1a8bc35 Mon Sep 17 00:00:00 2001 From: tjcafferkey Date: Fri, 16 Sep 2022 13:42:42 +0100 Subject: [PATCH 25/62] Upgrade Active Filters name to Active Filter Controls --- assets/js/blocks/active-filters/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index b4eb403d4e3..569061db42e 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/active-filters", "version": "1.0.0", - "title": "Active Product Filters", + "title": "Active Product Filter Controls", "description": "Display the currently active product filters.", "category": "woocommerce", "keywords": [ "WooCommerce" ], From 7e6b2ea12f3c9be4f2d98ebaf9e74c3495142642 Mon Sep 17 00:00:00 2001 From: tjcafferkey Date: Fri, 16 Sep 2022 13:49:03 +0100 Subject: [PATCH 26/62] Add upgrade support to price filter --- assets/js/blocks/active-filters/edit.tsx | 1 + assets/js/blocks/active-filters/index.tsx | 5 ++++- assets/js/blocks/filter-wrapper/upgrade.tsx | 6 ++++-- assets/js/blocks/price-filter/edit.tsx | 8 ++++++++ 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index 2bf3ec7f89b..0bd6207139d 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -83,6 +83,7 @@ const Edit = ( { heading={ heading } clientId={ clientId } setAttributes={ setAttributes } + filterType="active-filters" /> { heading && ( ) => void; + filterType: undefined | string; } export const UpgradeToolbarButton = ( { heading, clientId, setAttributes, + filterType, }: UpgradeToolbarButtonProps ) => { const { replaceBlock } = useDispatch( 'core/block-editor' ); @@ -25,7 +27,7 @@ export const UpgradeToolbarButton = ( { clientId, createBlock( 'woocommerce/filter-wrapper', { heading, - filterType: 'active-filters', + filterType, } ) ); setAttributes( { @@ -33,7 +35,7 @@ export const UpgradeToolbarButton = ( { } ); }; - if ( ! heading ) { + if ( ! heading || ! filterType ) { return null; } diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index a6f9ee066e4..8feb1e51eec 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -26,10 +26,12 @@ import { import Block from './block'; import './editor.scss'; import type { Attributes } from './types'; +import { UpgradeToolbarButton } from '../filter-wrapper/upgrade'; export default function ( { attributes, setAttributes, + clientId, }: BlockEditProps< Attributes > ) { const { heading, @@ -163,6 +165,12 @@ export default function ( { ) : ( <> { getInspectorControls() } + { heading && ( Date: Fri, 16 Sep 2022 19:50:46 +0700 Subject: [PATCH 27/62] Convert attribute filter to inner block (#7101) * wip: convert attribute filter to inner block * fix: render inner attribute filter block on the front end * refactor: inner block wrapper, extract the attribute parsing logic into a utility Co-authored-by: Tom Cafferkey --- assets/js/blocks/attribute-filter/block.json | 7 ++-- assets/js/blocks/attribute-filter/edit.tsx | 32 ++++------------ assets/js/blocks/attribute-filter/frontend.ts | 20 +--------- assets/js/blocks/attribute-filter/index.tsx | 5 --- .../attribute-filter/inner-block-wrapper.tsx | 11 ++++++ assets/js/blocks/attribute-filter/utils.ts | 38 ++++++++++++++++++- assets/js/blocks/filter-wrapper/index.tsx | 28 +++++++++++++- .../filter-wrapper/register-components.ts | 7 ++++ 8 files changed, 96 insertions(+), 52 deletions(-) create mode 100644 assets/js/blocks/attribute-filter/inner-block-wrapper.tsx diff --git a/assets/js/blocks/attribute-filter/block.json b/assets/js/blocks/attribute-filter/block.json index 38625f3021e..5adb555df6b 100644 --- a/assets/js/blocks/attribute-filter/block.json +++ b/assets/js/blocks/attribute-filter/block.json @@ -1,8 +1,8 @@ { "name": "woocommerce/attribute-filter", "version": "1.0.0", - "title": "Filter by Attribute", - "description": "Enable customers to filter the product grid by selecting one or more attributes, such as color.", + "title": "Filter by Attribute Controls", + "description": "Allow customers to filter the grid by product attribute, such as color.", "category": "woocommerce", "keywords": [ "WooCommerce" ], "supports": { @@ -10,7 +10,8 @@ "color": { "text": true, "background": false - } + }, + "inserter": false }, "example": { "attributes": { diff --git a/assets/js/blocks/attribute-filter/edit.tsx b/assets/js/blocks/attribute-filter/edit.tsx index 5c44864cf43..45d4536b585 100644 --- a/assets/js/blocks/attribute-filter/edit.tsx +++ b/assets/js/blocks/attribute-filter/edit.tsx @@ -12,7 +12,6 @@ import { Icon, category, external } from '@wordpress/icons'; import { SearchListControl } from '@woocommerce/editor-components/search-list-control'; import { sortBy } from 'lodash'; import { getAdminLink, getSetting } from '@woocommerce/settings'; -import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar'; import BlockTitle from '@woocommerce/editor-components/block-title'; import classnames from 'classnames'; import { SearchListItemsType } from '@woocommerce/editor-components/search-list-control/types'; @@ -91,15 +90,15 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => { return; } - const attributeName = productAttribute.attribute_label; + // const attributeName = productAttribute.attribute_label; setAttributes( { attributeId: selectedId as number, - heading: sprintf( - /* translators: %s attribute name. */ - __( 'Filter by %s', 'woo-gutenberg-products-block' ), - attributeName - ), + // heading: sprintf( + // /* translators: %s attribute name. */ + // __( 'Filter by %s', 'woo-gutenberg-products-block' ), + // attributeName + // ), } ); }; @@ -183,21 +182,6 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => { } ) } /> -

- { __( - 'Heading Level', - 'woo-gutenberg-products-block' - ) } -

- - setAttributes( { headingLevel: newLevel } ) - } - /> { 'wc-block-attribute-filter' ) } > - setAttributes( { heading: value } ) } - /> + /> } diff --git a/assets/js/blocks/attribute-filter/frontend.ts b/assets/js/blocks/attribute-filter/frontend.ts index 6e202b78dcb..2096e86c964 100644 --- a/assets/js/blocks/attribute-filter/frontend.ts +++ b/assets/js/blocks/attribute-filter/frontend.ts @@ -7,28 +7,12 @@ import { renderFrontend } from '@woocommerce/base-utils'; * Internal dependencies */ import Block from './block'; -import { blockAttributes } from './attributes'; -import metadata from './block.json'; +import { parseAttributes } from './utils'; const getProps = ( el: HTMLElement ) => { return { isEditor: false, - attributes: { - attributeId: parseInt( el.dataset.attributeId || '0', 10 ), - showCounts: el.dataset.showCounts === 'true', - queryType: - el.dataset.queryType || metadata.attributes.queryType.default, - heading: el.dataset.heading || blockAttributes.heading.default, - headingLevel: el.dataset.headingLevel - ? parseInt( el.dataset.headingLevel, 10 ) - : metadata.attributes.headingLevel.default, - displayStyle: - el.dataset.displayStyle || - metadata.attributes.displayStyle.default, - showFilterButton: el.dataset.showFilterButton === 'true', - selectType: - el.dataset.selectType || metadata.attributes.selectType.default, - }, + attributes: parseAttributes( el.dataset ), }; }; diff --git a/assets/js/blocks/attribute-filter/index.tsx b/assets/js/blocks/attribute-filter/index.tsx index 7081fd2b230..66ca976dee5 100644 --- a/assets/js/blocks/attribute-filter/index.tsx +++ b/assets/js/blocks/attribute-filter/index.tsx @@ -17,11 +17,6 @@ import { blockAttributes } from './attributes'; import metadata from './block.json'; registerBlockType( metadata, { - title: __( 'Filter by Attribute', 'woo-gutenberg-products-block' ), - description: __( - 'Enable customers to filter the product grid by selecting one or more attributes, such as color.', - 'woo-gutenberg-products-block' - ), icon: { src: ( ) => { + return ; +}; + +export default InnerBlockWrapper; diff --git a/assets/js/blocks/attribute-filter/utils.ts b/assets/js/blocks/attribute-filter/utils.ts index 754ce1bf495..9b9356e313c 100644 --- a/assets/js/blocks/attribute-filter/utils.ts +++ b/assets/js/blocks/attribute-filter/utils.ts @@ -8,7 +8,12 @@ import { PREFIX_QUERY_ARG_FILTER_TYPE, PREFIX_QUERY_ARG_QUERY_TYPE, } from '@woocommerce/utils'; -import { AttributeObject } from '@woocommerce/types'; +import { AttributeObject, isString } from '@woocommerce/types'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; interface Param { attribute: string; @@ -104,3 +109,34 @@ export const formatSlug = ( slug: string ) => .replace( /_/g, '-' ) .replace( /-+/g, '-' ) .replace( /[^a-zA-Z0-9-]/g, '' ); + +export const parseAttributes = ( data: Record< string, unknown > ) => { + return { + className: isString( data?.className ) ? data.className : '', + attributeId: parseInt( + isString( data?.attributeId ) ? data.attributeId : '0', + 10 + ), + showCounts: + data?.showCounts === 'true' || + metadata.attributes.showCounts.default, + queryType: + ( isString( data?.queryType ) && data.queryType ) || + metadata.attributes.queryType.default, + heading: isString( data?.heading ) ? data.heading : '', + headingLevel: + ( isString( data?.headingLevel ) && + parseInt( data.headingLevel, 10 ) ) || + metadata.attributes.headingLevel.default, + displayStyle: + ( isString( data?.displayStyle ) && data.displayStyle ) || + metadata.attributes.displayStyle.default, + showFilterButton: + data?.showFilterButton === 'true' || + metadata.attributes.showFilterButton.default, + selectType: + ( isString( data?.selectType ) && data.selectType ) || + metadata.attributes.selectType.default, + isPreview: false, + }; +}; diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 379d1983adc..a31e0767bce 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -4,8 +4,8 @@ import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { toggle } from '@woocommerce/icons'; -import { Icon, currencyDollar, box } from '@wordpress/icons'; import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; +import { Icon, category, currencyDollar, box } from '@wordpress/icons'; /** * Internal dependencies @@ -89,5 +89,31 @@ registerBlockType( metadata, { ), }, }, + { + name: 'attribute-filter', + title: __( 'Filter by Attribute', 'woo-gutenberg-products-block' ), + description: __( + 'Allow customers to filter the grid by product attribute, such as color.', + 'woo-gutenberg-products-block' + ), + scope: [ 'inserter' ], + isActive: ( attributes ) => + attributes.filterType === 'attribute-filter', + attributes: { + filterType: 'attribute-filter', + heading: __( + 'Filter by attribute', + 'woo-gutenberg-products-block' + ), + }, + icon: { + src: ( + + ), + }, + }, ], } ); diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index 917160ea37e..459c41d9ef9 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -18,3 +18,10 @@ registerBlockComponent( { blockName: 'woocommerce/stock-filter', component: lazy( () => import( '../stock-filter/block' ) ), } ); + +registerBlockComponent( { + blockName: 'woocommerce/attribute-filter', + component: lazy( + () => import( '../attribute-filter/inner-block-wrapper' ) + ), +} ); From 311b51299ac5a6fe41d54453c1c7fa85375bc7bb Mon Sep 17 00:00:00 2001 From: tjcafferkey Date: Fri, 16 Sep 2022 15:08:43 +0100 Subject: [PATCH 28/62] Set correct attribute on the new filter blocks when they are upgraded --- assets/js/blocks/active-filters/edit.tsx | 2 +- assets/js/blocks/attribute-filter/edit.tsx | 32 +++++++++++++------ assets/js/blocks/filter-wrapper/upgrade.tsx | 34 +++++++++++++++++---- assets/js/blocks/price-filter/edit.tsx | 2 +- 4 files changed, 53 insertions(+), 17 deletions(-) diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index 0bd6207139d..f0e33a8a0c8 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -80,7 +80,7 @@ const Edit = ( {
{ getInspectorControls() } ( 'attributes', [] ); -const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => { +const Edit = ( { + attributes, + setAttributes, + debouncedSpeak, + clientId, +}: EditProps ) => { const { attributeId, className, @@ -396,6 +402,12 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
{ getBlockControls() } { getInspectorControls() } + { isEditing ? ( renderEditMode() ) : ( @@ -405,14 +417,16 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => { 'wc-block-attribute-filter' ) } > - { heading && - setAttributes( { heading: value } ) - } - /> } + { heading && ( + + setAttributes( { heading: value } ) + } + /> + ) } diff --git a/assets/js/blocks/filter-wrapper/upgrade.tsx b/assets/js/blocks/filter-wrapper/upgrade.tsx index 221f14f9cf8..e2333c52878 100644 --- a/assets/js/blocks/filter-wrapper/upgrade.tsx +++ b/assets/js/blocks/filter-wrapper/upgrade.tsx @@ -3,32 +3,54 @@ */ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; +import type { BlockInstance } from '@wordpress/blocks'; import { useDispatch } from '@wordpress/data'; import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { BlockControls } from '@wordpress/block-editor'; interface UpgradeToolbarButtonProps { - heading: string; clientId: string; setAttributes: ( attributes: Record< string, unknown > ) => void; + attributes: Record< string, unknown >; filterType: undefined | string; } export const UpgradeToolbarButton = ( { - heading, clientId, setAttributes, filterType, + attributes, }: UpgradeToolbarButtonProps ) => { const { replaceBlock } = useDispatch( 'core/block-editor' ); + const { heading, headingLevel } = attributes; const upgradeFilterBlockHandler = () => { + const filterWrapperInnerBlocks: BlockInstance[] = [ + createBlock( `woocommerce/${ filterType }`, { + ...attributes, + heading: '', + } ), + ]; + + if ( heading && heading !== '' ) { + filterWrapperInnerBlocks.unshift( + createBlock( 'core/heading', { + content: heading, + headingLevel: headingLevel ?? 2, + } ) + ); + } + replaceBlock( clientId, - createBlock( 'woocommerce/filter-wrapper', { - heading, - filterType, - } ) + createBlock( + 'woocommerce/filter-wrapper', + { + heading, + filterType, + }, + [ ...filterWrapperInnerBlocks ] + ) ); setAttributes( { heading: '', diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index 8feb1e51eec..341f6180aff 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -166,7 +166,7 @@ export default function ( { <> { getInspectorControls() } Date: Tue, 20 Sep 2022 10:28:13 +0100 Subject: [PATCH 29/62] Use the Warning component to display the upgrade message so it is consistent with Gutenberg --- assets/js/blocks/filter-wrapper/upgrade.tsx | 36 ++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/upgrade.tsx b/assets/js/blocks/filter-wrapper/upgrade.tsx index e2333c52878..a8dbc89287b 100644 --- a/assets/js/blocks/filter-wrapper/upgrade.tsx +++ b/assets/js/blocks/filter-wrapper/upgrade.tsx @@ -5,8 +5,8 @@ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import type { BlockInstance } from '@wordpress/blocks'; import { useDispatch } from '@wordpress/data'; -import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; -import { BlockControls } from '@wordpress/block-editor'; +import { Button } from '@wordpress/components'; +import { Warning } from '@wordpress/block-editor'; interface UpgradeToolbarButtonProps { clientId: string; @@ -61,22 +61,22 @@ export const UpgradeToolbarButton = ( { return null; } + const actions = [ + , + ]; + return ( - - - - - + + { __( + 'Filter block: We have improved this block to make styling easier. Upgrade this block using the button below', + 'woo-gutenberg-products-block' + ) } + ); }; From 69cea5b177a8078f4d7f0c63003d191f038a73c3 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 26 Sep 2022 23:47:24 +0700 Subject: [PATCH 30/62] address code review --- assets/js/blocks/active-filters/block.tsx | 6 +++--- assets/js/blocks/filter-wrapper/block.tsx | 2 +- assets/js/blocks/filter-wrapper/context.ts | 2 +- assets/js/blocks/filter-wrapper/style.scss | 7 ------- assets/js/blocks/filter-wrapper/upgrade.tsx | 2 +- assets/js/blocks/price-filter/block.tsx | 2 +- patterns/filters.php | 4 ++-- 7 files changed, 9 insertions(+), 16 deletions(-) delete mode 100644 assets/js/blocks/filter-wrapper/style.scss diff --git a/assets/js/blocks/active-filters/block.tsx b/assets/js/blocks/active-filters/block.tsx index 0f3fb3f82c7..2b777deaaa6 100644 --- a/assets/js/blocks/active-filters/block.tsx +++ b/assets/js/blocks/active-filters/block.tsx @@ -187,9 +187,9 @@ const ActiveFiltersBlock = ( { ); } ); }, [ - componentHasMounted, - setIsLoading, productAttributes, + componentHasMounted, + STORE_ATTRIBUTES, blockAttributes.displayStyle, ] ); @@ -268,7 +268,7 @@ const ActiveFiltersBlock = ( { }; if ( ! shouldShowLoadingPlaceholders && ! hasFilters() && ! isEditor ) { - setWrapperVisibility( false ); + setWrapperVisibility( false ); return null; } diff --git a/assets/js/blocks/filter-wrapper/block.tsx b/assets/js/blocks/filter-wrapper/block.tsx index 83ee73bf9ac..c54b3e6cdcf 100644 --- a/assets/js/blocks/filter-wrapper/block.tsx +++ b/assets/js/blocks/filter-wrapper/block.tsx @@ -16,7 +16,7 @@ type Props = { const Block = ( { children }: Props ): JSX.Element => { const wrapper = useRef( null ); return ( -
+
{ children } diff --git a/assets/js/blocks/filter-wrapper/context.ts b/assets/js/blocks/filter-wrapper/context.ts index a05c4a5d7b9..4ccf3dec0a3 100644 --- a/assets/js/blocks/filter-wrapper/context.ts +++ b/assets/js/blocks/filter-wrapper/context.ts @@ -23,7 +23,7 @@ export const useSetWraperVisibility = () => { return; } if ( wrapper.current ) { - wrapper.current.style.display = isVisible ? 'block' : 'none'; + wrapper.current.hidden = isVisible ? false : true; } }; }; diff --git a/assets/js/blocks/filter-wrapper/style.scss b/assets/js/blocks/filter-wrapper/style.scss deleted file mode 100644 index 7d12f63667e..00000000000 --- a/assets/js/blocks/filter-wrapper/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -// .wc-blocks-filter-inner-wrappers { -// display: none; - -// &.is-visible { -// display: block; -// } -// } diff --git a/assets/js/blocks/filter-wrapper/upgrade.tsx b/assets/js/blocks/filter-wrapper/upgrade.tsx index a8dbc89287b..13adafc3449 100644 --- a/assets/js/blocks/filter-wrapper/upgrade.tsx +++ b/assets/js/blocks/filter-wrapper/upgrade.tsx @@ -74,7 +74,7 @@ export const UpgradeToolbarButton = ( { return ( { __( - 'Filter block: We have improved this block to make styling easier. Upgrade this block using the button below', + 'Filter block: We have improved this block to make styling easier. Upgrade it using the button below.', 'woo-gutenberg-products-block' ) } diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx index 8138e4c9e0b..de319fe2298 100644 --- a/assets/js/blocks/price-filter/block.tsx +++ b/assets/js/blocks/price-filter/block.tsx @@ -319,7 +319,7 @@ const PriceFilterBlock = ( { `h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements; setWrapperVisibility( true ); - + if ( ! isLoading && isUpdating ) { setIsUpdating( false ); } diff --git a/patterns/filters.php b/patterns/filters.php index bdbb9ea2c7c..ce7f4d388cf 100644 --- a/patterns/filters.php +++ b/patterns/filters.php @@ -19,7 +19,7 @@
- +

Filter by Price

@@ -35,7 +35,7 @@
- +

Filter by Stock

From 673126456d73f61ba040cd7d160c4a3d89edb1fd Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 27 Sep 2022 15:28:38 +0700 Subject: [PATCH 31/62] better detect legacy block to show the upgrade notice --- assets/js/blocks/filter-wrapper/upgrade.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/upgrade.tsx b/assets/js/blocks/filter-wrapper/upgrade.tsx index 13adafc3449..f6869cdfbea 100644 --- a/assets/js/blocks/filter-wrapper/upgrade.tsx +++ b/assets/js/blocks/filter-wrapper/upgrade.tsx @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import type { BlockInstance } from '@wordpress/blocks'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; import { Warning } from '@wordpress/block-editor'; @@ -23,6 +23,19 @@ export const UpgradeToolbarButton = ( { }: UpgradeToolbarButtonProps ) => { const { replaceBlock } = useDispatch( 'core/block-editor' ); const { heading, headingLevel } = attributes; + const isInsideFilterWrapper = useSelect( + ( select ) => { + const { getBlockParentsByBlockName } = + select( 'core/block-editor' ); + return ( + getBlockParentsByBlockName( + clientId, + 'woocommerce/filter-wrapper' + ).length > 0 + ); + }, + [ clientId ] + ); const upgradeFilterBlockHandler = () => { const filterWrapperInnerBlocks: BlockInstance[] = [ @@ -57,7 +70,7 @@ export const UpgradeToolbarButton = ( { } ); }; - if ( ! heading || ! filterType ) { + if ( isInsideFilterWrapper || ! filterType ) { return null; } From 81bbadb5aa64620b2d493fc321d455e3bae018b9 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 27 Sep 2022 15:37:01 +0700 Subject: [PATCH 32/62] rename UpgradeToolbarButton to UpgradeNotice --- assets/js/blocks/active-filters/edit.tsx | 4 ++-- assets/js/blocks/attribute-filter/edit.tsx | 4 ++-- assets/js/blocks/filter-wrapper/upgrade.tsx | 6 +++--- assets/js/blocks/price-filter/edit.tsx | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/assets/js/blocks/active-filters/edit.tsx b/assets/js/blocks/active-filters/edit.tsx index f0e33a8a0c8..6c5b4481c03 100644 --- a/assets/js/blocks/active-filters/edit.tsx +++ b/assets/js/blocks/active-filters/edit.tsx @@ -21,7 +21,7 @@ import { import Block from './block'; import type { Attributes } from './types'; import './editor.scss'; -import { UpgradeToolbarButton } from '../filter-wrapper/upgrade'; +import { UpgradeNotice } from '../filter-wrapper/upgrade'; const Edit = ( { attributes, @@ -79,7 +79,7 @@ const Edit = ( { return (
{ getInspectorControls() } - ( 'attributes', [] ); @@ -402,7 +402,7 @@ const Edit = ( {
{ getBlockControls() } { getInspectorControls() } - ) => void; attributes: Record< string, unknown >; filterType: undefined | string; } -export const UpgradeToolbarButton = ( { +export const UpgradeNotice = ( { clientId, setAttributes, filterType, attributes, -}: UpgradeToolbarButtonProps ) => { +}: UpgradeNoticeProps ) => { const { replaceBlock } = useDispatch( 'core/block-editor' ); const { heading, headingLevel } = attributes; const isInsideFilterWrapper = useSelect( diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index 341f6180aff..5408dba88d2 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -26,7 +26,7 @@ import { import Block from './block'; import './editor.scss'; import type { Attributes } from './types'; -import { UpgradeToolbarButton } from '../filter-wrapper/upgrade'; +import { UpgradeNotice } from '../filter-wrapper/upgrade'; export default function ( { attributes, @@ -165,7 +165,7 @@ export default function ( { ) : ( <> { getInspectorControls() } - Date: Tue, 27 Sep 2022 15:48:28 +0700 Subject: [PATCH 33/62] add upgrade notice to the stock filter block --- assets/js/blocks/stock-filter/edit.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/js/blocks/stock-filter/edit.tsx b/assets/js/blocks/stock-filter/edit.tsx index 79f7d16c066..5c7fddf33ad 100644 --- a/assets/js/blocks/stock-filter/edit.tsx +++ b/assets/js/blocks/stock-filter/edit.tsx @@ -19,8 +19,10 @@ import type { BlockEditProps } from '@wordpress/blocks'; import Block from './block'; import './editor.scss'; import { Attributes } from './types'; +import { UpgradeNotice } from '../filter-wrapper/upgrade'; const Edit = ( { + clientId, attributes, setAttributes, }: BlockEditProps< Attributes > ) => { @@ -84,6 +86,12 @@ const Edit = ( { return ( <> { getInspectorControls() } + {
{ heading && ( From d5ae52b06254729487d722d8990c463cd841eea8 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 12:49:25 +0700 Subject: [PATCH 34/62] rename InnerBlockWrapper to BlockWrapper --- .../{inner-block-wrapper.tsx => block-wrapper.tsx} | 4 ++-- assets/js/blocks/filter-wrapper/register-components.ts | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) rename assets/js/blocks/attribute-filter/{inner-block-wrapper.tsx => block-wrapper.tsx} (64%) diff --git a/assets/js/blocks/attribute-filter/inner-block-wrapper.tsx b/assets/js/blocks/attribute-filter/block-wrapper.tsx similarity index 64% rename from assets/js/blocks/attribute-filter/inner-block-wrapper.tsx rename to assets/js/blocks/attribute-filter/block-wrapper.tsx index cfea09bc758..32928ccf19f 100644 --- a/assets/js/blocks/attribute-filter/inner-block-wrapper.tsx +++ b/assets/js/blocks/attribute-filter/block-wrapper.tsx @@ -4,8 +4,8 @@ import Block from './block'; import { parseAttributes } from './utils'; -const InnerBlockWrapper = ( props: Record< string, unknown > ) => { +const BlockWrapper = ( props: Record< string, unknown > ) => { return ; }; -export default InnerBlockWrapper; +export default BlockWrapper; diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index 459c41d9ef9..be7c5806966 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -21,7 +21,5 @@ registerBlockComponent( { registerBlockComponent( { blockName: 'woocommerce/attribute-filter', - component: lazy( - () => import( '../attribute-filter/inner-block-wrapper' ) - ), + component: lazy( () => import( '../attribute-filter/block-wrapper' ) ), } ); From c0984acb34cd2839e57d393f0eed30ba7c48d093 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 13:00:51 +0700 Subject: [PATCH 35/62] attribute-filter: control wrapper visibility --- assets/js/blocks/attribute-filter/block.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx index a7b2a13d266..0c605b29626 100644 --- a/assets/js/blocks/attribute-filter/block.tsx +++ b/assets/js/blocks/attribute-filter/block.tsx @@ -58,6 +58,7 @@ import { } from './utils'; import { BlockAttributes, DisplayOption } from './types'; import CheckboxFilter from './checkbox-filter'; +import { useSetWraperVisibility } from '../filter-wrapper/context'; /** * Formats filter values into a string for the URL parameters needed for filtering PHP templates. @@ -468,7 +469,10 @@ const AttributeFilterBlock = ( { filteringForPhpTemplate, ] ); + const setWrapperVisibility = useSetWraperVisibility(); + if ( ! hasFilterableProducts ) { + setWrapperVisibility( false ); return null; } @@ -486,6 +490,7 @@ const AttributeFilterBlock = ( { ); } + setWrapperVisibility( false ); return null; } @@ -513,6 +518,7 @@ const AttributeFilterBlock = ( { ( termsLoading || countsLoading ) && displayedOptions.length === 0; if ( ! isLoading && displayedOptions.length === 0 ) { + setWrapperVisibility( false ); return null; } @@ -528,6 +534,8 @@ const AttributeFilterBlock = ( { heading ); + setWrapperVisibility( true ); + return ( <> { ! isEditor && blockAttributes.heading && filterHeading } From ce3ed78423ec19995a12b7f6a5f4dab0dd674dc3 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 14:47:11 +0700 Subject: [PATCH 36/62] passing block attributes down to inner active filters control block --- .../blocks/active-filters/block-wrapper.tsx | 26 +++++++++++++++++++ assets/js/blocks/active-filters/frontend.ts | 13 ++-------- assets/js/blocks/active-filters/utils.tsx | 20 ++++++++++++++ .../filter-wrapper/register-components.ts | 2 +- 4 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 assets/js/blocks/active-filters/block-wrapper.tsx diff --git a/assets/js/blocks/active-filters/block-wrapper.tsx b/assets/js/blocks/active-filters/block-wrapper.tsx new file mode 100644 index 00000000000..9976265f065 --- /dev/null +++ b/assets/js/blocks/active-filters/block-wrapper.tsx @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { useColorProps } from '@woocommerce/base-hooks'; +import { isString } from '@woocommerce/types'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { parseAttributes } from './utils'; + +const BlockWrapper = ( props: Record< string, unknown > ) => { + const colorProps = useColorProps( props ); + + return ( +
+ +
+ ); +}; + +export default BlockWrapper; diff --git a/assets/js/blocks/active-filters/frontend.ts b/assets/js/blocks/active-filters/frontend.ts index 245a5704cf9..ed80c3ee2d2 100644 --- a/assets/js/blocks/active-filters/frontend.ts +++ b/assets/js/blocks/active-filters/frontend.ts @@ -7,20 +7,11 @@ import { renderFrontend } from '@woocommerce/base-utils'; * Internal dependencies */ import Block from './block'; -import metadata from './block.json'; -import { blockAttributes } from './attributes'; +import { parseAttributes } from './utils'; const getProps = ( el: HTMLElement ) => { return { - attributes: { - displayStyle: - el.dataset.displayStyle || - metadata.attributes.displayStyle.default, - heading: el.dataset.heading || blockAttributes.heading.default, - headingLevel: el.dataset.headingLevel - ? parseInt( el.dataset.headingLevel, 10 ) - : metadata.attributes.headingLevel.default, - }, + attributes: parseAttributes( el.dataset ), isEditor: false, }; }; diff --git a/assets/js/blocks/active-filters/utils.tsx b/assets/js/blocks/active-filters/utils.tsx index 7786ebae0b9..68098e3be58 100644 --- a/assets/js/blocks/active-filters/utils.tsx +++ b/assets/js/blocks/active-filters/utils.tsx @@ -8,6 +8,12 @@ import Label from '@woocommerce/base-components/label'; import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url'; import { changeUrl } from '@woocommerce/utils'; import { Icon, closeSmall } from '@wordpress/icons'; +import { isString } from '@woocommerce/types'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; /** * Format a min/max price range to display. @@ -277,3 +283,17 @@ export const urlContainsAttributeFilter = ( return filterIsInUrl; }; + +export const parseAttributes = ( data: Record< string, unknown > ) => { + return { + heading: isString( data?.heading ) ? data.heading : '', + headingLevel: + ( isString( data?.headingLevel ) && + parseInt( data.headingLevel, 10 ) ) || + metadata.attributes.headingLevel.default, + displayStyle: + ( isString( data?.displayStyle ) && data.displayStyle ) || + metadata.attributes.displayStyle.default, + style: ( isString( data?.style ) && data.style ) || '', + }; +}; diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index be7c5806966..febd44f23b4 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -6,7 +6,7 @@ import { lazy } from '@wordpress/element'; registerBlockComponent( { blockName: 'woocommerce/active-filters', - component: lazy( () => import( '../active-filters/block' ) ), + component: lazy( () => import( '../active-filters/block-wrapper' ) ), } ); registerBlockComponent( { From 53056118dc063c5146d957f9b54aec79e65ded67 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 14:50:34 +0700 Subject: [PATCH 37/62] fix styling of inner attribute filter control block --- .../blocks/attribute-filter/block-wrapper.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/attribute-filter/block-wrapper.tsx b/assets/js/blocks/attribute-filter/block-wrapper.tsx index 32928ccf19f..9976265f065 100644 --- a/assets/js/blocks/attribute-filter/block-wrapper.tsx +++ b/assets/js/blocks/attribute-filter/block-wrapper.tsx @@ -1,3 +1,9 @@ +/** + * External dependencies + */ +import { useColorProps } from '@woocommerce/base-hooks'; +import { isString } from '@woocommerce/types'; + /** * Internal dependencies */ @@ -5,7 +11,16 @@ import Block from './block'; import { parseAttributes } from './utils'; const BlockWrapper = ( props: Record< string, unknown > ) => { - return ; + const colorProps = useColorProps( props ); + + return ( +
+ +
+ ); }; export default BlockWrapper; From 29542e1585661d30a240256641aeb6b731f2141e Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 16:12:23 +0700 Subject: [PATCH 38/62] passing attribute to inner price filter control block --- assets/js/blocks/active-filters/block.tsx | 7 ----- assets/js/blocks/active-filters/utils.tsx | 1 - assets/js/blocks/attribute-filter/utils.ts | 8 ++---- .../filter-wrapper/register-components.ts | 2 +- .../js/blocks/price-filter/block-wrapper.tsx | 26 +++++++++++++++++++ assets/js/blocks/price-filter/block.tsx | 7 ----- assets/js/blocks/price-filter/frontend.ts | 13 ++-------- assets/js/blocks/price-filter/utils.ts | 22 ++++++++++++++++ 8 files changed, 53 insertions(+), 33 deletions(-) create mode 100644 assets/js/blocks/price-filter/block-wrapper.tsx create mode 100644 assets/js/blocks/price-filter/utils.ts diff --git a/assets/js/blocks/active-filters/block.tsx b/assets/js/blocks/active-filters/block.tsx index 2b777deaaa6..29362f1fe8f 100644 --- a/assets/js/blocks/active-filters/block.tsx +++ b/assets/js/blocks/active-filters/block.tsx @@ -35,7 +35,6 @@ import { import ActiveAttributeFilters from './active-attribute-filters'; import FilterPlaceholders from './filter-placeholders'; import { Attributes } from './types'; -import metadata from './block.json'; import { useSetWraperVisibility } from '../filter-wrapper/context'; /** @@ -52,12 +51,6 @@ const ActiveFiltersBlock = ( { attributes: Attributes; isEditor?: boolean; } ) => { - blockAttributes = { - ...blockAttributes, - displayStyle: - blockAttributes?.displayStyle || - metadata.attributes.displayStyle.default, - }; const setWrapperVisibility = useSetWraperVisibility(); const isMounted = useIsMounted(); const componentHasMounted = isMounted(); diff --git a/assets/js/blocks/active-filters/utils.tsx b/assets/js/blocks/active-filters/utils.tsx index 68098e3be58..28c0c9e7c71 100644 --- a/assets/js/blocks/active-filters/utils.tsx +++ b/assets/js/blocks/active-filters/utils.tsx @@ -294,6 +294,5 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { displayStyle: ( isString( data?.displayStyle ) && data.displayStyle ) || metadata.attributes.displayStyle.default, - style: ( isString( data?.style ) && data.style ) || '', }; }; diff --git a/assets/js/blocks/attribute-filter/utils.ts b/assets/js/blocks/attribute-filter/utils.ts index 9b9356e313c..9fd2cc477b9 100644 --- a/assets/js/blocks/attribute-filter/utils.ts +++ b/assets/js/blocks/attribute-filter/utils.ts @@ -117,9 +117,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { isString( data?.attributeId ) ? data.attributeId : '0', 10 ), - showCounts: - data?.showCounts === 'true' || - metadata.attributes.showCounts.default, + showCounts: data?.showCounts === 'true', queryType: ( isString( data?.queryType ) && data.queryType ) || metadata.attributes.queryType.default, @@ -131,9 +129,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { displayStyle: ( isString( data?.displayStyle ) && data.displayStyle ) || metadata.attributes.displayStyle.default, - showFilterButton: - data?.showFilterButton === 'true' || - metadata.attributes.showFilterButton.default, + showFilterButton: data?.showFilterButton === 'true', selectType: ( isString( data?.selectType ) && data.selectType ) || metadata.attributes.selectType.default, diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index febd44f23b4..647fe4615a8 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -11,7 +11,7 @@ registerBlockComponent( { registerBlockComponent( { blockName: 'woocommerce/price-filter', - component: lazy( () => import( '../price-filter/block' ) ), + component: lazy( () => import( '../price-filter/block-wrapper' ) ), } ); registerBlockComponent( { diff --git a/assets/js/blocks/price-filter/block-wrapper.tsx b/assets/js/blocks/price-filter/block-wrapper.tsx new file mode 100644 index 00000000000..9976265f065 --- /dev/null +++ b/assets/js/blocks/price-filter/block-wrapper.tsx @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { useColorProps } from '@woocommerce/base-hooks'; +import { isString } from '@woocommerce/types'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { parseAttributes } from './utils'; + +const BlockWrapper = ( props: Record< string, unknown > ) => { + const colorProps = useColorProps( props ); + + return ( +
+ +
+ ); +}; + +export default BlockWrapper; diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx index de319fe2298..b954d35ec7e 100644 --- a/assets/js/blocks/price-filter/block.tsx +++ b/assets/js/blocks/price-filter/block.tsx @@ -29,7 +29,6 @@ import { import usePriceConstraints from './use-price-constraints'; import './style.scss'; import { Attributes } from './types'; -import metadata from './block.json'; import { useSetWraperVisibility } from '../filter-wrapper/context'; /** @@ -87,12 +86,6 @@ const PriceFilterBlock = ( { attributes: Attributes; isEditor: boolean; } ) => { - attributes = { - ...attributes, - showFilterButton: - attributes?.showFilterButton || - metadata.attributes.showFilterButton.default, - }; const setWrapperVisibility = useSetWraperVisibility(); const hasFilterableProducts = getSettingWithCoercion( 'has_filterable_products', diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts index ef69736b03d..0f46f225b93 100644 --- a/assets/js/blocks/price-filter/frontend.ts +++ b/assets/js/blocks/price-filter/frontend.ts @@ -7,20 +7,11 @@ import { renderFrontend } from '@woocommerce/base-utils'; * Internal dependencies */ import Block from './block'; -import metadata from './block.json'; -import { blockAttributes } from './attributes'; +import { parseAttributes } from './utils'; const getProps = ( el: HTMLElement ) => { return { - attributes: { - showInputFields: el.dataset.showinputfields === 'true', - inlineInput: el.dataset.inlineInput === 'true', - showFilterButton: el.dataset.showfilterbutton === 'true', - heading: el.dataset.heading || blockAttributes.heading.default, - headingLevel: el.dataset.headingLevel - ? parseInt( el.dataset.headingLevel, 10 ) - : metadata.attributes.headingLevel.default, - }, + attributes: parseAttributes( el.dataset ), isEditor: false, }; }; diff --git a/assets/js/blocks/price-filter/utils.ts b/assets/js/blocks/price-filter/utils.ts new file mode 100644 index 00000000000..14d5878a8b3 --- /dev/null +++ b/assets/js/blocks/price-filter/utils.ts @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { isString } from '@woocommerce/types'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; + +export const parseAttributes = ( data: Record< string, unknown > ) => { + return { + heading: isString( data?.heading ) ? data.heading : '', + headingLevel: + ( isString( data?.headingLevel ) && + parseInt( data.headingLevel, 10 ) ) || + metadata.attributes.headingLevel.default, + showFilterButton: data?.showFilterButton === 'true', + showInputFields: data?.showInputFields === 'true', + inlineInput: data?.inlineInput === 'true', + }; +}; From a903151b3cd032dcd5676f8059faa838ac9d497c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 16:20:00 +0700 Subject: [PATCH 39/62] passing down the attribute to inner stock filter control block --- .../filter-wrapper/register-components.ts | 2 +- .../js/blocks/stock-filter/block-wrapper.tsx | 26 +++++++++++++++++++ assets/js/blocks/stock-filter/frontend.ts | 12 ++------- assets/js/blocks/stock-filter/utils.ts | 17 ++++++++++++ 4 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 assets/js/blocks/stock-filter/block-wrapper.tsx diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index 647fe4615a8..f1049f779a3 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -16,7 +16,7 @@ registerBlockComponent( { registerBlockComponent( { blockName: 'woocommerce/stock-filter', - component: lazy( () => import( '../stock-filter/block' ) ), + component: lazy( () => import( '../stock-filter/block-wrapper' ) ), } ); registerBlockComponent( { diff --git a/assets/js/blocks/stock-filter/block-wrapper.tsx b/assets/js/blocks/stock-filter/block-wrapper.tsx new file mode 100644 index 00000000000..9976265f065 --- /dev/null +++ b/assets/js/blocks/stock-filter/block-wrapper.tsx @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { useColorProps } from '@woocommerce/base-hooks'; +import { isString } from '@woocommerce/types'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { parseAttributes } from './utils'; + +const BlockWrapper = ( props: Record< string, unknown > ) => { + const colorProps = useColorProps( props ); + + return ( +
+ +
+ ); +}; + +export default BlockWrapper; diff --git a/assets/js/blocks/stock-filter/frontend.ts b/assets/js/blocks/stock-filter/frontend.ts index cd2e3094e70..40a7331075d 100644 --- a/assets/js/blocks/stock-filter/frontend.ts +++ b/assets/js/blocks/stock-filter/frontend.ts @@ -7,19 +7,11 @@ import { renderFrontend } from '@woocommerce/base-utils'; * Internal dependencies */ import Block from './block'; -import metadata from './block.json'; -import { blockAttributes } from './attributes'; +import { parseAttributes } from './utils'; const getProps = ( el: HTMLElement ) => { return { - attributes: { - showCounts: el.dataset.showCounts === 'true', - heading: el.dataset.heading || blockAttributes.heading.default, - headingLevel: el.dataset.headingLevel - ? parseInt( el.dataset.headingLevel, 10 ) - : metadata.attributes.headingLevel.default, - showFilterButton: el.dataset.showFilterButton === 'true', - }, + attributes: parseAttributes( el.dataset ), isEditor: false, }; }; diff --git a/assets/js/blocks/stock-filter/utils.ts b/assets/js/blocks/stock-filter/utils.ts index 263c0d4b5ba..d4c0d82c947 100644 --- a/assets/js/blocks/stock-filter/utils.ts +++ b/assets/js/blocks/stock-filter/utils.ts @@ -4,6 +4,11 @@ import { isString } from '@woocommerce/types'; import { getUrlParameter } from '@woocommerce/utils'; +/** + * Internal dependencies + */ +import metadata from './block.json'; + export const getActiveFilters = ( filters: Record< string, string >, queryParamKey = 'filter_stock_status' @@ -22,3 +27,15 @@ export const getActiveFilters = ( parsedParams.includes( filter ) ); }; + +export const parseAttributes = ( data: Record< string, unknown > ) => { + return { + heading: isString( data?.heading ) ? data.heading : '', + headingLevel: + ( isString( data?.headingLevel ) && + parseInt( data.headingLevel, 10 ) ) || + metadata.attributes.headingLevel.default, + showFilterButton: data?.showFilterButton === 'true', + showCounts: data?.showCounts === 'true', + }; +}; From e1f0f339194a6aac80936eef875351db4c2ba0ef Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 28 Sep 2022 16:34:27 +0700 Subject: [PATCH 40/62] remove unneccessary parsing --- assets/js/blocks/stock-filter/block.tsx | 4 ---- assets/js/blocks/stock-filter/utils.ts | 1 + 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/assets/js/blocks/stock-filter/block.tsx b/assets/js/blocks/stock-filter/block.tsx index d2e5f1c63b7..2b347935493 100644 --- a/assets/js/blocks/stock-filter/block.tsx +++ b/assets/js/blocks/stock-filter/block.tsx @@ -54,10 +54,6 @@ const StockStatusFilterBlock = ( { attributes: Attributes; isEditor?: boolean; } ) => { - blockAttributes = { - ...blockAttributes, - isPreview: blockAttributes?.isPreview || false, - }; const setWrapperVisibility = useSetWraperVisibility(); const filteringForPhpTemplate = getSettingWithCoercion( diff --git a/assets/js/blocks/stock-filter/utils.ts b/assets/js/blocks/stock-filter/utils.ts index d4c0d82c947..3ecfa0aba3c 100644 --- a/assets/js/blocks/stock-filter/utils.ts +++ b/assets/js/blocks/stock-filter/utils.ts @@ -37,5 +37,6 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { metadata.attributes.headingLevel.default, showFilterButton: data?.showFilterButton === 'true', showCounts: data?.showCounts === 'true', + isPreview: false, }; }; From b3d4d56e13f178d8438a55020505abedb596d3ef Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 12:15:42 +0700 Subject: [PATCH 41/62] use default scope for variations --- assets/js/blocks/filter-wrapper/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index a31e0767bce..88647d6c0e5 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -44,7 +44,6 @@ registerBlockType( metadata, { 'Allow customers to filter products by price range.', 'woo-gutenberg-products-block' ), - scope: [ 'inserter' ], isActive: ( attributes ) => attributes.filterType === 'price-filter', attributes: { @@ -70,7 +69,6 @@ registerBlockType( metadata, { 'Allow customers to filter the grid by products stock status.', 'woo-gutenberg-products-block' ), - scope: [ 'inserter' ], isActive: ( attributes ) => attributes.filterType === 'stock-filter', attributes: { @@ -96,7 +94,6 @@ registerBlockType( metadata, { 'Allow customers to filter the grid by product attribute, such as color.', 'woo-gutenberg-products-block' ), - scope: [ 'inserter' ], isActive: ( attributes ) => attributes.filterType === 'attribute-filter', attributes: { From a44ad73600b2f6c057f651355dd8ae1fcc7432f1 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 20:37:03 +0700 Subject: [PATCH 42/62] fix default attribute values --- assets/js/blocks/attribute-filter/utils.ts | 2 +- assets/js/blocks/price-filter/utils.ts | 2 +- assets/js/blocks/stock-filter/utils.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/attribute-filter/utils.ts b/assets/js/blocks/attribute-filter/utils.ts index 9fd2cc477b9..4d401726ef6 100644 --- a/assets/js/blocks/attribute-filter/utils.ts +++ b/assets/js/blocks/attribute-filter/utils.ts @@ -117,7 +117,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { isString( data?.attributeId ) ? data.attributeId : '0', 10 ), - showCounts: data?.showCounts === 'true', + showCounts: data?.showCounts !== 'false', queryType: ( isString( data?.queryType ) && data.queryType ) || metadata.attributes.queryType.default, diff --git a/assets/js/blocks/price-filter/utils.ts b/assets/js/blocks/price-filter/utils.ts index 14d5878a8b3..7a7b40fc566 100644 --- a/assets/js/blocks/price-filter/utils.ts +++ b/assets/js/blocks/price-filter/utils.ts @@ -16,7 +16,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { parseInt( data.headingLevel, 10 ) ) || metadata.attributes.headingLevel.default, showFilterButton: data?.showFilterButton === 'true', - showInputFields: data?.showInputFields === 'true', + showInputFields: data?.showInputFields !== 'false', inlineInput: data?.inlineInput === 'true', }; }; diff --git a/assets/js/blocks/stock-filter/utils.ts b/assets/js/blocks/stock-filter/utils.ts index 3ecfa0aba3c..f684e16df77 100644 --- a/assets/js/blocks/stock-filter/utils.ts +++ b/assets/js/blocks/stock-filter/utils.ts @@ -36,7 +36,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { parseInt( data.headingLevel, 10 ) ) || metadata.attributes.headingLevel.default, showFilterButton: data?.showFilterButton === 'true', - showCounts: data?.showCounts === 'true', + showCounts: data?.showCounts !== 'false', isPreview: false, }; }; From e1a9901ba510e332600b9f1b8f6e6b2f3c87d020 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 20:51:38 +0700 Subject: [PATCH 43/62] use default block appender --- assets/js/blocks/filter-wrapper/edit.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/edit.tsx b/assets/js/blocks/filter-wrapper/edit.tsx index 6fda8ba61bf..e6185649f30 100644 --- a/assets/js/blocks/filter-wrapper/edit.tsx +++ b/assets/js/blocks/filter-wrapper/edit.tsx @@ -2,7 +2,6 @@ * External dependencies */ import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; import type { BlockEditProps } from '@wordpress/blocks'; /** @@ -10,17 +9,9 @@ import type { BlockEditProps } from '@wordpress/blocks'; */ import { Attributes } from './types'; -const Edit = ( { attributes, clientId }: BlockEditProps< Attributes > ) => { +const Edit = ( { attributes }: BlockEditProps< Attributes > ) => { const blockProps = useBlockProps(); - const innerBlockCount = useSelect( ( select ) => { - const currentBlock = select( 'core/block-editor' ).getBlock( clientId ); - if ( ! currentBlock ) { - return 0; - } - return currentBlock.innerBlocks.length; - } ); - return (
) => { }, ], ] } - renderAppender={ () => { - if ( innerBlockCount < 2 ) { - return ; - } - return null; - } } />
); From 959c8b5d4de8c0fbb10b8df773c303d2ec925ddd Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 21:06:01 +0700 Subject: [PATCH 44/62] fix: lock control blocks --- assets/js/blocks/active-filters/block.json | 3 ++- assets/js/blocks/attribute-filter/block.json | 3 ++- assets/js/blocks/filter-wrapper/edit.tsx | 3 +++ assets/js/blocks/filter-wrapper/upgrade.tsx | 3 +++ assets/js/blocks/price-filter/block.json | 3 ++- assets/js/blocks/stock-filter/block.json | 3 ++- 6 files changed, 14 insertions(+), 4 deletions(-) diff --git a/assets/js/blocks/active-filters/block.json b/assets/js/blocks/active-filters/block.json index 569061db42e..a587007a243 100644 --- a/assets/js/blocks/active-filters/block.json +++ b/assets/js/blocks/active-filters/block.json @@ -12,7 +12,8 @@ "color": { "text": true, "background": false - } + }, + "lock": false }, "attributes": { "displayStyle": { diff --git a/assets/js/blocks/attribute-filter/block.json b/assets/js/blocks/attribute-filter/block.json index 5adb555df6b..065855ec40c 100644 --- a/assets/js/blocks/attribute-filter/block.json +++ b/assets/js/blocks/attribute-filter/block.json @@ -11,7 +11,8 @@ "text": true, "background": false }, - "inserter": false + "inserter": false, + "lock": false }, "example": { "attributes": { diff --git a/assets/js/blocks/filter-wrapper/edit.tsx b/assets/js/blocks/filter-wrapper/edit.tsx index e6185649f30..fbb9ee35462 100644 --- a/assets/js/blocks/filter-wrapper/edit.tsx +++ b/assets/js/blocks/filter-wrapper/edit.tsx @@ -25,6 +25,9 @@ const Edit = ( { attributes }: BlockEditProps< Attributes > ) => { `woocommerce/${ attributes.filterType }`, { heading: '', + lock: { + remove: true, + }, }, ], ] } diff --git a/assets/js/blocks/filter-wrapper/upgrade.tsx b/assets/js/blocks/filter-wrapper/upgrade.tsx index ee13a39e2c9..051461d9742 100644 --- a/assets/js/blocks/filter-wrapper/upgrade.tsx +++ b/assets/js/blocks/filter-wrapper/upgrade.tsx @@ -67,6 +67,9 @@ export const UpgradeNotice = ( { ); setAttributes( { heading: '', + lock: { + remove: true, + }, } ); }; diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json index 8f2b3d16450..e97b1323273 100644 --- a/assets/js/blocks/price-filter/block.json +++ b/assets/js/blocks/price-filter/block.json @@ -12,7 +12,8 @@ "text": true, "background": false }, - "inserter": false + "inserter": false, + "lock": false }, "example": { "attributes": { diff --git a/assets/js/blocks/stock-filter/block.json b/assets/js/blocks/stock-filter/block.json index 4fdba8a9eea..ea1da4b7e35 100644 --- a/assets/js/blocks/stock-filter/block.json +++ b/assets/js/blocks/stock-filter/block.json @@ -14,7 +14,8 @@ "text": true } }, - "inserter": false + "inserter": false, + "lock": false }, "example": { "attributes": { From 5bb547a66f2a84bf007299c50c721f5fa3eb09bc Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 22:38:18 +0700 Subject: [PATCH 45/62] remove dynamic title code from attribute filter block --- assets/js/blocks/attribute-filter/edit.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/assets/js/blocks/attribute-filter/edit.tsx b/assets/js/blocks/attribute-filter/edit.tsx index a5ed5b22458..2f425179ba1 100644 --- a/assets/js/blocks/attribute-filter/edit.tsx +++ b/assets/js/blocks/attribute-filter/edit.tsx @@ -96,15 +96,8 @@ const Edit = ( { return; } - // const attributeName = productAttribute.attribute_label; - setAttributes( { attributeId: selectedId as number, - // heading: sprintf( - // /* translators: %s attribute name. */ - // __( 'Filter by %s', 'woo-gutenberg-products-block' ), - // attributeName - // ), } ); }; From ddfc5d7fc027d5cdfa2bdec1dcff8c4b0e1325d9 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 22:47:04 +0700 Subject: [PATCH 46/62] register active filters as variation and set it to the default that overrides the base block --- assets/js/blocks/filter-wrapper/block.json | 9 ++--- assets/js/blocks/filter-wrapper/index.tsx | 41 ++++++++++++++-------- 2 files changed, 31 insertions(+), 19 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/block.json b/assets/js/blocks/filter-wrapper/block.json index 6af0e807dd1..551ac8310b9 100644 --- a/assets/js/blocks/filter-wrapper/block.json +++ b/assets/js/blocks/filter-wrapper/block.json @@ -1,14 +1,15 @@ { "name": "woocommerce/filter-wrapper", "version": "1.0.0", - "title": "Active Product Filters", - "description": "Show the currently active product filters. Works in combination with other filters blocks.", + "title": "Filter Wrapper", "category": "woocommerce", "keywords": [ "WooCommerce" ], "attributes": { "filterType": { - "type": "string", - "default": "active-filters" + "type": "string" + }, + "heading": { + "type": "string" } }, "textdomain": "woo-gutenberg-products-block", diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 88647d6c0e5..69d7af5bc47 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -14,21 +14,6 @@ import edit from './edit'; import metadata from './block.json'; registerBlockType( metadata, { - icon: { - src: ( - - ), - }, - attributes: { - ...metadata.attributes, - heading: { - type: 'string', - default: __( 'Active filters', 'woo-gutenberg-products-block' ), - }, - }, edit, save() { const innerBlocksProps = useInnerBlocksProps.save( @@ -37,6 +22,32 @@ registerBlockType( metadata, { return
; }, variations: [ + { + name: 'active-filters', + title: __( + 'Active Product Filters', + 'woo-gutenberg-products-block' + ), + description: __( + 'Show the currently active product filters. Works in combination with other filters blocks.', + 'woo-gutenberg-products-block' + ), + isActive: ( attributes ) => + attributes.filterType === 'active-filters', + attributes: { + heading: __( 'Active filters', 'woo-gutenberg-products-block' ), + filterType: 'active-filters', + }, + icon: { + src: ( + + ), + }, + isDefault: true, + }, { name: 'price-filter', title: __( 'Filter by Price', 'woo-gutenberg-products-block' ), From ef0b03594e68b7e36a1376150070220b7f60e93d Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 29 Sep 2022 23:20:15 +0700 Subject: [PATCH 47/62] fix isActive for default variation --- assets/js/blocks/filter-wrapper/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 69d7af5bc47..9839ab7381f 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -32,8 +32,12 @@ registerBlockType( metadata, { 'Show the currently active product filters. Works in combination with other filters blocks.', 'woo-gutenberg-products-block' ), - isActive: ( attributes ) => - attributes.filterType === 'active-filters', + /** + * We need to handle the isActive function differently for this + * variation. The `attributes` is empty for default variation. So we + * set this variation as active if `filterType` is not passed. + */ + isActive: ( attributes ) => ! attributes.filterType, attributes: { heading: __( 'Active filters', 'woo-gutenberg-products-block' ), filterType: 'active-filters', From a44513ab3b77ed5abc0cedab01e768e9f2f88648 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 3 Oct 2022 16:49:03 +0700 Subject: [PATCH 48/62] fix: isActive logic for the active filters block --- assets/js/blocks/filter-wrapper/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/filter-wrapper/index.tsx b/assets/js/blocks/filter-wrapper/index.tsx index 9839ab7381f..7be38559c27 100644 --- a/assets/js/blocks/filter-wrapper/index.tsx +++ b/assets/js/blocks/filter-wrapper/index.tsx @@ -37,7 +37,9 @@ registerBlockType( metadata, { * variation. The `attributes` is empty for default variation. So we * set this variation as active if `filterType` is not passed. */ - isActive: ( attributes ) => ! attributes.filterType, + isActive: ( attributes ) => + attributes.filterType === 'active-filters' || + ! attributes.filterType, attributes: { heading: __( 'Active filters', 'woo-gutenberg-products-block' ), filterType: 'active-filters', From 4e41b0a7c9f69235b0fed5ce2ec4ad5ad5259d2d Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 3 Oct 2022 21:53:59 +0700 Subject: [PATCH 49/62] register side effect --- .../filter-wrapper/register-components.ts | 37 +++++++++++++++++-- package.json | 3 +- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/assets/js/blocks/filter-wrapper/register-components.ts b/assets/js/blocks/filter-wrapper/register-components.ts index f1049f779a3..c5ec9483b83 100644 --- a/assets/js/blocks/filter-wrapper/register-components.ts +++ b/assets/js/blocks/filter-wrapper/register-components.ts @@ -3,23 +3,52 @@ */ import { registerBlockComponent } from '@woocommerce/blocks-registry'; import { lazy } from '@wordpress/element'; +import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings'; + +// Modify webpack publicPath at runtime based on location of WordPress Plugin. +// eslint-disable-next-line no-undef,camelcase +__webpack_public_path__ = WC_BLOCKS_BUILD_URL; registerBlockComponent( { blockName: 'woocommerce/active-filters', - component: lazy( () => import( '../active-filters/block-wrapper' ) ), + component: lazy( + () => + import( + /* webpackChunkName: "active-filters-wrapper" */ + '../active-filters/block-wrapper' + ) + ), } ); registerBlockComponent( { blockName: 'woocommerce/price-filter', - component: lazy( () => import( '../price-filter/block-wrapper' ) ), + component: lazy( + () => + import( + /* webpackChunkName: "price-filter-wrapper" */ + '../price-filter/block-wrapper' + ) + ), } ); registerBlockComponent( { blockName: 'woocommerce/stock-filter', - component: lazy( () => import( '../stock-filter/block-wrapper' ) ), + component: lazy( + () => + import( + /* webpackChunkName: "stock-filter-wrapper" */ + '../stock-filter/block-wrapper' + ) + ), } ); registerBlockComponent( { blockName: 'woocommerce/attribute-filter', - component: lazy( () => import( '../attribute-filter/block-wrapper' ) ), + component: lazy( + () => + import( + /* webpackChunkName: "attribute-filter-wrapper" */ + '../attribute-filter/block-wrapper' + ) + ), } ); diff --git a/package.json b/package.json index c3174880ba6..15fbc6f147d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "./assets/js/blocks/cart/inner-blocks/register-components.ts", "./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/index.tsx", "./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts", - "./assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx" + "./assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx", + "./assets/js/blocks/filter-wrapper/register-components.ts" ], "repository": { "type": "git", From f0b9ebccfe9460adfc0f62506e3d302c3ee9d32c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 3 Oct 2022 23:02:16 +0700 Subject: [PATCH 50/62] fix ts error --- assets/js/blocks/filter-wrapper/context.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/filter-wrapper/context.ts b/assets/js/blocks/filter-wrapper/context.ts index 4ccf3dec0a3..7450a66bed6 100644 --- a/assets/js/blocks/filter-wrapper/context.ts +++ b/assets/js/blocks/filter-wrapper/context.ts @@ -10,7 +10,8 @@ export type FilterContextProps = { wrapper?: React.RefObject< HTMLDivElement >; }; -export const FilterBlockContext = createContext< FilterContextProps >( {} ); +export const FilterBlockContext: React.Context< FilterContextProps > = + createContext< FilterContextProps >( {} ); export const useFilterBlockContext = (): FilterContextProps => { return useContext( FilterBlockContext ); From 941f1af20688f07294a0a701919684075ac733be Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 13:32:58 +0700 Subject: [PATCH 51/62] e2e: fix active filters block backend test --- .../active-product-filters.fixture.json | 2 +- .../e2e/specs/backend/active-filters.test.js | 25 ++++--------------- 2 files changed, 6 insertions(+), 21 deletions(-) diff --git a/tests/e2e/specs/backend/__fixtures__/active-product-filters.fixture.json b/tests/e2e/specs/backend/__fixtures__/active-product-filters.fixture.json index 8ac3f16fe3e..8e55835dd7c 100644 --- a/tests/e2e/specs/backend/__fixtures__/active-product-filters.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/active-product-filters.fixture.json @@ -1 +1 @@ -{"title":"Active Product Filters Block","pageContent":"\n
\n"} \ No newline at end of file +{"title":"Active Product Filters Block","pageContent":"

Active filters

"} diff --git a/tests/e2e/specs/backend/active-filters.test.js b/tests/e2e/specs/backend/active-filters.test.js index 6c81df7e098..bf0bddb27bb 100644 --- a/tests/e2e/specs/backend/active-filters.test.js +++ b/tests/e2e/specs/backend/active-filters.test.js @@ -2,7 +2,6 @@ * External dependencies */ import { - getAllBlocks, switchUserToAdmin, openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; @@ -12,15 +11,11 @@ import { selectBlockByName, } from '@woocommerce/blocks-test-utils'; -/** - * Internal dependencies - */ -import { insertBlockDontWaitForInsertClose } from '../../utils'; - const block = { name: 'Active Product Filters', slug: 'woocommerce/active-filters', class: '.wc-block-active-filters', + title: 'Active filters', }; describe( `${ block.name } Block`, () => { @@ -29,11 +24,6 @@ describe( `${ block.name } Block`, () => { await visitBlockPage( `${ block.name } Block` ); } ); - it( 'can only be inserted once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); - expect( await getAllBlocks() ).toHaveLength( 1 ); - } ); - it( 'renders without crashing', async () => { await expect( page ).toRenderBlock( block ); } ); @@ -45,20 +35,15 @@ describe( `${ block.name } Block`, () => { } ); it( "allows changing the block's title", async () => { - const textareaSelector = `.wp-block[data-type="${ block.slug }"] textarea.wc-block-editor-components-title`; + const textareaSelector = + '.wp-block-woocommerce-filter-wrapper .wp-block-heading'; await expect( page ).toFill( textareaSelector, 'New Title' ); - await page.click( - '.components-toolbar button[aria-label="Heading 6"]' - ); await expect( page ).toMatchElement( - `.wp-block[data-type="${ block.slug }"] h6 textarea`, + '.wp-block-woocommerce-filter-wrapper .wp-block-heading', { text: 'New Title' } ); // reset - await expect( page ).toFill( textareaSelector, block.name ); - await page.click( - '.components-toolbar button[aria-label="Heading 3"]' - ); + await expect( page ).toFill( textareaSelector, block.title ); } ); it( 'allows changing the Display Style', async () => { From 2a9d2ee8dc440ae5f792f9de6093a1ba0396a198 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 14:02:13 +0700 Subject: [PATCH 52/62] e2e: fix frontend active filters test --- tests/e2e/specs/shopper/active-filters.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/e2e/specs/shopper/active-filters.test.ts b/tests/e2e/specs/shopper/active-filters.test.ts index 5a0f3597ef3..173d09ad6ab 100644 --- a/tests/e2e/specs/shopper/active-filters.test.ts +++ b/tests/e2e/specs/shopper/active-filters.test.ts @@ -60,7 +60,7 @@ const { selectors } = block; const insertBlocks = async () => { await insertBlock( 'Filter by Price' ); - await insertBlock( 'Filter Products by Stock' ); + await insertBlock( 'Filter by Stock' ); await insertBlock( 'Filter by Attribute' ); await insertBlock( block.name ); }; @@ -97,8 +97,8 @@ describe( 'Shopper → Active Filters Block', () => { } ); await insertBlocks(); - await configurateFilterProductsByAttributeBlock( page ); await insertBlock( 'All Products' ); + await configurateFilterProductsByAttributeBlock( page ); await publishPost(); const link = await page.evaluate( () => From b53843258b42e668d34b9f1c46ea3abd0ae85167 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 14:17:44 +0700 Subject: [PATCH 53/62] e2e: fix attribute filter test --- tests/e2e/specs/shopper/filter-products-by-attribute.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts index d709b14ad8d..80acd2ee09b 100644 --- a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts @@ -65,10 +65,10 @@ describe( `${ block.name } Block`, () => { title: block.name, } ); + await insertBlock( 'All Products' ); await insertBlock( block.name ); await page.click( selectors.editor.firstAttributeInTheList ); await page.click( selectors.editor.doneButton ); - await insertBlock( 'All Products' ); await publishPost(); const link = await page.evaluate( () => From 6a1e87d93d9199116b5fbcc8904aa52ee4027502 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 15:33:12 +0700 Subject: [PATCH 54/62] e2e: fix price filter test --- .../specs/shopper/filter-products-by-price.test.ts | 13 +++++++------ tests/e2e/utils.js | 10 ++++++---- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts index 41691406761..36a36bd354b 100644 --- a/tests/e2e/specs/shopper/filter-products-by-price.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-price.test.ts @@ -89,16 +89,17 @@ describe( `${ block.name } Block`, () => { it( 'should show only products that match the filter', async () => { const isRefreshed = jest.fn( () => void 0 ); + page.on( 'load', isRefreshed ); + await setMaxPrice(); - await expect( page ).toMatchElement( - '.wc-block-active-filters__title', - { - text: 'Active filters', - } - ); + await waitForAllProductsBlockLoaded(); + await expect( page ).toMatchElement( '.wc-blocks-filter-wrapper', { + text: 'Active filters', + } ); + const products = await page.$$( selectors.frontend.productsList ); expect( isRefreshed ).not.toBeCalled(); diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index b9fe0e20128..f381ea91c19 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -63,9 +63,6 @@ const SELECTORS = { saveButton: '.edit-site-save-button__button', savePrompt: '.entities-saved-states__text-prompt', }, - allProductsBlock: { - productsList: '.wc-block-grid__products:not(.is-loading-products)', - }, }; /** @@ -436,7 +433,12 @@ export const openBlockEditorSettings = async ( { isFSEEditor = false } ) => { * Wait for all Products Block is loaded completely: when the skeleton disappears, and the products are visible */ export const waitForAllProductsBlockLoaded = async () => { - await page.waitForSelector( SELECTORS.allProductsBlock.productsList ); + await page.waitForSelector( + '.wc-block-grid__products.is-loading-products' + ); + await page.waitForSelector( + '.wc-block-grid__products:not(.is-loading-products)' + ); }; /** From 484532151d517761aaf93b4f3d062277a005e8e1 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 15:40:56 +0700 Subject: [PATCH 55/62] e2e: fix stock filter test --- tests/e2e/specs/shopper/filter-products-by-stock.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts index 9fd562de66f..f15341dfbe8 100644 --- a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts @@ -24,7 +24,7 @@ import { } from '../../utils'; const block = { - name: 'Filter Products by Stock', + name: 'Filter by Stock', slug: 'woocommerce/stock-filter', class: '.wc-block-stock-filter', selectors: { From e861133a77aa2071974970439e88175934a4bbd4 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 16:21:41 +0700 Subject: [PATCH 56/62] e2e: update fixture --- .../__fixtures__/filter-products-by-attribute.fixture.json | 2 +- .../backend/__fixtures__/filter-products-by-price.fixture.json | 2 +- .../backend/__fixtures__/filter-products-by-stock.fixture.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json index 7d87b2642f4..8a80d46777b 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json @@ -1 +1 @@ -{"title":"Filter by Attribute Block","pageContent":"\n
\n\n
\n"} +{"title":"Filter by Attribute Block","pageContent":"

Filter by Capacity

\n
\n"} diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json index d63544f4f19..8a837d3b968 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json @@ -1 +1 @@ -{"title":"Filter by Price Block","pageContent":"\n
\n"} +{"title":"Filter by Price Block","pageContent":"

Filter by price

"} diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json index 1168b5e59f9..bbdab9df40a 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json @@ -1 +1 @@ -{"title":"Filter Products by Stock Block","pageContent":"\n
\n"} \ No newline at end of file +{"title":"Filter Products by Stock Block","pageContent":"

Filter by stock status

"} From 26607844f283cf5d1669b9bac16d918e62fc21fe Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 16:21:52 +0700 Subject: [PATCH 57/62] e2e: fix attribute filter test --- .../e2e/specs/backend/attribute-filter.test.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/tests/e2e/specs/backend/attribute-filter.test.js b/tests/e2e/specs/backend/attribute-filter.test.js index cb5eab798e1..c6f4d9add25 100644 --- a/tests/e2e/specs/backend/attribute-filter.test.js +++ b/tests/e2e/specs/backend/attribute-filter.test.js @@ -57,22 +57,17 @@ describe( `${ block.name } Block`, () => { } ); it( "allows changing the block's title", async () => { - const textareaSelector = `.wp-block[data-type="${ block.slug }"] textarea.wc-block-editor-components-title`; + const textareaSelector = + '.wp-block-woocommerce-filter-wrapper .wp-block-heading'; await expect( page ).toFill( textareaSelector, 'New Title' ); - await page.click( - '.components-toolbar button[aria-label="Heading 6"]' - ); await expect( page ).toMatchElement( - `.wp-block[data-type="${ block.slug }"] h6 textarea`, + '.wp-block-woocommerce-filter-wrapper', { text: 'New Title' } ); await expect( page ).toFill( textareaSelector, 'Filter by Capacity' ); - await page.click( - '.components-toolbar button[aria-label="Heading 3"]' - ); } ); it( 'can hide product count', async () => { @@ -159,12 +154,16 @@ describe( `${ block.name } Block`, () => { '.wp-block-woocommerce-attribute-filter' ); await expect( page ).toMatchElement( - '.wp-block-woocommerce-attribute-filter h3', + '.wp-block-woocommerce-filter-wrapper', { text: 'Filter by Capacity', } ); + await page.waitForSelector( + '.wc-block-checkbox-list:not(.is-loading)' + ); + expect( await page.$$eval( '.wc-block-attribute-filter-list li', From 2e7344ccdab507853a70e655791f9ec4e4d87874 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 16:53:38 +0700 Subject: [PATCH 58/62] remove invalid test --- tests/e2e/specs/backend/price-filter.test.js | 11 ----------- ...products-by-stock.test.js => stock-filter.test.js} | 8 -------- 2 files changed, 19 deletions(-) rename tests/e2e/specs/backend/{filter-products-by-stock.test.js => stock-filter.test.js} (82%) diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js index 2f26a88d3e8..529710c7d89 100644 --- a/tests/e2e/specs/backend/price-filter.test.js +++ b/tests/e2e/specs/backend/price-filter.test.js @@ -4,18 +4,12 @@ import { openDocumentSettingsSidebar, switchUserToAdmin, - getAllBlocks, } from '@wordpress/e2e-test-utils'; import { visitBlockPage, selectBlockByName, } from '@woocommerce/blocks-test-utils'; -/** - * Internal dependencies - */ -import { insertBlockDontWaitForInsertClose } from '../../utils.js'; - const block = { name: 'Filter by Price', slug: 'woocommerce/price-filter', @@ -29,11 +23,6 @@ describe( `${ block.name } Block`, () => { await visitBlockPage( `${ block.name } Block` ); } ); - it( 'can only be inserted once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); - expect( await getAllBlocks() ).toHaveLength( 1 ); - } ); - it( 'renders without crashing', async () => { await expect( page ).toRenderBlock( block ); } ); diff --git a/tests/e2e/specs/backend/filter-products-by-stock.test.js b/tests/e2e/specs/backend/stock-filter.test.js similarity index 82% rename from tests/e2e/specs/backend/filter-products-by-stock.test.js rename to tests/e2e/specs/backend/stock-filter.test.js index 9e112db433e..989c55e4ac0 100644 --- a/tests/e2e/specs/backend/filter-products-by-stock.test.js +++ b/tests/e2e/specs/backend/stock-filter.test.js @@ -3,7 +3,6 @@ */ import { switchUserToAdmin, - getAllBlocks, openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; import { visitBlockPage } from '@woocommerce/blocks-test-utils'; @@ -11,7 +10,6 @@ import { visitBlockPage } from '@woocommerce/blocks-test-utils'; /** * Internal dependencies */ -import { closeInserter, insertBlockDontWaitForInsertClose } from '../../utils'; import { findLabelWithText } from '../../../utils'; const block = { @@ -30,12 +28,6 @@ describe( `${ block.name } Block`, () => { await expect( page ).toRenderBlock( block ); } ); - it( 'can only be inserted once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); - await closeInserter(); - expect( await getAllBlocks() ).toHaveLength( 1 ); - } ); - describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); From 4686e910b878b3d594567b5bcddfe9ffc5487e95 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 17:17:32 +0700 Subject: [PATCH 59/62] e2e: update heading selector for price filter in backend test --- tests/e2e/specs/backend/price-filter.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js index 529710c7d89..620328cf1f6 100644 --- a/tests/e2e/specs/backend/price-filter.test.js +++ b/tests/e2e/specs/backend/price-filter.test.js @@ -34,7 +34,8 @@ describe( `${ block.name } Block`, () => { } ); it( "allows changing the block's title", async () => { - const textareaSelector = `.wp-block[data-type="${ block.slug }"] textarea.wc-block-editor-components-title`; + const textareaSelector = + '.wp-block-woocommerce-filter-wrapper .wp-block-heading'; await expect( page ).toFill( textareaSelector, 'New Title' ); await page.click( block.class ); From 6f49f5768c5b9d9ae403b0725ee5004bc0c2f297 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 4 Oct 2022 17:39:01 +0700 Subject: [PATCH 60/62] e2e: fixe backend price filter heading test --- tests/e2e/specs/backend/price-filter.test.js | 22 ++++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js index 620328cf1f6..03009e48af0 100644 --- a/tests/e2e/specs/backend/price-filter.test.js +++ b/tests/e2e/specs/backend/price-filter.test.js @@ -36,29 +36,19 @@ describe( `${ block.name } Block`, () => { it( "allows changing the block's title", async () => { const textareaSelector = '.wp-block-woocommerce-filter-wrapper .wp-block-heading'; + await expect( page ).toFill( textareaSelector, 'New Title' ); + await page.click( block.class ); - // Change title to h6. - await page.click( - '.components-toolbar button[aria-label="Heading 6"]' - ); - await expect( page ).toMatchElement( - `.wp-block[data-type="${ block.slug }"] h6 textarea`, - { text: 'New Title' } - ); + await expect( page ).toMatchElement( textareaSelector, { + text: 'New Title', + } ); + await expect( page ).toFill( textareaSelector, 'Filter by price' ); - // Change title to h3. - await page.click( - '.components-toolbar button[aria-label="Heading 3"]' - ); - await expect( page ).not.toMatchElement( - `.wp-block[data-type="${ block.slug }"] h6 textarea`, - { text: 'New Title' } - ); } ); it( 'allows changing the Display Style', async () => { From c2c25c9dea465874494f9269c1bb733ac8f48f04 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 6 Oct 2022 16:22:43 +0700 Subject: [PATCH 61/62] fix: patterns i18n --- patterns/filters.php | 46 ++++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/patterns/filters.php b/patterns/filters.php index ce7f4d388cf..4ecf6df6cad 100644 --- a/patterns/filters.php +++ b/patterns/filters.php @@ -7,42 +7,42 @@ */ ?> - -
- -

Active Filters

+ +
+

- +
- -
+
-
- -

Filter by Price

+
+

- +
- -
+
- -
- - -
- -

Filter by Stock

+
+

- +
- -
+
+ + + +
+

+ + + +
+
From 4e9122684bba6f68e6d82ffc5acbe8e785998847 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 6 Oct 2022 21:57:40 +0700 Subject: [PATCH 62/62] fix: heading level when upgrading the block --- assets/js/blocks/filter-wrapper/upgrade.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/filter-wrapper/upgrade.tsx b/assets/js/blocks/filter-wrapper/upgrade.tsx index 051461d9742..db58d66244e 100644 --- a/assets/js/blocks/filter-wrapper/upgrade.tsx +++ b/assets/js/blocks/filter-wrapper/upgrade.tsx @@ -49,7 +49,7 @@ export const UpgradeNotice = ( { filterWrapperInnerBlocks.unshift( createBlock( 'core/heading', { content: heading, - headingLevel: headingLevel ?? 2, + level: headingLevel ?? 2, } ) ); }