[Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive #42981

samueljseay · 2023-12-20T04:36:18Z

Changes proposed in this Pull Request:

Introduce a multi-select mode for the interactivity dropdown component.
Thanks to @DAreRodz contribution, introduces the interactivity each directive and fixes for context sync issues
Integrate the multi-select dropdown mode to the recently introduced collection rating filter block

Closes #42053 #42052

How to test the changes in this Pull Request:

Insert a product collection (beta) block and the new "collection filters" block
Note that the ratings filter is automatically inserted to collection filters as part of the template
Open inspector for the rating filter block. Choose "dropdown" as display style.
Choose "multiple" as select type
Update and view in front-end. Test adding/removing filters from the dropdown
Go back to editor and choose "single" as select type
update and view in front end and check the single style still works.

Changelog entry

Automatically create a changelog entry from the details below.

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Comment

Add experimental multi-select mode for interactivity dropdown component of blocks.

…ent.

…ting-filter

…tion.

…ting-filter

…add/interactivity-rating-filter

…ting-filter

… to assets/client/blocks

…activity-rating-filter

…ting-filter

…elect

samueljseay · 2023-12-20T05:06:28Z

plugins/woocommerce-blocks/assets/js/interactivity/directives.js

-					// prefetch( href );
-				}
-			} );
+			// For some reason this useEffect crashes in Preact internals in some cases.


This stops a consistent crash that I see in my env. as mentioned its a no-op anyway right now so harmless to comment out.

…mmerce-blocks, woocommerce

plugins/woocommerce/src/Blocks/BlockTypes/CollectionRatingFilter.php

...oocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/rating-filter/frontend.ts

plugins/woocommerce-blocks/packages/interactivity-components/dropdown/index.ts

...oocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/rating-filter/frontend.ts

plugins/woocommerce-blocks/packages/interactivity-components/dropdown/index.ts

plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php

samueljseay · 2023-12-21T05:16:53Z

@dinhtungdu it would be great to get a re-test / re-review. This incorporates the interactivity fixes now that make the dropdown work a lot smoother.

…filters block.

...oocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/rating-filter/frontend.ts

dinhtungdu

Thank you so much for working on this PR and the updates! This is LGTM now!

...oocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/rating-filter/frontend.ts

dinhtungdu · 2023-12-22T01:31:59Z

plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php

+								<?php foreach ( $selected_items as $selected ) { ?>
+									<span
+										class="components-form-token-field__token"
+										data-wc-key="<?php echo esc_attr( $selected['label'] ); ?>"


I missed this one when I re-reviewed this PR. We're using label here but in the template above, value is used, it doesn't affect the frontend at all but I think we should still keep it consistent.

…er and introduce each directive (#42981) --------- Co-authored-by: David Arenas <david.arenas@automattic.com>

…s documentation (#43055) * Update woocommerce.com URLs in documentation and code files * Add changelog * Fix github repository link in extend-rest-api-add-custom-fields.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Add github reporter (#42974) * Add github reporter * Add changelog --------- Co-authored-by: Jon Lane <jon.lane@automattic.com> * Fix product task redirect to support grouped and external products (#43051) * Rearrange product redirection logic to better accept grouped and external produc types * Add changelog * Modify feedback modal actions (#43005) * Adapt feedback modal actions * Add changelogs * Modify comments * Fix tests * Fix test * Update class-wc-gateway-bacs.php (#43054) * Update class-wc-gateway-bacs.php Fix typo in textdomain * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * [Product Block Editor]: Add `Linked product` tab (#43009) * add linked-products to group IDs * add Linked Products tab * tweak hideConditions condition * changelog * fix typo in doc comment * Introduce a product type selection within the new experience (#41823) * Create a relation between the product type and the product block template * Add 'patterns' to name the kind of products that can be created for a specific template * Resolve template using its id as a template query param * Rename ProductEditPattern to ProductTemplate * Rename get_patterns hook to woocommerce_product_editor_get_product_templates * Return the list of templates to the client * Set layout template events as array * Register the layout template based on the product template or the post type in case of product variations * Registering non supported product types * Create and register the woocommerce/product-details-section-description block * Add the product type to the section description * Create product type selector * Fix menu item style * Highlight selected menu item * Set the selected product template * Set product template title to lowercase in the content description * Rename blocks by blockTemplates under the AbstractBlockTemplate class * Rename to woocommerce_product_editor_product_templates filter * Remove product_template_ prefix from the supported_product_types map * Rename get_formatted to to_JSON and convert the props to client side like * Refactor get_product_templates * Fix icon resolution * Add a confirmation modal for unsupported product templates * Add changelog files * Remove product types using for testing * Fix redirection when changing to a non supported product template * Set the change button state to busy when it is saving the product * Fix php linter errors * Fix rebase conflict * Move ProductTemplate to Automattic\WooCommerce\Admin\Features\ProductBlockEditor namespace * Add the to_json definition to the BlockTemplateInterface * Create default product template by custom product type if it does not have a template associated yet * Fix some comments and product template creation validation * Add support to load the product template icon from an external resource * Fix php linter * Fix the changelog description * [Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive (#42981) --------- Co-authored-by: David Arenas <david.arenas@automattic.com> * Introduce the transient files engine (#42877) Co-authored-by: Corey McKrill <916023+coreymckrill@users.noreply.github.com> * Change marketplace install API request to POST instead of GET (#43033) * Change marketplace install API to using POST instead of GET * Fix linting error * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Prep trunk for 8.6 cycle (#43021) Prep trunk for 8.6 cycle with version bump to 8.6.0-dev Co-authored-by: WooCommerce Bot <no-reply@woo.com> * Add Playwright tests for All Reviews, Reviews by Product and Reviews by Category blocks (#42903) * Remove Reviews blocks Puppeteer tests * Minor code cleanup * Typos * Create publishAndVisitPost() editor util * Fix subcategories when importing products in Playwright and add reviews * Add Reviews blocks tests in Playwright * More typos * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Create a 'reviews' object in data.ts so we can store reviews data in one single place * Update test so instead of creating a new post in each test, we go to the already-created post * Add source comments to reviews data to match it with the script --------- Co-authored-by: github-actions <github-actions@github.com> * Release: Remove 8.5 change files (#43022) Delete changelog files from 8.5 release Co-authored-by: WooCommerce Bot <no-reply@woo.com> Co-authored-by: Alex López <alex.lopez@automattic.com> * Delete changelog files based on PR 43033 (#43079) Delete changelog files for 43033 Co-authored-by: WooCommerce Bot <no-reply@woo.com> * Delete changelog files based on PR 43051 (#43081) Delete changelog files for 43051 Co-authored-by: WooCommerce Bot <no-reply@woo.com> * Interactive Price Filter: use `context` instead of `state` (#42980) * feat: use context instead of state * fix: temporary move the context to inner element for diffing to work * fix: update context before navigation for optimistic UI * Load google analytics gtag script asynchronously in WooCommerce Blocks (#43040) Co-authored-by: github-actions <github-actions@github.com> * set WOOCOMMERCE_BLOCKS_PHASE to 1 for the production build (#43074) * set WOOCOMMERCE_BLOCKS_PHASE to 1 for the production build * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Revert "Fix schedule sales error" (#43094) Revert "Fix schedule sales error (#42700)" This reverts commit 9b800aa. * [Product Block Editor]: add Linked product sections. First approach. (#43013) * add Linked products, Upsell section * changelog * add Cross-lens section * add links to the Upsell sections * changelog * fix lint issues * fix lint issus * fix linting issue :-| * check whether the linked product group is defined * [Product Block Editor]: introduce ShoppingBags component (#43042) * add ShoppingBags component * Add ShoppingBag story * changelog * Fix: Collection data being leaked between Collection Filters blocks (#43044) * fix: CYS - change heading color (#43076) * fix: CYS - change heading color * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com> * Delete changelog files based on PR 43074 (#43118) Delete changelog files for 43074 Co-authored-by: WooCommerce Bot <no-reply@woo.com> * [Product Block Editor]: fix feature flag to hide the Linked products (#43119) * fix flag to hide/show product editor * changelog * Add changelog --------- Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Jonathan Lane <lanej0@users.noreply.github.com> Co-authored-by: Jon Lane <jon.lane@automattic.com> Co-authored-by: louwie17 <lourensschep@gmail.com> Co-authored-by: Fernando Marichal <fernando.marichal@automattic.com> Co-authored-by: Marc Guay <marc.guay@gmail.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Damián Suárez <rdsuarez@gmail.com> Co-authored-by: Maikel David Pérez Gómez <maikel.perez@automattic.com> Co-authored-by: Sam Seay <samueljseay@gmail.com> Co-authored-by: Néstor Soriano <konamiman@konamiman.com> Co-authored-by: Corey McKrill <916023+coreymckrill@users.noreply.github.com> Co-authored-by: Kyle Nel <22053773+kdevnel@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: WooCommerce Bot <no-reply@woo.com> Co-authored-by: Alex López <alex.lopez@automattic.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>

samueljseay and others added 30 commits December 11, 2023 12:01

Introduce Collection Rating Filter, CheckboxList interactivity compon…

2651605

…ent.

Revert reintroduction of webpack entry that was removed.

2052f3f

Merge remote-tracking branch 'origin/trunk' into add/interactivity-ra…

57c322e

…ting-filter

Revert accidental changes to AssetsController.

47647b8

Re-add script queuing for interactivity checkbox and dropdown

c30145b

Revert accidental change to registered block type.

1625a20

Merge remote-tracking branch 'origin/trunk' into add/interactivity-ra…

59cd951

…ting-filter

Escape interactive directive namespace attributes in Checkbox/Dropdown.

5c40fd3

Remove unused showFilterButton option.

fe232ad

Remove unused elements from block editor.

343fbf1

Consolidate the rating filter JS block into edit.tsx

9e8343d

Refactor to add inspector controls in components/inspector per conven…

f3d3c23

…tion.

Added Blocks & Admin Aliases

22ba646

Merge remote-tracking branch 'origin/trunk' into add/interactivity-ra…

8d9bca0

…ting-filter

Merge remote-tracking branch 'origin/add/watch-project-aliases' into …

7a42f90

…add/interactivity-rating-filter

Merge remote-tracking branch 'origin/trunk' into add/interactivity-ra…

a71efc3

…ting-filter

Just trying to get build working.

5f1979a

Fix the cp command for blocks so that the contents of build is copied…

ee48ab7

… to assets/client/blocks

Remove not strictly needed trailing slash.

ca7b2ff

Just rm the folder instead

bbe0f42

Merge remote-tracking branch 'origin/fix/blocks-build' into add/inter…

8e2e00a

…activity-rating-filter

Add collection rating filter to collection template.

bb78499

Merge remote-tracking branch 'origin/trunk' into add/interactivity-ra…

098be14

…ting-filter

Revert linter changes to PHP file.

070c284

WIP support multi select in interactivity dropdown.

c3fbb41

WIP multiple selected items in the dropdown.

9d37481

Merge remote-tracking branch 'origin/trunk' into dev/dropdown-multi-s…

5c82650

…elect

Move to context for the dropdown and remove state.

5cbbfe1

Fix styling issues with the multi select mode.

8589c3f

Refactor Dropdown to start using wc-each

269a3bb

samueljseay commented Dec 20, 2023

View reviewed changes

Add changefile(s) from automation for the following project(s): wooco…

11593c6

…mmerce-blocks, woocommerce

samueljseay closed this Dec 20, 2023

samueljseay reopened this Dec 20, 2023

dinhtungdu reviewed Dec 20, 2023

View reviewed changes

DAreRodz added 2 commits December 20, 2023 18:18

Do not replace signals during merge

b4679d0

Clone directive context's value

e0df639

dinhtungdu reviewed Dec 21, 2023

View reviewed changes

plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php Show resolved Hide resolved

samueljseay added 4 commits December 21, 2023 12:09

Remove accidentally duplicated style import.

e5abbbe

We can remove force from navigate now that bugs are fixed.

62467e9

Fix incorrect indentation of comment.

d584f13

Reintroduce getUrl functionality that consolidates query filter logic.

e93ee41

samueljseay requested a review from dinhtungdu December 21, 2023 05:16

samueljseay mentioned this pull request Dec 21, 2023

Dropdown component: Interactivity context out of sync #42052

Closed

Add back removeFilter to ratings filter which is relied on by active …

d6a254a

…filters block.

samueljseay commented Dec 21, 2023

View reviewed changes

...oocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/rating-filter/frontend.ts Show resolved Hide resolved

dinhtungdu approved these changes Dec 21, 2023

View reviewed changes

...oocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/rating-filter/frontend.ts Show resolved Hide resolved

samueljseay merged commit 3eeeddf into trunk Dec 22, 2023
29 of 32 checks passed

samueljseay deleted the dev/dropdown-multi-select branch December 22, 2023 00:34

github-actions bot added this to the 8.6.0 milestone Dec 22, 2023

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Dec 22, 2023

dinhtungdu reviewed Dec 22, 2023

View reviewed changes

veljkho added needs: internal testing Indicates if the PR requires further testing conducted by Solaris status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Dec 25, 2023

thealexandrelara pushed a commit that referenced this pull request Dec 26, 2023

[Experimental] Interactivity Dropdown multi-select mode, ratings filt…

e25641a

…er and introduce each directive (#42981) --------- Co-authored-by: David Arenas <david.arenas@automattic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive #42981

[Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive #42981

samueljseay commented Dec 20, 2023 •

edited

samueljseay Dec 20, 2023

samueljseay commented Dec 21, 2023 •

edited

dinhtungdu left a comment

dinhtungdu Dec 22, 2023

[Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive #42981

[Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive #42981

Conversation

samueljseay commented Dec 20, 2023 • edited

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

samueljseay Dec 20, 2023

Choose a reason for hiding this comment

samueljseay commented Dec 21, 2023 • edited

dinhtungdu left a comment

Choose a reason for hiding this comment

dinhtungdu Dec 22, 2023

Choose a reason for hiding this comment

samueljseay commented Dec 20, 2023 •

edited

samueljseay commented Dec 21, 2023 •

edited